refactor: 헤더 뒤로가기 방지 기능 리팩토링 (#111)

* refactor: 뒤로가기 방지 핸들러 구현

* style: 모달 줄바꿈 처리

src/components/Header/index.tsx

@@ -1,6 +1,6 @@
-import { memo } from 'react'
+import { memo, useRef, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { useDarkMode, useToast, useCheckHeaderRoute } from '@/hooks'
+import { useDarkMode, useToast } from '@/hooks'
 import { useUser, useLogout } from '@/apis/hooks'
 import {
   LogoRowIcon,
@@ -27,6 +27,10 @@ const Header = memo(({ handleGoBack }: HeaderProps) => {
   const { addToast } = useToast()
   const { toggle, darkMode } = useDarkMode()
 
+  const [toPath, setToPath] = useState<string | number>('')
+
+  const labelRef = useRef<HTMLLabelElement>(null)
+
   const avatarVisible = pathname !== '/sign-up' && pathname !== '/login'
   const goBackVisible = pathname !== '/login' && pathname !== '/'
 
@@ -38,39 +42,41 @@ const Header = memo(({ handleGoBack }: HeaderProps) => {
       },
     })
   }
-  const { myPageButtonClicked, logoButtonClicked } = useCheckHeaderRoute()
+
+  const handleNavigate = (path: string | number) => {
+    if (
+      pathname.includes('review-response') ||
+      pathname.includes('review-creation')
+    ) {
+      setToPath(path)
+      labelRef.current?.click()
+
+      return
+    }
+
+    navigate(path as string)
+  }
 
   return (
     <div className="sticky top-0 z-30 flex h-12 w-full shrink-0 justify-center bg-main-red-300 py-4 md:h-20">
       <div className="relative flex w-[55rem] items-center justify-between px-6">
-        <div className="cursor-pointer" onClick={handleGoBack}>
-          <label
-            htmlFor="prevpage"
-            className="flex cursor-pointer items-center"
-          >
-            <ArrowLeftIcon className={`${!goBackVisible && 'hidden'}`} />
-          </label>
+        <div
+          className="cursor-pointer"
+          onClick={handleGoBack ?? (() => handleNavigate(-1))}
+        >
+          <ArrowLeftIcon className={`${!goBackVisible && 'hidden'}`} />
         </div>
         <div
           className="absolute left-1/2 flex -translate-x-1/2 cursor-pointer items-center gap-1"
-          onClick={() => {
-            if (!logoButtonClicked) {
-              navigate('/')
-            }
-          }}
+          onClick={() => handleNavigate('/')}
         >
-          <label
-            htmlFor={`${logoButtonClicked ? 'mainpage' : ''}`}
-            className="flex cursor-pointer items-center"
-          >
-            <img
-              src={rangerCleanHead}
-              alt="ranger-header"
-              className="h-6 w-6 md:h-8 md:w-8"
-            />
-            <LogoShortIcon className="ml-1 h-7 w-8 md:hidden" />
-            <LogoRowIcon className="hidden h-11 w-60 md:block" />
-          </label>
+          <img
+            src={rangerCleanHead}
+            alt="ranger-header"
+            className="h-6 w-6 md:h-8 md:w-8"
+          />
+          <LogoShortIcon className="ml-1 h-7 w-8 md:hidden" />
+          <LogoRowIcon className="hidden h-11 w-60 md:block" />
         </div>
         <div className="flex items-center gap-x-3 md:gap-x-5">
           <div
@@ -100,18 +106,8 @@ const Header = memo(({ handleGoBack }: HeaderProps) => {
                     <p className="text-xl">{user.name}</p>
                   </Dropdown.Item>
                   <Dropdown.Divider />
-                  <Dropdown.Item>
-                    <label
-                      htmlFor={`${myPageButtonClicked ? 'mypage' : ''}`}
-                      className="cursor-pointer"
-                      onClick={() => {
-                        if (!myPageButtonClicked) {
-                          navigate('/profile')
-                        }
-                      }}
-                    >
-                      마이페이지
-                    </label>
+                  <Dropdown.Item onClick={() => handleNavigate('/profile')}>
+                    마이페이지
                   </Dropdown.Item>
                   <Dropdown.Item
                     onClick={() =>
@@ -138,21 +134,13 @@ const Header = memo(({ handleGoBack }: HeaderProps) => {
                 handleClickLabel={handleLogout}
               />
 
+              <label htmlFor="prompt" ref={labelRef} className="hidden" />
               <Modal
-                modalId="mypage"
-                content={`페이지를 벗어나면 지금까지 작성한 내용이 모두 삭제됩니다.\n\n 이동하시겠습니까?`}
-                label="이동하기"
-                handleClickLabel={() => {
-                  navigate('/profile')
-                }}
-              />
-
-              <Modal
-                modalId="mainpage"
-                content={`페이지를 벗어나면 지금까지 작성한 내용이 모두 삭제됩니다.\n\n 이동하시겠습니까?`}
+                modalId="prompt"
+                content={`페이지를 벗어나면 지금까지\n작성한 내용이 모두 삭제됩니다.\n\n 이동하시겠습니까?`}
                 label="이동하기"
                 handleClickLabel={() => {
-                  navigate('/')
+                  navigate(toPath as string)
                 }}
               />
             </>

src/hooks/index.ts

@@ -5,5 +5,4 @@ export { default as useDarkMode } from './useDarkMode'
 export { default as useToast } from './useToast'
 export { default as useInfiniteScroll } from './useInfiniteScroll'
 export { default as useRefine } from './useRefine'
-export { default as useCheckHeaderRoute } from './useCheckHeaderRoute'
 export { default as useTabs } from './useTabs'

src/pages/ReviewReplyPage/components/ReviewReplyStart/ReceiverSelect.tsx

@@ -205,7 +205,7 @@ const ReceiverSelect = ({ setReviewStep, questions }: ReceiverSelectProps) => {
       <label htmlFor="select-receiver" ref={modalLabelRef}></label>
       <Modal
         modalId="select-receiver"
-        content={`선택하신 수신자는 이후 변경할 수 없습니다.\n\n리뷰 대상자를 총 ${receivers.length}명 고르셨습니다.`}
+        content={`선택하신 수신자는\n이후 변경할 수 없습니다.\n\n리뷰 대상자를 총 ${receivers.length}명 고르셨습니다.`}
         label="확인"
         handleClickLabel={completeReceiverSelect}
       />

src/pages/ReviewReplyPage/components/ReviewReplyStart/index.tsx

@@ -1,8 +1,8 @@
-import { useRef, useState } from 'react'
+import { useState } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { useNavigate, useLocation } from 'react-router-dom'
 import { useToast } from '@/hooks'
-import { Header, Modal } from '@/components'
+import { Header } from '@/components'
 import { useCreateResponse, useGetReviewForParticipation } from '@/apis/hooks'
 import { ReviewReplyStartType } from '../../types'
 import ReceiverSelect from './ReceiverSelect'
@@ -14,7 +14,6 @@ const ReviewReplyStart = () => {
   const { pathname, state } = useLocation()
   const reviewId = parseInt(pathname.split('/').at(-1) as string)
   const [reviewStep, setReviewStep] = useState(1)
-  const goBackLabelRef = useRef<HTMLLabelElement>(null)
 
   const { data: reviewData } = useGetReviewForParticipation({ id: reviewId })
   const { mutate: createResponse } = useCreateResponse()
@@ -44,21 +43,9 @@ const ReviewReplyStart = () => {
     })
   }
 
-  const handleGoBack = () => {
-    if (reviewStep === 1) {
-      navigate('/')
-
-      return
-    }
-
-    if (goBackLabelRef.current) {
-      goBackLabelRef.current.click()
-    }
-  }
-
   return (
     <>
-      <Header handleGoBack={handleGoBack} />
+      <Header />
       <div className="flex h-full w-full max-w-[37.5rem] flex-col p-5 text-black">
         <h1 className="text-2xl font-bold dark:text-white md:text-4xl">
           {title}
@@ -81,13 +68,6 @@ const ReviewReplyStart = () => {
               handleSubmit={handleSubmitReply}
             />
           )}
-          <label htmlFor="go-back" ref={goBackLabelRef}></label>
-          <Modal
-            modalId="go-back"
-            content={`페이지를 벗어나면 지금까지 작성한 내용이 모두 삭제됩니다.\n\n뒤로 가시겠습니까?`}
-            label="뒤로 가기"
-            handleClickLabel={() => navigate('/')}
-          />
         </FormProvider>
       </div>
     </>