✍ 코드 작성

1. db.json - mock 데이터 구성

: postId를 작성되어진 article 하나의 id인 'ceda'로 고정시켰다.

{
  "articles": [
    {
      "id": "ceda",
      "category": "모각코",
      "title": "afds",
      "content": "<p>adsgsdg</p>",
      "author_id": "",
      "date": "2024-09-14T20:57:19.686Z",
      "cafe_address": "강남",
      "region": "",
      "cafe_name": "우리집"
    }
  ],
  "comments": [
    {
      "id": "30df",
      "text": "댓글 1을 입력했습니다.",
      "postId": "ceda"
    },
    {
      "id": "b7d6",
      "text": "댓글 2를 입력했습니다.",
      "postId": "ceda"
    }
  ]
}

---

2. TanStack Query, json-server를 이용하여 댓글 CRUD 기능 구현

1) create

• useMutation 훅을 사용하여 addComment 함수 정의
• '댓글 추가' 버튼에 onClick으로 실행시킬 handleAddComment 함수 정의
  

2) read

• useQuery 훅을 사용하여 댓글 목록 가져오기
  

3) update

• useMutation 훅을 사용하여 editComment 함수 정의
• '수정 완료' 버튼에 onClick으로 실행시킬 handleEditComment 함수 정의
  

4) delete

• useMutation 훅을 사용하여 deleteComment 함수 정의
• '수정 완료' 버튼에 onClick으로 실행시킬 handleDeleteComment 함수 정의
  

---

3. Tailwind를 이용하여 UI 꾸미기

1)게시글 바로 아래에 '댓글 입력 폼' 먼저 구성

• textarea 태그로 작성란과 '댓글 추가'버튼이 들어간다.

2) 그 아래에 댓글 목록 구성

• 기존에는 '수정', '삭제' 버튼만 보여진다.
• '수정' 버튼을 클릭 => 수정할 댓글을 입력할 수 있는 textarea와 '수정 완료' 버튼과 수정을 취소할 '취소' 버튼이 보여진다.

3) 전체 UI 코드 보기

---

👊 Trouble Shooting

1. zustand???

zustand를 댓글 기능부분에서도 사용해야 하는 줄 알았는데 로그인/회원가입 기능에서만 사용하면 된다고 하여 작성한 코드를 지웠다.

2. 'handleOOComment' 함수 정의 시,

기존에 알고 있던 방식은
button 태그에 onClick으로 함수를 선언하고, 선언할 때 mutation.mutate({text, postId}) 이렇게 주는 걸로 알고 있었다.
추가, 수정, 삭제에 대한 useMutation에 mutate의 이름을 각각 지정 후, handleAddComment, handleEditComment, handleDeleteComment 함수를 만들어 버튼의 onClick에서 함수를 실행시켜 줬는데 이 때 내가 작성한 처음 코드는 addComment.mutate(), editComment.mutate(), deleteComment.mutate() 라고 적어줬다.
실행이 제대로 되지않아 수정한 코드는 'mutation.mutate' 이 부분 전체를 mutate의 alias(별칭)이었다.
addComment(), editComment(), deleteComment() 이렇게 작성해야 했다.