BottomSheet

화면 아래에서 올라오는 시트다. 모바일에서 선택지 몇 개를 고르게 할 때 쓴다. 폭은 화면에 맞춰 자기가 정하므로 size 를 받지 않는다. 그 외의 props 와 여는 법은 LayerPopup 과 같다.

import { BottomSheet, useBottomSheet } from "@nui-kit/react";
// 서브패스로 좁힐 때
import { BottomSheet } from "@nui-kit/react/popup";
import "@nui-kit/react/styles/popup.css";   // 온디맨드일 때

선언형 — 열림 상태를 직접 소유

<BottomSheet open={isOpen} onRequestClose={() => setIsOpen(false)} isTopmost title="공유하기">…</BottomSheet>

open · onRequestClose · isTopmost

명령형 — 컴포넌트를 등록해서 열기

useBottomSheet().open({ component }) 로 내용 컴포넌트를 넘긴다. 시트 안의 선택지가 onRequestClose 를 부르면 닫힌다.

bottomSheet.open({ component: ShareSheet });

useBottomSheet().open({ component })

LayerPopup 과 다른 점

	LayerPopup	BottomSheet
위치	가운데	아래에 붙는다
등장	페이드 + 살짝 확대	아래에서 슬라이드
`size`	small · regular · large	받지 않는다
기본 접근 이름	"레이어 팝업"	"바텀시트 팝업"

접근성

제목이 없으면 aria-label="바텀시트 팝업" 이 붙는다. dialogLabel 로 바꾼다
dim 클릭과 ESC 로 닫힌다. 닫기 버튼도 있다(hasCloseButton)
prefers-reduced-motion 에서는 슬라이드 없이 페이드만 남는다
포커스 트랩 · 배경 inert · 쌓임 등 공통 계약은 Popup 개요

API

BottomSheet

이름	타입	기본값	설명
`open` *	boolean	—	—
`bodyClassName`	string	—	—
`children`	ReactNode	—	—
`className`	string	—	—
`closeButtonLabel`	string	—	—
`contentAlign`	PopupContentAlign	—	—
`description`	ReactNode	—	—
`dialogLabel`	string	—	title 이 없을 때 dialog 에 붙일 접근 이름
`footer`	ReactNode	—	—
`footerClassName`	string	—	—
`hasCloseButton`	boolean	—	—
`icon`	ReactNode \| null	—	—
`id`	string	—	—
`isTopmost`	boolean	—	스택 최상단인가 — 포커스 트랩과 ESC 를 이 팝업만 처리한다
`onClickClose`	() => void	—	—
`onExited`	() => void	—	닫힘 애니메이션까지 끝난 뒤 호출된다
`onRequestClose`	() => void	—	—
`panelClassName`	string	—	—
`shouldCloseOnBackdrop`	boolean	—	dim 클릭으로 닫히는가
`shouldCloseOnEscape`	boolean	—	—
`title`	ReactNode	—	—

BottomSheetProps 에서 자동 생성됨 (components/Popup/Popup.types.ts).