FE-54🐛 댓글 불러오지못하는 문제 해결 (#186)

* FE-54🐛 댓글 불러오지못하는 문제 해결 * FE-54🐛build error 해결 * FE-54💄 url링크버튼 스타일 수정
epigram5-9 · Aug 4, 2024 · 406ebc4 · 406ebc4
1 parent 3943288
commit 406ebc4
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 32 deletions.
diff --git 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
@@ -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<CommentResponseType, Error, InfiniteData<CommentResponseType>>({
+    ...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
@@ -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
@@ -2,25 +2,24 @@ 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: '댓글 등록 성공',
         description: '댓글이 성공적으로 등록되었습니다.',
       });
     },
     onError: (error) => {
-      // 에러 메시지 표시
       toast({
         className: 'bg-white',
         title: '댓글 등록 실패',

diff --git a/src/pageLayout/Epigram/EpigramFigure.tsx b/src/pageLayout/Epigram/EpigramFigure.tsx
@@ -43,8 +43,8 @@ function EpigramFigure({ epigram, currentUserId }: EpigramFigureProps) {
           {epigram.referenceTitle && (
             <Button type='button'>
               <Link href={`${epigram.referenceUrl}`} target='_blank'>
-                <div className='p-4 w-32 lg:w-44 h-9 lg:h-11 flex items-center justify-center rounded-full bg-line-100'>
-                  <p className='text-gray-300 text-sm lg:text-xl truncate ...'>{epigram.referenceTitle}</p>
+                <div className='p-2 lg:p-4 w-32 lg:w-44 h-9 lg:h-11 flex items-center justify-around rounded-full bg-line-100'>
+                  <p className='w-full text-gray-300 text-sm lg:text-xl truncate ...'>{epigram.referenceTitle}</p>
                   <Image src='/placeLink.svg' alt='링크 이미지' width={20} height={20} className='lg:w-9 lg:h-9' />
                 </div>
               </Link>