ConfirmDialog
되돌릴 수 없는 행동 전에 결과를 문장으로 묻는 대화상자.
- 출시 화면에서 사용
개요
미리보기
예시
상태
열림
처리 중
오류
이름 입력 확인
가장 긴 문구 (es)
쓰임 예
일반 선택
이렇게 · 이렇게 하지 않기
- 이렇게 제목은 질문, 본문은 결과(무엇이 지워지고 무엇이 남는지)를 쓴다. 기본 초점은 취소다.
- 이렇게 되돌릴 수 있는 결과(보관·연결 해제)는 ConfirmDialog 대신 Toast 되돌리기를 쓴다. 완전 삭제처럼 되돌릴 수 없을 때만 묻는다.
- 이렇게 하지 않기 실행 버튼에 “확인”, “예”를 쓰지 않는다. 배경을 눌러 닫히지 않는다. 휴대폰에서도 시트가 아니라 가운데다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
open? | boolean | false | 열림. 카탈로그에서 켜면 무대 안에 비모달로 그린다. 실제 동작은 트리거로 확인한다. |
tone? | 'danger' | 'neutral' | danger | danger는 파괴적 결과(빨간 실행 버튼), neutral은 일반 선택. |
title | ReactNode | 센트럴바이에서 모든 기록을 지울까요? | 질문. |
consequence | ReactNode | 읽어 온 기록과 내 설명이 모두 지워지고 되돌릴 수 없어요. Gmail과 Google Calendar의 원래 메일과 일정은 지워지지 않아요. | 결과 문장: 무엇이 지워지고 무엇이 남는지. aria-describedby로 연결된다. |
confirmLabel | ReactNode | 완전 삭제 | 결과 동사. “확인”, “예”를 쓰지 않는다. |
cancelLabel? | ReactNode | | 비우면 “취소”. |
busy? | boolean | false | 실행 중. 두 버튼 aria-disabled, Esc 무시. onConfirm이 promise를 돌려주면 자동으로 켜진다. |
error? | ReactNode | | 실패 문장. 대화상자 안에 보이고 닫지 않는다. |
typedConfirm? | boolean | false | 되돌릴 수 없는 경우 confirmText를 그대로 입력해야 실행 버튼이 켜진다(법무·Priya 확인 대기). |
confirmText? | string | Gmail | 입력할 정확한 글자(예: 출처 이름). |
onConfirm(): void | Promise<void> | — | — | promise면 busy를 보이고, 성공하면 닫고, 실패하면 오류를 안에 보이며 assertive로 한 번 알린다. |
onOpenChange(open, reason) | — | — | 닫힘 이유: close-button(취소) · escape · action. |
접근성
키보드: Esc = 취소(실행 중이면 무시) · Enter = 초점이 있는 버튼 · Tab은 대화상자 안에 갇힌다(네이티브).
- <dialog role="alertdialog" aria-labelledby aria-describedby> + showModal(). 열면 초점은 취소, 닫으면 호출한 요소.
- 결과는 Toast(polite)로 알린다. 실행 실패만 assertive로 한 번 알린다.