bug:새 댓글 작성 오류 수정

[tkv00]

구현내용

• 원래 좋아요기능까지 완료 후PR하려 했으나 수정된 부분이 많아 우선PR 후 백앤드분들이 구현완료 시 바로 카테고리 분류기능과 좋아요 기능(서버통신)을 함께 구현 후 PR하겠습니다.

• UI면에서 변화는 없고 이전에 있던 댓글 작성 시 바로 댓글 리스트에 올라가지 않는 부분을 수정했습니다.

• comment 개수를 Zustand를 이용하여 관리합니다.

  
  import { create } from "zustand";

const useCommentStore = create((set) => ({ commentCounts: {}, //각 게시물ID가 키,댓글 수를 값 //댓글 수 업데이트 함수 setCommentCount: (postId, count) => set((state) => ({ commentCounts: { ...state.commentCounts,

  },
})),

//특정 게시물의 댓글 수 1씩 증가 함수 incrementCommentCount: (postId) => set((state) => ({ commentCounts: { ...state.commentCounts, postId: (state.commentCountspostId || 0) + 1, // 기존 값이 없으면 0에서 시작 }, })),

// 특정 게시물의 댓글 수를 1 감소시키는 함수

decrementCommentCount: (postId) => set((state) => ({ commentCounts: { ...state.commentCounts,

    [postId]: Math.max((state.commentCounts[postId] || 0) - 1, 0),
  },
})),

}));

export default useCommentStore;

<hr/>

### 새댓글 작성 시 바로 댓글 리스트에 올리는 방식
1. ` Zustand`에서 해당 게시물의 댓글을 관리->새 댓글 작성 시 댓글리스트를 업데이트하는 방식->댓글이 2배씩 생성되는 오류 발생
2. `useState`로 댓글을 관리하고 `getCommentApi`를 호출하여 댓글을 불러온다->새 댓글 작성 시 댓글배열을 초기화하고 `getCommentApi`를 다시 한 번 호출하여 댓글리스트를 불러온다.
```javascript
const handleCommentSubmit = async () => {
    // 빈 댓글 작성 시 버튼 클릭 금지 및 비활성화
    if (isCommentEmpty) return;

    try {
      //새 댓글 작성
      await commentApi(post.id, comment);
      // 입력칸 초기화
      setComment("");

      setPage(1);
      //댓글 배열 초기화
      setComments([]);
      //새 댓글이 작성된 새로운 댓글 목록 불러오기.
      await getCommentApi(post.id, 1, setComments, setIsLoading, setHasMore);
    } catch (error) {
      console.log("댓글 전송 실패", error);
    }
  };

[jihyun132]

수고하셨습니다!