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

@@ -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>

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