드로어

모바일 메뉴, 필터, 빠른 입력 양식을 위해 화면의 어느 가장자리에서든 미끄러지듯 나타나는 제스처 기반 시트로, 네오브루탈리즘 스타일의 테두리와 그림자가 적용되어 있습니다.

"use client"

import * as React from "react"

드로어는 화면 가장자리에서 미끄러져 들어오며 드래그로 닫을 수 있는 패널입니다. Emil Kowalski의 Vaul을 기반으로 하며, 네오브루탈리즘 공식(두꺼운 테두리, 선명한 그림자, 굵은 서체)에 맞춰 스타일을 입혔습니다.

다음과 같은 경우에 사용합니다.

모바일 액션 시트 — 공유 메뉴, 정렬 옵션, 빠른 확인. 터치에서는 작은 닫기 버튼을 찾는 것보다 드래그로 닫는 제스처가 낫습니다.
필터와 설정 패널 — 팝오버보다 넓이가 필요하고 페이지까지는 필요 없는 이커머스 필터나 환경설정.
반응형 다이얼로그 — Dialog와 짝지어 데스크톱에서는 모달, 모바일에서는 드로어로 렌더링합니다(아래 예제 참고).

개요

Drawer는 emilkowalski 가 만든 Vaul 위에 구축되어 있습니다.

설치


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/drawer.json
npx shadcn@latest add https://neobrutalism.com/r/base/drawer.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/drawer.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/drawer.json

다음 의존성을 설치합니다.


pnpm add vaul
npm install vaul
yarn add vaul
bun add vaul

다음 코드를 복사해 프로젝트에 붙여넣습니다.

components/ui/drawer.tsx

"use client"

import * as React from "react"
import { Drawer as DrawerPrimitive } from "vaul"

import { cn } from "@/lib/utils"

function Drawer({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
}

function DrawerTrigger({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
}

function DrawerPortal({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
}

function DrawerClose({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
}

function DrawerOverlay({
  className,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
  return (
    <DrawerPrimitive.Overlay
      data-slot="drawer-overlay"
      className={cn(
        "fixed inset-0 z-50 bg-foreground/20 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
        className
      )}
      {...props}
    />
  )
}

function DrawerContent({
  className,
  children,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
  return (
    <DrawerPortal data-slot="drawer-portal">
      <DrawerOverlay />
      <DrawerPrimitive.Content
        data-slot="drawer-content"
        className={cn(
          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground shadow-md data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t-2 data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r-2 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l-2 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b-2 data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
          className
        )}
        {...props}
      >
        <div className="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
        {children}
      </DrawerPrimitive.Content>
    </DrawerPortal>
  )
}

function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="drawer-header"
      className={cn(
        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left",
        className
      )}
      {...props}
    />
  )
}

function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="drawer-footer"
      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
      {...props}
    />
  )
}

function DrawerTitle({
  className,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
  return (
    <DrawerPrimitive.Title
      data-slot="drawer-title"
      className={cn(
        "font-head text-base font-medium text-foreground",
        className
      )}
      {...props}
    />
  )
}

function DrawerDescription({
  className,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
  return (
    <DrawerPrimitive.Description
      data-slot="drawer-description"
      className={cn("text-sm text-muted-foreground", className)}
      {...props}
    />
  )
}

export {
  Drawer,
  DrawerPortal,
  DrawerOverlay,
  DrawerTrigger,
  DrawerClose,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
}

임포트 경로를 프로젝트 구성에 맞게 수정합니다.

사용법

import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

<Drawer>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Are you absolutely sure?</DrawerTitle>
      <DrawerDescription>This action cannot be undone.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

구성

Drawer 를 구축하려면 다음 구성을 사용합니다.

Drawer
├── DrawerTrigger
└── DrawerContent
    ├── DrawerHeader
    │   ├── DrawerTitle
    │   └── DrawerDescription
    └── DrawerFooter

예제

스크롤 가능한 콘텐츠

콘텐츠가 스크롤되어도 작업을 표시된 상태로 유지합니다.

import { Button } from "@/components/ui/button"
import {
  Drawer,

사이드

direction prop 을 사용해 드로어가 열리는 쪽을 설정합니다. 지정할 수 있는 값은 top, right, bottom, left 입니다.

import { Button } from "@/components/ui/button"
import {
  Drawer,

반응형 다이얼로그

Dialog 컴포넌트와 Drawer 컴포넌트를 조합해 반응형 다이얼로그를 만들 수 있습니다. 데스크톱에서는 Dialog 컴포넌트를, 모바일에서는 Drawer 를 표시합니다.

"use client"

import * as React from "react"

RTL

Neobrutalism에서 RTL 지원을 활성화하는 방법은 RTL 설정 가이드를 참고하세요.

"use client"

import * as React from "react"

드로어는 WAI-ARIA Dialog (Modal) 패턴을 따릅니다. Vaul은 Radix Dialog 프리미티브 위에 만들어져, 패널이 role="dialog"와 aria-modal로 렌더링되고, 열려 있는 동안 포커스를 가두며, DrawerTitle로 레이블되고 DrawerDescription으로 설명됩니다. 드래그로 닫기는 포인터 전용입니다. 키보드 사용자는 Escape나 DrawerClose 버튼으로 닫으므로 항상 하나 포함하세요.

키보드 상호작용:

키	동작
`Space` / `Enter`	포커스된 트리거에서 드로어 열기
`Tab` / `Shift + Tab`	드로어 내용 사이를 순환(포커스 트랩)
`Escape`	드로어를 닫고 트리거로 포커스 복귀

API 참조

전체 API 참조는 Vaul 문서를 참고하세요.