diff --git a/src/assets/images/icons/ic_Close.svg b/src/assets/images/icons/ic_Close.svg index 0e83e57..ed3121c 100644 --- a/src/assets/images/icons/ic_Close.svg +++ b/src/assets/images/icons/ic_Close.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/assets/images/icons/ic_Edit.svg b/src/assets/images/icons/ic_Edit.svg index 5f59a14..c920b1e 100644 --- a/src/assets/images/icons/ic_Edit.svg +++ b/src/assets/images/icons/ic_Edit.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/assets/images/icons/ic_Rejection.svg b/src/assets/images/icons/ic_Rejection.svg index b5a36d1..cbf7a5e 100644 --- a/src/assets/images/icons/ic_Rejection.svg +++ b/src/assets/images/icons/ic_Rejection.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/components/AnswerContent/index.jsx b/src/components/AnswerContent/index.jsx index 7eae56c..953936e 100644 --- a/src/components/AnswerContent/index.jsx +++ b/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,8 @@ const AnswerContent = ({ answer, name, imageSource }) => { const location = useLocation(); const [textareaValue, setTextareaValue] = useState(''); + const [updatedAnswer, setUpdatedAnswer] = useState(answer); + const [isLoading, setIsLoading] = useState(false); const isFeedPage = location.pathname.startsWith('/post/') && !location.pathname.includes('/answer'); const isAnswerPage = location.pathname.startsWith('/post/') && location.pathname.includes('/answer'); @@ -28,32 +34,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 = () => {`${name}의; const renderAnswerHeader = () => (
-

{name}

-

{formatCreatedAt(answer.createdAt)}

+

{name}

+

{formatCreatedAt(updatedAnswer.createdAt)}

); - const renderAnswerContent = () =>

{answer.content}

; + const renderAnswerContent = () =>

{updatedAnswer.content}

; const renderAnswerForm = () => ( -
+