Sheet
화면 가장자리에서 슬라이드되어 나타나는 사이드 패널 컴포넌트
개요
Sheet 컴포넌트는 base-ui의 Dialog Primitive를 기반으로 화면의 상/하/좌/우 가장자리에서 슬라이드되어 나타나는 패널을 제공합니다. 오버레이, 포커스 트랩, 닫기 버튼 등 Dialog의 모든 접근성 기능을 그대로 지원합니다.
주요 특징
- ✅ 4방향 지원: side prop으로 top, right, bottom, left 방향 지원
- ✅ Compound 구조: Header, Footer, Title, Description 등 조합 가능
- ✅ 닫기 버튼: showCloseButton으로 기본 닫기 버튼 표시 제어
- ✅ 오버레이 제어: showOverlay로 배경 오버레이 표시 제어
- ✅ 포커스 관리: 열릴 때 포커스 이동, 닫힐 때 트리거로 복귀
- ✅ 디자인 토큰: 테마 커스터마이징 지원
사용 예시
기본 Sheet
SheetTrigger를 클릭하면 오른쪽에서 Sheet가 열립니다.
Preview
방향 지정
side prop으로 Sheet가 나타나는 방향을 지정합니다.
Preview
닫기 버튼 숨기기
showCloseButton={false}로 기본 닫기 버튼을 숨기고 SheetClose로 커스텀 닫기 동작을 구성합니다.
Preview
API Reference
Sheet (Root)
base-ui Dialog.Root의 모든 props를 지원합니다.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | 제어 모드 열림 상태 |
defaultOpen | boolean | - | 비제어 모드 초기 열림 상태 |
onOpenChange | (open: boolean) => void | - | 열림 상태 변경 콜백 |
SheetContent
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "right" | Sheet가 나타나는 방향 |
showCloseButton | boolean | true | 기본 닫기 버튼 표시 여부 |
showOverlay | boolean | true | 배경 오버레이 표시 여부 |
className | string | - | 추가 CSS 클래스 |
나머지 서브컴포넌트
| Component | 역할 |
|---|---|
SheetTrigger | Sheet를 여는 트리거 (render prop 지원) |
SheetClose | 클릭 시 Sheet를 닫는 버튼 (render prop 지원) |
SheetHeader | 상단 헤더 영역 (제목/설명 배치) |
SheetFooter | 하단 푸터 영역 (액션 버튼 배치, mt-auto) |
SheetTitle | Sheet 제목 (접근성 레이블로 사용) |
SheetDescription | Sheet 설명 (접근성 설명으로 사용) |
기본 사용법
import {
Sheet,
SheetTrigger,
SheetClose,
SheetContent,
SheetHeader,
SheetFooter,
SheetTitle,
SheetDescription,
} from "@vortex/ui-foundation"
<Sheet>
<SheetTrigger render={<Button variant="outline">열기</Button>} />
<SheetContent side="right">
<SheetHeader>
<SheetTitle>제목</SheetTitle>
<SheetDescription>설명</SheetDescription>
</SheetHeader>
{/* 콘텐츠 */}
<SheetFooter>
<SheetClose render={<Button>확인</Button>} />
</SheetFooter>
</SheetContent>
</Sheet>접근성
시맨틱 마크업
- base-ui Dialog 기반으로
role="dialog"자동 적용 - SheetTitle이
aria-labelledby로, SheetDescription이aria-describedby로 자동 연결 - 닫기 버튼에
sr-only텍스트(“Close”) 포함
키보드 지원
Esc키로 Sheet 닫기- 열린 동안 포커스가 Sheet 내부에 트랩됨
- 닫히면 포커스가 트리거로 복귀
권장 사항
- ✅ SheetTitle과 SheetDescription을 항상 포함해 스크린 리더 컨텍스트 제공
- ❌ showOverlay를 끌 때는 배경 인터랙션 혼란 여부 검토
관련 컴포넌트
Last updated on