diff --git a/src/components/AnswerEdit/index.jsx b/src/components/AnswerEdit/index.jsx
new file mode 100644
index 0000000..b6f1a6f
--- /dev/null
+++ b/src/components/AnswerEdit/index.jsx
@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import { ReactComponent as Edit } from 'assets/images/icons/ic_Edit.svg';
+
+// eslint-disable-next-line
+const AnswerEdit = ({ id, setEditId, answerId }) => {
+ AnswerEdit.propTypes = {
+ id: PropTypes.number.isRequired,
+ setEditId: PropTypes.func.isRequired,
+ };
+
+ const handleEdit = () => {
+ setEditId(answerId);
+ };
+
+ return (
+
+ );
+};
+
+export default AnswerEdit;
diff --git a/src/components/AnswerEditForm/index.jsx b/src/components/AnswerEditForm/index.jsx
new file mode 100644
index 0000000..74d0b6e
--- /dev/null
+++ b/src/components/AnswerEditForm/index.jsx
@@ -0,0 +1,86 @@
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import { putAnswer } from 'api/answers';
+
+// eslint-disable-next-line
+const AnswerEditForm = ({ answer, name, imageSource, id, setEditId, setQuestionList }) => {
+ AnswerEditForm.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,
+ };
+
+ AnswerEditForm.defaultProps = {
+ imageSource: 'https://fastly.picsum.photos/id/772/200/200.jpg?hmac=9euSj4JHTPr7uT5QWVmeNJ8JaqAXY8XmJnYfr_DfBJc',
+ };
+
+ // 초기값 설정 시 answer.content가 null일 경우 빈 문자열로 처리
+ const [textareaValue, setTextareaValue] = useState(answer.content === null || answer.content === 'reject' ? '' : answer.content);
+ const [isLoading, setIsLoading] = useState(false);
+ const [isValid, setIsValid] = useState(false);
+
+ const handleTextareaChange = (event) => {
+ const text = event.target.value;
+ setTextareaValue(text);
+ const isFormValid = text.trim() !== answer.content.trim() && text !== '' && text !== 'reject';
+ setIsValid(isFormValid);
+ };
+
+ const handleAnswerPatch = async (e) => {
+ e.preventDefault();
+ try {
+ setIsLoading(true);
+ const result = await putAnswer(answer.id, {
+ content: textareaValue, // textareaValue에서 내용을 가져옵니다.
+ isRejected: false, // 필요하다면 다른 데이터도 추가 가능합니다.
+ });
+ setQuestionList((prevQuestions) =>
+ prevQuestions.map((question) => {
+ if (question.id === id) {
+ return { ...question, answer: result };
+ }
+ return question;
+ }),
+ );
+ } catch (err) {
+ // handle error here (e.g., show error message)
+ } finally {
+ setIsLoading(false);
+ setEditId(null);
+ }
+ };
+
+ const renderProfileImg = () => 
;
+
+ const renderAnswerForm = () => (
+
+ );
+
+ return (
+
+ {renderProfileImg()}
+
+
{name}
+ {renderAnswerForm()}
+
+
diff --git a/src/components/QnAList/index.jsx b/src/components/QnAList/index.jsx
index a5875e9..4128c58 100644
--- a/src/components/QnAList/index.jsx
+++ b/src/components/QnAList/index.jsx
@@ -7,6 +7,7 @@ import AnswerContent from 'components/AnswerContent';
import CountFavorite from 'components/CountFavorite';
import Kebab from 'components/Kebab';
import questionBoxImg from 'assets/images/img_QuestionBox.svg';
+import AnswerEditForm from 'components/AnswerEditForm';
const QnAList = ({ name, imageSource, questionList, setQuestionList, onDeleteQuestion }) => {
QnAList.propTypes = {
@@ -33,9 +34,9 @@ const QnAList = ({ name, imageSource, questionList, setQuestionList, onDeleteQue
};
const [visibleMenuId, setVisibleMenuId] = useState(null);
-
const location = useLocation();
const isAnswerPage = location.pathname.startsWith('/post/') && location.pathname.includes('/answer');
+ const [editId, setEditId] = useState(null);
const handleKebabClick = (id) => {
setVisibleMenuId((prevVisibleMenuId) => (prevVisibleMenuId === id ? null : id));
@@ -79,11 +80,28 @@ const QnAList = ({ name, imageSource, questionList, setQuestionList, onDeleteQue
onDeleteQuestion={handleDeleteQuestion}
onAnswerDeleted={handleAnswerDeleted}
setQuestionList={setQuestionList}
+ setEditId={setEditId}
+ answerId={question.answer ? question.answer.id : null}
/>
)}
-
-
+
+ {question.answer && question.answer.id === editId ? (
+
+ ) : (
+
+ )}
+
))}