From 41c0cccf50a7addb125a53b88768b0ebdc1dc56d Mon Sep 17 00:00:00 2001
From: baegofda <molly.daleo3o@gmail.com>
Date: Sun, 3 Nov 2024 00:39:37 +0900
Subject: [PATCH] =?UTF-8?q?BottomSheet=20useClickOutside=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/core/components/BottomSheet/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/core/components/BottomSheet/index.tsx b/src/core/components/BottomSheet/index.tsx
index 5740816..6f3f65b 100644
--- a/src/core/components/BottomSheet/index.tsx
+++ b/src/core/components/BottomSheet/index.tsx
@@ -1,12 +1,13 @@
 import { X } from '@phosphor-icons/react';
 import clsx from 'clsx';
-import { PropsWithChildren, forwardRef } from 'react';
+import { forwardRef, PropsWithChildren } from 'react';
 
 import { useBlockScrollingEffect } from '@/hooks/effects/useBlockScrollingEffect';
 import ModalBase from '../Modal/ModalBase';
 import { VARIANTS } from '../Modal/ModalBase/constants';
 import Section from '../Section';
 import { BottomSheetProps } from './types';
+import useClickOutside from '@/hooks/useClickOutSide';
 
 const BottomSheet = forwardRef(
   (
@@ -19,6 +20,7 @@ const BottomSheet = forwardRef(
     }: PropsWithChildren<BottomSheetProps>,
     ref: React.Ref<HTMLDialogElement>,
   ) => {
+    const { contentRef } = useClickOutside<HTMLDivElement>(onClose);
     const { target, className, ...rest } = props;
     const CloseIcon = <X size='24' fill='#343330' />;
 
@@ -38,6 +40,7 @@ const BottomSheet = forwardRef(
             'h-full animate-bottom-sheet rounded-t-xl p-4',
             className,
           )}
+          ref={contentRef}
           hasRounded={false}
           hasShadow
         >