[supabase] 댓글 관리할 테이블 만들기

Comments 관리할 테이블 하나 만들기

 

먼저 posts 등의 게시글을 저장할 data table이 있다고 가정한다.

 

본인의 posts 테이블의 설저은 이러하다. 아래 쪽에서 foreign keys(외래키) 부분을 보면 auth (사용자 정보) 테이블에서 users라는 테이블의 id라는 key를 외래키로 받고 있고, 이를 posts 테이블의 user_id 칼럼에서 끌어다 사용하는 것을 알 수 있다.

 

이 원리로 새로 만들 댓글 테이블도 외부에서 가져올 데이터를 외래키로 설정해주면 된다.

 

 

 

새로운 테이블을 만든다.

posts 테이블은 게시글을 관리하는 테이블로 기존에 만들어둔 것이다.

 

 

Foreign keys (외래키) 관계 설정하기

 

컬럼 5개가 있는데, id는 그 코멘트만이 갖는 고유한 아이디이다. primary 기본값 설정이 되어 있고, 본인은 그냥 정수로 처리했다. uuid 등으로 설정하여도 좋다.

 

그리고 created_at은 작성 시점을 타임스태프로 기록 하는 것이고, comment는 사용자의 댓글을 담을 것이기에 text 타입으로 설정한다.

 

그리고 user_id와 post_id를 외래키로 받아와야 하는 부분인데, user_id를 만든 이유는 그 코멘트가 어떤 유저의 코멘트인지 검증을 할 수 있어야 수정/삭제 기능을 만들 수 있기 때문이다.

 

그리고 post_id는 이 댓글이 어느 글에서 달린 것인지 알아야 하기 때문이다.

 

 

 

즉 본인은 현재 data 테이블이 하나 있을 것이고, auth가 있을 것인데, user_id는 auth 테이블에서 외래키로 받아오면 되고, post_id는 posts 테이블에서 외래키로 받아오면 되는 것이다.

 

 

데이터 타입을 지정하지 않은 이유는 외래키를 설정하면 어차피 그 타입에 맞게 수정된다.

 

 

Add foreign key relation을 눌러서 외래키를 설정하면 아래 처럼 사이드 패널이 뜬다.

 

 

 

차례대로 작성하는데, posts라는 테이블은 본인의 게시글을 저장하는 테이블이다.

그리고 내가 방금 만든 comments 라는 테이블의 post_id를 외래키로 관계 설정을 하겠다는 의미인데, posts 테이블의 id라는 컬럼을 참조할 것이다. posts 테이블의 Id 컬럼은 게시글 하나 하나마다 부여된 고유한 id이다. 즉 어떤 게시글인지 식별할 수 있게 해준다.

 

그리고 cascade 옵션은 연좌제라는 옵션으로, 외래키로 묶여 있는 게시글이나 유저 정보가 삭제되면 어떻게 처리할 것인지 묻는 것인데, cascade 설정을 해두면 하나라도 삭제되면 모두 엮여서 삭제되게 만든다.

 

 

그리고 foreign key 관계를 하나 더 만든다. posts 테이블이 아니라 유저 정보는 auth 테이블에서 가져와야 하기 때문이다. 같은 방법으로 처리하면 된다.

 

그러면 스키마 비쥬얼라이저 메뉴에서 아래와 같이 테이블 간 관계가 설정되었음을 확인할 수 있다.

 

 

 

댓글 설정 권한 확인하기

 

모두가 댓글을 남길 수 있도록 권한설정을 해주어야 한다.

 

 

 

Authentication 클릭

 

 

Configuration - Policies 클릭

 

 

2 개의 정책이 보이는데, 아래는 기존에 만들었던 posts의 정책이고, 위는 방금 만든 comments 테이블의 정책이다.

아직 아무런 정책이 없다고 떠 있다.

 

 

 

 

우측 사이드 패널에서 회원 가입한 사람만 댓글을 달 수 있는 첫번째 Insert 템플릿을 클릭하면 내용이 알아서 채워진다.

따로 건드릴 필요는 없다.

 

 

 

 

 

 

댓글을 달아서 테스트 해봤는데 잘 들어온다.

유효성 검사나 도배 방지, 오류 케이스에 따른 오류 문구 출력 등 해야 할 작업이 더 많고

 

완성된 코드는 아니지만 댓글을 다는 로직은 아래 순서로 구현했다.

 

// 댓글창 Form 스타일드 컴포넌트로 스타일링

const CommentForm = styled.form`
  display: flex;
  flex-direction: column;
  margin-top: 10px;
`;

const CommentInput = styled.textarea`
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  width: 100%;
  resize: vertical;
`;

// 댓글 작성 함수 작성
const handleCommentSubmit = async (postId, commentContent) => {
  if (!currentUser) {
    alert('로그인 후 댓글을 작성할 수 있습니다.');
    return;
  }

  const { error } = await supabase
    .from('comments')
    .insert([{ post_id: postId, user_id: currentUser.id, comment: commentContent }]);

  if (error) {
    console.error('Error adding comment:', error.message);
    return;
  }

  await fetchComments(posts);
};

// 댓글작성 Form 렌더링 및 함수 이밴트 핸들러 장착
<CommentForm onSubmit={(e) => {
  e.preventDefault();
  const comment = e.target.elements.comment.value;
  handleCommentSubmit(post.id, comment);
  e.target.reset();
}}>
  <CommentInput name="comment" placeholder="댓글을 작성하세요." />
  <Button type="submit">댓글 작성</Button>
</CommentForm>