팀 프로젝트

진행상황

기능 개발 2일차, 어제는 댓글 정보를 supabase table 에서 조회해서 화면에 출력하는 것을 했고, 오늘은 댓글을 입력하고 삭제하는 기능을 추가하였다.

다음에는 만들어둔 review_details 페이지를 동적 라우팅으로 연결하는 작업을 할 예정이다

Supabase Table 에 정보 추가하기

//src>apis>comments.ts
export const insertNewComment = async (comment: newComment) => {
  const { data, error } = await supabase
    .from('comments')
    .insert([comment])
    .select();

  console.log('insert data>>', data, 'insert error>>', error);
};

//src>components>review_details>CommentInput.tsx
				(전략)
const InsertMutate = useMutation({
    mutationFn: insertNewComment,
    onSuccess: () => {
      toast.success('댓글이 성공적으로 등록되었습니다!', {
        position: 'top-right',
        autoClose: 2000,
        progress: undefined,
        theme: 'light',
      });
      queryClient.invalidateQueries({ queryKey: ['comments'] });
    },
  });

const submitComment = async (e: React.FormEvent) => {
    e.preventDefault();
    console.log('연결됨');

    // 새로운 댓글 데이터 생성
    const newCommentData = new newComment(reviewId, USER_ID, comment);

    InsertMutate.mutate(newCommentData);

    setComment('');
  };
				(후략)

react-toastify 를 이용해 mutation 이 성공하면 토스트 알림을 출력하도록 하고 있다.

클래스 생성자를 이용하여 newComment 객체를 생성하였으며 이를 mutationFn에 전달하여 실행한다.

newComment를 전달받은 insertNewComment는 이를 supabase의 comments 테이블에 새로운 행으로 추가하는 방식이다.

이전 프로젝트에서 mutation을 사용하는 것이 이상하게 잘 안되어서 결국 실패한 경험이 있는데 이번에는 막히는 부분 없이 수월하게 진행 되어서 시간 절약이 많이 되었다.