Feat/케밥 답변삭제 구현

src/components/AnswerContent/index.jsx

@@ -1,17 +1,21 @@
 import PropTypes from 'prop-types';
 import { useLocation } from 'react-router-dom';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import formatCreatedAt from 'utils/dateUtils';
+import { postAnswer } from 'api/answers';
 
-const AnswerContent = ({ answer, name, imageSource }) => {
+const AnswerContent = ({ answer, name, imageSource, id, onAnswerSubmit }) => {
   AnswerContent.propTypes = {
     answer: PropTypes.shape({
+      id: PropTypes.number.isRequired,
       content: PropTypes.string.isRequired,
       isRejected: PropTypes.bool,
       createdAt: PropTypes.string.isRequired,
     }),
     name: PropTypes.string.isRequired,
     imageSource: PropTypes.string,
+    id: PropTypes.number.isRequired,
+    onAnswerSubmit: PropTypes.func.isRequired,
   };
 
   AnswerContent.defaultProps = {
@@ -20,6 +24,9 @@ const AnswerContent = ({ answer, name, imageSource }) => {
 
   const location = useLocation();
   const [textareaValue, setTextareaValue] = useState('');
+  const [updatedAnswer, setUpdatedAnswer] = useState(answer);
+  const [isLoading, setIsLoading] = useState(false);
+  // const [error, setError] = useState(null);
 
   const isFeedPage = location.pathname.startsWith('/post/') && !location.pathname.includes('/answer');
   const isAnswerPage = location.pathname.startsWith('/post/') && location.pathname.includes('/answer');
@@ -28,32 +35,63 @@ const AnswerContent = ({ answer, name, imageSource }) => {
     setTextareaValue(event.target.value);
   };
 
+  const handleAnswerPost = async (e) => {
+    e.preventDefault();
+    const postBody = {
+      questionId: id,
+      content: textareaValue,
+      isRejected: false,
+      team: '12-6',
+    };
+
+    let response;
+    try {
+      setIsLoading(true);
+      // setError(null);
+      response = await postAnswer(id, postBody);
+      setUpdatedAnswer(response);
+      onAnswerSubmit(id, response);
+    } catch (err) {
+      // setError(`${response} : 답변을 등록하던 중 오류가 발생했습니다. 페이지를 새로고침합니다.`);
+      // setTimeout(() => {
+      //   window.location.reload();
+      // }, 2000);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const renderProfileImg = () => <img src={imageSource} alt={`${name}의 프로필`} className='w-[32px] h-[32px] md:w-[48px] md:h-[48px] rounded-full object-cover' />;
 
   const renderAnswerHeader = () => (
     <div className='flex items-center mb-[4px]'>
       <p className='mr-[8px] inline-block text-sm leading-[18px] md:text-lg md:leading-[24px]'>{name}</p>
-      <p className='text-sm font-medium leading-[18px] text-gray-40'>{formatCreatedAt(answer.createdAt)}</p>
+      <p className='text-sm font-medium leading-[18px] text-gray-40'>{formatCreatedAt(updatedAnswer.createdAt)}</p>
     </div>
   );
 
-  const renderAnswerContent = () => <p className='text-base leading-[22px]'>{answer.content}</p>;
+  const renderAnswerContent = () => <p className='text-base leading-[22px]'>{updatedAnswer.content}</p>;
 
   const renderAnswerForm = () => (
-    <form className='flex w-full flex-col gap-[8px]'>
+    <form onSubmit={handleAnswerPost} className='flex w-full flex-col gap-[8px]'>
       <textarea
         className='w-full h-[186px] resize-none rounded-lg border-none p-[16px] bg-gray-20 text-base leading-[22px] text-secondary-900 placeholder:text-base placeholder:leading-[22px] placeholder:text-gray-40 focus:outline-brown-40'
         placeholder='답변을 입력해주세요'
         value={textareaValue}
         onChange={handleTextareaChange}
       />
-      <button type='submit' className='py-[12px] rounded-lg bg-brown-40 text-base leading-[22px] text-gray-10 disabled:bg-brown-30' disabled={textareaValue.trim() === ''}>
+      <button type='submit' className='py-[12px] rounded-lg bg-brown-40 text-base leading-[22px] text-gray-10 disabled:bg-brown-30' disabled={textareaValue.trim() === '' || isLoading}>
         답변 완료
       </button>
     </form>
   );
 
-  if (answer && answer.isRejected) {
+  useEffect(() => {
+    setUpdatedAnswer(answer);
+    setTextareaValue('');
+  }, [answer]);
+
+  if (updatedAnswer && updatedAnswer.isRejected) {
     return (
       <div className='flex gap-[12px]'>
         {renderProfileImg()}
@@ -66,7 +104,7 @@ const AnswerContent = ({ answer, name, imageSource }) => {
   }
 
   if (isFeedPage) {
-    if (answer) {
+    if (updatedAnswer) {
       return (
         <div className='flex gap-[12px]'>
           {renderProfileImg()}
@@ -81,26 +119,29 @@ const AnswerContent = ({ answer, name, imageSource }) => {
   }
 
   if (isAnswerPage) {
-    if (answer) {
+    if (updatedAnswer === null || !updatedAnswer) {
+      return (
+        <div className='flex gap-[12px]'>
+          {renderProfileImg()}
+          <div className='flex-1'>
+            <p className='mb-[4px] mr-[8px] inline-block text-sm leading-[18px] md:text-lg md:leading-[24px]'>{name}</p>
+            {renderAnswerForm()}
+          </div>
+        </div>
+      );
+    }
+
+    if (updatedAnswer) {
       return (
         <div className='flex gap-[12px]'>
           {renderProfileImg()}
           <div>
             {renderAnswerHeader()}
-            <p className='text-base leading-[22px]'>{answer.content}</p>
+            <p className='text-base leading-[22px]'>{updatedAnswer.content}</p>
           </div>
         </div>
       );
     }
-    return (
-      <div className='flex gap-[12px]'>
-        {renderProfileImg()}
-        <div className='flex-1'>
-          <p className='mb-[4px] mr-[8px] inline-block text-sm leading-[18px] md:text-lg md:leading-[24px]'>{name}</p>
-          {renderAnswerForm()}
-        </div>
-      </div>
-    );
   }
 
   return null;

src/components/AnswerDelete/index.jsx

@@ -0,0 +1,46 @@
+import { deleteAnswer } from 'api/answers';
+import { ReactComponent as Close } from 'assets/images/icons/ic_Close.svg';
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const AnswerDelete = ({ answerId, onAnswerDeleted }) => {
+  AnswerDelete.propTypes = {
+    answerId: PropTypes.number.isRequired,
+    onAnswerDeleted: PropTypes.func.isRequired,
+  };
+
+  const [isDeleting, setIsDeleting] = useState(false);
+  // const [error, setError] = useState(null);
+  const navigate = useNavigate();
+
+  const handleAnswerDelete = async () => {
+    setIsDeleting(true);
+
+    try {
+      const response = await deleteAnswer(answerId);
+      if (!response.ok) {
+        throw new Error('답변 삭제 중 오류가 발생했습니다.');
+      }
+      onAnswerDeleted(answerId);
+    } catch (err) {
+      navigate('/');
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  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'
+      disabled={isDeleting}
+      onClick={handleAnswerDelete}
+    >
+      <Close className='w-3.5 h-3.5 fill-current' />
+      <p>답변삭제</p>
+    </button>
+  );
+};
+
+export default AnswerDelete;

src/components/AnswerStatus/index.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-// import Kebab from 'components/Kebab';
 
 const AnswerStatus = ({ answer }) => {
   AnswerStatus.propTypes = {

src/components/Kebab/index.jsx

@@ -4,21 +4,22 @@ import QuestionDelete from 'components/QuestionDelete';
 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 { ReactComponent as Close } from 'assets/images/icons/ic_Close.svg';
+import AnswerDelete from 'components/AnswerDelete';
 
-const Kebab = ({ id, isAnswer, isKebabOpen, onKebabClick, onDeleteQuestion }) => {
+const Kebab = ({ id, isAnswer, isKebabOpen, onKebabClick, onDeleteQuestion, onAnswerDeleted }) => {
   Kebab.propTypes = {
+    id: PropTypes.number.isRequired,
     isAnswer: PropTypes.shape({
       id: PropTypes.number.isRequired,
       questionId: PropTypes.number.isRequired,
       content: PropTypes.string.isRequired,
       isRejected: PropTypes.bool.isRequired,
       createdAt: PropTypes.string.isRequired,
     }),
-    id: PropTypes.number.isRequired,
     isKebabOpen: PropTypes.bool.isRequired,
     onKebabClick: PropTypes.func.isRequired,
     onDeleteQuestion: PropTypes.func.isRequired,
+    onAnswerDeleted: PropTypes.func.isRequired,
   };
 
   const menuRef = useRef(null);
@@ -28,8 +29,10 @@ const Kebab = ({ id, isAnswer, isKebabOpen, onKebabClick, onDeleteQuestion }) =>
     onKebabClick(id);
   };
 
-  const handleMenuItemClick = () => {
-    onKebabClick(id);
+  const onDeleteAnswer = () => {
+    if (isAnswer) {
+      onAnswerDeleted(isAnswer.id);
+    }
   };
 
   useEffect(() => {
@@ -46,19 +49,17 @@ const Kebab = ({ id, isAnswer, isKebabOpen, onKebabClick, onDeleteQuestion }) =>
     };
   }, [id, onKebabClick]);
 
-  // () => onKebabClick(id)
-
   return (
     <div ref={menuRef} className='relative flex items-center'>
       <button type='button' onClick={handleMenuToggle}>
         <img src={kebab} alt='kebab' className='w-[26px] h-[26px]' />
       </button>
       {isKebabOpen && (
-        <menu className='absolute top-[26px] end-0 w-[103px] py-1 bg-gray-10 text-sm/[18px] font-medium border border-gray-30 rounded-lg shadow-2pt'>
+        <menu type='button' className='absolute top-[26px] end-0 w-[103px] py-1 bg-gray-10 text-sm/[18px] font-medium border border-gray-30 rounded-lg shadow-2pt'>
           {!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' onClick={handleMenuItemClick}>
+                <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>
@@ -70,7 +71,7 @@ const Kebab = ({ id, isAnswer, isKebabOpen, onKebabClick, onDeleteQuestion }) =>
           ) : (
             <>
               <div className='flex justify-center items-center'>
-                <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={handleMenuItemClick}>
+                <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'>
                   <Edit className='w-3.5 h-3.5 fill-current' />
                   <p>수정하기</p>
                 </button>
@@ -79,10 +80,7 @@ const Kebab = ({ id, isAnswer, isKebabOpen, onKebabClick, onDeleteQuestion }) =>
                 <QuestionDelete id={id} onDeleteQuestion={onDeleteQuestion} />
               </div>
               <div className='flex justify-center items-center'>
-                <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={handleMenuItemClick}>
-                  <Close className='w-3.5 h-3.5 fill-current' />
-                  <p>답변삭제</p>
-                </button>
+                <AnswerDelete answerId={isAnswer.id} onAnswerDeleted={onDeleteAnswer} />
               </div>
             </>
           )}

src/components/QnAList/index.jsx

@@ -39,14 +39,28 @@ const QnAList = ({ name, imageSource, questionList, setQuestionList, onDeleteQue
 
   const handleKebabClick = (id) => {
     setVisibleMenuId((prevVisibleMenuId) => (prevVisibleMenuId === id ? null : id));
-    // setVisibleMenuId(visibleMenuId === id ? null : id);
   };
 
   const handleDeleteQuestion = (questionId) => {
     setQuestionList((prevQuestions) => prevQuestions.filter((question) => question.id !== questionId));
     onDeleteQuestion(questionId);
   };
 
+  const handleAnswerSubmit = (questionId, answer) => {
+    setQuestionList((prevQuestions) => prevQuestions.map((question) => (question.id === questionId ? { ...question, answer } : question)));
+  };
+
+  const handleAnswerDeleted = (answerId) => {
+    setQuestionList((prevQuestions) =>
+      prevQuestions.map((question) => {
+        if (question.answer && question.answer.id === answerId) {
+          return { ...question, answer: null };
+        }
+        return question;
+      }),
+    );
+  };
+
   return (
     <div>
       {questionList.length > 0 ? (
@@ -63,11 +77,12 @@ const QnAList = ({ name, imageSource, questionList, setQuestionList, onDeleteQue
                     onKebabClick={handleKebabClick}
                     onClick={handleDeleteQuestion}
                     onDeleteQuestion={handleDeleteQuestion}
+                    onAnswerDeleted={handleAnswerDeleted}
                   />
                 )}
               </div>
               <QuestionContent createdAt={question.createdAt} content={question.content} />
-              <AnswerContent answer={question.answer} name={name} imageSource={imageSource} />
+              <AnswerContent answer={question.answer} name={name} imageSource={imageSource} id={question.id} onAnswerSubmit={handleAnswerSubmit} />
               <CountFavorite like={question.like} dislike={question.dislike} />
             </li>
           ))}

src/pages/Answer/index.jsx

@@ -111,6 +111,7 @@ const Answer = () => {
 
     fetchQuestions();
   }, [subjectId, offset]);
+
   const loadMoreQuestions = useCallback(
     (entries) => {
       const [entry] = entries;