fea: 헤더 페이지 이동방지 모달 (#103)

* feat: 마이페이지 이동 시 리뷰 응답, 생성 시 모달 처리

* feat: 리뷰 마감 전송시 모달 띄우기 처리

* refactor: useEffect의존성 제거

* refactor: 모달 문구 수정

* refactor: 모달 라벨 문구 수정

src/components/Header/index.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { useDarkMode, useToast } from '@/hooks'
+import { useDarkMode, useToast, useCheckHeaderRoute } from '@/hooks'
 import { useUser, useLogout } from '@/apis/hooks'
 import {
   LogoRowIcon,
@@ -38,27 +38,39 @@ const Header = memo(({ handleGoBack }: HeaderProps) => {
       },
     })
   }
+  const { myPageButtonClicked, logoButtonClicked } = useCheckHeaderRoute()
 
   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 ?? (() => navigate(-1))}
-        >
-          <ArrowLeftIcon className={`${!goBackVisible && 'hidden'}`} />
+        <div className="cursor-pointer" onClick={handleGoBack}>
+          <label
+            htmlFor="prevpage"
+            className="flex cursor-pointer items-center"
+          >
+            <ArrowLeftIcon className={`${!goBackVisible && 'hidden'}`} />
+          </label>
         </div>
         <div
           className="absolute left-1/2 flex -translate-x-1/2 cursor-pointer items-center gap-1"
-          onClick={() => navigate('/')}
+          onClick={() => {
+            if (!logoButtonClicked) {
+              navigate('/')
+            }
+          }}
         >
-          <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
+            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>
         </div>
         <div className="flex items-center gap-x-3 md:gap-x-5">
           <div
@@ -88,8 +100,18 @@ const Header = memo(({ handleGoBack }: HeaderProps) => {
                     <p className="text-xl">{user.name}</p>
                   </Dropdown.Item>
                   <Dropdown.Divider />
-                  <Dropdown.Item onClick={() => navigate('/profile')}>
-                    마이페이지
+                  <Dropdown.Item>
+                    <label
+                      htmlFor={`${myPageButtonClicked ? 'mypage' : ''}`}
+                      className="cursor-pointer"
+                      onClick={() => {
+                        if (!myPageButtonClicked) {
+                          navigate('/profile')
+                        }
+                      }}
+                    >
+                      마이페이지
+                    </label>
                   </Dropdown.Item>
                   <Dropdown.Item
                     onClick={() =>
@@ -115,6 +137,24 @@ const Header = memo(({ handleGoBack }: HeaderProps) => {
                 label="로그아웃"
                 handleClickLabel={handleLogout}
               />
+
+              <Modal
+                modalId="mypage"
+                content={`페이지를 벗어나면 지금까지 작성한 내용이 모두 삭제됩니다.\n\n 이동하시겠습니까?`}
+                label="이동하기"
+                handleClickLabel={() => {
+                  navigate('/profile')
+                }}
+              />
+
+              <Modal
+                modalId="mainpage"
+                content={`페이지를 벗어나면 지금까지 작성한 내용이 모두 삭제됩니다.\n\n 이동하시겠습니까?`}
+                label="이동하기"
+                handleClickLabel={() => {
+                  navigate('/')
+                }}
+              />
             </>
           )}
         </div>

src/hooks/index.ts

@@ -5,3 +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'

src/hooks/useCheckHeaderRoute.ts

@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+const useCheckHeaderRoute = () => {
+  const location = useLocation()
+  const [logoButtonClicked, setLogoButtonClicked] = useState<boolean>(false)
+  const [prevButtonClicked, setPrevButtonClicked] = useState<boolean>(false)
+  const [myPageButtonClicked, setMyPageButtonClicked] = useState<boolean>(false)
+
+  useEffect(() => {
+    if (
+      location.pathname === '/review-creation' ||
+      location.pathname.includes('/review-response')
+    ) {
+      setLogoButtonClicked(true)
+      setPrevButtonClicked(true)
+      setMyPageButtonClicked(true)
+    } else {
+      setLogoButtonClicked(false)
+      setPrevButtonClicked(false)
+      setMyPageButtonClicked(false)
+    }
+
+    return () => {
+      setLogoButtonClicked(false)
+      setMyPageButtonClicked(false)
+      setPrevButtonClicked(false)
+    }
+  }, [])
+
+  return { logoButtonClicked, prevButtonClicked, myPageButtonClicked }
+}
+
+export default useCheckHeaderRoute

src/pages/CreatedReviewManagePage/index.tsx

@@ -4,7 +4,7 @@ import { AxiosError } from 'axios'
 import { Suspense, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import { useToast } from '@/hooks'
-import { Header } from '@/components'
+import { Header, Modal } from '@/components'
 import {
   useCloseSurvey,
   useGetReviewForCreator,
@@ -141,9 +141,10 @@ const CreatedReviewManagePage = () => {
           <button
             className={`btn fixed bottom-10 cursor-pointer self-end rounded-md bg-active-orange text-white dark:text-black
     `}
-            onClick={handleClickSurveyClose}
           >
-            설문 마감
+            <label htmlFor="close-review" className="cursor-pointer">
+              설문 마감
+            </label>
           </button>
         )}
 
@@ -152,9 +153,10 @@ const CreatedReviewManagePage = () => {
             className={`btn fixed bottom-10 h-[2.5rem] w-[6.25rem] cursor-pointer self-end rounded-md bg-active-orange leading-[1.3125rem] text-white dark:text-black
           `}
             disabled={!checkAllReceiverReceived?.success}
-            onClick={handleClickSendSurvey}
           >
-            전송
+            <label htmlFor="send-review" className="cursor-pointer">
+              전송
+            </label>
           </button>
         )}
 
@@ -168,6 +170,18 @@ const CreatedReviewManagePage = () => {
           </button>
         )}
       </div>
+      <Modal
+        modalId="close-review"
+        handleClickLabel={handleClickSurveyClose}
+        content="설문을 마감하시겠습니까?"
+        label="마감하기"
+      />
+      <Modal
+        modalId="send-review"
+        handleClickLabel={handleClickSendSurvey}
+        content="설문을 전송하시겠습니까?"
+        label="전송하기"
+      />
     </div>
   )
 }