ActionSheet

하단에서 올라오는 액션 선택 메뉴예요. 공유·수정·삭제처럼 맥락 액션에 쓰기 좋아요.

사용법

ActionSheet는 당근·네이버 앱에서 흔한 하단 선택 메뉴예요. 공유·신고·삭제 같은 액션을 한 번에 보여줘요.

스타일 커스터마이징

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

className / style

<ActionSheet
  className="shadow-md"
  style={{
    --gtd-ui-primary: "#059669",
  }}
/>

classNames 슬롯

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

<ActionSheet
  classNames={{
    list: "my-action-sheet-list",
    item: "my-action-sheet-item",
    label: "my-action-sheet-label",
    desc: "my-action-sheet-desc",
    cancel: "my-action-sheet-cancel"
  }}
/>

CSS 변수

변수	설명
--gtd-ui-primary	취소·강조 톤 (전역 토큰)

인터페이스

ActionSheetProps

속성	타입	기본값	설명
open*	boolean	—	열림 상태 (제어형)
onOpenChange*	(open: boolean) => void	—	상태 변경 콜백
title	string	—	시트 제목
description	string	—	보조 설명
items*	ActionSheetItem[]	—	액션 목록
cancelLabel	string	닫기	취소 버튼 레이블

가져오기

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