diff --git a/frontend/src/apis/endpoints.ts b/frontend/src/apis/endpoints.ts index cce9ac299..c90703dba 100644 --- a/frontend/src/apis/endpoints.ts +++ b/frontend/src/apis/endpoints.ts @@ -4,10 +4,16 @@ export const DETAILED_REVIEW_API_PARAMS = { resource: 'reviews', queryString: { memberId: 'memberId', + reviewRequestCode: 'reviewRequestCode', }, }; -export const DETAILED_REVIEW_API_URL = `${process.env.API_BASE_URL}/${VERSION2}/${DETAILED_REVIEW_API_PARAMS.resource}`; +export const REVIEW_LIST_API_PARAMS = { + resource: 'reviews', + queryString: { + reviewRequestCode: 'reviewRequestCode', + }, +}; export const REVIEW_WRITING_API_PARAMS = { resource: 'reviews', @@ -24,8 +30,6 @@ export const REVIEW_PASSWORD_API_PARAMS = { }, }; -export const REVIEW_WRITING_API_URL = `${process.env.API_BASE_URL}/${VERSION2}/${REVIEW_WRITING_API_PARAMS.resource}`; - export const REVIEW_GROUP_DATA_API_PARAMS = { resource: 'groups', queryString: { @@ -33,14 +37,19 @@ export const REVIEW_GROUP_DATA_API_PARAMS = { }, }; +export const REVIEW_WRITING_API_URL = `${process.env.API_BASE_URL}/${VERSION2}/${REVIEW_WRITING_API_PARAMS.resource}`; +export const REVIEW_LIST_API_URL = `${process.env.API_BASE_URL}/${VERSION2}/${REVIEW_LIST_API_PARAMS.resource}`; +export const DETAILED_REVIEW_API_URL = `${process.env.API_BASE_URL}/${VERSION2}/${DETAILED_REVIEW_API_PARAMS.resource}`; export const REVIEW_GROUP_DATA_API_URL = `${process.env.API_BASE_URL}/${VERSION2}/${REVIEW_GROUP_DATA_API_PARAMS.resource}`; const endPoint = { postingReview: `${process.env.API_BASE_URL}/${VERSION2}/reviews`, - gettingDetailedReview: (reviewId: number) => `${DETAILED_REVIEW_API_URL}/${reviewId}`, + gettingDetailedReview: (reviewId: number, reviewRequestCode: string) => + `${DETAILED_REVIEW_API_URL}/${reviewId}?${DETAILED_REVIEW_API_PARAMS.queryString.reviewRequestCode}=${reviewRequestCode}`, gettingDataToWriteReview: (reviewRequestCode: string) => `${REVIEW_WRITING_API_URL}/${REVIEW_WRITING_API_PARAMS.queryString.write}?${REVIEW_WRITING_API_PARAMS.queryString.reviewRequestCode}=${reviewRequestCode}`, - gettingReviewList: `${process.env.API_BASE_URL}/${VERSION2}/reviews`, + gettingReviewList: (reviewRequestCode: string) => + `${REVIEW_LIST_API_URL}?${REVIEW_LIST_API_PARAMS.queryString.reviewRequestCode}=${reviewRequestCode}`, postingDataForReviewRequestCode: `${process.env.API_BASE_URL}/${VERSION2}/groups`, checkingPassword: `${process.env.API_BASE_URL}/${VERSION2}/${REVIEW_PASSWORD_API_PARAMS.resource}/${REVIEW_PASSWORD_API_PARAMS.queryString.check}`, gettingReviewGroupData: (reviewRequestCode: string) => diff --git a/frontend/src/apis/review.ts b/frontend/src/apis/review.ts index c6ae06a01..1d9ca0f39 100644 --- a/frontend/src/apis/review.ts +++ b/frontend/src/apis/review.ts @@ -32,15 +32,14 @@ export const postReviewApi = async (formResult: ReviewWritingFormResult) => { return; }; -// 상세 리뷰 -export const getDetailedReviewApi = async ({ - reviewId, - groupAccessCode, -}: { +interface GetDetailedReviewApi { reviewId: number; groupAccessCode: string; -}) => { - const response = await fetch(endPoint.gettingDetailedReview(reviewId), { + reviewRequestCode: string; +} +// 상세 리뷰 +export const getDetailedReviewApi = async ({ reviewId, groupAccessCode, reviewRequestCode }: GetDetailedReviewApi) => { + const response = await fetch(endPoint.gettingDetailedReview(reviewId, reviewRequestCode), { method: 'GET', headers: { 'Content-Type': 'application/json', @@ -56,8 +55,8 @@ export const getDetailedReviewApi = async ({ return data as DetailReviewData; }; -export const getReviewListApi = async (groupAccessCode: string) => { - const response = await fetch(endPoint.gettingReviewList, { +export const getReviewListApi = async (groupAccessCode: string, reviewRequestCode: string) => { + const response = await fetch(endPoint.gettingReviewList(reviewRequestCode), { method: 'GET', headers: { 'Content-Type': 'application/json', diff --git a/frontend/src/hooks/review/useGetDetailedReview/index.ts b/frontend/src/hooks/review/useGetDetailedReview/index.ts index e8a440492..5da4d2293 100644 --- a/frontend/src/hooks/review/useGetDetailedReview/index.ts +++ b/frontend/src/hooks/review/useGetDetailedReview/index.ts @@ -7,22 +7,24 @@ import { DetailReviewData } from '@/types'; interface UseGetDetailedReviewProps { reviewId: number; groupAccessCode: string; + reviewRequestCode: string; } interface FetchDetailedReviewParams { reviewId: number; groupAccessCode: string; + reviewRequestCode: string; } -const useGetDetailedReview = ({ reviewId, groupAccessCode }: UseGetDetailedReviewProps) => { - const fetchDetailedReview = async ({ reviewId, groupAccessCode }: FetchDetailedReviewParams) => { - const result = await getDetailedReviewApi({ reviewId, groupAccessCode }); +const useGetDetailedReview = ({ reviewId, groupAccessCode, reviewRequestCode }: UseGetDetailedReviewProps) => { + const fetchDetailedReview = async ({ reviewId, groupAccessCode, reviewRequestCode }: FetchDetailedReviewParams) => { + const result = await getDetailedReviewApi({ reviewId, groupAccessCode, reviewRequestCode }); return result; }; const result = useSuspenseQuery({ queryKey: [REVIEW_QUERY_KEY.detailedReview, reviewId], - queryFn: () => fetchDetailedReview({ reviewId, groupAccessCode }), + queryFn: () => fetchDetailedReview({ reviewId, groupAccessCode, reviewRequestCode }), }); return result; diff --git a/frontend/src/hooks/review/useGetReviewList/index.ts b/frontend/src/hooks/review/useGetReviewList/index.ts index ec6cb94d4..c727c43fb 100644 --- a/frontend/src/hooks/review/useGetReviewList/index.ts +++ b/frontend/src/hooks/review/useGetReviewList/index.ts @@ -3,10 +3,10 @@ import { useSuspenseQuery } from '@tanstack/react-query'; import { getReviewListApi } from '@/apis/review'; import { REVIEW_QUERY_KEY } from '@/constants'; -const useGetReviewList = (groupAccessCode: string) => { +const useGetReviewList = (groupAccessCode: string, reviewRequestCode: string) => { const { data, isLoading, error, isSuccess } = useSuspenseQuery({ queryKey: [REVIEW_QUERY_KEY.reviews], - queryFn: () => getReviewListApi(groupAccessCode), + queryFn: () => getReviewListApi(groupAccessCode, reviewRequestCode), }); // NOTE: 무한스크롤 관련 코드 일단 주석 처리 diff --git a/frontend/src/mocks/handlers/review.ts b/frontend/src/mocks/handlers/review.ts index 44b8efbe3..54146b7fa 100644 --- a/frontend/src/mocks/handlers/review.ts +++ b/frontend/src/mocks/handlers/review.ts @@ -51,8 +51,8 @@ const getDataToWriteReview = () => return HttpResponse.json({ error: '잘못된 리뷰 작성 데이터 요청' }, { status: 404 }); }); -const getReviewList = () => { - return http.get(endPoint.gettingReviewList, async ({ request }) => { +const getReviewList = (reviewRequestCode: string) => { + return http.get(endPoint.gettingReviewList(reviewRequestCode), async ({ request }) => { // const url = new URL(request.url); // const lastReviewId = Number(url.searchParams.get('lastReviewId')); @@ -83,6 +83,6 @@ const postReview = () => return HttpResponse.json({ message: 'post 성공' }, { status: 201 }); }); -const reviewHandler = [getDetailedReview(), getReviewList(), getDataToWriteReview(), postReview()]; +const reviewHandler = [getDetailedReview(), getReviewList('ABCD1234'), getDataToWriteReview(), postReview()]; export default reviewHandler; diff --git a/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/index.tsx b/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/index.tsx index 5a967e4b9..3abb2c1dd 100644 --- a/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/index.tsx +++ b/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/index.tsx @@ -1,6 +1,9 @@ +import { useRecoilValue } from 'recoil'; + import { ROUTE_PARAM } from '@/constants'; import { useGetDetailedReview, useSearchParamAndQuery } from '@/hooks'; import { ReviewDescription, ReviewSection, KeywordSection } from '@/pages/DetailedReviewPage/components'; +import { reviewRequestCodeAtom } from '@/recoil'; import * as S from './styles'; @@ -9,6 +12,7 @@ interface DetailedReviewPageContentsProps { } const DetailedReviewPageContents = ({ groupAccessCode }: DetailedReviewPageContentsProps) => { + const storedReviewRequestCode = useRecoilValue(reviewRequestCodeAtom); const { param: reviewId } = useSearchParamAndQuery({ paramKey: ROUTE_PARAM.reviewId, }); @@ -16,6 +20,7 @@ const DetailedReviewPageContents = ({ groupAccessCode }: DetailedReviewPageConte const { data: detailedReview } = useGetDetailedReview({ reviewId: Number(reviewId), groupAccessCode, + reviewRequestCode: storedReviewRequestCode, }); // TODO: 리뷰 공개/비공개 토글 버튼 기능 diff --git a/frontend/src/pages/ReviewListPage/components/PageContents/index.tsx b/frontend/src/pages/ReviewListPage/components/PageContents/index.tsx index 4161ea003..1c8cc9ee5 100644 --- a/frontend/src/pages/ReviewListPage/components/PageContents/index.tsx +++ b/frontend/src/pages/ReviewListPage/components/PageContents/index.tsx @@ -14,12 +14,13 @@ import * as S from './styles'; interface PageContentsProps { groupAccessCode: string; + reviewRequestCode: string; } -const PageContents = ({ groupAccessCode }: PageContentsProps) => { +const PageContents = ({ groupAccessCode, reviewRequestCode }: PageContentsProps) => { const navigate = useNavigate(); - const { data: reviewListData } = useGetReviewList(groupAccessCode); + const { data: reviewListData } = useGetReviewList(groupAccessCode, reviewRequestCode); const handleReviewClick = (id: number) => { navigate(`/user/detailed-review/${id}`); diff --git a/frontend/src/pages/ReviewListPage/index.tsx b/frontend/src/pages/ReviewListPage/index.tsx index 536967adb..2fdbfcdf0 100644 --- a/frontend/src/pages/ReviewListPage/index.tsx +++ b/frontend/src/pages/ReviewListPage/index.tsx @@ -1,10 +1,14 @@ +import { useRecoilValue } from 'recoil'; + import { ErrorSuspenseContainer, LoginRedirectModal } from '@/components'; import { useGroupAccessCode } from '@/hooks'; +import { reviewRequestCodeAtom } from '@/recoil'; import PageContents from './components/PageContents'; const ReviewListPage = () => { const { groupAccessCode } = useGroupAccessCode(); + const storedReviewRequestCode = useRecoilValue(reviewRequestCodeAtom); // NOTE: 무한스크롤 코드 일단 주석 처리 // const { data, fetchNextPage, hasNextPage, isLoading, error } = useGetReviewList(); @@ -28,9 +32,9 @@ const ReviewListPage = () => { return ( <> - {groupAccessCode ? ( + {groupAccessCode && storedReviewRequestCode ? ( - + ) : ( diff --git a/frontend/src/pages/ReviewZonePage/index.tsx b/frontend/src/pages/ReviewZonePage/index.tsx index 62a3a5b66..c5c76f566 100644 --- a/frontend/src/pages/ReviewZonePage/index.tsx +++ b/frontend/src/pages/ReviewZonePage/index.tsx @@ -1,4 +1,6 @@ +import { useEffect } from 'react'; import { useNavigate } from 'react-router'; +import { useRecoilState } from 'recoil'; import ReviewZoneIcon from '@/assets/reviewZone.svg'; import { Button } from '@/components'; @@ -6,6 +8,7 @@ import { Button } from '@/components'; import { ROUTE } from '@/constants/route'; import { useGetReviewGroupData, useSearchParamAndQuery } from '@/hooks'; import useModals from '@/hooks/useModals'; +import { reviewRequestCodeAtom } from '@/recoil'; import PasswordModal from './components/PasswordModal'; import * as S from './styles'; @@ -16,6 +19,7 @@ const MODAL_KEYS = { const ReviewZonePage = () => { const { isOpen, openModal, closeModal } = useModals(); + const [storedReviewRequestCode, setStoredReviewRequestCode] = useRecoilState(reviewRequestCodeAtom); const navigate = useNavigate(); @@ -25,6 +29,12 @@ const ReviewZonePage = () => { if (!reviewRequestCode) throw new Error('유효하지 않은 리뷰 요청 코드입니다.'); + useEffect(() => { + if (!storedReviewRequestCode && reviewRequestCode) { + setStoredReviewRequestCode(reviewRequestCode); + } + }, []); + const { data: reviewGroupData } = useGetReviewGroupData({ reviewRequestCode }); const handleReviewWritingButtonClick = () => { diff --git a/frontend/src/recoil/index.ts b/frontend/src/recoil/index.ts index 5bc85b72a..f01bbb51f 100644 --- a/frontend/src/recoil/index.ts +++ b/frontend/src/recoil/index.ts @@ -1,3 +1,4 @@ export * from './groupAccessCode'; export * from './keys'; export * from './reviewWritingForm'; +export * from './reviewRequestCode'; diff --git a/frontend/src/recoil/keys/index.ts b/frontend/src/recoil/keys/index.ts index 3758b2d68..7366809cc 100644 --- a/frontend/src/recoil/keys/index.ts +++ b/frontend/src/recoil/keys/index.ts @@ -6,6 +6,7 @@ export const ATOM_KEY = { answerMapAtom: 'answerMapAtom', answerValidationMapAtom: 'answerValidationMapAtom', visitedCardList: 'visitedCardList', + reviewRequestCodeAtom: 'reviewRequestCode', }, }; diff --git a/frontend/src/recoil/reviewRequestCode/index.ts b/frontend/src/recoil/reviewRequestCode/index.ts new file mode 100644 index 000000000..212063260 --- /dev/null +++ b/frontend/src/recoil/reviewRequestCode/index.ts @@ -0,0 +1,11 @@ +import { atom } from 'recoil'; + +import { ATOM_KEY } from '../keys'; + +/** + * 리뷰 URL 뒷부분의 난수에 해당하는 reviewRequestCode + */ +export const reviewRequestCodeAtom = atom({ + key: ATOM_KEY.reviewWritingForm.reviewRequestCodeAtom, + default: '', +});