댓글 작성, 수정, 삭제 등의 데이터 반영

[choigirang]

기존 작성된 value값이 input의 value로 들어가있어 수정 불가

=> defaultValue 로 변경

change axios => mutate

export default function EachComment({ comment, number, src }: { comment: CommentType; number: number; src: string }) {
  // 수정 눌렀을 시 수정 모드
  const [editMode, setEditMode] = useState(false);
  // 새로 작성되는 댓글
  const [newBody, setNewBody] = useState('');
  // 유저 확인
  const user = useSelector((state: RootState) => state.user.user);

  async function editComment() {
    const res = await api.post(`/${src}/${number}/comments/${comment.commentNumber}`, {
      comment: newBody,
    });

    return res.data;
  }

  async function deleteComment() {
    const res = await api.delete(`/${src}/${number}/comments/${comment.commentNumber}`);
    return res.data;
  }

  const { mutate: editMutate } = useMutation(editComment, {
    onSuccess: () => {
      queryClient.invalidateQueries([src === 'post' ? 'post' : 'gallery', number]);
    },
    onError: () => {
      alert('서버 오류입니다. ');
    },
  });

  const { mutate: deleteMutate } = useMutation(deleteComment, {
    onSuccess: () => {
      queryClient.invalidateQueries([src === 'post' ? 'post' : 'gallery', number]);
    },
  });

  return (
    <Container>
      <BodyContainer>
        <div className="author-date">
          <p className="author">{comment.author}</p>
          <p className="date">{comment.date}</p>
        </div>
        {editMode ? (
          <textarea
            rows={3} // 원하는 행의 수
            defaultValue={comment.comment}
            onChange={e => setNewBody(e.target.value)}
          />
        ) : (
          <p className="body">{comment.comment}</p>
        )}
      </BodyContainer>
      {user.id === comment.author && (
        <BtnBox>
          {!editMode ? (
            <button onClick={() => setEditMode(!editMode)}>수정</button>
          ) : (
            <button
              onClick={() => {
                setEditMode(!editMode);
                editMutate();
              }}>
              수정완료
            </button>
          )}
          {(user.super || user.id === comment.author) && <button onClick={() => deleteMutate()}>삭제</button>}
        </BtnBox>
      )}
    </Container>
  );
}