feat: 모임 게시글 수정, 삭제 기능 구현 (#513)

src/queries/group/useDeleteBookGroupCommentMutation.ts

@@ -0,0 +1,25 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { APIGroup, APIGroupComment } from '@/types/group';
+import groupAPI from '@/apis/group';
+import bookGroupKeys from './key';
+
+const useDeleteBookGroupCommentMutation = (
+  bookGroupId: APIGroup['bookGroupId']
+) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (commentId: APIGroupComment['commentId']) =>
+      groupAPI
+        .deleteGroupComment({ bookGroupId, commentId })
+        .then(({ data }) => data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: bookGroupKeys.comments(bookGroupId),
+      });
+    },
+  });
+};
+
+export default useDeleteBookGroupCommentMutation;

src/queries/group/usePatchBookGroupCommentMutation.ts

@@ -0,0 +1,31 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { APIGroup, APIGroupComment } from '@/types/group';
+import groupAPI from '@/apis/group';
+import bookGroupKeys from './key';
+
+const usePatchBookGroupCommentMutation = (
+  bookGroupId: APIGroup['bookGroupId']
+) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      commentId,
+      comment,
+    }: {
+      commentId: APIGroupComment['commentId'];
+      comment: string;
+    }) =>
+      groupAPI
+        .updateGroupComment({ bookGroupId, commentId, comment })
+        .then(({ data }) => data),
+    onSettled: () => {
+      queryClient.invalidateQueries({
+        queryKey: bookGroupKeys.comments(bookGroupId),
+      });
+    },
+  });
+};
+
+export default usePatchBookGroupCommentMutation;

src/v1/comment/BookGroupCommentList.tsx

@@ -1,19 +1,51 @@
+import { APIGroupComment } from '@/types/group';
+import useToast from '@/v1/base/Toast/useToast';
 import { useBookGroupComments } from '@/queries/group/useBookGroupCommentsQuery';
 import { useMyProfileId } from '@/queries/user/useMyProfileQuery';
 import { useBookGroup } from '@/queries/group/useBookGroupQuery';
+import usePatchBookGroupCommentMutation from '@/queries/group/usePatchBookGroupCommentMutation';
+import useDeleteBookGroupCommentMutation from '@/queries/group/useDeleteBookGroupCommentMutation';
 import { checkAuthentication } from '@/utils/helpers';
 
 import CommentList from './CommentList';
 
 const BookGroupCommentList = ({ groupId }: { groupId: number }) => {
   const isAuthenticated = checkAuthentication();
+
+  const { show: showToast } = useToast();
+
   const { data: bookGroupInfo } = useBookGroup(groupId);
   const { data: comments } = useBookGroupComments(groupId);
   const { data: myId } = useMyProfileId({ enabled: isAuthenticated });
-  const { isPublic, isMember } = bookGroupInfo;
 
+  const editComment = usePatchBookGroupCommentMutation(groupId);
+  const deleteComment = useDeleteBookGroupCommentMutation(groupId);
+
+  const { isPublic, isMember } = bookGroupInfo;
   const isHidden = !isPublic && !isMember;
 
+  const handleBookGroupCommentEdit = (
+    commentId: APIGroupComment['commentId'],
+    comment: string
+  ) => {
+    editComment.mutate(
+      { commentId, comment },
+      {
+        onSuccess: () =>
+          showToast({ type: 'success', message: '코멘트를 수정했어요' }),
+      }
+    );
+  };
+
+  const handleBookGroupCommentDelete = (
+    commentId: APIGroupComment['commentId']
+  ) => {
+    deleteComment.mutate(commentId, {
+      onSuccess: () =>
+        showToast({ type: 'success', message: '코멘트를 삭제했어요' }),
+    });
+  };
+
   return (
     <CommentList
       name={'게시글'}
@@ -23,6 +55,8 @@ const BookGroupCommentList = ({ groupId }: { groupId: number }) => {
       hiddenText={`멤버만 볼 수 있어요 🥲`}
       emptyText={`아직 게시글이 없어요.
                   가장 먼저 게시글을 남겨보세요!`}
+      onEditConfirm={handleBookGroupCommentEdit}
+      onDeleteConfirm={handleBookGroupCommentDelete}
     />
   );
 };