BottomSheet

사용법

BottomSheet는 화면 하단에서 슬라이드되어 나타나는 패널이에요. 페이지를 벗어나지 않고 추가 설명이나 액션을 제공할 때 사용해요.

드래그로 펼치기

헤더나 핸들을 위로 당기면 시트가 펼쳐져요. 아래로 당기면 접히거나 닫혀요. expandBottomSheet로 이 동작을 켜고 끌 수 있어요.

CTA 붙이기

cta 영역에 BottomSheet.CTA 또는 BottomSheet.DoubleCTA를 넣어 하단 행동을 고정해요.

선택지

BottomSheet.Select로 선택지 목록을 보여줄 수 있어요. 항목을 고르면 시트를 닫고 결과를 반영해요.

스타일 커스터마이징

BottomSheet 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.

className / style

<BottomSheet
  className="shadow-md"
  style={{
    --gtd-sheet-bg: "#059669",
  }}
/>

classNames 슬롯

복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.

<BottomSheet
  classNames={{
    content: "my-bottom-sheet-content",
    header: "my-bottom-sheet-header",
    handle: "my-bottom-sheet-handle",
    body: "my-bottom-sheet-body",
    cta: "my-bottom-sheet-cta",
    overlay: "my-bottom-sheet-overlay",
    close: "my-bottom-sheet-close"
  }}
/>

CSS 변수

인터페이스

BottomSheetProps

가져오기

import { BottomSheet } from "@/components/ui/BottomSheet";