Feat/케밥 답변거절 구현 (#58)

* ✨ feat : 피드 헤더 레이아웃 구현

* 💄 chore : 공유하기 버튼 svg 스타일링

* ✅ chore : 프로필 사진 및 이름 불러오는 handleLoad 함수 구현(테스트용)

* 🍱 chore : 헤더이미지파일 추가 및 코드 수정

* 💄 chore : PR 리뷰 내용 반영하여 스타일 수정

* ✨ feat : URL 복사 알림용 토스트 구현 시작

* 💄 chore : 토스트 기본 레이아웃 구현

* ✨ chore : URL버튼 클릭시 클립보드에 현재 URL 복사하는 handleCopyUrl추가 및 onClick 구현

* ✨ chore : npm prop types 다운로드, 링크 복사 버튼 클릭 시 토스트 메시지 보여주는 동작 구현

* 💄 chore : 토스트 애니메이션 효과 구현, tailwind.config.js 수정

* 💄 chore : 토스트 애니메이션 개선 및 tailwind.config.js 수정

* ✨ feat : 삭제하기 버튼 기본 레이아웃 및 스타일 작업

* ✨ feat : 삭제하기 버튼 클릭 시 로컬id 삭제 및 루트로 이동 기능

* 🚚 chore : toast 컴포넌트 및 파일 이름을 toastUrlCopy로 변경

* ✨ feat : 삭제하기 버튼 클릭 시 삭제 완료 안내 토스트 구현

* 🎨 chore : 토스트 애니메이션 동작 시간 수정 and 🐛 fixed : 프로필 사진 렌더링 시 src 오류 해결

* 🐛 fixed: prettier 문제로 발생한 빌드 오류 수정에 관한 커밋

* 🚚 chore : 첫글자 소문자로 적은 폴더 이름 대문자로 변경, 기존 toast 컴포넌트와 폴더 이름을  toastUrlCopy로 변경

* 🚚 chore : 로컬에서 폴더명을 수정했으나 원격에서 인식하지 못해 다시 원상복구 시키는 커밋입니다.

* ✨ feat : 답변 등록 구현

* ✨ feat : 케밥 답변삭제 구현

* ✨ feat : 질문삭제 컴포넌트로 분리

* ✨ feat : 질문삭제 컴포넌트 구현

* ✨ feat : 답변 삭제 버튼 클릭 시 원래 상태로 렌더링 되는 기능 구현

* ♻️ chore : textarea 초기화

* ✨ feat : 케밥 답변거절 구현

---------

Co-authored-by: junAlexx <lep240927@gmail.com>
Co-authored-by: junAlexx <junrisexci@naver.com>
Co-authored-by: LMS10 <ggb7410@naver.com>

Author: 4 people

src/components/AnswerContent/index.jsx

@@ -22,6 +22,10 @@ const AnswerContent = ({ answer, name, imageSource, id, onAnswerSubmit }) => {
     imageSource: 'https://fastly.picsum.photos/id/772/200/200.jpg?hmac=9euSj4JHTPr7uT5QWVmeNJ8JaqAXY8XmJnYfr_DfBJc',
   };
 
+  // if (answer) {
+  //   console.log(answer);
+  // }
+
   const location = useLocation();
   const [textareaValue, setTextareaValue] = useState('');
   const [updatedAnswer, setUpdatedAnswer] = useState(answer);

src/components/AnswerRejection/index.jsx

@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import { postAnswer } from 'api/answers';
+import { ReactComponent as Rejection } from 'assets/images/icons/ic_Rejection.svg';
+
+const AnswerRejection = ({ id, setQuestionList }) => {
+  AnswerRejection.propTypes = {
+    id: PropTypes.number.isRequired,
+    setQuestionList: PropTypes.func.isRequired,
+  };
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const handleRejection = async () => {
+    const defaultContent = 'reject';
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const result = await postAnswer(id, {
+        content: defaultContent,
+        isRejected: true,
+      });
+
+      setQuestionList((prevQuestions) =>
+        prevQuestions.map((question) => {
+          if (question.id === id) {
+            return { ...question, answer: result };
+          }
+          return question;
+        }),
+      );
+    } catch (err) {
+      setError('답변 거절 중 오류가 발생했습니다.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (error) {
+    return <div>에러: {error}</div>;
+  }
+
+  return (
+    <button
+      type='button'
+      className='flex justify-center items-center gap-2 rounded-lg w-[103px] h-[30px] text-gray-50 hover:text-gray-60 hover:bg-gray-20'
+      onClick={handleRejection}
+      disabled={isLoading}
+    >
+      <Rejection className='w-3.5 h-3.5 fill-current' />
+      답변거절
+    </button>
+  );
+};
+
+export default AnswerRejection;

src/components/Kebab/index.jsx

@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types';
 import { useEffect, useRef } from 'react';
 import QuestionDelete from 'components/QuestionDelete';
+import AnswerRejection from 'components/AnswerRejection';
 import kebab from 'assets/images/icons/ic_Kebab.svg';
-import { ReactComponent as Rejection } from 'assets/images/icons/ic_Rejection.svg';
 import { ReactComponent as Edit } from 'assets/images/icons/ic_Edit.svg';
 import AnswerDelete from 'components/AnswerDelete';
 
-const Kebab = ({ id, isAnswer, isKebabOpen, onKebabClick, onDeleteQuestion, onAnswerDeleted }) => {
+const Kebab = ({ id, isAnswer, isKebabOpen, onKebabClick, onDeleteQuestion, onAnswerDeleted, setQuestionList }) => {
   Kebab.propTypes = {
     id: PropTypes.number.isRequired,
     isAnswer: PropTypes.shape({
@@ -20,6 +20,7 @@ const Kebab = ({ id, isAnswer, isKebabOpen, onKebabClick, onDeleteQuestion, onAn
     onKebabClick: PropTypes.func.isRequired,
     onDeleteQuestion: PropTypes.func.isRequired,
     onAnswerDeleted: PropTypes.func.isRequired,
+    setQuestionList: PropTypes.func.isRequired,
   };
 
   const menuRef = useRef(null);
@@ -59,10 +60,7 @@ const Kebab = ({ id, isAnswer, isKebabOpen, onKebabClick, onDeleteQuestion, onAn
           {!isAnswer ? (
             <>
               <div className='flex justify-center items-center rounded-lg'>
-                <button type='button' className='flex justify-center items-center gap-2 rounded-lg w-[103px] h-[30px] text-gray-50 hover:text-gray-60 hover:bg-gray-20'>
-                  <Rejection className='w-3.5 h-3.5 fill-current' />
-                  <p>답변거절</p>
-                </button>
+                <AnswerRejection id={id} setQuestionList={setQuestionList} />
               </div>
               <div className='flex justify-center items-center'>
                 <QuestionDelete id={id} onDeleteQuestion={onDeleteQuestion} />

src/components/QnAList/index.jsx

@@ -78,6 +78,7 @@ const QnAList = ({ name, imageSource, questionList, setQuestionList, onDeleteQue
                     onClick={handleDeleteQuestion}
                     onDeleteQuestion={handleDeleteQuestion}
                     onAnswerDeleted={handleAnswerDeleted}
+                    setQuestionList={setQuestionList}
                   />
                 )}
               </div>