Feat/케밥 답변거절 구현

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>