Merge branch '21-design-system' into 49-design-system-component-buttons

apps/web/app/page.tsx

@@ -1,5 +1,11 @@
 "use client";
-import { Button, 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 />
 
@@ -46,5 +53,11 @@ export default function Home() {
         />
       </Container>
     </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,5 +1,6 @@
 export { default as Body } from "./body";
 export { default as Button } from "./button";
+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/functions/_config.scss

@@ -1,11 +1,11 @@
 @use "sass:map";
 @use "../base" as *;
 
-/// Get available value from $settings map.
-/// @param {string} $key - The key name.
-/// @param {string} $group - The group name.
-/// @return {string} - The value of the key.
-/// @throws {error} - If the key doesn't exist.
+/// $setting 맵으로부토 가능한 값 가져오기
+/// @param {string} $key : 키 이름
+/// @param {string} $group : 그룹 이름
+/// @return {string} : 키에 해당하는 값.
+/// @throws {error} : 키가 없을 경울 리턴
 @function config($key, $group: null) {
   @if $group {
     @if not map.has-key($settings, $group) {

packages/design-system/src/functions/index.scss

@@ -4,3 +4,4 @@
 @forward "typography";
 @forward "units";
 @forward "space";
+@forward "config";

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