AlertDialog
파괴적이거나 되돌릴 수 없는 작업을 확인하는 모달 표면이에요.
핵심 속성
이 Tinyrack 래퍼는 Base UI 동작, React 19 ref, 네이티브 속성, 이벤트, render 규약을 그대로 지켜요. 플레이그라운드에서는 label과 disabled를 조절할 수 있어요. open은 컴포넌트 이벤트와 동기화되는 미리 보기 전용 상호작용 상태로 관리하고, 초기화하면 처음 상태와 결과가 복원돼요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/alert-dialog.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRAlertDialog } from '@tinyrack/ui/components/alert-dialog';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
파괴적 동작 확인 고유 링크
취소는 가장 덜 파괴적인 첫 번째 동작이에요. 확인하면 대화상자가 닫히고 실시간 결과가 갱신돼요.
예시
상태 비교 고유 링크
파괴적 동작 확인을 연 뒤 Escape나 취소를 누르고, 포커스가 랙 삭제 버튼으로 돌아오는지 확인하세요. 비활성 상태에서는 열리지 않아요.
API
구조는 Root, Trigger, Portal, Backdrop, Viewport, Popup, Title, Description, Close예요. 모든 파트와 속성·상태 타입은 @tinyrack/ui/components/alert-dialog에서 내보내며 스타일은 대응하는 CSS 하위 경로로 별도로 적용해요.
Root는 항상 모달이에요. 열려 있는 동안 포커스는 내부에 머물고, Escape와 Close는 닫기를 요청하지만 바깥 영역을 눌러도 닫히지 않아요. 닫히면 포커스가 Trigger로 돌아가요. 첫 번째 Close는 안전한 취소 용도로 두고, 파괴적 작업은 위험 확인용 Close에만 연결하세요. 비활성화된 trigger와 close는 동작하지 않아요.
Root 밖에 있는 trigger에는 TRAlertDialog.createHandle<Payload>()로 타입이 지정된 브리지를 만들어 Trigger와 Root 양쪽에 handle을 전달하고, Trigger에는 payload를 함께 넘기세요. Portal은 원하는 컨테이너를 받을 수 있어요. 확인 컨트롤을 tr-alert-dialog-actions로 묶으면 좁은 화면에서도 읽기 쉽게 줄바꿈돼요.