Sheet - Kitchen Sink

참고: 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")
헤더와 푸터는 선택적이며, 없을 경우 자동으로 레이아웃이 조정됩니다
긴 콘텐츠는 자동으로 스크롤 가능합니다