Fix/bottom sheet open twice

src/assets/icons/index.ts

@@ -14,6 +14,7 @@ import CheckIcon from './check.svg?react';
 import ClockIcon from './clock.svg?react';
 import CloseIcon from './close.svg?react';
 import CommentIcon from './comment.svg?react';
+import DefaultProfileIcon from './default-profile.svg?react';
 import DownChevronIcon from './down-chevron.svg?react';
 import GoogleIcon from './google.svg?react';
 import HideIcon from './hide.svg?react';
@@ -51,6 +52,7 @@ export {
   ClockIcon,
   CloseIcon,
   CommentIcon,
+  DefaultProfileIcon,
   DownChevronIcon,
   GoogleIcon,
   HideIcon,

src/components/Home/Comment/Comment.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { useReactComment } from '@apis/comment/useComment';
 import { Col, Row } from '@components/commons/Flex/Flex';
+import ProfileImg from '@components/commons/ProfileImg/ProfileImg';
 import Text from '@components/commons/Text/Text';
 import useModal from '@hooks/useModal/useModal';
 import { CommentResponse } from '@interfaces/api/comment';
@@ -69,7 +70,7 @@ const Comment = React.memo(({ comment }: CommentProps) => {
       <Col padding={'14px 20px 24px'}>
         <Row justifyContent={'space-between'} alignItems={'flex-start'}>
           <Row gap={8}>
-            <CommentAuthorProfileImg src={'https://picsum.photos/50/50'} alt={'profile'} />
+            <ProfileImg url={comment.writer.profileImageUrl} size={22} />
             <Col gap={2}>
               <Row>
                 <Text size={14} color={colors.black_60}>

src/components/Home/TopicComments/TopicComments.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { memo, useState } from 'react';
 
 import { useComments, useCreateComment } from '@apis/comment/useComment';
 import { Row } from '@components/commons/Flex/Flex';
@@ -21,7 +21,7 @@ interface TopicCommentsProps {
   topic: TopicResponse;
 }
 
-const TopicComments = ({ topic }: TopicCommentsProps) => {
+const TopicComments = memo(({ topic }: TopicCommentsProps) => {
   const { data: comments, fetchNextPage } = useComments(
     topic.topicId,
     topic.selectedOption !== null
@@ -71,6 +71,6 @@ const TopicComments = ({ topic }: TopicCommentsProps) => {
       </CommentInputContainer>
     </TopicCommentsContainer>
   );
-};
+});
 
 export default TopicComments;

src/components/commons/ProfileImg/ProfileImg.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { DefaultProfileIcon } from '@icons/index';
+
+interface ProfileImgProps {
+  url: string | null;
+  size?: string | number;
+  rounded?: boolean;
+}
+
+const ProfileImg = ({ url, size = '100%', rounded = true }: ProfileImgProps) => {
+  if (!url) {
+    return (
+      <div>
+        <DefaultProfileIcon
+          width={size}
+          height={size}
+          style={rounded ? { borderRadius: '50%' } : {}}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <img
+      src={url}
+      alt="프로필 이미지"
+      width={size}
+      height={size}
+      style={rounded ? { borderRadius: '50%' } : {}}
+    />
+  );
+};
+
+export default ProfileImg;

src/hooks/useBottomSheet/useBottomSheet.tsx

@@ -28,7 +28,7 @@ const useBottomSheet = (props: UseBottomSheetProps) => {
     </BottomSheet>
   );
 
-  return { BottomSheet: isOpen ? Sheet : () => null, toggleSheet };
+  return { BottomSheet: Sheet, toggleSheet };
 };
 
 export default useBottomSheet;