← Kitchen Sink로 돌아가기

Sheet

슬라이드 패널 컴포넌트 - 사이드에서 슬라이드되는 패널

참고: Sheet는 shadcn/ui 구조를 그대로 구현했습니다. 접근성 속성(ARIA)이 포함되어 있으며, 프론트엔드에서 React로 전환 시 동일한 구조를 사용할 수 있습니다.

기본 사용법 (Bottom)

하단에서 슬라이드되는 Sheet
<Sheet id="sheet-bottom-1" side="bottom"> <Fragment slot="header"> <SheetHeader> <SheetTitle>Sheet Title</SheetTitle> <SheetClose sheetId="sheet-bottom-1" /> </SheetHeader> </Fragment> <div>Content</div> <Fragment slot="footer"> <SheetFooter> <button>확인</button> </SheetFooter> </Fragment> </Sheet>

타이틀만 있는 경우

닫기 버튼 없이 타이틀만 표시
<Sheet id="sheet-title-only" side="bottom"> <Fragment slot="header"> <SheetHeader> <SheetTitle>Title Only</SheetTitle> </SheetHeader> </Fragment> <div>Content</div> <Fragment slot="footer"> <SheetFooter> <button>확인</button> </SheetFooter> </Fragment> </Sheet>

푸터(CTA 버튼) 없는 경우

타이틀과 닫기 버튼만 있고 하단 CTA 버튼이 없는 경우
<Sheet id="sheet-no-footer" side="bottom"> <Fragment slot="header"> <SheetHeader> <SheetTitle>No Footer Sheet</SheetTitle> <SheetClose sheetId="sheet-no-footer" /> </SheetHeader> </Fragment> <div>Content</div> </Sheet>

헤더와 푸터 모두 없는 경우

타이틀, 닫기 버튼, CTA 버튼 모두 없는 경우
<Sheet id="sheet-minimal" side="bottom"> <div>Content only</div> </Sheet>

긴 콘텐츠 (스크롤)

스크롤 가능한 긴 콘텐츠
<Sheet id="sheet-scroll" side="bottom"> <Fragment slot="header"> <SheetHeader> <SheetTitle>Long Content Sheet</SheetTitle> <SheetClose sheetId="sheet-scroll" /> </SheetHeader> </Fragment> <div class="space-y-16"> <p>Long content here...</p> </div> <Fragment slot="footer"> <SheetFooter> <button>확인</button> </SheetFooter> </Fragment> </Sheet>

주요 기능

접근성:
  • ARIA 속성 자동 설정 (role="dialog", aria-modal="true")
  • 타이틀과 설명 ID 자동 연결 (aria-labelledby, aria-describedby)
  • Escape 키로 Sheet 닫기
  • 배경 오버레이 클릭 시 닫기
  • 포커스 관리 (열림 시 첫 번째 포커스 가능 요소로 이동)
  • body 스크롤 잠금 (열림 시)
애니메이션:
  • 슬라이드 인/아웃 애니메이션 (Tailwind transition)
  • 위치별 애니메이션 방향 자동 적용
  • 부드러운 전환 효과 (duration-300, ease-in-out)
위치 옵션:
  • side="top": 상단에서 슬라이드
  • side="bottom": 하단에서 슬라이드 (기본값)
  • side="left": 왼쪽에서 슬라이드
  • side="right": 오른쪽에서 슬라이드
레이아웃 구조:
  • 헤더 영역 (slot="header"): 타이틀과 닫기 버튼을 가로로 배치
  • 내용 영역 (기본 slot): 스크롤 가능한 빈 영역, 사용자가 자유롭게 채움
  • 푸터 영역 (slot="footer"): 하단 고정 CTA 버튼
  • 헤더와 푸터는 선택적이며, 없을 경우 내용 영역이 확장됩니다
  • Figma 디자인 토큰 적용 (타이틀: text-heading-20-bold, 색상: #111111)
스타일링:
  • 배경색: 흰색 (bg-primary-02)
  • 상단 둥근 모서리: rounded-t-[20px] (bottom일 경우)
  • Tailwind CSS 클래스로 스타일링
  • Figma 디자인 토큰 활용 (색상, 타이포그래피, 간격)
  • tailwindcss-animate를 사용한 슬라이드 애니메이션
사용 시 주의사항:
  • 각 Sheet는 고유한 id를 가져야 합니다
  • SheetTrigger의 sheetId와 Sheet의 id가 일치해야 합니다
  • SheetClose의 sheetId도 동일해야 합니다
  • 헤더는 Fragment slot="header"로 감싸서 전달합니다
  • 푸터는 Fragment slot="footer"로 감싸서 전달합니다
  • side prop은 Sheet 컴포넌트에 전달합니다 (기본값: "bottom")
  • 헤더와 푸터는 선택적이며, 없을 경우 자동으로 레이아웃이 조정됩니다
  • 긴 콘텐츠는 자동으로 스크롤 가능합니다