From 322ba682d0d5389dee13941b322942e18b7cde30 Mon Sep 17 00:00:00 2001
From: healtheloper <super0872@naver.com>
Date: Wed, 18 Oct 2023 14:31:29 +0900
Subject: [PATCH] =?UTF-8?q?Drawer=20=EC=95=88=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=A0=84=ED=8C=8C=20=EB=A7=89?=
 =?UTF-8?q?=ED=9E=88=EB=8A=94=20=EA=B2=83=20=EC=88=98=EC=A0=95=ED=96=88?=
 =?UTF-8?q?=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Drawer/Drawer.tsx          | 10 ++------
 .../Popover/stories/Popover.stories.tsx       | 25 +++++++++++++++++++
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/packages/co-design-core/src/components/Drawer/Drawer.tsx b/packages/co-design-core/src/components/Drawer/Drawer.tsx
index f02841d5..c15bb438 100644
--- a/packages/co-design-core/src/components/Drawer/Drawer.tsx
+++ b/packages/co-design-core/src/components/Drawer/Drawer.tsx
@@ -148,15 +148,8 @@ export const CoDrawer = ({
       }}
     >
       {(transitionStyles) => (
-        <View
-          className={cx(classes.root, { [classes.noOverlay]: noOverlay }, className)}
-          role="dialog"
-          aria-modal
-          onMouseDown={() => !noCloseOnClickOutside && onClose()}
-          {...props}
-        >
+        <View className={cx(classes.root, { [classes.noOverlay]: noOverlay }, className)} role="dialog" aria-modal {...props}>
           <Paper
-            onMouseDown={(event) => event.stopPropagation()}
             className={cx(classes.drawer, className)}
             ref={focusTrapRef}
             style={{ ...transitionStyles.drawer, zIndex: (zIndex in theme.zIndex ? theme.zIndex[zIndex] : zIndex) + 2 }}
@@ -186,6 +179,7 @@ export const CoDrawer = ({
                 opacity={_overlayOpacity}
                 zIndex={zIndex}
                 color={overlayColor || (theme.colorScheme === 'dark' ? theme.palettes.gray[9] : theme.colors.black)}
+                onMouseDown={() => !noCloseOnClickOutside && onClose()}
               />
             </div>
           )}
diff --git a/packages/co-design-core/src/components/Popover/stories/Popover.stories.tsx b/packages/co-design-core/src/components/Popover/stories/Popover.stories.tsx
index 7cc4231b..a361c316 100644
--- a/packages/co-design-core/src/components/Popover/stories/Popover.stories.tsx
+++ b/packages/co-design-core/src/components/Popover/stories/Popover.stories.tsx
@@ -4,6 +4,8 @@ import { Center } from '../../Center';
 import { Popover } from '../Popover';
 import { useToggle } from '@co-design/hooks';
 import { Menu } from '../../Menu';
+import { Drawer } from '../../Drawer';
+import { Button } from '../../Button';
 
 export default {
   title: '@co-design/core/Popover',
@@ -151,3 +153,26 @@ export const OpenByChildrenWithFlag = {
     );
   },
 };
+
+export const InDrawer = {
+  render: (props) => {
+    const [opened, toggleOpened] = useToggle();
+
+    return (
+      <div>
+        <Button onClick={toggleOpened}>Open</Button>
+        <Drawer
+          zIndex={2998}
+          opened={opened}
+          onClose={() => {
+            toggleOpened(false);
+          }}
+        >
+          <Popover zIndex={3001} placement="bottom" content={<Content />} {...props}>
+            <button>Popover</button>
+          </Popover>
+        </Drawer>
+      </div>
+    );
+  },
+};