diff --git a/src/components/epigram/Comment/CommentItem.tsx b/src/components/epigram/Comment/CommentItem.tsx index 7b95277d..f4d48d95 100644 --- 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 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 (
{ - 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({ + 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 deleted file mode 100644 index 7da19bb7..00000000 --- a/src/hooks/useEpigramCommentDeleteHook.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { useMutation, useQueryClient } from '@tanstack/react-query'; -import { deleteComment } from '@/apis/epigramComment'; -import { toast } from '@/components/ui/use-toast'; -import queries from '@/apis/queries'; - -interface DeleteCommentVariables { - commentId: number; - epigramId: number; -} - -const useEpigramCommentDelete = () => { - const queryClient = useQueryClient(); - - return useMutation({ - mutationFn: ({ commentId }) => deleteComment(commentId), - onSuccess: (_, { epigramId }) => { - // 특정 에피그램의 댓글 목록 쿼리 무효화 - queryClient.invalidateQueries({ - queryKey: queries.epigramComment.getComments(epigramId).queryKey, - }); - - toast({ - title: '댓글 삭제 성공', - description: '댓글이 성공적으로 삭제되었습니다.', - }); - }, - onError: (error) => { - toast({ - title: '댓글 삭제 실패', - description: `댓글 삭제 중 오류가 발생했습니다: ${error instanceof Error ? error.message : '알 수 없는 오류'}`, - variant: 'destructive', - }); - }, - }); -}; - -export default useEpigramCommentDelete; diff --git a/src/pageLayout/MypageLayout/MyContent.tsx b/src/pageLayout/MypageLayout/MyContent.tsx index a41cc2ae..62713dbc 100644 --- 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 }); }; // 댓글 수정