15.12.4 댓글 수정 기능 구현하기

이 프로젝트에서 마지막으로 구현할 기능은 댓글 수정 기능입니다. 댓글을 수정할 때는 댓글 작성 기능을 구현할 때 만든 CommentModal 컴포넌트를 재사용하겠습니다. 구현 방식은 방금 삭제 기능을 구현한 것과 비슷합니다.

ArticleScreen에서 modifyingComment라는 상태를 만들고, onModify 함수가 호출되면 selectedCommentId와 modifying 상태를 업데이트하도록 만드세요.

그리고 추후 댓글 입력창의 기본값을 설정하기 위해 선택한 댓글의 내용을 알고 있어야 하므로, selectedCommentId를 사용하여 댓글 객체를 찾아서 selectedComment에 담으세요.

screens/ArticleScreen.tsx

import CommentModal from '../components/CommentModal';
(...)
const [askRemoveComment, setAskRemoveComment] = useState(false);
const [modifying, setModifying] = useState(false);

(...)

const onModify = (commentId: number) => {
  setSelectedCommentId(commentId);
  setModifying(true);
};
const onCancelModify = () => {
  setModifying(false);
};
const onSubmitModify = (message: string) => {
  setModifying(false);
  // TODO: 구현 예정
};

const selectedComment = commentsQuery.data?.find(
  (comment) => comment.id === selectedCommentId,
);
(...)