(Team-Coverflow#285)feat:채택 기능 구현했습니다.

JayJayleee · May 6, 2024 · 2a485ce · 2a485ce
1 parent 31aadc3
commit 2a485ce
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 72 deletions.
diff --git a/src/components/pages/postPage/questionDetailPage.tsx b/src/components/pages/postPage/questionDetailPage.tsx
@@ -84,7 +84,7 @@ export interface AnswerProps {
 
 export interface CommentProps {
   answerCount?: number;
-
+  isAdopted: boolean;
   answerId: string;
   answererTag: string;
   createAt: string;
@@ -130,25 +130,8 @@ function QuestionDetailPage() {
   // console.log('isShowEdit: ', isShowEdit);
 
   const [showReport, setShowReport] = useState(false);
-  // console.log('showReport: ', showReport);
-
-  // const { questionId } = useParams();
-  // useEffect(() => {
-  //   const loadAnswerList = async () => {
-  //     try {
-  //       // const token = localStorage.getItem(ACCESS_TOKEN);
-  //       // if (!token) {
-  //       //   showErrorToast('로그인이 필요합니다.');
-  //       //   navigate(-1);
-  //       // }
-  //     } catch (error) {
-  //       if (error instanceof Error) showErrorToast(error.message);
-  //     }
-  //   };
-
-  //   loadAnswerList();
-  // }, [currentPage, questionId, navigate, postAnswer]);
-
+  const [isAdopted, setIsAdopted] = useState(false);
+  const [anyAdopted, setAnyAdopted] = useState(false);
   const handleGoBack = () => {
     navigate(-1);
   };
@@ -213,44 +196,44 @@ function QuestionDetailPage() {
   const handleCloseReportPopup = () => {
     setShowReport((show) => !show);
   };
+  const fetchData = async () => {
+    const response = await axios.get(
+      `${BASE_URL}/api/question/${questionId}?pageNo=${currentPage}&criterion=createdAt`,
+    );
+    const data = response.data.data;
+
+    const sortedAnswers = data.answers.sort((a, b) => {
+      if (a.selection && !b.selection) return -1;
+      if (!a.selection && b.selection) return 1;
+      return 0;
+    });
+    const adoptedExists = data.answers.some(
+      (answer) => answer.selection === true,
+    );
+    setAnyAdopted(adoptedExists);
+    setAnswers(
+      sortedAnswers.map((answer) => ({
+        ...answer,
+        isAdopted: answer.selection,
+      })),
+    );
+
+    setQuestionerNickname(data.questionerNickname);
+    setQuestionerTag(data.questionerTag);
+    setAnswerCount(data.answerCount);
+    setQuestionTitle(data.questionTitle);
+    setCreateAt(data.createAt);
+    setReward(data.reward);
+    setCompanyName(data.companyName);
+    setQuestionContent(data.questionContent);
+    setTotalPages(data.totalPages);
+
+    const res = await fetchAPI('/api/member/me', 'GET');
+
+    setMyNickname(res.data.nickname);
+  };
 
   useEffect(() => {
-    const fetchData = async () => {
-      const response = await axios.get(
-        `${BASE_URL}/api/question/${questionId}?pageNo=${currentPage}&criterion=createdAt`,
-      );
-      console.log('응답', response);
-      const {
-        data: {
-          questionerNickname,
-          questionerTag,
-          answerCount,
-          questionTitle,
-          createAt,
-          reward,
-          companyName,
-          questionContent,
-          answers,
-          totalPages,
-        },
-      } = response.data;
-
-      setQuestionerNickname(questionerNickname);
-      setQuestionerTag(questionerTag);
-      setAnswerCount(answerCount);
-      setQuestionTitle(questionTitle);
-      setCreateAt(createAt);
-      setReward(reward);
-      setCompanyName(companyName);
-      setQuestionContent(questionContent);
-      setAnswers(answers);
-      setTotalPages(totalPages);
-
-      const res = await fetchAPI('/api/member/me', 'GET');
-
-      setMyNickname(res.data.nickname);
-    };
-
     fetchData();
   }, [questionId, postAnswer, currentPage]);
 
@@ -340,32 +323,38 @@ function QuestionDetailPage() {
         ) : null}
       </div>
 
-      <div className="comment-section">
-        <textarea
-          placeholder="답변을 입력해주세요.."
-          className="comment-input"
-          ref={answerRef}
-          maxLength={500}
-        ></textarea>
-        <button className="submit-comment" onClick={handleAnswerSubmit}>
-          등록
-        </button>
-      </div>
+      {!isAdopted && (
+        <div className="comment-section">
+          <textarea
+            placeholder="답변을 입력해주세요.."
+            className="comment-input"
+            ref={answerRef}
+            maxLength={500}
+          ></textarea>
+          <button className="submit-comment" onClick={handleAnswerSubmit}>
+            등록
+          </button>
+        </div>
+      )}
 
       <ContentBlur $isLoggedIn={isLoggedIn}>
         <AnswerList>
           <div className="answer-title">
             <span>답변 {answerCount}</span>
           </div>
 
-          {answers?.map((answer) => (
+          {answers.map((answer) => (
             <Answer
               key={answer.answerId}
               createAt={answer.createAt}
               answerContent={answer.answerContent}
               answererNickname={answer.answererNickname}
               answererTag={answer.answererTag}
               answerId={answer.answerId}
+              isAdopted={answer.isAdopted}
+              setIsAdopted={setIsAdopted}
+              fetchData={fetchData}
+              anyAdopted={anyAdopted}
             />
           ))}
         </AnswerList>

diff --git a/src/components/ui/question/answer.tsx b/src/components/ui/question/answer.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import '../../../asset/sass/etc/question/answer.scss';
 import styled from 'styled-components';
 import yellowTrophy from '../../../asset/image/yellow-trophy.svg';
@@ -54,22 +54,30 @@ interface AnswerDetailProps {
   answerContent: string;
   answererNickname: string;
   answererTag?: string;
-  answerId: string;
+  answerId?: string;
+  isAdopted: boolean;
+  setIsAdopted: (isAdopted: boolean) => void;
+  fetchData: () => void;
+  anyAdopted: boolean;
 }
 
 function AnswerModule({
   createAt,
   answerContent,
   answererNickname,
   answerId,
+  isAdopted,
+  setIsAdopted,
+  fetchData,
+  anyAdopted,
 }: AnswerDetailProps) {
-  const [isAdopted, setIsAdopted] = useState(false);
   const handleAdoptAnswer = async () => {
     if (confirm('채택하시겠습니까?')) {
       await fetchAPI(`/api/answer/selection/${answerId}`, 'PATCH', {
         selection: true,
       });
       setIsAdopted(true);
+      fetchData();
       showSuccessToast('답변이 채택되었습니다.');
     }
   };
@@ -87,7 +95,7 @@ function AnswerModule({
         <div>{answererNickname}</div>
         <div>{answerContent}</div>
         <div className="user-container">{createAt}</div>
-        {isAdopted || (
+        {isAdopted || anyAdopted ? null : (
           <AdoptButton onClick={handleAdoptAnswer}>
             <img src={Trophy} alt="trophy" />
             채택하기