SideSheet

한눈에#

같은 콘텐츠를 뷰포트 폭에 따라 하단 시트 ↔ 측면 패널로 자동 전환하는 적응형 래퍼입니다 — BottomSheet와 Drawer를 합성합니다.

같은 콘텐츠를 뷰포트 폭에 따라 두 표면으로 갈아끼우는 얇은 적응형 래퍼입니다 — compact(< 600px)면 BottomSheet, 그 이상이면 측면 패널 (Drawer 어휘)로 렌더합니다. 다이얼로그·포커스 트랩·Escape·배경 클릭 닫기·스크롤 잠금은 두 표면이 그대로 책임지므로 동작 계약이 일관됩니다.

트리거를 눌러 직접 확인하세요(창 폭을 바꿔 표면 전환도):

사용 시점#

같은 콘텐츠를 폭에 따라 시트↔측면으로 자동 전환하면 SideSheet — 한 표면으로 고정하려면 다른 컴포넌트입니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

import { SideSheet, Button } from '@wds/ui-web';

<SideSheet
  open={open}
  onClose={() => setOpen(false)}
  title="상세 정보"
>
  compact 뷰포트에선 바텀시트로, 넓은 화면에선 측면 패널로 적응합니다.
</SideSheet>

변형#

side가 확장(넓은 화면) 표면의 슬라이드 인 방향을 정합니다 — 'right'(기본)·'left'. compact 뷰포트에서는 항상 하단 시트라 side는 무시됩니다.

크기#

표면이 폭에 따라 갈리므로 별도 size 축은 없습니다 — compact는 하단 시트(상한 85dvh), expanded는 측면 패널입니다. 강제 전환이 필요하면 responsive로 표면을 고정합니다.

상태#

제어 컴포넌트입니다 — 열림/닫힘은 소비자의 open prop이 결정하고, 닫힘 요청 (Escape·배경·닫기 버튼)은 onClose 콜백으로 전달됩니다. responsive로 적응을 재정의할 수 있습니다 — 'auto'(기본)는 폭에 따라, 'mobile'은 항상 시트, 'desktop'은 항상 측면 패널입니다.

Props#

접근성#

표면 선택만 담당하고 a11y 계약은 합성 대상(BottomSheet/Drawer)이 이행합니다.

토큰#

자체 토큰 없이 합성 대상의 표면 어휘를 그대로 따릅니다 — BottomSheet·Drawer의 토큰 표를 참고하세요.