[FE] feat: 리뷰 연결 페이지에서 리뷰이,프로젝트 이름을 가져오는 api 적용 (#432)

* chore: RevieGroupTestPage 삭제

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

* design: ReviewGuide 디자인 수정

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

* refactor: 줄 바꿈

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: (

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

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;
 `;