[FE] feat : 목 서버에서 세션 쿠키 사용하는 추가 및 확인하는 기능 추가 (#698)

* refactor: 리뷰 목록 페이지 및 상세 리뷰 페이지 url에 reviewRequestCode 추가

* refactor: 비밀번호 검증, 리뷰 목록 요청, 상세 리뷰 요청 API 변경에 따른 api 호출 함수 및 리액트 쿼리 훅 변경

* refactor: 비밀번호 검증, 리뷰 목록 요청, 상세 리뷰 요청 API 변경에 따른 리액트 쿼리 훅 테스트 변경

* refactor: 비밀번호 검증, 리뷰 목록 요청, 상세 리뷰 요청 API 변경에 따른 mocking handler 변경

* refactor: 리뷰 목록, 상세 리뷰 페이지 URL 변경에 따른 breadCrumb Path 수정

* refactor: ErrorSuspenseContainer가 fallback을 optional 매개변수로 받을 수 있게 변경 및 네비게이션 함수의 이름을 보다 일반적으로 수정

* feat: 리뷰 목록, 리뷰 상세 페이지를 위한 AuthAndServerErrorFallback 및 section 작성

* refactor: 리뷰 목록, 상세 리뷰 페이지에 새 ErrorSuspenseContainer와 API 호출 함수 반영

* refactor: ErrorSuspenseContainer의 기본 인자로 기본 fallback 할당

* chore: 불필요한 훅과 atom 삭제

* chore: LoginRedirectModal 삭제

* chore: 삭제 파일에서 누락된 파일 삭제

* test: 간헐적으로 실패하는 테스트의 expect 함수를 waitFor 내부로 이동

* feat: 비밀번호 조회 목 핸들러에 mockAuthToken 생성하는 기능 추가

* feat: 목록, 상세 페이지 목 핸들러에 쿠키 확인하는 기능 추가

* fix: 리뷰 목록 목 데이터에서 reviewId 중복 수정

* fix: 목 핸들러에서 쿠키 없을 때 response status 변경

* fix: 리뷰 목록/상세 페이지 테스트에 쿠키 설정 추가해 테스트 오류 수정

* refactor: useGetDetailedReview에서 불필요한 코드 삭제

* refactor: review 목 핸들러 if문 코드 개선

---------

Co-authored-by: ImxYJL <allensain14@gmail.com>

frontend/src/hooks/review/useGetDetailedReview/index.ts

@@ -8,19 +8,10 @@ interface UseGetDetailedReviewProps {
   reviewId: number;
 }
 
-interface FetchDetailedReviewParams {
-  reviewId: number;
-}
-
 const useGetDetailedReview = ({ reviewId }: UseGetDetailedReviewProps) => {
-  const fetchDetailedReview = async ({ reviewId }: FetchDetailedReviewParams) => {
-    const result = await getDetailedReviewApi({ reviewId });
-    return result;
-  };
-
   const result = useSuspenseQuery<DetailReviewData>({
     queryKey: [REVIEW_QUERY_KEY.detailedReview, reviewId],
-    queryFn: () => fetchDetailedReview({ reviewId }),
+    queryFn: () => getDetailedReviewApi({ reviewId }),
     staleTime: 60 * 60 * 1000,
   });
 

frontend/src/hooks/review/useGetDetailedReview/test.ts

@@ -1,5 +1,6 @@
 import { renderHook, waitFor } from '@testing-library/react';
 
+import { MOCK_AUTH_TOKEN_NAME } from '@/mocks/mockData';
 import { DETAILED_PAGE_MOCK_API_SETTING_VALUES } from '@/mocks/mockData/detailedReviewMockData';
 import QueryClientWrapper from '@/queryTestSetup/QueryClientWrapper';
 
@@ -8,16 +9,22 @@ import useGetDetailedReview from '.';
 
 describe('리뷰 상세페이지 데이터 요청 테스트', () => {
   it('유효힌 id,memberId 사용해야 라뷰 상세 페이지 데이터를 불러온다.', async () => {
-    const { reviewId } = DETAILED_PAGE_MOCK_API_SETTING_VALUES;
+    // 쿠키 생성
+    document.cookie = `${MOCK_AUTH_TOKEN_NAME}=2024-review-me`;
 
+    const { reviewId } = DETAILED_PAGE_MOCK_API_SETTING_VALUES;
     const { result } = renderHook(() => useGetDetailedReview({ reviewId }), {
       wrapper: QueryClientWrapper,
     });
 
     await waitFor(() => {
+      expect(document.cookie).toEqual(`${MOCK_AUTH_TOKEN_NAME}=2024-review-me`);
       expect(result.current.status).toBe('success');
     });
 
     expect(result.current.data).toBeDefined();
+
+    // 쿠키 삭제
+    document.cookie = `${MOCK_AUTH_TOKEN_NAME}=; max-age=-1`;
   });
 });

frontend/src/hooks/review/useGetReviewList/test.ts

@@ -1,11 +1,15 @@
 import { renderHook, waitFor } from '@testing-library/react';
 
+import { MOCK_AUTH_TOKEN_NAME } from '@/mocks/mockData';
 import QueryClientWrapper from '@/queryTestSetup/QueryClientWrapper';
 
 import useGetReviewList from './index';
 
 describe('리뷰 목록 페이지 API 연동 테스트', () => {
   test('성공적으로 데이터를 가져온다', async () => {
+    //쿠키 생성
+    document.cookie = `${MOCK_AUTH_TOKEN_NAME}=2024-review-me`;
+
     const { result } = renderHook(() => useGetReviewList(), {
       wrapper: QueryClientWrapper,
     });
@@ -14,4 +18,6 @@ describe('리뷰 목록 페이지 API 연동 테스트', () => {
       expect(result.current.isSuccess).toBe(true);
     });
   });
+  // 쿠키 삭제
+  document.cookie = `${MOCK_AUTH_TOKEN_NAME}=; max-age=-1`;
 });

frontend/src/mocks/handlers/group.ts

@@ -5,6 +5,7 @@ import { API_ERROR_MESSAGE, INVALID_REVIEW_PASSWORD_MESSAGE } from '@/constants'
 
 import {
   CREATED_REVIEW_REQUEST_CODE,
+  MOCK_AUTH_TOKEN_NAME,
   REVIEW_GROUP_DATA,
   VALID_REVIEW_GROUP_REVIEW_REQUEST_CODE,
   VALIDATED_PASSWORD,
@@ -25,7 +26,7 @@ const postDataForReviewRequestCode = () => {
 // };
 
 const postPassWordValidation = () => {
-  return http.post(endPoint.checkingPassword, async ({ request }) => {
+  return http.post(endPoint.checkingPassword, async ({ request, cookies }) => {
     // request body의 존재 검증
     if (!request.body) return HttpResponse.json({ error: API_ERROR_MESSAGE[400] }, { status: 400 });
 
@@ -47,7 +48,15 @@ const postPassWordValidation = () => {
     }
 
     // 정상 응답 (유효한 비밀번호)
-    return new HttpResponse(null, { status: 204 });
+    //세션 쿠키 생성 (브라우저 창 닫히면 자동 삭제됨, 이미 있으면 생성 하지 않음)
+    return new HttpResponse(null, {
+      headers: cookies[MOCK_AUTH_TOKEN_NAME]
+        ? {}
+        : {
+            'Set-cookie': `${MOCK_AUTH_TOKEN_NAME}=2024-review-me`,
+          },
+      status: 204,
+    });
   });
 };
 

frontend/src/mocks/handlers/review.ts

@@ -14,6 +14,7 @@ import {
   REVIEW_REQUEST_CODE,
   REVIEW_QUESTION_DATA,
   REVIEW_LIST,
+  MOCK_AUTH_TOKEN_NAME,
 } from '../mockData';
 
 export const PAGE = {
@@ -24,7 +25,12 @@ export const PAGE = {
 };
 
 const getDetailedReview = () =>
-  http.get(new RegExp(`^${DETAILED_REVIEW_API_URL}/\\d+$`), async ({ request }) => {
+  http.get(new RegExp(`^${DETAILED_REVIEW_API_URL}/\\d+$`), async ({ request, cookies }) => {
+    // authToken 쿠키 확인
+    if (!cookies[MOCK_AUTH_TOKEN_NAME]) {
+      return HttpResponse.json({ error: '인증 관련 쿠키 없음' }, { status: 401 });
+    }
+
     //요청 url에서 reviewId, memberId 추출
     const url = new URL(request.url);
     const urlReviewId = url.pathname.replace(`/${VERSION2}/${DETAILED_REVIEW_API_PARAMS.resource}/`, '');
@@ -51,7 +57,10 @@ const getDataToWriteReview = () =>
   });
 
 const getReviewList = () => {
-  return http.get(endPoint.gettingReviewList, async () => {
+  return http.get(endPoint.gettingReviewList, async ({ cookies }) => {
+    // authToken 쿠키 확인
+    if (!cookies[MOCK_AUTH_TOKEN_NAME]) return HttpResponse.json({ error: '인증 관련 쿠키 없음' }, { status: 401 });
+
     // const url = new URL(request.url);
 
     // const lastReviewId = Number(url.searchParams.get('lastReviewId'));
@@ -74,7 +83,6 @@ const getReviewList = () => {
     //   reviews: paginatedReviews,
     // });
 
-
     return HttpResponse.json(REVIEW_LIST);
   });
 };

frontend/src/mocks/mockData/group.ts

@@ -6,6 +6,7 @@ export const CREATED_REVIEW_REQUEST_CODE = {
 
 export const VALIDATED_PASSWORD = '1234';
 
+export const MOCK_AUTH_TOKEN_NAME = 'mockAuthToken';
 /**
  * 리뷰 연결 페이지에서 사용하는 리뷰 그룹 정보
  */

frontend/src/mocks/mockData/reviewListMockData.ts

@@ -4,7 +4,7 @@ export const REVIEW_LIST: ReviewList = {
   projectName: 'review-me',
   reviews: [
     {
-      reviewId: 5,
+      reviewId: 1,
       createdAt: '2024-07-24',
       contentPreview: `물론 시중에 출간되어 있는 책들로 공부하는 것도 큰 장점이지만 더 깊은 공부를 하고 싶을 때 공식 문서를 확인해보는 것이 좋기 때문에, 저 개인적인 생각으로는 언어 공부를 아예 처음 입문하시는 분들은 한국에서 출간된 개발 서적으로 공부를 시작하시다가 모르는 부분이.....`,
       categories: [