AlertDialog
사용자 확인이 필요한 중요한 작업에 사용하는 모달 다이얼로그입니다.
개요
Radix UI를 기반으로 구축되어 완전한 키보드 접근성, 포커스 트래핑, Escape 키 닫기를 지원합니다. 삭제, 로그아웃 등 사용자 확인이 필요한 중요한 작업에 사용합니다.
설치
사용법
SimpleAlertDialog로 간단히 사용하거나, 개별 컴포넌트를 조합하여 커스텀할 수 있습니다.
예제
유형
info, success, warning, danger 등 다양한 유형을 지원합니다. variant에 따라 테두리 색상과 아이콘이 자동 적용됩니다.
제어 모드
open과 onOpenChange로 다이얼로그의 열림/닫힘 상태를 직접 제어할 수 있습니다.
컴포넌트 조합
개별 컴포넌트를 조합하여 리스트, 폼 등 복잡한 콘텐츠를 포함할 수 있습니다.
아이콘 없음
showIcon={false}로 아이콘 없이 텍스트만 표시할 수 있습니다.
접근성
AlertDialog는 WCAG 2.1 / KWCAG 2.2 Level AA 기준을 준수합니다.
- Radix UI 기반: role="alertdialog"와 aria-modal="true"가 자동 적용됩니다.
- 포커스 트래핑: 다이얼로그 열림 시 포커스가 내부에 갇히고, 닫힘 시 트리거로 복귀합니다.
- 키보드 접근: Escape로 닫기, Tab으로 버튼 간 이동이 가능합니다.
- 스크린리더: aria-labelledby와 aria-describedby로 제목/설명이 연결됩니다.
- 명도 대비 4.5:1 이상을 준수하여 시각적 접근성을 보장합니다.