[FE] fix: 리뷰 연결 페이지 이름 수정 및 EyeButton이 가려지는 문제 해결

frontend/src/constants/routes.ts

@@ -5,5 +5,5 @@ export const ROUTES = {
   reviewWriting: 'user/review-writing',
   reviewWritingComplete: 'user/review-writing-complete',
   detailedReview: 'user/detailed-review',
-  reviewDashboard: 'user/reviewDashboard',
+  reviewZone: 'user/review-zone',
 };

frontend/src/index.tsx

@@ -14,7 +14,7 @@ import {
   ReviewListPage,
   ReviewWritingCompletePage,
   ReviewWritingCardFormPage,
-  ReviewDashboardPage,
+  ReviewZonePage,
 } from '@/pages';
 
 import { ErrorSuspenseContainer } from './components';
@@ -87,10 +87,10 @@ const router = createBrowserRouter([
         ),
       },
       {
-        path: `user/reviewDashboard/:${ROUTE_PARAM.reviewRequestCode}`, // NOTE: 임시 경로, 추후 논의 및 상수화 필요
+        path: `${ROUTES.reviewZone}/:${ROUTE_PARAM.reviewRequestCode}`, // NOTE: 임시 경로, 추후 논의 및 상수화 필요
         element: (
           <ErrorSuspenseContainer>
-            <ReviewDashboardPage />
+            <ReviewZonePage />
           </ErrorSuspenseContainer>
         ),
       },

frontend/src/pages/HomePage/components/ReviewDashboardURLModal/index.tsx → frontend/src/pages/HomePage/components/ReviewZoneURLModal/index.tsx

@@ -6,12 +6,12 @@ import Checkbox from '@/components/common/Checkbox';
 import { CopyTextButton } from '../index';
 
 import * as S from './styles';
-interface ReviewDashboardURLModalProps {
-  reviewDashboardURL: string;
+interface ReviewZoneURLModalProps {
+  reviewZoneURL: string;
   closeModal: () => void;
 }
 
-const ReviewURLModal = ({ reviewDashboardURL, closeModal }: ReviewDashboardURLModalProps) => {
+const ReviewZoneURLModal = ({ reviewZoneURL, closeModal }: ReviewZoneURLModalProps) => {
   const [isChecked, setIsChecked] = useState(false);
 
   const handleCheckboxClick = () => {
@@ -28,13 +28,13 @@ const ReviewURLModal = ({ reviewDashboardURL, closeModal }: ReviewDashboardURLMo
       handleClose={null}
       isClosableOnBackground={false}
     >
-      <S.ReviewDashboardURLModal>
+      <S.ReviewZoneURLModal>
         <S.ModalTitle>아래 요청 URL을 확인해주세요</S.ModalTitle>
-        <S.ReviewDashboardURLModalItem>
+        <S.ReviewZoneURLModalItem>
           <S.DataName>리뷰 요청 URL</S.DataName>
-          <S.Data>{reviewDashboardURL}</S.Data>
-          <CopyTextButton targetText={reviewDashboardURL} alt="리뷰 대시보드 페이지 링크 복사하기"></CopyTextButton>
-        </S.ReviewDashboardURLModalItem>
+          <S.Data>{reviewZoneURL}</S.Data>
+          <CopyTextButton targetText={reviewZoneURL} alt="리뷰 공간 페이지 링크 복사하기"></CopyTextButton>
+        </S.ReviewZoneURLModalItem>
         <S.CheckContainer>
           <Checkbox
             id="is-confirmed-checkbox"
@@ -45,9 +45,9 @@ const ReviewURLModal = ({ reviewDashboardURL, closeModal }: ReviewDashboardURLMo
           <S.CheckMessage>링크를 저장해두었어요!</S.CheckMessage>
         </S.CheckContainer>
         <S.WarningMessage>* 창이 닫히면 링크를 다시 확인할 수 없어요!</S.WarningMessage>
-      </S.ReviewDashboardURLModal>
+      </S.ReviewZoneURLModal>
     </AlertModal>
   );
 };
 
-export default ReviewURLModal;
+export default ReviewZoneURLModal;

frontend/src/pages/HomePage/components/ReviewDashboardURLModal/styles.ts → frontend/src/pages/HomePage/components/ReviewZoneURLModal/styles.ts

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-export const ReviewDashboardURLModal = styled.div`
+export const ReviewZoneURLModal = styled.div`
   display: flex;
   flex-direction: column;
   width: 52rem;
@@ -13,7 +13,7 @@ export const ModalTitle = styled.p`
   font-weight: ${({ theme }) => theme.fontWeight.bold};
 `;
 
-export const ReviewDashboardURLModalItem = styled.div`
+export const ReviewZoneURLModalItem = styled.div`
   display: flex;
   gap: 1.8rem;
   align-items: center;

frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx

@@ -17,7 +17,7 @@ import {
   MIN_PASSWORD_INPUT,
   isValidPasswordInput,
 } from '../../utils/validateInput';
-import { FormLayout, ReviewDashboardURLModal } from '../index';
+import { FormLayout, ReviewZoneURLModal } from '../index';
 
 import * as S from './styles';
 
@@ -39,7 +39,7 @@ const URLGeneratorForm = () => {
   // groupAccessCode로 통일하기로 했지만 이미 이 페이지에서는 pwd로 작업한 게 많아서 놔두고
   // API 요청 함수와 리액트 쿼리 코드에서는 groupAccessCode: password로 전달합니다
   const [password, setPassword] = useState('');
-  const [reviewDashboardURL, setReviewDashboardURL] = useState('');
+  const [reviewZoneURL, setReviewZoneURL] = useState('');
 
   const [revieweeNameErrorMessage, setRevieweeNameErrorMessage] = useState('');
   const [projectNameErrorMessage, setProjectNameErrorMessage] = useState('');
@@ -59,8 +59,8 @@ const URLGeneratorForm = () => {
 
     mutation.mutate(dataForReviewRequestCode, {
       onSuccess: (data) => {
-        const completeReviewDashboardURL = getCompleteReviewDashboardURL(data.reviewRequestCode);
-        setReviewDashboardURL(completeReviewDashboardURL);
+        const completeReviewZoneURL = getCompleteReviewZoneURL(data.reviewRequestCode);
+        setReviewZoneURL(completeReviewZoneURL);
 
         resetInputs();
       },
@@ -73,8 +73,8 @@ const URLGeneratorForm = () => {
     setPassword('');
   };
 
-  const getCompleteReviewDashboardURL = (reviewRequestCode: string) => {
-    return `${window.location.origin}/${ROUTES.reviewDashboard}/${reviewRequestCode}`;
+  const getCompleteReviewZoneURL = (reviewRequestCode: string) => {
+    return `${window.location.origin}/${ROUTES.reviewZone}/${reviewRequestCode}`;
   };
 
   const handleNameInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -159,7 +159,7 @@ const URLGeneratorForm = () => {
               onChange={handlePasswordInputChange}
               type={isOff ? 'password' : 'text'}
               placeholder="abc123"
-              $style={{ width: '100%' }}
+              $style={{ width: '100%', paddingRight: '3rem' }}
             />
             <EyeButton isOff={isOff} handleEyeButtonToggle={handleEyeButtonToggle} />
           </S.PasswordInputContainer>
@@ -174,10 +174,7 @@ const URLGeneratorForm = () => {
           리뷰 링크 생성하기
         </Button>
         {isOpen(MODAL_KEYS.confirm) && (
-          <ReviewDashboardURLModal
-            reviewDashboardURL={reviewDashboardURL}
-            closeModal={() => closeModal(MODAL_KEYS.confirm)}
-          />
+          <ReviewZoneURLModal reviewZoneURL={reviewZoneURL} closeModal={() => closeModal(MODAL_KEYS.confirm)} />
         )}
       </FormLayout>
     </S.URLGeneratorForm>

frontend/src/pages/HomePage/components/index.ts

@@ -1,6 +1,6 @@
 export { default as FormBody } from './FormBody';
 export { default as FormLayout } from './FormLayout';
-export { default as ReviewDashboardURLModal } from './ReviewDashboardURLModal';
+export { default as ReviewZoneURLModal } from './ReviewZoneURLModal';
 export { default as URLGeneratorForm } from './URLGeneratorForm';
 export { default as CopyTextButton } from './CopyTextButton';
 export { default as ReviewMeOverview } from './ReviewMeOverview';

frontend/src/pages/ReviewDashboardPage/components/PasswordModal/index.tsx → frontend/src/pages/ReviewZonePage/components/PasswordModal/index.tsx

@@ -1,25 +1,22 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router';
 
-import { Input, Button } from '@/components';
-// import { Input, Button, EyeButton } from '@/components';
+import { Input, Button, EyeButton } from '@/components';
 import ContentModal from '@/components/common/modals/ContentModal';
 import { ROUTES } from '@/constants/routes';
-// import { useEyeButton } from '@/hooks';
+import { useEyeButton } from '@/hooks';
 
 import * as S from './styles';
 interface PasswordModalProps {
   closeModal: () => void;
 }
 
-// NOTE : EyeButton이 있는 PR merge시 pull 받아온 뒤 주석 해제 코드 사용
-
 const PasswordModal = ({ closeModal }: PasswordModalProps) => {
   const [password, setPassword] = useState('');
   const [errorMessage, setErrorMessage] = useState('');
 
   const navigate = useNavigate();
-  //const { isOff, handleEyeButtonToggle } = useEyeButton();
+  const { isOff, handleEyeButtonToggle } = useEyeButton();
 
   const handleConfirmButtonClick = () => {
     // NOTE: 추후 이곳에 API 호출 함수 추가
@@ -35,22 +32,22 @@ const PasswordModal = ({ closeModal }: PasswordModalProps) => {
     <ContentModal handleClose={closeModal}>
       <S.PasswordModal>
         <S.ModalTitle>리뷰 확인을 위해 설정한 비밀 번호를 입력해주세요</S.ModalTitle>
-        {/* <S.InputContainer>
+        <S.InputContainer>
           <S.PasswordInputContainer>
             <Input
               id="password"
               value={password}
               onChange={handlePasswordInputChange}
               type={isOff ? 'password' : 'text'}
               placeholder="abc123"
-              $style={{ flex: '8' }}
+              $style={{ width: '100%', paddingRight: '3rem' }}
             />
             <EyeButton isOff={isOff} handleEyeButtonToggle={handleEyeButtonToggle} />
           </S.PasswordInputContainer>
           <Button styleType="primary" type="button" onClick={handleConfirmButtonClick}>
             확인
           </Button>
-        </S.InputContainer> */}
+        </S.InputContainer>
         {errorMessage && <S.ErrorMessage>{errorMessage}</S.ErrorMessage>}
       </S.PasswordModal>
     </ContentModal>

frontend/src/pages/ReviewDashboardPage/components/PasswordModal/styles.ts → frontend/src/pages/ReviewZonePage/components/PasswordModal/styles.ts

@@ -15,8 +15,9 @@ export const ModalTitle = styled.h3`
 
 export const InputContainer = styled.div`
   display: flex;
-  gap: 2rem;
+  gap: 1rem;
 
+  justify-content: space-between;
   width: 100%;
 `;
 

frontend/src/pages/ReviewDashboardPage/index.tsx → frontend/src/pages/ReviewZonePage/index.tsx

@@ -1,8 +1,7 @@
 import { useNavigate } from 'react-router';
 
-import DashboardIcon from '@/assets/dashboard.svg';
+import ReviewZoneIcon from '@/assets/reviewZone.svg';
 import { Button } from '@/components';
-
 // TODO: ROUTES 상수명을 단수로 고치기
 import { ROUTES } from '@/constants/routes';
 import useModals from '@/hooks/useModals';
@@ -14,7 +13,7 @@ const MODAL_KEYS = {
   content: 'CONTENT_MODAL',
 };
 
-const ReviewDashboardPage = () => {
+const ReviewZonePage = () => {
   const { isOpen, openModal, closeModal } = useModals();
   const navigate = useNavigate();
 
@@ -27,8 +26,8 @@ const ReviewDashboardPage = () => {
   };
 
   return (
-    <S.ReviewDashboardPage>
-      <S.DashboardMainImg src={DashboardIcon} alt="" />
+    <S.ReviewZonePage>
+      <S.ReviewZoneMainImg src={ReviewZoneIcon} alt="" />
       <S.ReviewGuideContainer>
         {/* NOTE: 추후 API 연동되면 서버에서 받아온 이름들을 출력하도록 수정해야 함 */}
         <S.ReviewGuide>{`${'임시 프로젝트 이름'}를 함께한`}</S.ReviewGuide>
@@ -59,8 +58,8 @@ const ReviewDashboardPage = () => {
         </Button>
       </S.ButtonContainer>
       {isOpen(MODAL_KEYS.content) && <PasswordModal closeModal={() => closeModal(MODAL_KEYS.content)} />}
-    </S.ReviewDashboardPage>
+    </S.ReviewZonePage>
   );
 };
 
-export default ReviewDashboardPage;
+export default ReviewZonePage;

frontend/src/pages/ReviewDashboardPage/styles.ts → frontend/src/pages/ReviewZonePage/styles.ts

@@ -1,13 +1,13 @@
 import styled from '@emotion/styled';
 
-export const ReviewDashboardPage = styled.div`
+export const ReviewZonePage = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 `;
 
-export const DashboardMainImg = styled.img`
+export const ReviewZoneMainImg = styled.img`
   width: 43rem;
   height: 23rem;
 `;

frontend/src/pages/index.tsx

@@ -5,4 +5,4 @@ export { default as LoadingPage } from './LoadingPage';
 export { default as ReviewListPage } from './ReviewListPage';
 export { default as ReviewWritingCardFormPage } from './ReviewWritingCardFromPage';
 export { default as ReviewWritingCompletePage } from './ReviewWritingCompletePage';
-export { default as ReviewDashboardPage } from './ReviewDashboardPage';
+export { default as ReviewZonePage } from './ReviewZonePage';