(Team-Coverflow#285)style: 채택 스타일 수정했습니다.

JayJayleee · May 4, 2024 · 7e73869 · 7e73869
1 parent 98ea7ad
commit 7e73869
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 20 deletions.
diff --git a/src/asset/image/yellow-trophy.svg b/src/asset/image/yellow-trophy.svg
diff --git a/src/asset/sass/etc/question/answer.scss b/src/asset/sass/etc/question/answer.scss
@@ -5,7 +5,6 @@
   height: 308px;
   margin-top: 5%;
   margin-bottom: 5%;
-  cursor: pointer;
 
   padding: 0 20px;
   :nth-child(1) {
@@ -18,6 +17,9 @@
   border: 1px solid #cacaca;
   border-radius: 20px;
 }
+.adopted {
+  border: 1px solid #ff8d1d;
+}
 
 .user-container {
   letter-spacing: -1px;

diff --git a/src/components/pages/postPage/questionDetailPage.tsx b/src/components/pages/postPage/questionDetailPage.tsx
@@ -133,21 +133,21 @@ function QuestionDetailPage() {
   // 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]);
+  // 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 handleGoBack = () => {
     navigate(-1);

diff --git a/src/components/ui/question/answer.tsx b/src/components/ui/question/answer.tsx
@@ -1,10 +1,28 @@
 import React, { useState } from 'react';
 import '../../../asset/sass/etc/question/answer.scss';
 import styled from 'styled-components';
+import yellowTrophy from '../../../asset/image/yellow-trophy.svg';
 import Trophy from '../../../asset/image/trophy.svg';
 import { fetchAPI } from '../../global/utils/apiUtil';
 import { showSuccessToast } from '../toast/toast';
 
+const AdoptedTag = styled.div`
+  position: relative;
+  width: 95px;
+  height: 25px;
+  border: 1px solid #ff8d1d;
+  border-radius: 0.5rem;
+  font-size: 1.2rem;
+  color: #ff8d1d;
+  letter-spacing: -1px;
+  font-family: Pretendard-Medium;
+  top: -4.5rem;
+  left: 41rem;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0 1rem;
+`;
 const AdoptButton = styled.button`
   display: flex;
   margin: -12% 6% 0% 82%;
@@ -58,14 +76,23 @@ function AnswerModule({
 
   return (
     <div className={`answer-container ${isAdopted ? 'adopted' : ''}`}>
+      {isAdopted && (
+        <AdoptedTag>
+          <img src={yellowTrophy} alt="trophy" />
+          채택된 답변
+        </AdoptedTag>
+      )}
+
       <div>
         <div>{answererNickname}</div>
         <div>{answerContent}</div>
         <div className="user-container">{createAt}</div>
-        <AdoptButton onClick={handleAdoptAnswer}>
-          <img src={Trophy} alt="trophy" />
-          채택하기
-        </AdoptButton>
+        {isAdopted || (
+          <AdoptButton onClick={handleAdoptAnswer}>
+            <img src={Trophy} alt="trophy" />
+            채택하기
+          </AdoptButton>
+        )}
       </div>
     </div>
   );