[FE] chore: 리뷰 목록 및 상세 페이지에서 reviewRequestCode를 recoil 상태로 관리 (#442)

* chore: 리뷰 목록 및 상세 API 형식 수정 * chore: reviewRequestCode를 recoil 상태로 관리 * chore: 리뷰 공간에 처음 들어갔을 때 reviewRequestCode를 recoil에 저장 * chore: 리뷰 목록 페이지에서 reviewRequestCode가 존재하지 않는 경우 홈으로 돌아가도록 수정 * chore: 상세 페이지를 요청할 때 reviewRequestCode를 함께 전달하도록 prop 수정 * chore: 리뷰 목록을 요청할 때 reviewRequestCode를 함께 전달하도록 props 수정 * chore: 비밀번호 확인 post handler 추가 및 getReviewList prop 수정 * fix: endpoint 수정 * chore: console 삭제 * refactor: api 요청 함수의 props를 interface로 분리 * refactor: endpoint source, queryString 상수화 적용 * style: 코드의 안정감과 무게중심을 맞추는 작업 * chore: 중복되는 handler 삭제 * chore: reviewRequestCodeAtom의 경로 수정
woowacourse-teams · Aug 20, 2024 · 6530e65 · 6530e65
1 parent 51312e1
commit 6530e65
Show file tree

Hide file tree

Showing 12 changed files with 70 additions and 27 deletions.
diff --git 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,23 +30,26 @@ 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: {
     reviewRequestCode: 'reviewRequestCode',
   },
 };
 
+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
@@ -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
@@ -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<DetailReviewData>({
     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
@@ -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
@@ -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
@@ -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,13 +12,15 @@ interface DetailedReviewPageContentsProps {
 }
 
 const DetailedReviewPageContents = ({ groupAccessCode }: DetailedReviewPageContentsProps) => {
+  const storedReviewRequestCode = useRecoilValue(reviewRequestCodeAtom);
   const { param: reviewId } = useSearchParamAndQuery({
     paramKey: ROUTE_PARAM.reviewId,
   });
 
   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
@@ -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
@@ -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 ? (
         <ErrorSuspenseContainer>
-          <PageContents groupAccessCode={groupAccessCode} />
+          <PageContents groupAccessCode={groupAccessCode} reviewRequestCode={storedReviewRequestCode} />
         </ErrorSuspenseContainer>
       ) : (
         <LoginRedirectModal />

diff --git a/frontend/src/pages/ReviewZonePage/index.tsx b/frontend/src/pages/ReviewZonePage/index.tsx
@@ -1,11 +1,14 @@
+import { useEffect } from 'react';
 import { useNavigate } from 'react-router';
+import { useRecoilState } from 'recoil';
 
 import ReviewZoneIcon from '@/assets/reviewZone.svg';
 import { Button } from '@/components';
 // TODO: ROUTE 상수명을 단수로 고치기
 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
@@ -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
@@ -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
@@ -0,0 +1,11 @@
+import { atom } from 'recoil';
+
+import { ATOM_KEY } from '../keys';
+
+/**
+ * 리뷰 URL 뒷부분의 난수에 해당하는 reviewRequestCode
+ */
+export const reviewRequestCodeAtom = atom<string>({
+  key: ATOM_KEY.reviewWritingForm.reviewRequestCodeAtom,
+  default: '',
+});