feat: 답변 페이지 뒤로가기 기능 추가 (#98)

prgrms-web-devcourse · Nov 30, 2023 · e9fe99b · e9fe99b
1 parent fcae5d6
commit e9fe99b
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 59 deletions.
diff --git a/src/pages/ReviewReplyPage/components/ReviewReplyEdit/index.tsx b/src/pages/ReviewReplyPage/components/ReviewReplyEdit/index.tsx
@@ -2,7 +2,7 @@ import { useState, useRef, useEffect } from 'react'
 import { FormProvider, useForm, useFieldArray } from 'react-hook-form'
 import { useNavigate, useLocation } from 'react-router-dom'
 import { useToast } from '@/hooks'
-import { Modal } from '@/components'
+import { Header, Modal } from '@/components'
 import {
   useEditResponse,
   useGetReviewForParticipation,
@@ -122,25 +122,28 @@ const ReviewReplyEdit = () => {
   }
 
   return (
-    <div className="flex h-full w-full max-w-[37.5rem] flex-col p-5 text-black">
-      <h1 className="text-lg dark:text-white md:text-2xl">{title}</h1>
-      {!initModal && (
-        <FormProvider {...methods}>
-          <ReviewReply
-            reviewData={reviewData}
-            handleSubmit={handleSubmitReply}
-          />
-        </FormProvider>
-      )}
-      <label ref={labelRef} htmlFor="review-previous-reply-load" />
-      <Modal
-        modalId="review-previous-reply-load"
-        content={`이전에 작성한 답변이 남아 있습니다.\n계속 진행하시겠습니까?`}
-        label="확인"
-        handleClickLabel={handleClickModal}
-        handleClose={handleClickCancelModal}
-      />
-    </div>
+    <>
+      <Header />
+      <div className="flex h-full w-full max-w-[37.5rem] flex-col p-5 text-black">
+        <h1 className="text-lg dark:text-white md:text-2xl">{title}</h1>
+        {!initModal && (
+          <FormProvider {...methods}>
+            <ReviewReply
+              reviewData={reviewData}
+              handleSubmit={handleSubmitReply}
+            />
+          </FormProvider>
+        )}
+        <label ref={labelRef} htmlFor="review-previous-reply-load" />
+        <Modal
+          modalId="review-previous-reply-load"
+          content={`이전에 작성한 답변이 남아 있습니다.\n계속 진행하시겠습니까?`}
+          label="확인"
+          handleClickLabel={handleClickModal}
+          handleClose={handleClickCancelModal}
+        />
+      </div>
+    </>
   )
 }
 

diff --git a/src/pages/ReviewReplyPage/components/ReviewReplyEnd/index.tsx b/src/pages/ReviewReplyPage/components/ReviewReplyEnd/index.tsx
@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect } from 'react'
 import { FormProvider, useForm, useFieldArray } from 'react-hook-form'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { Modal } from '@/components'
+import { Header, Modal } from '@/components'
 import {
   useGetReviewForParticipation,
   useUser,
@@ -96,22 +96,25 @@ const ReviewReplyEnd = () => {
   }
 
   return (
-    <div className="flex h-full w-full max-w-[37.5rem] flex-col p-5 text-black">
-      <h1 className="text-lg dark:text-white md:text-2xl">{title}</h1>
-      {!initModal && (
-        <FormProvider {...methods}>
-          <ReviewReply reviewData={reviewData} />
-        </FormProvider>
-      )}
-      <label ref={labelRef} htmlFor="review-previous-reply-load" />
-      <Modal
-        modalId="review-previous-reply-load"
-        content={`이미 종료된 설문입니다.\n답변하신 내용을 확인하시겠습니까?`}
-        label="확인"
-        handleClickLabel={handleClickModal}
-        handleClose={handleClickCancelModal}
-      />
-    </div>
+    <>
+      <Header />
+      <div className="flex h-full w-full max-w-[37.5rem] flex-col p-5 text-black">
+        <h1 className="text-lg dark:text-white md:text-2xl">{title}</h1>
+        {!initModal && (
+          <FormProvider {...methods}>
+            <ReviewReply reviewData={reviewData} />
+          </FormProvider>
+        )}
+        <label ref={labelRef} htmlFor="review-previous-reply-load" />
+        <Modal
+          modalId="review-previous-reply-load"
+          content={`이미 종료된 설문입니다.\n답변하신 내용을 확인하시겠습니까?`}
+          label="확인"
+          handleClickLabel={handleClickModal}
+          handleClose={handleClickCancelModal}
+        />
+      </div>
+    </>
   )
 }
 

diff --git a/src/pages/ReviewReplyPage/components/ReviewReplyStart/index.tsx b/src/pages/ReviewReplyPage/components/ReviewReplyStart/index.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { useNavigate, useLocation } from 'react-router-dom'
 import { useToast } from '@/hooks'
+import { Header } from '@/components'
 import { useCreateResponse, useGetReviewForParticipation } from '@/apis/hooks'
 import { ReviewReplyStartType } from '../../types'
 import ReviewReply from './ReviewReply'
@@ -42,29 +43,41 @@ const ReviewReplyStart = () => {
     })
   }
 
+  const handleGoBack = () => {
+    if (reviewStep === 1) {
+      navigate('/')
+
+      return
+    }
+    setReviewStep(reviewStep - 1)
+  }
+
   return (
-    <div className="flex h-full w-full max-w-[37.5rem] flex-col p-5 text-black">
-      <h1 className="text-lg dark:text-white md:text-2xl">{title}</h1>
-      {reviewStep === 1 && (
-        <p className="mt-2.5 whitespace-pre-wrap text-sm dark:text-white md:text-lg">
-          {description}
-        </p>
-      )}
-      <FormProvider {...methods}>
+    <>
+      <Header handleGoBack={handleGoBack} />
+      <div className="flex h-full w-full max-w-[37.5rem] flex-col p-5 text-black">
+        <h1 className="text-lg dark:text-white md:text-2xl">{title}</h1>
         {reviewStep === 1 && (
-          <ReceiverSelect
-            setReviewStep={setReviewStep}
-            questions={reviewData.questions}
-          />
-        )}
-        {reviewStep === 2 && (
-          <ReviewReply
-            reviewData={reviewData}
-            handleSubmit={handleSubmitReply}
-          />
+          <p className="mt-2.5 whitespace-pre-wrap text-sm dark:text-white md:text-lg">
+            {description}
+          </p>
         )}
-      </FormProvider>
-    </div>
+        <FormProvider {...methods}>
+          {reviewStep === 1 && (
+            <ReceiverSelect
+              setReviewStep={setReviewStep}
+              questions={reviewData.questions}
+            />
+          )}
+          {reviewStep === 2 && (
+            <ReviewReply
+              reviewData={reviewData}
+              handleSubmit={handleSubmitReply}
+            />
+          )}
+        </FormProvider>
+      </div>
+    </>
   )
 }
 

diff --git a/src/pages/ReviewReplyPage/index.tsx b/src/pages/ReviewReplyPage/index.tsx
@@ -1,5 +1,4 @@
 import { useLocation } from 'react-router-dom'
-import { Header } from '@/components'
 import { ReviewReplyEdit, ReviewReplyEnd, ReviewReplyStart } from './components'
 
 const ReviewReplyPage = () => {
@@ -8,7 +7,6 @@ const ReviewReplyPage = () => {
 
   return (
     <div className="flex h-screen flex-col items-center overflow-auto bg-main-ivory dark:bg-main-red-100">
-      <Header />
       {reviewStatus === 'PROCEEDING' &&
         (!submitStatus ? <ReviewReplyStart /> : <ReviewReplyEdit />)}
       {(reviewStatus === 'END' || reviewStatus === 'DEADLINE') && (