refactor: 댓글 불러올 때 api 요청 수 줄이기

go-cham · Aug 22, 2023 · fdeba79 · fdeba79
1 parent df48ad7
commit fdeba79
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/src/features/comments/components/CommentItem/CommentItem.tsx b/src/features/comments/components/CommentItem/CommentItem.tsx
@@ -3,7 +3,6 @@ import { useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { commentStateAtom } from '@/features/comments/states/comment';
 import { useUser } from '@/features/user/queries/useUser';
-import { useGetMyChoice } from '@/features/vote/queries';
 import CommentContent from './CommentContent';
 import CommentFooter from './CommentFooter';
 import CommentHeader from './CommentHeader';
@@ -37,10 +36,6 @@ export function CommentItem({
   scrollEnabled,
 }: CommentItemProps) {
   const [commentState, setCommentState] = useAtom(commentStateAtom);
-  const { data: choice } = useGetMyChoice({
-    userId: user.id,
-    postId: user.choiceLabel ? undefined : commentState.postId || undefined,
-  });
   const navigate = useNavigate();
   const { user: currentUser } = useUser();
   const ref = useRef<HTMLDivElement | null>(null);
@@ -111,7 +106,7 @@ export function CommentItem({
         email={user.email}
         nickname={user.nickname}
         age={user.age}
-        choice={user.choiceLabel || choice?.label || null}
+        choice={user.choiceLabel}
         isWriter={isWriter}
         isMyComment={user.id === currentUser?.id}
         commentId={commentId}

diff --git a/src/features/comments/components/CommentList/CommentList.tsx b/src/features/comments/components/CommentList/CommentList.tsx
@@ -45,7 +45,7 @@ export function CommentList({ writerId, comments }: CommentListProps) {
                       email: reply.user.email,
                       nickname: reply.user.nickname,
                       age: calculateAgeFromBirthDate(reply.user.birthDate),
-                      choiceLabel: null, // TODO: api 응답 변경
+                      choiceLabel: reply.user.choice?.label || null,
                     }}
                     isWriter={writerId === reply.user.id}
                     content={reply.content}

diff --git a/src/features/comments/queries/useGetComments.tsx b/src/features/comments/queries/useGetComments.tsx
@@ -50,6 +50,13 @@ export function useGetComments(postId: number) {
                 profileImage: user.profileImageUrl,
                 nickname: user.nickname,
                 birthDate: user.birthDate,
+                worryChoice: user.worryChoice
+                  ? {
+                      id: user.worryChoice.id,
+                      label: user.worryChoice.label,
+                      isAbstained: user.worryChoice.isAbstained === 'yes',
+                    }
+                  : null,
               },
             }),
           ) || [],

diff --git a/src/features/comments/types.ts b/src/features/comments/types.ts
@@ -28,6 +28,11 @@ export interface Comment {
       profileImage: string | null;
       nickname: string;
       birthDate: string;
+      choice: {
+        id: number;
+        label: string;
+        isAbstained: boolean;
+      } | null;
     };
   }[];
 }