feat: 테스트 전 피드백반영 (#90)

* feat: useRef bool -> number배열로 관리, 리뷰 전송 시 리뷰 디테일 다시 받게 설정 * refactor: 엔터 눌러도 바로 로그인 가능하게 설정 * refactor: axios 에러일 때 분기 처리 * refactor: 드롭다운 스타일 수정 * refactor: 설문 마감 시 최종 리뷰 결과 요청 전송안하게 설정 * refactor: 설문 상태에 따라 버튼 분기처리 * refactor: textarea 스타일 수정
prgrms-web-devcourse · Nov 29, 2023 · eb32a69 · eb32a69
1 parent f5d1258
commit eb32a69
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 40 deletions.
diff --git a/src/apis/hooks/useSaveFinalResult.ts b/src/apis/hooks/useSaveFinalResult.ts
@@ -16,7 +16,7 @@ const useSaveFinalResult = <T extends ReviewId>(finalResult: T) => {
 
   return useMutation({
     mutationFn: saveFinalResult,
-    onMutate: async () => {
+    onMutate: () => {
       const reviewId = finalResult.reviewId
       const userId = finalResult.userId
 

diff --git a/src/apis/hooks/useSendReview.ts b/src/apis/hooks/useSendReview.ts
@@ -1,4 +1,4 @@
-import { useMutation } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import apiClient from '@/apis/apiClient'
 
 interface Response {
@@ -8,13 +8,25 @@ interface Response {
 }
 
 //NOTE - 대상자별 조합된 리뷰 결과를 저장
-const useSendReview = () => {
-  const sendReview = async ({ reviewId }: { reviewId: string }) => {
+const useSendReview = ({ reviewId }: { reviewId: string }) => {
+  const queryClient = useQueryClient()
+
+  const prevSendResultData = queryClient.getQueryData<{
+    success: boolean
+    data: number[]
+  }>([`/final-results/${reviewId}/status`])
+
+  const sendReview = async () => {
     return await apiClient.post<Response>(`/final-results/${reviewId}`)
   }
 
   return useMutation({
     mutationFn: sendReview,
+    onSuccess: () => {
+      queryClient.setQueryData([`/final-results/${reviewId}/status`], {
+        ...prevSendResultData,
+      })
+    },
   })
 }
 export default useSendReview
diff --git a/src/pages/CreatedReviewManagePage/components/AnswerGroup/index.tsx b/src/pages/CreatedReviewManagePage/components/AnswerGroup/index.tsx
@@ -106,7 +106,7 @@ const renderResponseByQuestion = (
           <div className="flex w-full flex-col p-[0.62rem]">
             <textarea
               ref={ref}
-              className=" textarea m-0 h-auto w-full max-w-full overflow-auto  rounded-none border border-gray-200 text-sm"
+              className=" textarea m-0 h-auto w-full max-w-full overflow-auto rounded-none  border border-gray-200 bg-white text-sm"
               defaultValue={answers.map((answer) => answer.value as string)}
             ></textarea>
 

diff --git a/src/pages/CreatedReviewManagePage/components/ReceiverTabReviewDatail/index.tsx b/src/pages/CreatedReviewManagePage/components/ReceiverTabReviewDatail/index.tsx
@@ -26,7 +26,7 @@ const ReceiverReviewDetail = ({
   //NOTE - 하나라도 응답 실패했을 떄 처리
 
   const { addToast } = useToast()
-  const hasAnswered = useRef(false)
+  const hasAnswered = useRef<number[]>([])
   const { data: getReviewQuestion } = useGetReviewForCreator({
     id: Number(reviewId),
   })
@@ -88,12 +88,15 @@ const ReceiverReviewDetail = ({
 
   const { mutate: updateFinalReviewAnswer } = useUpdateFinalReviewAnswer()
   useEffect(() => {
+    if (getReviewQuestion.status === 'END') {
+      return
+    }
     if (
       !ResponserList?.includes(Number(receiverId)) &&
-      hasAnswered.current.valueOf() === false
+      !hasAnswered.current.includes(Number(receiverId))
     ) {
       saveFinalResult()
-      hasAnswered.current = true
+      hasAnswered.current = [...hasAnswered.current, Number(receiverId)]
     }
   }, [receiverId])
 
@@ -126,9 +129,12 @@ const ReceiverReviewDetail = ({
   return (
     <>
       <label htmlFor="drawer" className="overlay"></label>
-      <div className="drawer drawer-bottom m-0 flex h-5/6 w-full  flex-col items-center gap-10 overflow-auto bg-main-ivory dark:bg-main-red-100 md:h-[32rem]">
+      <div className="drawer drawer-bottom m-0 flex h-5/6 w-full  flex-col items-center gap-10 overflow-auto bg-main-ivory dark:bg-main-red-100 md:h-5/6">
         <div className="sticky top-0 z-50 flex h-[30px] w-full shrink-0 flex-col items-center justify-center bg-main-yellow dark:bg-main-red-200 sm:h-[40px]">
-          <label htmlFor="drawer-bottom" className="flex w-full justify-center">
+          <label
+            htmlFor="drawer-bottom"
+            className="flex w-full cursor-pointer justify-center"
+          >
             <CloseDropDownIcon className="h-[1rem] w-[1rem] cursor-pointer fill-black stroke-black text-black dark:fill-white dark:stroke-white dark:text-white md:h-[1.25rem] md:w-[1.25rem]" />
           </label>
         </div>

diff --git a/src/pages/CreatedReviewManagePage/components/ResponserTabReviewDetail/index.tsx b/src/pages/CreatedReviewManagePage/components/ResponserTabReviewDetail/index.tsx
@@ -42,11 +42,11 @@ const ReceiverReviewDetail = ({
   return (
     <>
       <label htmlFor="drawer" className="overlay"></label>
-      <div className="drawer drawer-bottom m-0 flex h-4/5 w-full  flex-col items-center gap-10 overflow-auto bg-main-ivory dark:bg-main-red-100 md:h-[32rem]">
+      <div className="drawer drawer-bottom m-0 flex h-5/6 w-full  flex-col items-center gap-10 overflow-auto bg-main-ivory dark:bg-main-red-100 md:h-5/6">
         <div className="sticky top-0 z-50 flex h-[30px] w-full shrink-0 flex-col items-center justify-center bg-main-yellow dark:bg-main-red-200 sm:h-[40px]">
           <label
             htmlFor="drawer-bottom"
-            className="m-0 flex w-full justify-center"
+            className="flex w-full cursor-pointer justify-center"
           >
             <CloseDropDownIcon className="h-[1rem] w-[1rem] cursor-pointer fill-black stroke-black text-black dark:fill-white dark:stroke-white dark:text-white md:h-[1.25rem] md:w-[1.25rem]" />
           </label>

diff --git a/src/pages/CreatedReviewManagePage/index.tsx b/src/pages/CreatedReviewManagePage/index.tsx
@@ -30,17 +30,18 @@ const CreatedReviewManagePage = () => {
   )
 
   //NOTE - 리뷰의 질문을 가져온다!
-  const { data: getReviewQuestion } = useGetReviewForCreator({
-    id: Number(reviewId),
-  })
+  const { data: getReviewQuestion, refetch: getUpdatdReviewQuestion } =
+    useGetReviewForCreator({
+      id: Number(reviewId),
+    })
 
   const { data: checkAllReceiverReceived } = useCheckAllReceiverReceived({
     id: reviewId,
   })
 
   const { mutate: closeReview } = useCloseSurvey({ id: reviewId })
 
-  const { mutate: sendReview } = useSendReview()
+  const { mutate: sendReview } = useSendReview({ reviewId })
   const handleClickSurveyClose = () => {
     closeReview(undefined, {
       onSuccess: () => {
@@ -70,23 +71,21 @@ const CreatedReviewManagePage = () => {
       return
     }
 
-    sendReview(
-      { reviewId },
-      {
-        onSuccess: ({ data }) => {
-          if (data.errorCode && data.message) {
-            addToast({ message: data.message, type: 'error' })
+    sendReview(undefined, {
+      onSuccess: ({ data }) => {
+        if (data.errorCode && data.message) {
+          addToast({ message: data.message, type: 'error' })
 
-            return
-          }
+          return
+        }
 
-          addToast({
-            message: '리뷰가 성공적으로 전송되었어요!',
-            type: 'success',
-          })
-        },
+        addToast({
+          message: '리뷰가 성공적으로 전송되었어요!',
+          type: 'success',
+        })
+        getUpdatdReviewQuestion()
       },
-    )
+    })
   }
 
   const REVIEW_MANAGE_TAB_CONTENT = {
@@ -111,7 +110,13 @@ const CreatedReviewManagePage = () => {
       >
         <AllResponseReviewByReceiver
           reviewId={reviewId}
-          ResponserList={checkAllReceiverReceived?.data}
+          ResponserList={
+            getReviewQuestion.status === 'END'
+              ? getReviewQuestion.receivers.map(
+                  (receiver) => receiver.receiverId,
+                )
+              : checkAllReceiverReceived?.data
+          }
         />
       </Suspense>
     ),
@@ -132,27 +137,36 @@ const CreatedReviewManagePage = () => {
           {getReviewQuestion?.description}
         </h2>
         <div className="mt-7">{REVIEW_MANAGE_TAB_CONTENT[activeTab]}</div>
-        {getReviewQuestion?.status === 'PROCEEDING' ? (
+        {getReviewQuestion?.status === 'PROCEEDING' && (
           <button
             className={`btn fixed bottom-10 cursor-pointer self-end rounded-md bg-active-orange text-white dark:text-black
     `}
             onClick={handleClickSurveyClose}
           >
             설문 마감
           </button>
-        ) : (
+        )}
+
+        {getReviewQuestion.status === 'DEADLINE' && (
           <button
             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 ||
-              getReviewQuestion?.status === 'END'
-            }
+            disabled={!checkAllReceiverReceived?.success}
             onClick={handleClickSendSurvey}
           >
             전송
           </button>
         )}
+
+        {getReviewQuestion.status === 'END' && (
+          <button
+            className={`btn fixed bottom-10 h-[2.5rem] w-[6.25rem] cursor-pointer self-end rounded-md bg-gray-100 font-bold leading-[1.3125rem] text-white
+          `}
+            disabled
+          >
+            전송완료
+          </button>
+        )}
       </div>
     </div>
   )

diff --git a/src/pages/LoginPage/components/LoginGroup.tsx b/src/pages/LoginPage/components/LoginGroup.tsx
@@ -8,7 +8,11 @@ interface LoginGroupProps {
 }
 const LoginGroup = ({ handleLogin }: LoginGroupProps) => {
   const navigate = useNavigate()
-  const { register, handleSubmit } = useForm()
+  const { register, handleSubmit } = useForm({
+    mode: 'onChange',
+  })
+
+  const { onChange: onChangePassword } = register('password')
 
   return (
     <form
@@ -22,7 +26,11 @@ const LoginGroup = ({ handleLogin }: LoginGroupProps) => {
       </div>
       <div>
         <div>
-          <Input type="password" register={register('password')} />
+          <Input
+            type="password"
+            register={register('password')}
+            onChange={onChangePassword}
+          />
         </div>
       </div>
       <div className="flex flex-col items-stretch">

diff --git a/src/pages/LoginPage/index.tsx b/src/pages/LoginPage/index.tsx
@@ -1,3 +1,4 @@
+import { AxiosError } from 'axios'
 import { useNavigate } from 'react-router-dom'
 import { Header } from '@/components'
 import { useLogin, useUser } from '@/apis/hooks'
@@ -25,7 +26,9 @@ const LoginPage = () => {
           navigate('/')
         },
         onError(data) {
-          addToast({ message: data.message, type: 'error' })
+          if (data instanceof AxiosError) {
+            addToast({ message: data.response?.data.message, type: 'error' })
+          }
         },
       },
     )