Drawer

설치 확인

모바일 아래쪽 패널

1. 목적과 출처

모바일 아래쪽 패널

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/drawer.tsx
Registry: @adcapsule/drawer

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Drawer 방향
swipeDirection	열어 보기
아래에서 down
오른쪽에서 right

3. 속성 바꿔 보기

열어 보세요

swipeDirection

손잡이(showSwipeHandle)

<Drawer showSwipeHandle>
  <DrawerTrigger render={<Button variant="outline" />}>필터 열기</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>이슈 필터</DrawerTitle>
    </DrawerHeader>
    …
    <DrawerFooter>
      <DrawerClose render={<Button />}>적용</DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/drawer

npm 패키지: @base-ui/react
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<Drawer>
  <DrawerTrigger render={<Button variant="outline" />}>필터 열기</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader><DrawerTitle>이슈 필터</DrawerTitle></DrawerHeader>
  </DrawerContent>
</Drawer>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

swipeDirection: down·up·left·right
showSwipeHandle로 손잡이
snapPoints로 멈춤 높이
모바일 아래쪽 패널에 쓰고, 데스크톱에서는 Dialog·Sheet를 쓴다

공통으로 유지할 토큰

surface.raised (패널, --popover)
surface.scrim (배경막)
radius.xl (드러난 모서리 16px)

swipeDirection

열어 보기

아래에서 down

오른쪽에서 right

3. 속성 바꿔 보기

열어 보세요

swipeDirection

손잡이(showSwipeHandle)

<Drawer showSwipeHandle>
  <DrawerTrigger render={<Button variant="outline" />}>필터 열기</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>이슈 필터</DrawerTitle>
    </DrawerHeader>
    …
    <DrawerFooter>
      <DrawerClose render={<Button />}>적용</DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/drawer

npm 패키지: @base-ui/react
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<Drawer>
  <DrawerTrigger render={<Button variant="outline" />}>필터 열기</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader><DrawerTitle>이슈 필터</DrawerTitle></DrawerHeader>
  </DrawerContent>
</Drawer>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

swipeDirection: down·up·left·right
showSwipeHandle로 손잡이
snapPoints로 멈춤 높이
모바일 아래쪽 패널에 쓰고, 데스크톱에서는 Dialog·Sheet를 쓴다

공통으로 유지할 토큰

surface.raised (패널, --popover)
surface.scrim (배경막)
radius.xl (드러난 모서리 16px)

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿