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

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: ['친절해요', '친절합니다!', '친절해요요요요요', '친절해해해해해', '친절해요요용'],
 };