diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.jsx b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.jsx index 3b6c820..a7bc44a 100644 --- a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.jsx +++ b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.jsx @@ -2,23 +2,42 @@ import styles from './ArticleDetailAnswerInput.module.css'; import { useAnswerWrite } from '../../../../hooks/api/useAnswerWrite'; import { useAnswerEdit } from '../../../../hooks/api/useAnswerEdit'; import { useParams } from 'react-router-dom'; -import { useState } from 'react'; +import { useRef, useEffect, useState } from 'react'; import SendIcon from '/src/assets/icons/send.svg?react'; export default function ArticleDetailAnswerInput({ onSubmit, initialAnswer, isEditing = false }) { + // TODO: 우선 Textarea로 댓글 수정. 필요시 Input으로 다시 변경 const { answerWrite } = useAnswerWrite(); const { answerEdit } = useAnswerEdit(); const { questionId } = useParams(); - const [newAnswer, setNewAnswer] = useState(initialAnswer); + const [answer, setAnswer] = useState(initialAnswer); + + const textareaRef = useRef(null); + + const adjustTextareaHeight = () => { + if (textareaRef.current) { + textareaRef.current.style.height = 'auto'; + textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`; + } + }; + + useEffect(() => { + adjustTextareaHeight(); + }, [answer]); + + const handleInput = (e) => { + const { value } = e.target; + setAnswer(value); + }; const handleSubmit = async (e) => { e.preventDefault(); console.log(isEditing); if (isEditing) { - await answerEdit(questionId, newAnswer); + await answerEdit(questionId, answer); } else { - await answerWrite(questionId, newAnswer); + await answerWrite(questionId, answer); } - onSubmit(newAnswer); + onSubmit(answer); }; return ( @@ -26,14 +45,16 @@ export default function ArticleDetailAnswerInput({ onSubmit, initialAnswer, isEd onSubmit={handleSubmit} className={styles.answer} > - setNewAnswer(e.target.value)} + + {articleContent.length > 950 &&
{articleContent.length} / 1000
} + ); }