MINE - 댓글

상품 페이지의 하단에 구매자가 판매자에게 질문할 수 있는 댓글 기능을 만들었다.
판매자는 댓글을 작성한 구매자에게 답글을 달아 구매자가 질문한 사항을 답변할 수 있도록 하였다.

useEffect(() => {
        const formData = new FormData();
        formData.append("boardid", String(props.auctionid));

        axios.post(API 주소, formData, {
            withCredentials: true
        })
        .then((res) => {
            // console.log(res.data);
            setComments(res.data);
        })
        .catch((err) => {
            console.log(err);
        })
    }, []);

useEffect hook을 통해 상품 페이지에 접속하면 서버로부터 댓글 목록을 불러와 표시한다.

이 때 불러온 댓글의 작성자와 현재 로그인한 유저를 비교해 같은 유저이면 수정과 삭제를 할 수 있도록 버튼을 표시한다.

이와 비슷하게 상품을 등록한 유저(판매자)와 현재 로그인한 유저가 같다면, 댓글에 답글 버튼을 추가해 답글을 작성할 수 있도록 하였다.

const [replyCommentFor, setReplyCommentFor] = useState<number | null>(null);
const [editCommentMode, setEditCommentMode] = useState<number | null>(null);

답글과 댓글 수정을 할 때 해당 코드처럼 number 형식으로 상태를 관리하는데, 댓글을 작성하면 댓글을 작성한 순서대로 댓글 id가 생성된다.

답글 버튼을 클릭하거나 수정 버튼을 클릭하면 해당 댓글의 id를 상태 변수에 입력하고 댓글 id와 해당 상태 변수를 비교해 같다면 답글폼이나 수정폼을 표시하는 방식이다.

{/* 답글 폼 */}
{replyCommentFor === comment.commentid && (
	<div className="border border-gray-300 p-4 rounded-md">
      <textarea
          value={replyComment}
          onChange={handleReplyInputChange}
          placeholder="답변을 입력하세요..."
          className="mt-4 p-2 border border-gray-300 rounded-md w-full"
      />
      <button onClick={handleSubmit} className="mt-2 bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">답변 추가</button>
	</div>
)}

해당 코드는 판매자가 답글 버튼을 클릭했을 때의 코드이다.

<button className="px-3 py-1 text-sm border-2 border-gray-100 m-4" onClick={() => setReplyCommentFor(comment.commentid)}>답글</button>

답글버튼을 클릭하면 onClick 이벤트로 setReplyCommentFor 함수가 실행되어 해당 상태 변수에 commentid를 저장하게 되고

replyCommentFor === comment.commentid

상태 변수와 commentid를 비교해 같은 경우 답글폼이 표시된다.

수정폼도 이와 같은 방식이다.