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

…m-12-ReviewRanger-FE into REV-396/생성한-리뷰-관리-디자인-수정

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/components/Input/index.tsx

@@ -32,8 +32,8 @@ const Input = ({
     <div
       className={`flex ${className} ${w} max-w-xs flex-col justify-center gap-[0.44rem] rounded-md border border-gray-100 bg-main-yellow px-[0.63rem] pb-[0.69rem] pt-[0.31rem] focus-within:border-black dark:border-gray-300 dark:bg-main-red-200 dark:focus-within:border-white`}
     >
-      <div className="flex flex-row justify-between">
-        <div className="h-4 text-xs text-gray-200 dark:text-gray-100 md:text-sm">
+      <div className="flex flex-row justify-between gap-2">
+        <div className="h-4 shrink-0 text-xs text-gray-200 dark:text-gray-100 md:text-sm">
           {INPUT_TYPE[type].TITLE}
         </div>
         {message && (

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/MyPage/hooks/useEditNameCheck.ts

@@ -1,3 +1,4 @@
+import { isAxiosError } from 'axios'
 import { Dispatch, SetStateAction, useRef, useState } from 'react'
 import { useToast } from '@/hooks'
 import { useEditName, useUser } from '@/apis/hooks'
@@ -57,17 +58,18 @@ const useEditNameCheck = ({
 
           await refetch()
 
-          if (nameRef.current) {
-            nameRef.current.click()
-          }
-
           setEditNameButton(false)
           setName('')
           addToast({
             message: '이름 변경이 완료되었습니다.',
             type: 'success',
           })
         },
+        onError: (error) => {
+          if (isAxiosError(error)) {
+            addToast({ message: error.response?.data.message, type: 'error' })
+          }
+        },
       },
     )
   }

src/pages/MyPage/hooks/useEditPasswordCheck.ts

@@ -1,3 +1,4 @@
+import { isAxiosError } from 'axios'
 import { useRef, useState } from 'react'
 import { useToast } from '@/hooks'
 import { useEditPassword } from '@/apis/hooks'
@@ -46,6 +47,11 @@ const useEditPasswordCheck = ({
             type: 'success',
           })
         },
+        onError: (error) => {
+          if (isAxiosError(error)) {
+            addToast({ message: error.response?.data.message, type: 'error' })
+          }
+        },
       },
     )
   }

src/pages/MyPage/index.tsx

@@ -134,7 +134,7 @@ const MyPage = () => {
             </div>
           ) : (
             <div className="relative flex items-center">
-              <div className="text-xl text-black dark:text-white md:text-3xl">
+              <div className="text-2xl text-black dark:text-white md:text-3xl">
                 {user?.name}
               </div>
               <div className="absolute -right-8 flex h-6 w-6 items-center justify-center rounded-full border bg-white dark:bg-main-red-200 md:-right-9 md:h-7 md:w-7">
@@ -145,7 +145,7 @@ const MyPage = () => {
               </div>
             </div>
           )}
-          <div className="text-sm text-gray-300 dark:text-white md:text-lg">
+          <div className="text-base text-gray-300 dark:text-white md:text-xl">
             {user?.email}
           </div>
         </div>
@@ -193,7 +193,10 @@ const MyPage = () => {
         modalId="edit-name"
         content={`'${name}'로 이름을 변경하시겠습니까?`}
         label="변경"
-        handleClickLabel={handleChangeNameComplete}
+        handleClickLabel={() => {
+          nameRef.current?.click()
+          handleChangeNameComplete()
+        }}
       />
       <Modal
         modalId="edit-password"

src/pages/ReviewReplyPage/components/ReviewReplyEdit/ReviewReply.tsx

@@ -46,7 +46,7 @@ const ReviewReply = ({ reviewData, handleSubmit }: ReviewReplyProps) => {
   })
 
   const { individualReplyCompletes, allReplyComplete, checkReplyComplete } =
-    useReplyComplete({ receivers, selectedReceiverIndex })
+    useReplyComplete({ receivers, selectedReceiverIndex, editPage: true })
 
   const questionArray = questions.map((question, index) => (
     <Questions

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

src/pages/ReviewReplyPage/hooks/useReplyComplete.ts

@@ -6,16 +6,18 @@ import { ReviewReplyEditType } from '../types'
 interface UseReplyCompleteProps {
   receivers: Receiver[]
   selectedReceiverIndex: number
+  editPage?: boolean
 }
 
 const useReplyComplete = ({
   receivers,
   selectedReceiverIndex,
+  editPage = false,
 }: UseReplyCompleteProps) => {
   const [individualReplyCompletes, setIndividualReplyCompletes] = useState<
     boolean[]
-  >(Array(receivers.length).fill(false))
-  const [allReplyComplete, setAllReplyComplete] = useState<boolean>(false)
+  >(Array(receivers.length).fill(editPage))
+  const [allReplyComplete, setAllReplyComplete] = useState<boolean>(editPage)
   const { getValues } = useFormContext<ReviewReplyEditType>()
 
   const checkReplyComplete = useCallback(() => {
@@ -34,7 +36,11 @@ const useReplyComplete = ({
     setAllReplyComplete(individualReplyCompletes.every((value) => value))
   }, [individualReplyCompletes])
 
-  return { individualReplyCompletes, allReplyComplete, checkReplyComplete }
+  return {
+    individualReplyCompletes,
+    allReplyComplete,
+    checkReplyComplete,
+  }
 }
 
 export default useReplyComplete