FE-54♻️ 댓글 삭제 훅 수정

epigram5-9 · Aug 5, 2024 · 375ddce · 375ddce
1 parent cffc327
commit 375ddce
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 85 deletions.
diff --git a/src/components/epigram/Comment/CommentItem.tsx b/src/components/epigram/Comment/CommentItem.tsx
@@ -3,9 +3,8 @@ import Image from 'next/image';
 import { CommentType } from '@/schema/comment';
 import { textSizeStyles, gapStyles, paddingStyles, contentWidthStyles } from '@/styles/CommentCardStyles';
 import getCustomRelativeTime from '@/lib/dateUtils';
-import { useToast } from '@/components/ui/use-toast';
 import { Button } from '@/components/ui/button';
-import useEpigramCommentDelete from '@/hooks/useEpigramCommentDeleteHook';
+import useDeleteCommentMutation from '@/hooks/useDeleteCommentHook';
 import DeleteAlertModal from '../DeleteAlertModal';
 import CommentTextarea from './CommentTextarea';
 
@@ -18,9 +17,16 @@ interface CommentItemProps {
 }
 
 function CommentItem({ comment, status, onEditComment, isEditing, epigramId }: CommentItemProps) {
-  const deleteCommentMutation = useEpigramCommentDelete();
-  const { toast } = useToast();
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const deleteCommentMutation = useDeleteCommentMutation({
+    onSuccess: () => {
+      setIsDeleteModalOpen(false);
+    },
+  });
+
+  const handleDeleteComment = async () => {
+    deleteCommentMutation.mutate({ commentId: comment.id, epigramId });
+  };
 
   const handleEditClick = () => {
     onEditComment(comment.id);
@@ -31,22 +37,6 @@ function CommentItem({ comment, status, onEditComment, isEditing, epigramId }: C
     return <CommentTextarea epigramId={epigramId} editingComment={comment} onEditComplete={() => onEditComment(0)} />;
   }
 
-  const handleDeleteComment = async () => {
-    try {
-      await deleteCommentMutation.mutateAsync({ commentId: comment.id, epigramId });
-      setIsDeleteModalOpen(false);
-      toast({
-        title: '댓글이 삭제되었습니다.',
-        variant: 'destructive',
-      });
-    } catch (error) {
-      toast({
-        title: '댓글 삭제 실패했습니다.',
-        variant: 'destructive',
-      });
-    }
-  };
-
   return (
     <div
       className={`h-auto bg-slate-100 border-t border-slate-300 flex-col justify-start items-start gap-2.5 inline-flex w-[360px] md:w-[384px] lg:w-[640px] ${paddingStyles.sm} ${paddingStyles.md} ${paddingStyles.lg}`}

diff --git a/src/hooks/useDeleteCommentHook.ts b/src/hooks/useDeleteCommentHook.ts
@@ -1,27 +1,37 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { deleteComment } from '@/apis/epigramComment';
 import { toast } from '@/components/ui/use-toast';
+import queries from '@/apis/queries';
 
-const useDeleteCommentMutation = () => {
-  const queryClient = useQueryClient();
+interface DeleteCommentVariables {
+  commentId: number;
+  epigramId?: number;
+}
 
-  return useMutation({
-    mutationFn: (commentId: number) => deleteComment(commentId),
-    onSuccess: () => {
-      // 댓글 목록 쿼리 무효화
-      queryClient.invalidateQueries({ queryKey: ['epigramComments'] });
+const useDeleteCommentMutation = (options?: { onSuccess?: (variables: DeleteCommentVariables) => void }) => {
+  const queryClient = useQueryClient();
 
-      // 성공 메시지 표시
+  return useMutation<unknown, Error, DeleteCommentVariables>({
+    mutationFn: ({ commentId }) => deleteComment(commentId),
+    onSuccess: (_, variables) => {
+      //NOTE:
+      if (variables.epigramId) {
+        queryClient.invalidateQueries({
+          queryKey: queries.epigramComment.getComments(variables.epigramId).queryKey,
+        });
+      }
       toast({
-        title: '댓글 삭제 성공',
-        description: '댓글이 성공적으로 삭제되었습니다.',
+        title: '댓글이 삭제되었습니다.',
+        variant: 'destructive',
       });
+
+      if (options?.onSuccess) {
+        options.onSuccess(variables);
+      }
     },
-    onError: (error) => {
-      // 에러 메시지 표시
+    onError: () => {
       toast({
-        title: '댓글 삭제 실패',
-        description: `댓글 삭제 중 오류가 발생했습니다: ${error instanceof Error ? error.message : '알 수 없는 오류'}`,
+        title: '댓글 삭제 실패했습니다.',
         variant: 'destructive',
       });
     },

diff --git a/src/hooks/useEpigramCommentDeleteHook.ts b/src/hooks/useEpigramCommentDeleteHook.ts
diff --git a/src/pageLayout/MypageLayout/MyContent.tsx b/src/pageLayout/MypageLayout/MyContent.tsx
@@ -104,26 +104,19 @@ export default function MyContent({ user }: MyContentProps) {
   };
 
   // 댓글 삭제
-  const deleteCommentMutation = useDeleteCommentMutation();
-  const handleDeleteComment = async (commentId: number) => {
-    try {
-      await deleteCommentMutation.mutateAsync(commentId);
+  const deleteCommentMutation = useDeleteCommentMutation({
+    onSuccess: ({ commentId }) => {
       setComments((prev) => ({
         totalCount: prev.totalCount - 1,
         nextCursor: prev.nextCursor,
         list: prev.list.filter((comment) => comment.id !== commentId),
       }));
       setCommentCount((prev) => prev - 1);
-      toast({
-        title: '댓글이 삭제되었습니다.',
-        variant: 'destructive',
-      });
-    } catch (error) {
-      toast({
-        title: '댓글 삭제 실패했습니다.',
-        variant: 'destructive',
-      });
-    }
+    },
+  });
+
+  const handleDeleteComment = async (commentId: number) => {
+    deleteCommentMutation.mutate({ commentId });
   };
 
   // 댓글 수정