From 2842648949210fb80df7aa9dedc875a273e64e39 Mon Sep 17 00:00:00 2001
From: Hye min Pyo <102423086+Pyotato@users.noreply.github.com>
Date: Sat, 10 Aug 2024 02:32:40 +0900
Subject: [PATCH 01/11] feat: add useDrawer hook

---
 packages/design-system/src/hooks/useDrawer.ts | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 packages/design-system/src/hooks/useDrawer.ts

diff --git a/packages/design-system/src/hooks/useDrawer.ts b/packages/design-system/src/hooks/useDrawer.ts
new file mode 100644
index 00000000..f1293974
--- /dev/null
+++ b/packages/design-system/src/hooks/useDrawer.ts
@@ -0,0 +1,28 @@
+import { useState } from "react";
+
+const DRAWER_MODE = {
+  OPEN: true,
+  CLOSE: false,
+} as const;
+
+type DrawerMode = (typeof DRAWER_MODE)[keyof typeof DRAWER_MODE];
+
+export type UseAppThemeOutput = {
+  isOpen: DrawerMode;
+  toggle: () => void;
+  open: () => void;
+  close: () => void;
+};
+
+export const useDrawer = (): UseAppThemeOutput => {
+  const [isOpen, setIsOpen] = useState<DrawerMode>(DRAWER_MODE.CLOSE);
+
+  return {
+    isOpen,
+    toggle: () => {
+      setIsOpen((previous) => !previous);
+    },
+    open: () => setIsOpen(DRAWER_MODE.OPEN),
+    close: () => setIsOpen(DRAWER_MODE.CLOSE),
+  };
+};

From 0aa13bb8735d115a588aacb73e253fe3ef9cf30b Mon Sep 17 00:00:00 2001
From: Hye min Pyo <102423086+Pyotato@users.noreply.github.com>
Date: Sat, 10 Aug 2024 02:33:00 +0900
Subject: [PATCH 02/11] feat: export useDrawer hook

---
 packages/design-system/src/hooks/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/design-system/src/hooks/index.ts b/packages/design-system/src/hooks/index.ts
index 50644dca..c687959e 100644
--- a/packages/design-system/src/hooks/index.ts
+++ b/packages/design-system/src/hooks/index.ts
@@ -1 +1,2 @@
 export * from "./useAppTheme";
+export * from "./useDrawer";

From 032dfe61fb28fd91012c92e0d38bcf291e2415d8 Mon Sep 17 00:00:00 2001
From: Hye min Pyo <102423086+Pyotato@users.noreply.github.com>
Date: Sat, 10 Aug 2024 02:33:25 +0900
Subject: [PATCH 03/11] feat: create drawer component

---
 .../src/components/drawer/_drawer.module.scss | 32 +++++++++++++
 .../src/components/drawer/_drawer.stories.tsx | 47 +++++++++++++++++++
 .../src/components/drawer/_drawer.tsx         | 43 +++++++++++++++++
 .../src/components/drawer/index.ts            |  2 +
 4 files changed, 124 insertions(+)
 create mode 100644 packages/design-system/src/components/drawer/_drawer.module.scss
 create mode 100644 packages/design-system/src/components/drawer/_drawer.stories.tsx
 create mode 100644 packages/design-system/src/components/drawer/_drawer.tsx
 create mode 100644 packages/design-system/src/components/drawer/index.ts

diff --git a/packages/design-system/src/components/drawer/_drawer.module.scss b/packages/design-system/src/components/drawer/_drawer.module.scss
new file mode 100644
index 00000000..ed31a99e
--- /dev/null
+++ b/packages/design-system/src/components/drawer/_drawer.module.scss
@@ -0,0 +1,32 @@
+@use "../../functions/" as *;
+@use "../../mixins/" as *;
+@use "sass:map";
+
+.drawer-menu {
+  position: fixed;
+  z-index: z-index("modal");
+  width: min(100%, 32rem);
+  height: 100vh;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  background-color: color(default, 50);
+  display: grid;
+}
+
+.drawer-menu.is-closed {
+  transform: translateX(-100%);
+}
+
+.is-open {
+  top: 0;
+  left: 0;
+  position: fixed;
+  background-color: color(default, 800);
+  width: 100vw;
+  height: 100vh;
+  z-index: z-index("overlay");
+  bottom: 0;
+  opacity: 0.85;
+}
diff --git a/packages/design-system/src/components/drawer/_drawer.stories.tsx b/packages/design-system/src/components/drawer/_drawer.stories.tsx
new file mode 100644
index 00000000..fdeeb6af
--- /dev/null
+++ b/packages/design-system/src/components/drawer/_drawer.stories.tsx
@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useEffect } from "react";
+import { useAppTheme } from "../../hooks";
+import Drawer from "./_drawer";
+
+const meta: Meta<typeof Drawer> = {
+  title: "tripie-ui/Drawer",
+  component: Drawer,
+  tags: ["autodocs"],
+  decorators: [
+    (story, context) => {
+      const { mode, setMode } = useAppTheme();
+      const selectedTheme = context.globals.theme || mode;
+
+      useEffect(() => {
+        setMode(selectedTheme);
+      }, [selectedTheme]);
+
+      return (
+        <div
+          className={`${context.globals.theme}`}
+          style={{ height: "100vh", overflow: "hidden" }}
+        >
+          {story()}
+        </div>
+      );
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "Default",
+  args: {
+    children: "default Drawer",
+  },
+};
+
+export const NoOverLayDrawer: Story = {
+  name: "No OverLay",
+  args: {
+    children: "Drawer No OverLay",
+    overlay: false,
+  },
+};
diff --git a/packages/design-system/src/components/drawer/_drawer.tsx b/packages/design-system/src/components/drawer/_drawer.tsx
new file mode 100644
index 00000000..78e55f87
--- /dev/null
+++ b/packages/design-system/src/components/drawer/_drawer.tsx
@@ -0,0 +1,43 @@
+import classNames from "classnames/bind";
+import { ReactNode } from "react";
+import { useDrawer } from "../../hooks";
+import Container from "../container";
+import MyButton from "../myButton";
+import Style from "./_drawer.module.scss";
+
+export type DrawerProps = {
+  children?: ReactNode;
+  overlay?: boolean;
+} & Omit<React.ComponentProps<"div">, "children">;
+
+const style = classNames.bind(Style);
+
+const Drawer = ({ children, overlay = true }: DrawerProps) => {
+  const { isOpen, toggle, close } = useDrawer();
+
+  return (
+    <>
+      <MyButton onClick={toggle}>Open drawer +{isOpen + ""}</MyButton>
+      {overlay ? (
+        <div
+          className={style(isOpen ? "is-open" : null)}
+          onClick={() => close()}
+        />
+      ) : null}
+
+      <aside className={style("drawer-menu", !isOpen && "is-closed")}>
+        <nav className={style("menu")}>
+          <Container className={style("menu-item")}>
+            <Container align="right" margin="none">
+              <MyButton onClick={() => close()}>닫기</MyButton>
+              {/* !! 아이콘으로 변경하기 */}
+            </Container>
+            {children}
+          </Container>
+        </nav>
+      </aside>
+    </>
+  );
+};
+
+export default Drawer;
diff --git a/packages/design-system/src/components/drawer/index.ts b/packages/design-system/src/components/drawer/index.ts
new file mode 100644
index 00000000..4ba13829
--- /dev/null
+++ b/packages/design-system/src/components/drawer/index.ts
@@ -0,0 +1,2 @@
+export * from "./_drawer";
+export { default } from "./_drawer";

From 2706e2446e4a87a0e55c9160ce8ef7ea34ac1e7a Mon Sep 17 00:00:00 2001
From: Hye min Pyo <102423086+Pyotato@users.noreply.github.com>
Date: Sat, 10 Aug 2024 02:33:53 +0900
Subject: [PATCH 04/11] feat: add no margin container option

---
 .../design-system/src/components/container/_container.tsx    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/container/_container.tsx b/packages/design-system/src/components/container/_container.tsx
index 43214abb..3c5c5f97 100644
--- a/packages/design-system/src/components/container/_container.tsx
+++ b/packages/design-system/src/components/container/_container.tsx
@@ -3,7 +3,7 @@ import { ReactNode } from "react";
 import Style from "./_container.module.scss";
 
 export type ContainerProps = {
-  margin?: "xl" | "l" | "m" | "sm" | "xsm";
+  margin?: "xl" | "l" | "m" | "sm" | "xsm" | "none";
   align?: "left" | "center" | "right";
   children?: ReactNode;
   applyMargin?:
@@ -38,7 +38,8 @@ const Container = ({
       )}
       {...props}
     >
-      <div>{children}</div>
+      {children}
+      {/* <div>{children}</div> */}
     </div>
   );
 };

From 1fcca7d6a43559a32a3da5b1e5a9b396e6cfff42 Mon Sep 17 00:00:00 2001
From: Hye min Pyo <102423086+Pyotato@users.noreply.github.com>
Date: Sat, 10 Aug 2024 02:34:49 +0900
Subject: [PATCH 05/11] feat: add no margin container option (none)

---
 .../src/components/container/_container.module.scss              | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/design-system/src/components/container/_container.module.scss b/packages/design-system/src/components/container/_container.module.scss
index a918396e..e9aacd22 100644
--- a/packages/design-system/src/components/container/_container.module.scss
+++ b/packages/design-system/src/components/container/_container.module.scss
@@ -25,6 +25,7 @@ $space-map: (
   m: space(1rem),
   sm: space(0.6rem),
   xsm: space(0.2rem),
+  none: space(0),
 );
 
 @mixin margins($direction, $size) {

From 6d98d6e08a5449bd0fa7bd4a82a021ddcff8fd67 Mon Sep 17 00:00:00 2001
From: Hye min Pyo <102423086+Pyotato@users.noreply.github.com>
Date: Sat, 10 Aug 2024 02:35:39 +0900
Subject: [PATCH 06/11] feat: export drawer component

---
 packages/design-system/src/components/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
index de23480a..a07d89ff 100644
--- a/packages/design-system/src/components/index.ts
+++ b/packages/design-system/src/components/index.ts
@@ -1,4 +1,5 @@
 export { default as Body } from "./body";
+export { default as Drawer } from "./drawer";
 export { default as MyButton } from "./myButton";
 export { default as Headers } from "./typography";
 export { default as Text } from "./typography/text";

From d7895dc182f29f346d67f5a1102d47f7179f8851 Mon Sep 17 00:00:00 2001
From: Hye min Pyo <102423086+Pyotato@users.noreply.github.com>
Date: Sat, 10 Aug 2024 02:38:47 +0900
Subject: [PATCH 07/11] feat: add drawer component

---
 apps/web/app/page.tsx                                  | 10 +++++++---
 .../design-system/src/components/drawer/_drawer.tsx    |  4 ++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index d272393e..792d3e2f 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { Headers, Text } from "@tripie/design-system";
+import { Drawer, Headers, Text } from "@tripie/design-system";
 import Container from "@tripie/design-system/components/container/_container";
 import UnstyledLink from "@tripie/design-system/components/typography/link/_link";
 import Paragraph from "@tripie/design-system/components/typography/paragraph/_paragraph";
@@ -9,7 +9,7 @@ export default function Home() {
   const text =
     "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis\npariatur, ab voluptates saepe eum at excepturi, eaque accusamus labore\ntemporibus ex nostrum in hic iure porro quod doloribus deleniti! Qui.\ntemporibus ex nostrum in hic iure porro quod doloribus deleniti!";
   return (
-    <Container margin="sm">
+    <>
       <ThemeButton />
       <ThemeButton.Toggle />
 
@@ -33,6 +33,10 @@ export default function Home() {
         </Container>
       </Container>
       <UnstyledLink href="/">떡볶이</UnstyledLink>
-    </Container>
+      <Drawer>
+        <div>show contents</div>
+        <div>:)</div>
+      </Drawer>
+    </>
   );
 }
diff --git a/packages/design-system/src/components/drawer/_drawer.tsx b/packages/design-system/src/components/drawer/_drawer.tsx
index 78e55f87..0fcbf791 100644
--- a/packages/design-system/src/components/drawer/_drawer.tsx
+++ b/packages/design-system/src/components/drawer/_drawer.tsx
@@ -17,7 +17,7 @@ const Drawer = ({ children, overlay = true }: DrawerProps) => {
 
   return (
     <>
-      <MyButton onClick={toggle}>Open drawer +{isOpen + ""}</MyButton>
+      <MyButton onClick={toggle}>Open</MyButton>
       {overlay ? (
         <div
           className={style(isOpen ? "is-open" : null)}
@@ -29,7 +29,7 @@ const Drawer = ({ children, overlay = true }: DrawerProps) => {
         <nav className={style("menu")}>
           <Container className={style("menu-item")}>
             <Container align="right" margin="none">
-              <MyButton onClick={() => close()}>닫기</MyButton>
+              <MyButton onClick={() => close()}>Close</MyButton>
               {/* !! 아이콘으로 변경하기 */}
             </Container>
             {children}

From e7c30b13030556bf66b379291b29d159ba807ab6 Mon Sep 17 00:00:00 2001
From: Hye min Pyo <102423086+Pyotato@users.noreply.github.com>
Date: Sat, 10 Aug 2024 02:43:32 +0900
Subject: [PATCH 08/11] chore: rename type

---
 packages/design-system/src/hooks/useDrawer.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/hooks/useDrawer.ts b/packages/design-system/src/hooks/useDrawer.ts
index f1293974..d1e1575f 100644
--- a/packages/design-system/src/hooks/useDrawer.ts
+++ b/packages/design-system/src/hooks/useDrawer.ts
@@ -7,14 +7,14 @@ const DRAWER_MODE = {
 
 type DrawerMode = (typeof DRAWER_MODE)[keyof typeof DRAWER_MODE];
 
-export type UseAppThemeOutput = {
+export type useDrawerOutput = {
   isOpen: DrawerMode;
   toggle: () => void;
   open: () => void;
   close: () => void;
 };
 
-export const useDrawer = (): UseAppThemeOutput => {
+export const useDrawer = (): useDrawerOutput => {
   const [isOpen, setIsOpen] = useState<DrawerMode>(DRAWER_MODE.CLOSE);
 
   return {

From 426444bc77feea9da223229ca1a2f2c4f795779f Mon Sep 17 00:00:00 2001
From: Hye min Pyo <102423086+Pyotato@users.noreply.github.com>
Date: Sat, 10 Aug 2024 02:45:35 +0900
Subject: [PATCH 09/11] chore: remove unused open func

---
 packages/design-system/src/hooks/useDrawer.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/design-system/src/hooks/useDrawer.ts b/packages/design-system/src/hooks/useDrawer.ts
index d1e1575f..600f1120 100644
--- a/packages/design-system/src/hooks/useDrawer.ts
+++ b/packages/design-system/src/hooks/useDrawer.ts
@@ -10,7 +10,6 @@ type DrawerMode = (typeof DRAWER_MODE)[keyof typeof DRAWER_MODE];
 export type useDrawerOutput = {
   isOpen: DrawerMode;
   toggle: () => void;
-  open: () => void;
   close: () => void;
 };
 
@@ -22,7 +21,6 @@ export const useDrawer = (): useDrawerOutput => {
     toggle: () => {
       setIsOpen((previous) => !previous);
     },
-    open: () => setIsOpen(DRAWER_MODE.OPEN),
     close: () => setIsOpen(DRAWER_MODE.CLOSE),
   };
 };

From 36379f633b2c1b3dda1478b4bcd551368e9698d4 Mon Sep 17 00:00:00 2001
From: Hye min Pyo <102423086+Pyotato@users.noreply.github.com>
Date: Sat, 10 Aug 2024 16:44:55 +0900
Subject: [PATCH 10/11] feat: hand over drawer control where component is used

---
 apps/web/app/page.tsx                         | 12 ++++++--
 .../src/components/drawer/_drawer.stories.tsx |  8 +++++
 .../src/components/drawer/_drawer.tsx         | 29 ++++++++++++-------
 packages/design-system/src/hooks/useDrawer.ts |  2 ++
 4 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 792d3e2f..0c181fc6 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,5 +1,11 @@
 "use client";
-import { Drawer, Headers, Text } from "@tripie/design-system";
+import {
+  Drawer,
+  Headers,
+  MyButton,
+  Text,
+  useDrawer,
+} from "@tripie/design-system";
 import Container from "@tripie/design-system/components/container/_container";
 import UnstyledLink from "@tripie/design-system/components/typography/link/_link";
 import Paragraph from "@tripie/design-system/components/typography/paragraph/_paragraph";
@@ -8,6 +14,7 @@ import ThemeButton from "../components/ThemeButton";
 export default function Home() {
   const text =
     "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis\npariatur, ab voluptates saepe eum at excepturi, eaque accusamus labore\ntemporibus ex nostrum in hic iure porro quod doloribus deleniti! Qui.\ntemporibus ex nostrum in hic iure porro quod doloribus deleniti!";
+  const { isOpen, toggle, close, open } = useDrawer();
   return (
     <>
       <ThemeButton />
@@ -33,10 +40,11 @@ export default function Home() {
         </Container>
       </Container>
       <UnstyledLink href="/">떡볶이</UnstyledLink>
-      <Drawer>
+      <Drawer isOpen={isOpen} toggle={toggle} close={close}>
         <div>show contents</div>
         <div>:)</div>
       </Drawer>
+      <MyButton onClick={open}>외부에서 open</MyButton>
     </>
   );
 }
diff --git a/packages/design-system/src/components/drawer/_drawer.stories.tsx b/packages/design-system/src/components/drawer/_drawer.stories.tsx
index fdeeb6af..089f4e8d 100644
--- a/packages/design-system/src/components/drawer/_drawer.stories.tsx
+++ b/packages/design-system/src/components/drawer/_drawer.stories.tsx
@@ -45,3 +45,11 @@ export const NoOverLayDrawer: Story = {
     overlay: false,
   },
 };
+
+export const NoCloseButtonDrawer: Story = {
+  name: "No Close Button",
+  args: {
+    children: "Drawer No Close Button",
+    withCloseButton: false,
+  },
+};
diff --git a/packages/design-system/src/components/drawer/_drawer.tsx b/packages/design-system/src/components/drawer/_drawer.tsx
index 0fcbf791..f24bd30d 100644
--- a/packages/design-system/src/components/drawer/_drawer.tsx
+++ b/packages/design-system/src/components/drawer/_drawer.tsx
@@ -1,6 +1,6 @@
 import classNames from "classnames/bind";
 import { ReactNode } from "react";
-import { useDrawer } from "../../hooks";
+import { useDrawerOutput } from "../../hooks";
 import Container from "../container";
 import MyButton from "../myButton";
 import Style from "./_drawer.module.scss";
@@ -8,17 +8,24 @@ import Style from "./_drawer.module.scss";
 export type DrawerProps = {
   children?: ReactNode;
   overlay?: boolean;
-} & Omit<React.ComponentProps<"div">, "children">;
+  withCloseButton?: boolean;
+} & Omit<React.ComponentProps<"div">, "children"> &
+  Partial<useDrawerOutput>;
 
 const style = classNames.bind(Style);
 
-const Drawer = ({ children, overlay = true }: DrawerProps) => {
-  const { isOpen, toggle, close } = useDrawer();
-
+const Drawer = ({
+  children,
+  overlay = true,
+  withCloseButton = true,
+  isOpen,
+  toggle,
+  close,
+}: DrawerProps) => {
   return (
     <>
       <MyButton onClick={toggle}>Open</MyButton>
-      {overlay ? (
+      {overlay && close != null ? (
         <div
           className={style(isOpen ? "is-open" : null)}
           onClick={() => close()}
@@ -28,10 +35,12 @@ const Drawer = ({ children, overlay = true }: DrawerProps) => {
       <aside className={style("drawer-menu", !isOpen && "is-closed")}>
         <nav className={style("menu")}>
           <Container className={style("menu-item")}>
-            <Container align="right" margin="none">
-              <MyButton onClick={() => close()}>Close</MyButton>
-              {/* !! 아이콘으로 변경하기 */}
-            </Container>
+            {withCloseButton && close != null ? (
+              <Container align="right" margin="none">
+                <MyButton onClick={() => close()}>Close</MyButton>
+                {/* !! 아이콘으로 변경하기 */}
+              </Container>
+            ) : null}
             {children}
           </Container>
         </nav>
diff --git a/packages/design-system/src/hooks/useDrawer.ts b/packages/design-system/src/hooks/useDrawer.ts
index 600f1120..84f42c5e 100644
--- a/packages/design-system/src/hooks/useDrawer.ts
+++ b/packages/design-system/src/hooks/useDrawer.ts
@@ -11,6 +11,7 @@ export type useDrawerOutput = {
   isOpen: DrawerMode;
   toggle: () => void;
   close: () => void;
+  open: () => void;
 };
 
 export const useDrawer = (): useDrawerOutput => {
@@ -21,6 +22,7 @@ export const useDrawer = (): useDrawerOutput => {
     toggle: () => {
       setIsOpen((previous) => !previous);
     },
+    open: () => setIsOpen(DRAWER_MODE.OPEN),
     close: () => setIsOpen(DRAWER_MODE.CLOSE),
   };
 };

From 3ade040442f87974f146cb5fd263c631d3bd6e29 Mon Sep 17 00:00:00 2001
From: Hye min Pyo <102423086+Pyotato@users.noreply.github.com>
Date: Sat, 10 Aug 2024 18:05:32 +0900
Subject: [PATCH 11/11] feat: remove open button control in drawer component

---
 apps/web/app/page.tsx                                 |  4 ++--
 .../design-system/src/components/drawer/_drawer.tsx   | 11 ++++-------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 0c181fc6..d616b7de 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -40,11 +40,11 @@ export default function Home() {
         </Container>
       </Container>
       <UnstyledLink href="/">떡볶이</UnstyledLink>
-      <Drawer isOpen={isOpen} toggle={toggle} close={close}>
+      <Drawer isOpen={isOpen} toggle={toggle} close={close} overlay={false}>
         <div>show contents</div>
         <div>:)</div>
       </Drawer>
-      <MyButton onClick={open}>외부에서 open</MyButton>
+      <MyButton onClick={open}>토글</MyButton>
     </>
   );
 }
diff --git a/packages/design-system/src/components/drawer/_drawer.tsx b/packages/design-system/src/components/drawer/_drawer.tsx
index f24bd30d..5a1d9408 100644
--- a/packages/design-system/src/components/drawer/_drawer.tsx
+++ b/packages/design-system/src/components/drawer/_drawer.tsx
@@ -8,6 +8,7 @@ import Style from "./_drawer.module.scss";
 export type DrawerProps = {
   children?: ReactNode;
   overlay?: boolean;
+
   withCloseButton?: boolean;
 } & Omit<React.ComponentProps<"div">, "children"> &
   Partial<useDrawerOutput>;
@@ -19,17 +20,13 @@ const Drawer = ({
   overlay = true,
   withCloseButton = true,
   isOpen,
-  toggle,
+
   close,
 }: DrawerProps) => {
   return (
     <>
-      <MyButton onClick={toggle}>Open</MyButton>
-      {overlay && close != null ? (
-        <div
-          className={style(isOpen ? "is-open" : null)}
-          onClick={() => close()}
-        />
+      {overlay ? (
+        <div className={style(isOpen ? "is-open" : null)} onClick={close} />
       ) : null}
 
       <aside className={style("drawer-menu", !isOpen && "is-closed")}>