fix: 바텀 시트 두 번 열리던거 수정

src/apis/comment/useComment.ts

@@ -37,14 +37,13 @@ const reactComment = (commentId: number, reaction: 'like' | 'hate', enable: bool
   });
 };
 
-const useComments = (topicId: number, enabled: boolean) => {
+const useComments = (topicId: number) => {
   return useInfiniteQuery({
     queryKey: [COMMENT_KEY, topicId],
     queryFn: (params) => getComments({ topicId: topicId, page: params.pageParam, size: 20 }),
     initialPageParam: 0,
     getNextPageParam: (lastPage) =>
       lastPage.pageInfo.last ? undefined : lastPage.pageInfo.page + 1,
-    enabled: enabled,
   });
 };
 
@@ -77,7 +76,9 @@ const useReactComment = (topicId: number, commentId: number) => {
       queryClient.setQueryData(
         [COMMENT_KEY, topicId],
         (oldData: InfiniteData<PagingDataResponse<CommentResponse>, unknown> | undefined) => {
-          if (!oldData) {return oldData;}
+          if (!oldData) {
+            return oldData;
+          }
           return {
             ...oldData,
             pages: oldData.pages.map((page) => {

src/apis/topic/useTopics.ts

@@ -9,7 +9,7 @@ import client from '@apis/fetch';
 export const TOPIC_KEY = 'topics';
 
 const getTopics = () => {
-  return client.get<PagingDataResponse<TopicResponse>>('/topics/info/voting');
+  return client.get<PagingDataResponse<TopicResponse>>('/topics/info/voting?size=100');
 };
 
 const useTopics = () => {

src/components/Home/Comment/Comment.tsx

@@ -14,7 +14,6 @@ import { colors } from '@styles/theme';
 
 import { MeatballIcon, ReportIcon } from '@icons/index';
 
-import { CommentAuthorProfileImg } from './Comment.styles';
 import Thumbs from './Thumbs';
 
 interface CommentProps {

src/components/Home/TopicCard/TopicCard.styles.tsx

@@ -1,8 +1,5 @@
-import { motion } from 'framer-motion';
 import { styled } from 'styled-components';
 
-import { colors } from '@styles/theme';
-
 export const Container = styled.div`
   height: 100%;
   background-color: ${(props) => props.theme.colors.navy};

src/components/Home/TopicCard/TopicCard.tsx

@@ -4,6 +4,7 @@ import { useSwiperSlide } from 'swiper/react';
 
 import { useLatestComment } from '@apis/comment/useComment';
 import useVoteTopic from '@apis/topic/useVoteTopic';
+import ProfileImg from '@components/commons/ProfileImg/ProfileImg';
 import Text from '@components/commons/Text/Text';
 import ChoiceSlider from '@components/Home/ChoiceSlider/ChoiceSlider';
 import CommentBox from '@components/Home/CommentBox/CommentBox';
@@ -24,7 +25,6 @@ import {
   TopicContainer,
   Topic,
   UserInfoContainer,
-  UserProfileImage,
   TopicCardContainer,
   SelectTextContainer,
 } from './TopicCard.styles';
@@ -57,7 +57,7 @@ const TopicCard = ({ topic }: TopicCardProps) => {
 
   const [, setSearchParams] = useSearchParams();
   const swiperSlide = useSwiperSlide();
-  const { BottomSheet: CommentSheet, toggleSheet } = useBottomSheet({});
+  const { BottomSheet: CommentSheet, toggleSheet, isOpen } = useBottomSheet({});
   const voteMutation = useVoteTopic();
   const { data: latestCommentData, isSuccess } = useLatestComment(
     topic.topicId,
@@ -107,7 +107,7 @@ const TopicCard = ({ topic }: TopicCardProps) => {
           <Topic>{topic.topicTitle}</Topic>
         </TopicContainer>
         <UserInfoContainer>
-          <UserProfileImage src={topic.author.profileImageUrl || ''} />
+          <ProfileImg url={topic.author.profileImageUrl} size={20} />
           <Text size={14} weight={'regular'} color={colors.white_60}>
             {topic.author.nickname}
           </Text>

src/components/Home/TopicComments/TopicComments.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useState } from 'react';
+import React, { memo, useLayoutEffect, useState } from 'react';
 
 import { useComments, useCreateComment } from '@apis/comment/useComment';
 import { Row } from '@components/commons/Flex/Flex';
@@ -22,17 +22,16 @@ interface TopicCommentsProps {
 }
 
 const TopicComments = memo(({ topic }: TopicCommentsProps) => {
-  const { data: comments, fetchNextPage } = useComments(
-    topic.topicId,
-    topic.selectedOption !== null
-  );
+  const { data, fetchNextPage } = useComments(topic.topicId);
   const commentMutation = useCreateComment(topic.topicId);
   const [newComment, setNewComment] = useState('');
 
-  const commentCount = comments?.pages.reduce((acc, page) => {
+  const commentCount = data?.pages.reduce((acc, page) => {
     return acc + page.data.length;
   }, 0);
 
+  const comments = React.useMemo(() => data?.pages.flatMap((page) => page.data), [data]);
+
   return (
     <TopicCommentsContainer>
       <TopicCommentsHeader className="draggable">
@@ -46,13 +45,7 @@ const TopicComments = memo(({ topic }: TopicCommentsProps) => {
         </Row>
       </TopicCommentsHeader>
       <CommentsContainer>
-        {comments?.pages.map((group, i) => (
-          <React.Fragment key={i}>
-            {group.data.map((comment) => (
-              <Comment key={comment.commentId} comment={comment} />
-            ))}
-          </React.Fragment>
-        ))}
+        {comments?.map((comment) => <Comment key={comment.commentId} comment={comment} />)}
       </CommentsContainer>
       <CommentInputContainer>
         <CommentInput

src/hooks/useBottomSheet/useBottomSheet.tsx

@@ -16,19 +16,22 @@ const useBottomSheet = (props: UseBottomSheetProps) => {
     setIsOpen((prev) => !prev);
   }, []);
 
-  const Sheet = ({ children }: { children: React.ReactNode }) => (
-    <BottomSheet
-      open={isOpen}
-      setIsOpen={setIsOpen}
-      snapPoints={snapPoints}
-      initialSnap={initialSnap}
-      transparent={transparent}
-    >
-      {children}
-    </BottomSheet>
+  const Sheet = useCallback(
+    ({ children }: { children: React.ReactNode }) => (
+      <BottomSheet
+        open={isOpen}
+        setIsOpen={setIsOpen}
+        snapPoints={snapPoints}
+        initialSnap={initialSnap}
+        transparent={transparent}
+      >
+        {children}
+      </BottomSheet>
+    ),
+    [isOpen]
   );
 
-  return { BottomSheet: Sheet, toggleSheet };
+  return { BottomSheet: Sheet, toggleSheet, isOpen };
 };
 
 export default useBottomSheet;