Merge pull request #52 from f-lab-edu/51-design-system-component-drawer

[💅 design system] �drawer 컴포넌트 생성

apps/web/app/page.tsx

@@ -1,5 +1,11 @@
 "use client";
-import { 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,8 +14,9 @@ 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 (
-    <Container margin="sm">
+    <>
       <ThemeButton />
       <ThemeButton.Toggle />
 
@@ -33,6 +40,11 @@ export default function Home() {
         </Container>
       </Container>
       <UnstyledLink href="/">떡볶이</UnstyledLink>
-    </Container>
+      <Drawer isOpen={isOpen} toggle={toggle} close={close} overlay={false}>
+        <div>show contents</div>
+        <div>:)</div>
+      </Drawer>
+      <MyButton onClick={open}>토글</MyButton>
+    </>
   );
 }

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) {

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>
   );
 };

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;
+}

packages/design-system/src/components/drawer/_drawer.stories.tsx

@@ -0,0 +1,55 @@
+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,
+  },
+};
+
+export const NoCloseButtonDrawer: Story = {
+  name: "No Close Button",
+  args: {
+    children: "Drawer No Close Button",
+    withCloseButton: false,
+  },
+};

packages/design-system/src/components/drawer/_drawer.tsx

@@ -0,0 +1,49 @@
+import classNames from "classnames/bind";
+import { ReactNode } from "react";
+import { useDrawerOutput } from "../../hooks";
+import Container from "../container";
+import MyButton from "../myButton";
+import Style from "./_drawer.module.scss";
+
+export type DrawerProps = {
+  children?: ReactNode;
+  overlay?: boolean;
+
+  withCloseButton?: boolean;
+} & Omit<React.ComponentProps<"div">, "children"> &
+  Partial<useDrawerOutput>;
+
+const style = classNames.bind(Style);
+
+const Drawer = ({
+  children,
+  overlay = true,
+  withCloseButton = true,
+  isOpen,
+
+  close,
+}: DrawerProps) => {
+  return (
+    <>
+      {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")}>
+            {withCloseButton && close != null ? (
+              <Container align="right" margin="none">
+                <MyButton onClick={() => close()}>Close</MyButton>
+                {/* !! 아이콘으로 변경하기 */}
+              </Container>
+            ) : null}
+            {children}
+          </Container>
+        </nav>
+      </aside>
+    </>
+  );
+};
+
+export default Drawer;

packages/design-system/src/components/drawer/index.ts

@@ -0,0 +1,2 @@
+export * from "./_drawer";
+export { default } from "./_drawer";

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";

packages/design-system/src/hooks/index.ts

@@ -1 +1,2 @@
 export * from "./useAppTheme";
+export * from "./useDrawer";

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 useDrawerOutput = {
+  isOpen: DrawerMode;
+  toggle: () => void;
+  close: () => void;
+  open: () => void;
+};
+
+export const useDrawer = (): useDrawerOutput => {
+  const [isOpen, setIsOpen] = useState<DrawerMode>(DRAWER_MODE.CLOSE);
+
+  return {
+    isOpen,
+    toggle: () => {
+      setIsOpen((previous) => !previous);
+    },
+    open: () => setIsOpen(DRAWER_MODE.OPEN),
+    close: () => setIsOpen(DRAWER_MODE.CLOSE),
+  };
+};