diff --git a/src/apis/queries.ts b/src/apis/queries.ts index 817fe12b..425830ec 100644 --- a/src/apis/queries.ts +++ b/src/apis/queries.ts @@ -43,13 +43,9 @@ const queries = createQueryKeyStore({ }), }, epigramComment: { - getComments: (request: CommentRequestType) => ({ - queryKey: ['epigramComments', request], - queryFn: () => getEpigramComments(request), - }), - getCommentList: (request: CommentRequestType) => ({ - queryKey: ['epigramComments', request] as const, - queryFn: ({ pageParam }: { pageParam: number | undefined }) => getEpigramComments({ ...request, cursor: pageParam }), + getComments: (epigramId: number) => ({ + queryKey: ['epigramComments', epigramId], + queryFn: ({ pageParam }: { pageParam?: number }) => getEpigramComments({ id: epigramId, limit: 3, cursor: pageParam }), }), getMyComments: (request: CommentRequestType) => ({ queryKey: ['myEpigramComments', request], diff --git a/src/hooks/useEpigramCommentsQueryHook.ts b/src/hooks/useEpigramCommentsQueryHook.ts index 1a01ea76..f1db908b 100644 --- a/src/hooks/useEpigramCommentsQueryHook.ts +++ b/src/hooks/useEpigramCommentsQueryHook.ts @@ -1,17 +1,12 @@ -// hooks/useEpigramCommentHook.ts - -import { useInfiniteQuery } from '@tanstack/react-query'; -import queries from '@/apis/queries'; +import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query'; import { CommentResponseType } from '@/schema/comment'; +import queries from '@/apis/queries'; -const useEpigramCommentsQuery = (epigramId: number) => { - const query = queries.epigramComment.getCommentList({ id: epigramId, limit: 3 }); - - return useInfiniteQuery({ - ...query, +const useEpigramCommentsQuery = (epigramId: number) => + useInfiniteQuery>({ + ...queries.epigramComment.getComments(epigramId), initialPageParam: undefined, - getNextPageParam: (lastPage: CommentResponseType) => lastPage.nextCursor ?? undefined, + getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined, }); -}; export default useEpigramCommentsQuery; diff --git a/src/hooks/usePatchCommentHook.ts b/src/hooks/usePatchCommentHook.ts index b215624d..f4e468d5 100644 --- a/src/hooks/usePatchCommentHook.ts +++ b/src/hooks/usePatchCommentHook.ts @@ -2,24 +2,23 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; import { patchComment } from '@/apis/epigramComment'; import { PatchCommentRequest } from '@/types/epigram.types'; import { toast } from '@/components/ui/use-toast'; +import queries from '@/apis/queries'; const usePatchCommentMutation = () => { const queryClient = useQueryClient(); return useMutation({ mutationFn: ({ commentId, ...commentData }: { commentId: number } & PatchCommentRequest) => patchComment(commentId, commentData), - onSuccess: () => { - // 댓글 목록 쿼리 무효화 - queryClient.invalidateQueries({ queryKey: ['epigramComments'] }); - - // 성공 메시지 표시 + onSuccess: (updatedComment) => { + queryClient.invalidateQueries({ + queryKey: queries.epigramComment.getComments(updatedComment.epigramId).queryKey, + }); toast({ title: '댓글 수정 성공', description: '댓글이 성공적으로 수정되었습니다.', }); }, onError: (error) => { - // 에러 메시지 표시 toast({ title: '댓글 수정 실패', description: `댓글 수정 중 오류가 발생했습니다: ${error instanceof Error ? error.message : '알 수 없는 오류'}`, diff --git a/src/hooks/usePostCommentHook.ts b/src/hooks/usePostCommentHook.ts index 952925ea..1a7d3034 100644 --- a/src/hooks/usePostCommentHook.ts +++ b/src/hooks/usePostCommentHook.ts @@ -2,17 +2,17 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; import { postComment } from '@/apis/epigramComment'; import { PostCommentRequest } from '@/types/epigram.types'; import { toast } from '@/components/ui/use-toast'; +import queries from '@/apis/queries'; const usePostCommentMutation = () => { const queryClient = useQueryClient(); return useMutation({ mutationFn: (commentData: PostCommentRequest) => postComment(commentData), - onSuccess: () => { - // 댓글 목록 쿼리 무효화 - queryClient.invalidateQueries({ queryKey: ['epigramComments'] }); - - // 성공 메시지 표시 + onSuccess: (variables) => { + queryClient.invalidateQueries({ + queryKey: queries.epigramComment.getComments(variables.epigramId).queryKey, + }); toast({ className: 'bg-white', title: '댓글 등록 성공', @@ -20,7 +20,6 @@ const usePostCommentMutation = () => { }); }, onError: (error) => { - // 에러 메시지 표시 toast({ className: 'bg-white', title: '댓글 등록 실패', diff --git a/src/pageLayout/Epigram/EpigramFigure.tsx b/src/pageLayout/Epigram/EpigramFigure.tsx index bd7dc5b8..dfef7eea 100644 --- a/src/pageLayout/Epigram/EpigramFigure.tsx +++ b/src/pageLayout/Epigram/EpigramFigure.tsx @@ -43,8 +43,8 @@ function EpigramFigure({ epigram, currentUserId }: EpigramFigureProps) { {epigram.referenceTitle && (