Merge branch 'develop' of https://github.com/prgrms-web-devcourse/Tea…

…m-12-ReviewRanger-FE into REV-399/활성화된-탭-페이지-이동-시에도-고정

src/apis/apiClient.ts

@@ -2,7 +2,7 @@ import axios from 'axios'
 import { TOKEN_KEY } from '@/constants'
 
 const apiClient = axios.create({
-  baseURL: import.meta.env.VITE_API_KEY,
+  baseURL: '/api',
 })
 
 apiClient.interceptors.request.use(

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,4 +5,5 @@ 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/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>
   )
 }

tsconfig.json

@@ -24,6 +24,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
+  "include": ["src","src/*"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

vite.config.ts

@@ -1,24 +1,37 @@
 import path from 'path'
 import react from '@vitejs/plugin-react'
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import svgr from 'vite-plugin-svgr'
 
-export default defineConfig({
-  plugins: [react(), svgr()],
-  resolve: {
-    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
-  },
+// 환경 변수 로드
+export default ({ mode }) => {
+  const env = { ...process.env, ...loadEnv(mode, process.cwd()) }
 
-  build: {
-    rollupOptions: {
-      external: (id) => {
-        if (id.includes('/node_modules/@mswjs')) {
-          return true
-        }
-        if (id.includes('/src/mocks')) {
-          return true
-        }
+  return defineConfig({
+    plugins: [react(), svgr()],
+    resolve: {
+      alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
+    },
+    build: {
+      rollupOptions: {
+        external: (id) => {
+          if (id.includes('/node_modules/@mswjs')) {
+            return true
+          }
+          if (id.includes('/src/mocks')) {
+            return true
+          }
+        },
+      },
+    },
+    server: {
+      proxy: {
+        '/api': {
+          target: env.VITE_API_KEY,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, ''),
+        },
       },
     },
-  },
-})
+  })
+}