From 6c47ba9841a29a541bc6bd2d74c78dbb58500e8a Mon Sep 17 00:00:00 2001
From: baegofda <molly.daleo3o@gmail.com>
Date: Thu, 19 Dec 2024 17:20:31 +0900
Subject: [PATCH] =?UTF-8?q?BottomSheet=20=EB=8B=AB=EA=B8=B0=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BottomSheet/BottomSheet.stories.tsx       |  1 +
 src/core/components/BottomSheet/index.tsx     | 24 ++++++++++++-------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/core/components/BottomSheet/BottomSheet.stories.tsx b/src/core/components/BottomSheet/BottomSheet.stories.tsx
index df6c899..9c9cbcb 100644
--- a/src/core/components/BottomSheet/BottomSheet.stories.tsx
+++ b/src/core/components/BottomSheet/BottomSheet.stories.tsx
@@ -44,6 +44,7 @@ export const Default = (props: BottomSheetProps) => {
             target={props.target ?? 'bar'}
             isOpen={props.isOpen || isOpen}
             onClose={onToggle}
+            useCloseBtn
             useClickOutsideEvent
           >
             BottomSheet
diff --git a/src/core/components/BottomSheet/index.tsx b/src/core/components/BottomSheet/index.tsx
index 69f9db5..6e702ca 100644
--- a/src/core/components/BottomSheet/index.tsx
+++ b/src/core/components/BottomSheet/index.tsx
@@ -9,6 +9,7 @@ import {
   BOTTOM_SHEET_ROUNDED_VARIANTS,
   BOTTOM_SHEET_ROUNDED_VARIANTS_MAPPER,
 } from '@/core/components/BottomSheet/constants';
+import IconButton from '@/core/components/Button/IconButton';
 
 const BottomSheet = forwardRef(
   (
@@ -44,15 +45,20 @@ const BottomSheet = forwardRef(
         >
           <div className={clsx('p-4', className)}>
             {useCloseBtn ? (
-              <div className='mb-4 flex'>
-                <button
-                  className='ml-auto'
-                  onClick={onClose}
-                  aria-label='창 닫기'
-                >
-                  {CloseIcon}
-                </button>
-              </div>
+              <IconButton
+                className={'ml-auto'}
+                size={'h-24'}
+                backgroundColor={'gray-02'}
+                onClick={onClose}
+                aria-label='창 닫기'
+                icon={
+                  <Icon
+                    className={'text-[0.8125rem] text-gray-07'}
+                    iconKey={'x'}
+                    weight={'bold'}
+                  />
+                }
+              />
             ) : null}
             {children}
           </div>