[FE] 리뷰 상세 페이지에 react-query 추가 및 리팩토링 (#161)

* fix: src/index.tsx에서 enableMocking 제거

* feat: 리뷰 그룹 생성 시 코멘트 컴포넌트명 변경 및 기본값 설정

- 컴포넌트명 변경: RevewComment -> ReveweeComments
-  reviewGroup의 description이 빈문자열이면 기본값을 보여주는 것으로 변경

* refactor: 서버 DB에 있는 리뷰 데이터를 사용하기 위한 상수화

- 현재 DB에 있는 리뷰 데이터를 목 서버에서도 사용하고, 사이드바 페이지 이동 시에도 활용할 수 있도록 관련 value들을 상수화 함

* feat : QueryClient, QueryClientProvider 적용

- src/index.tsx에 QueryClient, QueryClientProvider 적용

* fix: dependencies에 있는 테스트 패키지들을 devDependencies로 옮김

* feat: 리뷰 상세페이지에 react-query 적용

* feat : msw에 리뷰 상세페이지 404 오류 추가

* ci: react-error-boundary 설치

* feat: Outlet에 QueryErrorResetBoundary,ErrorBoundary, Suspense 적용

* feat: 리뷰 상세페이지에 useSuspenseQuery 적용

* refactor: 리뷰 상세페이지 resource, queryString key 상수화

* refactor:  리뷰 상세페이지 react-query key 상수화

* refactor: 리뷰 상세 페이지 컴포넌트 속에서만 사용하는 상수들 상수화

* refactor: DetailedReviewPage/components에 index.tsx를 추가해 import 경로 간결하게 수정

* feat: error 전파를 위한 QueryClient 옵션 추가

-  react-query의 query, mutation에서 error가 전파되도록 QueryClient 옵션 설정

* fix: ErrorPage의 SideModal에 closeModal props로 줌

* refactor: ErrorSection 위치 변경(src/pages/ErrorPage -> src/components/error)

* feat: ErrorFallback 컴포넌트 생성

* feat: ErrorSuspenseContainer 생성 및 App.tsx에 적용

* chore: constants/index.ts export 경로 변경

- 중복되는 apiErrorMessage 삭제
- queryKeys 추가

* chore: 3차-1주차 핵심 기능 시현 때 필요 없는 코드 주석 처리

* docs: ErrorPage의 ERROR_MESSAGE 수정

* design: formWidth 변경 및 fontSize에 1.4rem 추가

* feat: 리뷰 상세 페이지에 리뷰이 이름 추가

- 리뷰 상세 페이지 목데이터, 데이터 타입에 리뷰이 이름 추가
- 리뷰 상세 페이지 컴포넌트에 리뷰이 이름 추가 및 관련 스타일 추가

* refactor: 불필요한 export 삭제

* chore: type명 수정 (RevieweeCommentProps =>RevieweeCommentsProps)

* refactor: ErrorSection으l Button 수정

* refactor: 리뷰 상세 페이지 데이터 타입 변경에 따른 수정

* refactor: ErrorSuspenseContainer 적용 위치 변경

- App가 아닌 router의 element에서 적용하는 것으로 변경

* refactor: 리뷰 상세 페이지 데이터 타입 강제 방법 변경

* chore: 불필요한 주석 삭제

* refactor: ErrorSection의 buttons 네이밍 변경 및 요소에 key 추가

- buttons -> buttonList

* chore: 스타일 주석에 NOTE 추가

frontend/package.json

@@ -15,15 +15,14 @@
     "@emotion/styled": "^11.11.5",
     "@tanstack/react-query": "^5.51.1",
     "@tanstack/react-query-devtools": "^5.51.1",
-    "@testing-library/jest-dom": "^6.4.7",
-    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "dotenv-webpack": "^8.1.0",
+    "jest": "^29.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.0.13",
     "react-router": "^6.24.1",
-    "react-router-dom": "^6.24.1",
-    "jest": "^29.7.0"
+    "react-router-dom": "^6.24.1"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",
@@ -33,7 +32,9 @@
     "@emotion/babel-plugin": "^11.11.0",
     "@stylelint/postcss-css-in-js": "^0.38.0",
     "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.16.0",

frontend/src/apis/endpoints.ts

@@ -1,7 +1,14 @@
+export const DETAILED_REVIEW_API_PARAMS = {
+  resource: 'reviews',
+  queryString: {
+    memberId: 'memberId',
+  },
+};
+
 const endPoint = {
   postingReview: `${process.env.API_BASE_URL}/reviews`,
   gettingDetailedReview: (reviewId: number, memberId: number) =>
-    `${process.env.API_BASE_URL}/reviews/${reviewId}?memberId=${memberId}`,
+    `${process.env.API_BASE_URL}/${DETAILED_REVIEW_API_PARAMS.resource}/${reviewId}?${DETAILED_REVIEW_API_PARAMS.queryString.memberId}=${memberId}`,
   gettingDataToWriteReview: (reviewerGroupId: number) =>
     `${process.env.API_BASE_URL}/reviews/write?reviewerGroupId=${reviewerGroupId}`,
   gettingReviewList: (revieweeId: number, lastReviewId: number, memberId: number) =>

frontend/src/apis/review.ts

@@ -1,4 +1,4 @@
-import { ReviewData, WritingReviewInfoData } from '@/types';
+import { DetailReviewData, ReviewData, WritingReviewInfoData } from '@/types';
 
 import createApiErrorMessage from './apiErrorMessageCreator';
 import endPoint from './endpoints';
@@ -47,7 +47,7 @@ export const getDetailedReviewApi = async ({ reviewId, memberId }: { reviewId: n
   }
 
   const data = await response.json();
-  return data;
+  return data as DetailReviewData;
 };
 
 // 리뷰 리스트

frontend/src/components/common/RevieweeComments/index.tsx

@@ -0,0 +1,13 @@
+import * as S from './styles';
+
+interface RevieweeCommentsProps {
+  comment: string;
+}
+
+const DEFAULT_COMMENTS = '안녕하세요! 리뷰 잘 부탁드립니다.';
+
+const RevieweeComments = ({ comment }: RevieweeCommentsProps) => {
+  return <S.RevieweeComments>{comment || DEFAULT_COMMENTS}</S.RevieweeComments>;
+};
+
+export default RevieweeComments;

frontend/src/components/common/ReviewComment/styles.ts → frontend/src/components/common/RevieweeComments/styles.ts

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-export const ReviewComment = styled.p`
+export const RevieweeComments = styled.p`
   width: inherit;
   height: 3rem;
   margin-top: 1.6rem;

frontend/src/components/common/index.tsx

@@ -3,7 +3,7 @@ export { default as DropDown } from './DropDown';
 export { default as SearchInput } from './SearchInput';
 export { default as ProjectImg } from './ProjectImg';
 export { default as ReviewDate } from './ReviewDate';
-export { default as ReviewComment } from './ReviewComment';
+export { default as RevieweeComments } from './RevieweeComments';
 export { default as MultilineTextViewer } from './MultilineTextViewer';
 export { default as TopButton } from './TopButton';
 export * from './modals';

frontend/src/components/error/ErrorFallback/index.tsx

@@ -0,0 +1,16 @@
+import { FallbackProps } from 'react-error-boundary';
+import { useNavigate } from 'react-router';
+
+import ErrorSection from '../ErrorSection';
+
+const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
+  const navigate = useNavigate();
+  const handleGoHome = () => {
+    resetErrorBoundary();
+    navigate('/'); //TODO : 홈 페이지 경로가 결정되면 변경
+  };
+
+  return <ErrorSection errorMessage={error.message} handleGoHome={handleGoHome} handleReload={resetErrorBoundary} />;
+};
+
+export default ErrorFallback;

frontend/src/pages/ErrorPage/components/ErrorSection/index.tsx → frontend/src/components/error/ErrorSection/index.tsx

@@ -13,16 +13,18 @@ interface ErrorSectionProps {
 }
 
 const ErrorSection = ({ errorMessage, handleReload, handleGoHome }: ErrorSectionProps) => {
-  const buttons = [
+  const buttonList = [
     {
       buttonType: 'primary' as ButtonType,
+      key: 'refreshButton',
       text: '새로고침하기',
       image: ReloadIcon,
       imageDescription: '새로고침 이미지',
       onClick: handleReload,
     },
     {
       buttonType: 'secondary' as ButtonType,
+      key: 'homeButton',
       text: '홈으로 이동하기',
       image: HomeIcon,
       imageDescription: '홈 이미지',
@@ -37,16 +39,15 @@ const ErrorSection = ({ errorMessage, handleReload, handleGoHome }: ErrorSection
       </S.ErrorLogoWrapper>
       <S.ErrorMessage>{errorMessage}</S.ErrorMessage>
       <S.Container>
-        {buttons.map((button, index) => (
-          <S.ButtonContainer key={index}>
-            <Button
-              buttonType={button.buttonType}
-              text={button.text}
-              image={button.image}
-              imageDescription={button.imageDescription}
-              onClick={button.onClick}
-            />
-          </S.ButtonContainer>
+        {buttonList.map((button) => (
+          <Button
+            key={button.key}
+            buttonType={button.buttonType}
+            text={button.text}
+            image={button.image}
+            imageDescription={button.imageDescription}
+            onClick={button.onClick}
+          />
         ))}
       </S.Container>
     </S.Layout>

frontend/src/pages/ErrorPage/components/ErrorSection/styles.ts → frontend/src/components/error/ErrorSection/styles.ts

@@ -29,13 +29,6 @@ export const Container = styled.div`
   gap: 3.5rem;
   align-items: center;
   justify-content: center;
-`;
-
-export const ButtonContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 3rem;
 
   & > button {
     width: 17rem;

frontend/src/components/error/ErrorSuspenseContainer/index.tsx

@@ -0,0 +1,22 @@
+import { QueryErrorResetBoundary } from '@tanstack/react-query';
+import { Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+
+import LoadingPage from '@/pages/LoadingPage';
+import { EssentialPropsWithChildren } from '@/types';
+
+import ErrorFallback from '../ErrorFallback';
+
+const ErrorSuspenseContainer = ({ children }: EssentialPropsWithChildren) => {
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ErrorBoundary FallbackComponent={ErrorFallback} onReset={reset}>
+          <Suspense fallback={<LoadingPage />}>{children}</Suspense>
+        </ErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  );
+};
+
+export default ErrorSuspenseContainer;

frontend/src/components/error/index.tsx

@@ -0,0 +1,2 @@
+export { default as ErrorSection } from './ErrorSection';
+export { default as ErrorSuspenseContainer } from './ErrorSuspenseContainer';

frontend/src/components/index.tsx

@@ -1,2 +1,3 @@
 export * from './layouts';
 export * from './common';
+export * from './error';

frontend/src/components/layouts/Sidebar/index.tsx

@@ -2,6 +2,7 @@ import { useLocation, Link } from 'react-router-dom';
 
 import CloseIcon from '@/assets/close.svg';
 import LogoIcon from '@/assets/logo.svg';
+import { DETAILED_PAGE_MOCK_API_SETTING_VALUES } from '@/mocks/mockData/detailedReviewMockData';
 
 import { PAGE } from '../../../constants';
 
@@ -11,7 +12,7 @@ const PATH = {
   myPage: '/user/mypage',
   reviewWriting: '/user/review-writing',
   reviewPreviewList: '/user/review-preview-list',
-  detailedReview: '/user/detailed-review/0?memberId=1',
+  detailedReview: `/user/detailed-review/${DETAILED_PAGE_MOCK_API_SETTING_VALUES.reviewId}?memberId=${DETAILED_PAGE_MOCK_API_SETTING_VALUES.memberId}`,
   reviewGroupManagement: '/user/review-group-management',
 };
 

frontend/src/constants/index.ts

@@ -1,3 +1,4 @@
 export * from './page';
 export * from './apiErrorMessage';
 export * from './review';
+export * from './queryKeys';

frontend/src/constants/queryKeys.ts

@@ -0,0 +1,3 @@
+export const REVIEW_QUERY_KEYS = {
+  detailedReview: 'detailedReview',
+};

frontend/src/index.tsx

@@ -1,17 +1,30 @@
 import { Global, ThemeProvider } from '@emotion/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
 import App from '@/App';
 
+import { ErrorSuspenseContainer } from './components';
 import DetailedReviewPage from './pages/DetailedReviewPage';
 import ErrorPage from './pages/ErrorPage';
 import ReviewPreviewListPage from './pages/ReviewPreviewListPage';
 import ReviewWritingPage from './pages/ReviewWriting';
 import globalStyles from './styles/globalStyles';
 import theme from './styles/theme';
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      throwOnError: true,
+    },
+    mutations: {
+      throwOnError: true,
+    },
+  },
+});
+
 const router = createBrowserRouter([
   {
     path: '/',
@@ -32,7 +45,11 @@ const router = createBrowserRouter([
       },
       {
         path: 'user/detailed-review/:id',
-        element: <DetailedReviewPage />,
+        element: (
+          <ErrorSuspenseContainer>
+            <DetailedReviewPage />
+          </ErrorSuspenseContainer>
+        ),
       },
     ],
   },
@@ -42,9 +59,11 @@ const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 
 root.render(
   <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <Global styles={globalStyles} />
-      <RouterProvider router={router} />
-    </ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={theme}>
+        <Global styles={globalStyles} />
+        <RouterProvider router={router} />
+      </ThemeProvider>
+    </QueryClientProvider>
   </React.StrictMode>,
 );

frontend/src/mocks/handlers/review.ts

@@ -2,14 +2,32 @@ import { http, HttpResponse } from 'msw';
 
 import endPoint from '@/apis/endpoints';
 
-import { DETAILED_REVIEW_MOCK_DATA } from '../mockData/detailedReviewMockData';
+import {
+  DETAILED_REVIEW_MOCK_DATA,
+  DETAILED_PAGE_MOCK_API_SETTING_VALUES,
+  DETAILED_PAGE_ERROR_API_VALUES,
+} from '../mockData/detailedReviewMockData';
 import { REVIEW_PREVIEW_LIST } from '../mockData/reviewPreviewList';
 import { REVIEW_WRITING_DATA } from '../mockData/reviewWritingData';
 
 const getDetailedReview = () =>
-  http.get(endPoint.gettingDetailedReview(123456, 123456), async ({ request }) => {
-    return HttpResponse.json(DETAILED_REVIEW_MOCK_DATA);
-  });
+  http.get(
+    endPoint.gettingDetailedReview(
+      DETAILED_PAGE_MOCK_API_SETTING_VALUES.reviewId,
+      DETAILED_PAGE_MOCK_API_SETTING_VALUES.memberId,
+    ),
+    async () => {
+      return HttpResponse.json(DETAILED_REVIEW_MOCK_DATA);
+    },
+  );
+
+const getWrongDetailReview = () =>
+  http.get(
+    endPoint.gettingDetailedReview(DETAILED_PAGE_ERROR_API_VALUES.reviewId, DETAILED_PAGE_ERROR_API_VALUES.memberId),
+    async () => {
+      return HttpResponse.json({ error: '잘못된 상세리뷰 요청' }, { status: 404 });
+    },
+  );
 
 const getDataToWriteReview = () =>
   http.get(endPoint.gettingDataToWriteReview(10), async ({ request }) => {
@@ -21,6 +39,6 @@ const getReviewPreviewList = () =>
     return HttpResponse.json(REVIEW_PREVIEW_LIST);
   });
 
-const reviewHandler = [getDetailedReview(), getReviewPreviewList(), getDataToWriteReview()];
+const reviewHandler = [getDetailedReview(), getWrongDetailReview(), getReviewPreviewList(), getDataToWriteReview()];
 
 export default reviewHandler;

frontend/src/mocks/mockData/detailedReviewMockData.ts

@@ -1,25 +1,35 @@
 import { DetailReviewData } from '@/types';
 
+export const DETAILED_PAGE_MOCK_API_SETTING_VALUES = {
+  reviewId: 5,
+  memberId: 2,
+};
+
+export const DETAILED_PAGE_ERROR_API_VALUES = {
+  reviewId: 0,
+  memberId: 0,
+};
+
 const ANSWER =
   '림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. \n 바람은 여전히 그를 감싸며, 그의 마음 속 깊은 곳에 있는 꿈과 희망을 불러일으켰습니다.\n 림순은 미소 지으며 앞으로 나아갔습니다.림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. 림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. \n 바람은 여전히 그를 감싸며, 그의 마음 속 깊은 곳에 있는 꿈과 희망을 불러일으켰습니다.\n 림순은 미소 지으며 앞으로 나아갔습니다.림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. ';
 
 export const DETAILED_REVIEW_MOCK_DATA: DetailReviewData = {
   id: 123456,
   createdAt: new Date('2024-07-16'),
-  isPublic: false,
-  reviewerGroup: {
-    id: 123456,
-    name: 'review-me',
-    description: 'vite 쓰고 싶다.',
-    thumnailUrl: '',
-  },
-  reviews: [
+  revieweeName: 'badahertz52',
+  projectName: 'review-me',
+  contents: [
     {
+      id: 1,
       question: '[공개] 동료의 개발 역량 향상을 위해 피드백을 남겨 주세요.',
       answer: ANSWER,
     },
-    { question: '[공개] 동료의 소프트 스킬의 성장을 위해 피드백을 남겨 주세요.', answer: ANSWER },
-    { question: '[비공개] 팀 동료로 근무한다면 같이 일 하고 싶은 개발자인가요?', answer: ANSWER },
+
+    { id: 2, question: '[공개] 동료의 소프트 스킬의 성장을 위해 피드백을 남겨 주세요.', answer: ANSWER },
+    { id: 3, question: '[비공개] 팀 동료로 근무한다면 같이 일 하고 싶은 개발자인가요?', answer: ANSWER },
+  ],
+  keywords: [
+    { id: 11, detail: '친절해요' },
+    { id: 22, detail: '이야기를 잘 들어줘요.' },
   ],
-  keywords: ['친절해요', '친절합니다!', '친절해요요요요요', '친절해해해해해', '친절해요요용'],
 };