From e8027cfbb9bd92e4039d7ecfa9cd208430804adb Mon Sep 17 00:00:00 2001
From: badahertz52 <badahertz52@gmail.com>
Date: Mon, 19 Aug 2024 17:45:47 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20feat:=20=EB=A6=AC=EB=B7=B0=20=EC=97=B0?=
 =?UTF-8?q?=EA=B2=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EB=A6=AC=EB=B7=B0=EC=9D=B4,=ED=94=84=EB=A1=9C=EC=A0=9D?=
 =?UTF-8?q?=ED=8A=B8=20=EC=9D=B4=EB=A6=84=EC=9D=84=20=EA=B0=80=EC=A0=B8?=
 =?UTF-8?q?=EC=98=A4=EB=8A=94=20api=20=EC=A0=81=EC=9A=A9=20(#432)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: RevieGroupTestPage 삭제

* feat: 리뷰 연결 페이지에서 리뷰이, 프로젝트 이름을 가져오는 api를 연결

* design: ReviewGuide 디자인 수정

- 리뷰이,프로젝트명이 길어질 경우를 대비해 overflow-wrap 추가

* refactor: 줄 바꿈
---
 frontend/src/index.tsx                      | 10 ----------
 frontend/src/pages/ReviewGroupTestPage.tsx  | 19 -------------------
 frontend/src/pages/ReviewZonePage/index.tsx | 14 ++++++++++++--
 frontend/src/pages/ReviewZonePage/styles.ts |  4 +---
 4 files changed, 13 insertions(+), 34 deletions(-)
 delete mode 100644 frontend/src/pages/ReviewGroupTestPage.tsx

diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 07b7a5d86..20982644e 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -21,7 +21,6 @@ import { ErrorSuspenseContainer } from './components';
 import { DEV_ENVIRONMENT, ROUTE_PARAM } from './constants';
 import { ROUTES } from './constants/routes';
 import PasswordTestPage from './pages/PasswordTestPage';
-import ReviewGroupTestPage from './pages/ReviewGroupTestPage';
 import globalStyles from './styles/globalStyles';
 import theme from './styles/theme';
 
@@ -77,15 +76,6 @@ const router = createBrowserRouter([
         path: 'password-check/:reviewRequestCode',
         element: <PasswordTestPage />,
       },
-      {
-        // 삭제 예정
-        path: `review-group-test/:${ROUTE_PARAM.reviewRequestCode}`,
-        element: (
-          <ErrorSuspenseContainer>
-            <ReviewGroupTestPage />
-          </ErrorSuspenseContainer>
-        ),
-      },
       {
         path: `${ROUTES.reviewZone}/:${ROUTE_PARAM.reviewRequestCode}`, // NOTE: 임시 경로, 추후 논의 및 상수화 필요
         element: (
diff --git a/frontend/src/pages/ReviewGroupTestPage.tsx b/frontend/src/pages/ReviewGroupTestPage.tsx
deleted file mode 100644
index e42b65c0d..000000000
--- a/frontend/src/pages/ReviewGroupTestPage.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useGetReviewGroupData, useSearchParamAndQuery } from '@/hooks';
-// 아직 develop에 리뷰 연결 페이지가 머지되지 않아서 리뷰 그룹 정보를 잘 가져오는 지 확인하기 위한 테스트 페이지로, 삭제 예정입니다.
-const ReviewGroupTestPage = () => {
-  const { param: reviewRequestCode } = useSearchParamAndQuery({
-    paramKey: 'reviewRequestCode',
-  });
-  if (!reviewRequestCode) throw new Error('유효하지 않은 리뷰 요청 코드입니다.');
-
-  const { data } = useGetReviewGroupData({ reviewRequestCode });
-
-  return (
-    <div>
-      <div>리뷰이:{data.revieweeName}</div>
-      <div>프로젝트:{data.projectName}</div>
-    </div>
-  );
-};
-
-export default ReviewGroupTestPage;
diff --git a/frontend/src/pages/ReviewZonePage/index.tsx b/frontend/src/pages/ReviewZonePage/index.tsx
index c8e33a181..7e4e265b9 100644
--- a/frontend/src/pages/ReviewZonePage/index.tsx
+++ b/frontend/src/pages/ReviewZonePage/index.tsx
@@ -4,6 +4,7 @@ import ReviewZoneIcon from '@/assets/reviewZone.svg';
 import { Button } from '@/components';
 // TODO: ROUTES 상수명을 단수로 고치기
 import { ROUTES } from '@/constants/routes';
+import { useGetReviewGroupData, useSearchParamAndQuery } from '@/hooks';
 import useModals from '@/hooks/useModals';
 
 import PasswordModal from './components/PasswordModal';
@@ -15,8 +16,17 @@ const MODAL_KEYS = {
 
 const ReviewZonePage = () => {
   const { isOpen, openModal, closeModal } = useModals();
+
   const navigate = useNavigate();
 
+  const { param: reviewRequestCode } = useSearchParamAndQuery({
+    paramKey: 'reviewRequestCode',
+  });
+
+  if (!reviewRequestCode) throw new Error('유효하지 않은 리뷰 요청 코드입니다.');
+
+  const { data: reviewGroupData } = useGetReviewGroupData({ reviewRequestCode });
+
   const handleReviewWritingButtonClick = () => {
     navigate(`/${ROUTES.reviewWriting}/ABCD1234`);
   };
@@ -30,8 +40,8 @@ const ReviewZonePage = () => {
       <S.ReviewZoneMainImg src={ReviewZoneIcon} alt="" />
       <S.ReviewGuideContainer>
         {/* NOTE: 추후 API 연동되면 서버에서 받아온 이름들을 출력하도록 수정해야 함 */}
-        <S.ReviewGuide>{`${'임시 프로젝트 이름'}를 함께한`}</S.ReviewGuide>
-        <S.ReviewGuide>{`${'임시 리뷰이 이름'}의 리뷰 공간이에요`}</S.ReviewGuide>
+        <S.ReviewGuide>{`${reviewGroupData.projectName}를 함께한`}</S.ReviewGuide>
+        <S.ReviewGuide>{`${reviewGroupData.revieweeName}의 리뷰 공간이에요`}</S.ReviewGuide>
       </S.ReviewGuideContainer>
       <S.ButtonContainer>
         <Button
diff --git a/frontend/src/pages/ReviewZonePage/styles.ts b/frontend/src/pages/ReviewZonePage/styles.ts
index f96757b88..672b038c2 100644
--- a/frontend/src/pages/ReviewZonePage/styles.ts
+++ b/frontend/src/pages/ReviewZonePage/styles.ts
@@ -15,22 +15,20 @@ export const ReviewZoneMainImg = styled.img`
 export const ReviewGuideContainer = styled.div`
   display: flex;
   flex-direction: column;
-
   width: 28rem;
-
   padding-left: 0.2rem;
 `;
 
 export const ReviewGuide = styled.p`
   font-size: 2.2rem;
   font-weight: ${({ theme }) => theme.fontWeight.bold};
+  overflow-wrap: break-word;
 `;
 
 export const ButtonContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 3rem;
-
   margin-top: 1.5rem;
 `;