1. Drawer

Drawer 컴포넌트는 슬라이딩 메뉴 또는 사이드바를 구현하기 위해 사용됩니다.

이 컴포넌트는 메뉴 항목, 로고, 색상, 위치 등을 사용자 정의할 수 있는 다양한 옵션을 제공합니다.

1.1. Import

import Drawer from "@components/Drawer/Drawer"

1.2. Usage

기본 사용 예제는 아래와 같습니다:

- Home
- About
- Profile
- Contact

"use client";
import Drawer from "@components/Drawer/Drawer";
import Button from "@components/Button/Button";
import { useState } from "react";
function Example() {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const onclickDrawerHandler = (open: boolean) => () => {
    setIsDrawerOpen(open);
  };
  return (
    <>
      <Drawer
        isOpen={isDrawerOpen}
        onClose={onclickDrawerHandler(false)}
          menu={[
              {
                items: [
                  { name: "Home", path: "/"},
                  { name: "About", path: "/about"},
                  { name: "Profile", path: "/profile"},
                  { name: "Contact", path: "/contact"},
                ],
              },
            ]}
      />
      <Button
        variant="border"

        onClick={onclickDrawerHandler(true)}
      >
        Drawer Open Button
      </Button>
    </>
  );
}

export default Example;

2. Menu

menu prop을 이용하여 Drawer에 표시할 메뉴 항목을 정의할 수 있습니다.

각 메뉴 항목은 name, path,className, icon 속성을 가집니다.

menu의 name과 path는 필수입니다.

- menu1
- menu2
- menu3

"use client";
import Drawer from "@components/Drawer/Drawer";
import Button from "@components/Button/Button";
import { useState } from "react";
function Example() {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const onclickDrawerHandler = (open: boolean) => () => {
    setIsDrawerOpen(open);
  };
  return (
    <>
      <Drawer
        isOpen={isDrawerOpen}
        onClose={onclickDrawerHandler(false)}
               menu={[
          {
            items: [
              { name: "menu1", path: "/menu1" },
              { name: "menu2", path: "/menu2" },
              { name: "menu3", path: "/menu3" },
            ],
          },
      />
      <Button
        variant="border"
   
        onClick={onclickDrawerHandler(true)}
      >
        Drawer Open Button
      </Button>
    </>
  );
}

export default Example;

3. Logo

logo prop을 사용하여 Drawer 상단에 로고 이미지를 표시할 수 있습니다. 로고는 이미지 URL을 문자열로 전달하며, 로고 이미지는 클릭 시 지정된 경로로 이동할 수 있습니다.

- Home
- About
- Profile
- Contact

"use client";
import Drawer from "@components/Drawer/Drawer";
import Button from "@components/Button/Button";
import { useEffect } from "react";
import { useState } from "react";
function Example() {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const [isDarkMode, setIsDarkMode] = useState(false);

  useEffect(() => {
    const checkDarkMode = () => {
      setIsDarkMode(document.documentElement.classList.contains("dark"));
    };
    checkDarkMode();
    const observer = new MutationObserver(checkDarkMode);
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"],
    });
    return () => observer.disconnect();
  }, []);

  const onclickDrawerHandler = (open: boolean) => () => {
    setIsDrawerOpen(open);
  };
  return (
    <>
      <Drawer
        isOpen={isDrawerOpen}
      logo={isDarkMode ? "/LogoDark.svg" : "/Logo.svg"}
        onClose={onclickDrawerHandler(false)}
       menu={[
              {
                items: [
                  { name: "Home", path: "/" },
                  { name: "About", path: "/about"},
                  { name: "Profile", path: "/profile" },
                  { name: "Contact", path: "/contact" },
                ],
              },
            ]}
      />
      <Button
        variant="border"
        
        onClick={onclickDrawerHandler(true)}
      >
        Drawer Open Button
      </Button>
    </>
  );
}

export default Example;

4. Position

postion prop을 이용하여 Drawer의 슬라이딩 위치를 설정할 수 있습니다.

기본 값은 left이고, 가능한 값은 top, bottom, left,right 입니다.

- Home
- About
- Profile
- Contact

- Home
- About
- Profile
- Contact

- Home
- About
- Profile
- Contact

- Home
- About
- Profile
- Contact

"use client";
import Drawer from "@components/Drawer/Drawer";
import Button from "@components/Button/Button";
import { useState } from "react";
function Example() {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const onclickDrawerHandler = (open: boolean) => () => {
    setIsDrawerOpen(open);
  };
  return (
    <>
      <Drawer
        isOpen={isDrawerOpen}
        onClose={onclickDrawerHandler(false)}
        position="right"
       menu={[
              {
                items: [
                  { name: "Home", path: "/" },
                  { name: "About", path: "/about"},
                  { name: "Profile", path: "/profile" },
                  { name: "Contact", path: "/contact" },
                ],
              },
            ]}
      />
      <Button
        variant="border"
     
        onClick={onclickDrawerHandler(true)}
      >
        Drawer Open Button
      </Button>
    </>
  );
}

export default Example;

위의 예시 코드는 위치를 right로 한 예시입니다.

5. Color

color prop을 이용하여 메뉴 항목의 배경 색상을 설정할 수 있습니다.

bgColor prop을 이용하여 Drawer의 전체 배경 색상을 설정할 수 있습니다.

가능한 색상 값은 primary, secondary, success, warning, danger,red, orange, yellow, green, blue, purple,pink, basic, white, gray, black 입니다.

- Home
- About
- Profile
- Contact

"use client";
import Drawer from "@components/Drawer/Drawer";
import Button from "@components/Button/Button";
import { useState } from "react";
function Example() {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const onclickDrawerHandler = (open: boolean) => () => {
    setIsDrawerOpen(open);
  };
  return (
    <>
      <Drawer
        isOpen={isDrawerOpen}
        onClose={onclickDrawerHandler(false)}
        bgColor="blue"
        color="primary"
       menu={[
              {
                items: [
                  { name: "Home", path: "/" },
                  { name: "About", path: "/about"},
                  { name: "Profile", path: "/profile" },
                  { name: "Contact", path: "/contact" },
                ],
              },
            ]}
      />
      <Button
        variant="border"
        
        onClick={onclickDrawerHandler(true)}
      >
        Drawer Open Button
      </Button>
    </>
  );
}

export default Example;

6. Group

groupName 및 groupNameClassName prop을 사용하여 Drawer 내에서 메뉴 항목을 그룹화하고 그룹 이름에 스타일을 적용할 수 있습니다.

groupName은 각 그룹의 제목을 나타내고, groupNameClassName을 통해 그룹 이름의 스타일을 커스터마이징할 수 있습니다.

Main
- Home
- About
User
- Profile
- Contact

"use client";
import Drawer from "@components/Drawer/Drawer";
import Button from "@components/Button/Button";
import { useState } from "react";
function Example() {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const onclickDrawerHandler = (open: boolean) => () => {
    setIsDrawerOpen(open);
  };
  return (
    <>
      <Drawer
        isOpen={isDrawerOpen}
        onClose={onclickDrawerHandler(false)}
        menu={[
          {
            groupName: "Main",
            items: [
              { name: "Home", path: "/" },
              { name: "About", path: "/about" },
            ],
          },
          {
            groupName: "User",
            groupNameClassName: "!text-[#FF6347]",
            items: [
              { name: "Profile", path: "/profile" },
              { name: "Contact", path: "/contact" },
            ],
          },
        ]}
      />
      <Button
        variant="border"
        onClick={onclickDrawerHandler(true)}
      >
        Drawer Open Button
      </Button>
    </>
  );
}

export default Example;

7. ClassName

className prop을 사용하여 Drawer 컴포넌트의 스타일을 커스터마이징할 수 있습니다.

Drawer 전체 혹은 각각의 메뉴에 className을 개별적으로 적용 하실 수 있습니다.

아래 예시는 메뉴의 빨간 텍스트 컬러와 전체적으로 폰트 굵기를 bold로 커스터마이징한 것입니다.

!아래 예시처럼 바로 적용이 가능한 부분도 있지만 CSS 우선순위에 의해서 !important를 사용해야 적용되는 부분도 있을수 있습니다. (Tailwind는 !font-bold 처럼 사용해야 합니다.)

- Home
- About
- Profile
- Contact

"use client";
import Drawer from "@components/Drawer/Drawer";
import Button from "@components/Button/Button";
import { useState } from "react";
function Example() {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const onclickDrawerHandler = (open: boolean) => () => {
    setIsDrawerOpen(open);
  };
  return (
    <>
      <Drawer
        isOpen={isDrawerOpen}
        className="font-bold"
        onClose={onclickDrawerHandler(false)}
        menu={[
          { name: "Home", path: "/", className: "text-Red" },
          { name: "About", path: "/about" },
          { name: "Profile", path: "/profile" },
          { name: "Contact", path: "/Contact" },
        ]}
      />
      <Button
        variant="border"
       
        onClick={onclickDrawerHandler(true)}
      >
        Drawer Open Button
      </Button>
    </>
  );
}

export default Example;

8. Icon

icon prop을 사용하여 각 메뉴 항목 앞에 아이콘을 추가할 수 있습니다.

Icon에 대한 자세한 정보는 Icon Docs를 참고 하시면 됩니다.

- Home
- About
- Profile
- Contact

"use client";
import Drawer from "@components/Drawer/Drawer";
import Button from "@components/Button/Button";
import { useState } from "react";
function Example() {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const onclickDrawerHandler = (open: boolean) => () => {
    setIsDrawerOpen(open);
  };
  return (
    <>
      <Drawer
        isOpen={isDrawerOpen}
        onClose={onclickDrawerHandler(false)}
       menu={[
          {
            items: [
              { name: "Home", path: "/", icon: "icon-home" },
              { name: "About", path: "/about", icon: "icon-info" },
              { name: "Profile", path: "/profile", icon: "icon-user" },
              { name: "Contact", path: "/contact", icon: "icon-call" },
            ],
          },
        ]}
      />
      <Button
        variant="border"

        onClick={onclickDrawerHandler(true)}
      >
        Drawer Open Button
      </Button>
    </>
  );
}

export default Example;

9. Props

Drawer 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`menu`	Drawer에 표시할 메뉴 항목 배열입니다.	`MenuProps[]`	`[]`
`isOpen`	Drawer의 열림 상태를 설정합니다.	`boolean`	`true`
`logo`	Drawer에 표시할 로고 이미지 경로입니다.	`string`	`undefined`
`onClose`	Drawer가 닫힐 때 호출되는 함수입니다.	`() => void`	`undefined`
`color`	Drawer 메뉴 항목의 텍스트 색상을 설정합니다.	`"primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "red" \| "orange" \| "yellow" \| "green" \| "blue" \| "purple" \| "pink" \| "basic" \| "white" \| "gray" \| "black"`	`"basic"`
`bgColor`	Drawer의 배경 색상을 설정합니다.	`"primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "red" \| "orange" \| "yellow" \| "green" \| "blue" \| "purple" \| "pink" \| "basic" \| "white" \| "gray" \| "black"`	`"basic"`
`postion`	Drawer의 슬라이딩 위치를 설정합니다.	`"top" \| "bottom" \| "left" \| "right"`	`"left"`
`className`	Drawer의 추가적인 커스텀 스타일을 적용할 때 사용합니다.	`string`	`""`