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

…m-12-ReviewRanger-FE into REV-404/이름-변경-시-중복일-때-토스트-처리

src/apis/hooks/useSignUp.ts

@@ -7,19 +7,13 @@ interface User {
   password: string
 }
 
-interface SignUpSuccess {
+interface SignUp {
   success: boolean
 }
 
-interface SignUpFail {
-  status: string
-  errorCode: string
-  message: string
-}
-
 const useSignUp = () => {
   const signUp = async (user: User) => {
-    return await apiClient.post<SignUpSuccess | SignUpFail>('/sign-up', user)
+    return await apiClient.post<SignUp>('/sign-up', user)
   }
 
   return useMutation({ mutationFn: signUp })

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

@@ -30,10 +30,10 @@ const Input = ({
 
   return (
     <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:bg-main-red-200 dark:focus-within:border-white`}
+      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 gap-2">
-        <div className="h-4 shrink-0 text-xs text-gray-100 md:text-sm">
+        <div className="h-4 shrink-0 text-xs text-gray-200 dark:text-gray-100 md:text-sm">
           {INPUT_TYPE[type].TITLE}
         </div>
         {message && (
@@ -46,7 +46,7 @@ const Input = ({
         <input
           value={value}
           {...register}
-          className="h-4 flex-1 border-0 bg-transparent text-sm text-black focus:outline-none dark:text-white md:text-lg"
+          className="h-4 flex-1 border-0 bg-transparent text-sm text-black placeholder:text-gray-100 focus:outline-none dark:text-white md:text-lg"
           placeholder={placeholder}
           disabled={disabled}
           onChange={onChange}

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/CreatedReviewManagePage/components/AnswerGroup/RenderHexaStat.tsx

@@ -14,17 +14,18 @@ const RenderHexaStat = ({
   return (
     <>
       <div>
-        <h2 className="mb-[0.81rem] flex h-[1.375rem] w-[3rem] items-center justify-center bg-gray-300 text-sm text-white">
+        <h2 className="mb-[0.81rem] flex h-[1.375rem] w-fit items-center justify-center bg-gray-300 p-2 text-sm text-white">
           {value?.name}
         </h2>
       </div>
-      <div className="flex">
+      <div className="grid grid-cols-3 gap-4">
         {filteredAnswers.map((value) => (
-          <div className="flex w-3/6 flex-wrap gap-[0.31rem]" key={nanoid()}>
+          <div className="flex gap-[0.31rem]" key={nanoid()}>
             <img
               src={BasicProfile}
               className="avatar h-[1.25rem] w-[1.25rem] border dark:bg-white dark:fill-white"
             />
+
             <p className="text-sm">{value?.userName}</p>
             <p className="text-sm text-sub-wine">{value?.value}</p>
           </div>

src/pages/CreatedReviewManagePage/components/ReceiverTabReviewDatail/index.tsx

@@ -5,6 +5,7 @@ import {
   useSaveFinalResult,
 } from '@/apis/hooks'
 import { CloseDropDownIcon } from '@/assets/icons'
+import { scrollToTop } from '@/utils'
 import { ProfileGroup, AnswerGroup } from '..'
 import { getAnswer } from '../../utils'
 
@@ -103,6 +104,9 @@ const ReceiverReviewDetail = ({
   const responserCount = new Set(
     responseByReceiver?.map((data) => data?.responser?.id.toString()),
   )
+  useEffect(() => {
+    scrollToTop()
+  }, [])
 
   return (
     <>

src/pages/CreatedReviewManagePage/components/ResponserTabReviewDetail/index.tsx

@@ -1,10 +1,11 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import {
   useGetReviewForCreator,
   useGetResponseByResponserForCreator,
 } from '@/apis/hooks'
 import { CloseDropDownIcon } from '@/assets/icons'
 import { getAnswer } from '@/pages/CreatedReviewManagePage/utils'
+import { scrollToTop } from '@/utils'
 import { SelectResponseUser, ProfileGroup, AnswerGroup } from '..'
 
 interface ReviewDetailAccordionProps {
@@ -39,6 +40,10 @@ const ReceiverReviewDetail = ({
     (response) => response?.receiver?.name === selectedName,
   )
 
+  useEffect(() => {
+    scrollToTop()
+  }, [])
+
   return (
     <>
       <label className="overlay" htmlFor="drawer-bottom"></label>

src/pages/CreatedReviewManagePage/index.tsx

@@ -132,7 +132,10 @@ const CreatedReviewManagePage = () => {
       </div>
 
       <div className="mx-auto flex w-full max-w-[37.5rem] flex-col px-5 py-7 md:p-10">
-        <h1 className="text-xl md:text-2xl">{getReviewQuestion?.title}</h1>
+        <h1 className="text-2xl font-bold md:text-3xl">
+          {getReviewQuestion?.title}
+        </h1>
+
         <h2 className="mt-3 whitespace-pre-wrap text-sm md:mt-4 md:text-xl">
           {getReviewQuestion?.description}
         </h2>

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