[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/App.tsx

@@ -1,6 +1,6 @@
 import { Outlet } from 'react-router';
 
-import { Main, PageLayout, Sidebar, Topbar, SideModal } from './components';
+import { Main, PageLayout, Sidebar, Topbar, SideModal, ErrorSuspenseContainer } from './components';
 import { useSidebar } from './hooks';
 
 const App = () => {
@@ -15,7 +15,9 @@ const App = () => {
       )}
       <Topbar openSidebar={openSidebar} />
       <Main>
-        <Outlet />
+        <ErrorSuspenseContainer>
+          <Outlet />
+        </ErrorSuspenseContainer>
       </Main>
     </PageLayout>
   );

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,5 @@
-import { ReviewData, WritingReviewInfoData } from '@/types';
+//리뷰 작성
+import { DetailReviewData, ReviewData, WritingReviewInfoData } from '@/types';
 
 import createApiErrorMessage from './apiErrorMessageCreator';
 import endPoint from './endpoints';
@@ -46,7 +47,7 @@ export const getDetailedReviewApi = async ({ reviewId, memberId }: { reviewId: n
     throw new Error(createApiErrorMessage(response.status));
   }
 
-  const data = await response.json();
+  const data: DetailReviewData = await response.json();
   return data;
 };
 

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

@@ -37,16 +37,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>
+        {buttons.map((button) => (
+          <Button
+            key={button.text}
+            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,4 +1,5 @@
 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';
@@ -12,6 +13,17 @@ 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: '/',
@@ -42,9 +54,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,16 +1,27 @@
 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'),
+  revieweeName: 'badahertz52',
   isPublic: false,
   reviewerGroup: {
     id: 123456,
     name: 'review-me',
-    description: 'vite 쓰고 싶다.',
+    description: '',
     thumnailUrl: '',
   },
   reviews: [

frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx

@@ -7,15 +7,18 @@ import LockToggle from '../LockToggle';
 import * as S from './styles';
 
 const PROJECT_IMAGE_SIZE = '6rem';
+const DATE_TITLE = '리뷰 작성일';
 
 interface ReviewDescriptionProps extends Omit<ProjectImgProps, '$size'>, Omit<ReviewDateProps, 'dateTitle'> {
   isPublic: boolean;
+  revieweeName: string;
   handleClickToggleButton: () => void;
 }
 
 const ReviewDescription = ({
   thumbnailUrl,
   projectName,
+  revieweeName,
   isPublic,
   date,
   handleClickToggleButton,
@@ -24,14 +27,19 @@ const ReviewDescription = ({
     <S.Description>
       <S.DescriptionSide>
         <ProjectImg thumbnailUrl={thumbnailUrl} projectName={projectName} $size={PROJECT_IMAGE_SIZE} />
-        <S.ProjectNameAndDateContainer>
+        <S.ProjectInfoContainer>
           <S.ProjectName>{projectName}</S.ProjectName>
-          <ReviewDate date={date} dateTitle="리뷰 작성일" />
-        </S.ProjectNameAndDateContainer>
+          <S.RevieweeNameAndDateContainer>
+            <S.RevieweeNameWrapper>
+              <S.RevieweeName>{revieweeName}</S.RevieweeName>에 대한 리뷰입니다!
+            </S.RevieweeNameWrapper>
+            <ReviewDate date={date} dateTitle={DATE_TITLE} />
+          </S.RevieweeNameAndDateContainer>
+        </S.ProjectInfoContainer>
       </S.DescriptionSide>
-      <S.DescriptionSide>
+      {/* 시현 때 숨김 <S.DescriptionSide>
         <LockToggle $isPublic={isPublic} handleClickToggleButton={handleClickToggleButton} />
-      </S.DescriptionSide>
+      </S.DescriptionSide> */}
     </S.Description>
   );
 };