feat: 취합된 주관식 답변 저장 api 연결 (#100)

* refactor: 답변 수정 API 타입 변경 * refactor: AnswerGroup 컴포넌트 유형별로 분리 * refactor: Props로 받은 인자로 수정 api 연결 * refactor: 불필요 코드 제거 * refactor: 로딩중일 때 바로 리턴 * refactor: 빌드 오류 수정 * refactor: 리뷰 진행 중일 떄는 정제,수정, 취합된 답변 제거 * refactor: 정제,저장 버튼 오른쪽으로 이동 * refactor: 정제 시 저장 요청 안가게 설정
prgrms-web-devcourse · Dec 1, 2023 · f88c4ce · f88c4ce
1 parent 1df5210
commit f88c4ce
Show file tree

Hide file tree

Showing 10 changed files with 281 additions and 168 deletions.
diff --git a/src/apis/hooks/useUpdateFinalReviewAnswer.ts b/src/apis/hooks/useUpdateFinalReviewAnswer.ts
@@ -3,8 +3,8 @@ import apiClient from '@/apis/apiClient'
 
 interface updatedReviewAnswer {
   userId: string
-  reviewId: string
-  questionId: string
+  reviewId: number
+  questionId: number
   answer: string
 }
 

diff --git a/src/hooks/useRefine.ts b/src/hooks/useRefine.ts
@@ -110,7 +110,7 @@ const useRefine = ({ text = '' }: { text: string }) => {
     handleChangePrompt,
   }
 
-  return { prompt, result, isLoading, handlers }
+  return { prompt, result, isLoading, handlers, setPrompt }
 }
 
 export default useRefine
diff --git a/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderHexaStat.tsx b/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderHexaStat.tsx
@@ -0,0 +1,37 @@
+import { nanoid } from 'nanoid'
+import { BasicProfile } from '@/assets/images'
+import { Answer } from '.'
+
+const RenderHexaStat = ({
+  value,
+  answers,
+}: {
+  value: Answer
+  answers: Answer[]
+}) => {
+  const filteredAnswers = answers.filter((answer) => answer.name === value.name)
+
+  return (
+    <>
+      <div>
+        <h2 className="mb-[0.81rem] flex h-[1.375rem] w-[3rem] items-center justify-center bg-gray-300 text-sm text-white">
+          {value?.name}
+        </h2>
+      </div>
+      <div className="flex">
+        {filteredAnswers.map((value) => (
+          <div className="flex w-3/6 flex-wrap 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>
+        ))}
+      </div>
+    </>
+  )
+}
+
+export default RenderHexaStat
diff --git a/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderRefinedSubjective.tsx b/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderRefinedSubjective.tsx
@@ -1,15 +1,44 @@
 import ReactTextareaAutosize from 'react-textarea-autosize'
-import { useRefine } from '@/hooks'
+import { useRefine, useToast } from '@/hooks'
 import { IconButton } from '@/components'
+import { useUpdateFinalReviewAnswer } from '@/apis/hooks'
 import { FilterReplyIcon, SaveIcon } from '@/assets/icons'
 
 interface RenderRefinedSubjectiveProps {
   text: string
+  questionId: number
+  reviewId: number
+  userId: string
 }
 
-const RenderRefinedSubjective = ({ text }: RenderRefinedSubjectiveProps) => {
+const RenderRefinedSubjective = ({
+  text,
+  questionId,
+  reviewId,
+  userId,
+}: RenderRefinedSubjectiveProps) => {
   const { handlers, isLoading, prompt, result } = useRefine({ text })
   const { handleChangePrompt, handleRefine } = handlers
+  const { addToast } = useToast()
+
+  const { mutate: updateFinalAnswer } = useUpdateFinalReviewAnswer()
+  const handleUpdateFinalAnswer = (newAnswer: string) => {
+    updateFinalAnswer(
+      {
+        questionId,
+        reviewId,
+        userId,
+        answer: newAnswer,
+      },
+      {
+        onSuccess: () =>
+          addToast({
+            type: 'success',
+            message: '성공적으로 저장되었습니다!',
+          }),
+      },
+    )
+  }
 
   return (
     <div className="relative mt-8 flex w-full flex-col bg-transparent">
@@ -27,24 +56,25 @@ const RenderRefinedSubjective = ({ text }: RenderRefinedSubjectiveProps) => {
         value={result ? result : prompt}
       ></ReactTextareaAutosize>
 
-      <div className="flex gap-2">
+      <div className="flex w-full justify-end gap-2">
         <IconButton
           className="mt-2.5 h-7 gap-1 rounded-md border border-gray-200 bg-gray-400 text-sm text-black"
           text="정제"
-          onClick={handleRefine}
+          onClick={() => {
+            handleRefine()
+          }}
         >
           <FilterReplyIcon className="h-4 w-4" />
         </IconButton>
 
         <IconButton
-          disabled
           className="mt-2.5 h-7 gap-1 rounded-md border border-gray-200 bg-gray-400 text-sm text-black"
           text="저장"
           onClick={() => {
             if (isLoading) {
               return
             }
-            //TODO: 저장 API 호출
+            handleUpdateFinalAnswer(prompt)
           }}
         >
           <SaveIcon />

diff --git a/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderStarRatingAnswer.tsx b/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderStarRatingAnswer.tsx
@@ -0,0 +1,26 @@
+import { StarRatingList } from '@/components'
+import { BasicProfile } from '@/assets/images'
+
+interface StarRatingAnswerProps {
+  value?: string | number | null
+  userName?: string
+}
+
+const RenderStarRatingAnswer = ({ value, userName }: StarRatingAnswerProps) => {
+  return (
+    <div>
+      <h3 className="flex items-center">
+        <img
+          src={BasicProfile}
+          className="avatar h-[1.25rem] w-[1.25rem] border dark:bg-white dark:fill-white"
+        />
+        <p className="ml-[1.31rem] text-sm">{userName}</p>
+      </h3>
+      <div className="ml-[42.96px] mt-[0.5rem] text-base leading-5 md:mt-[0.62rem]">
+        <StarRatingList rate={Number(value)} fixed={true} />
+      </div>
+    </div>
+  )
+}
+
+export default RenderStarRatingAnswer
diff --git a/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderSubjectiveAnswer.tsx b/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderSubjectiveAnswer.tsx
@@ -0,0 +1,41 @@
+import { BasicProfile } from '@/assets/images'
+import RenderRefinedSubjective from './RenderRefinedSubjective'
+import { Answer } from './'
+
+interface RenderSubjeciveAnswerProps {
+  reviewStatus?: 'END' | 'DEADLINE' | 'PROCEEDING'
+  role?: 'responser' | 'receiver'
+  value: Answer
+  isLastAnswer: boolean
+  text: string
+  questionId: number
+  reviewId: number
+  userId: string
+}
+
+const RenderSubjectiveAnswer = ({
+  reviewStatus,
+  role,
+  value,
+  isLastAnswer,
+  ...rest
+}: RenderSubjeciveAnswerProps) => (
+  <>
+    <h3 className="flex items-center ">
+      <img
+        src={BasicProfile}
+        className="avatar h-[1.25rem] w-[1.25rem] border dark:bg-white dark:fill-white"
+      />
+      <p className="ml-[1.31rem] text-sm">{value?.userName}</p>
+    </h3>
+    <p className="ml-[42.96px] mt-[0.5rem] break-all  text-base leading-5 md:mt-[0.62rem]">
+      {value?.value}
+    </p>
+
+    {isLastAnswer && role !== 'responser' && reviewStatus !== 'PROCEEDING' && (
+      <RenderRefinedSubjective {...rest} />
+    )}
+  </>
+)
+
+export default RenderSubjectiveAnswer