AlertDialog

사용자의 확인이 필요한 중요한 작업을 처리하는 모달 다이얼로그

개요

iCignal AlertDialog는 Foundation AlertDialog를 래핑하여 트리거, 제목, 설명, 취소/확인 버튼을 props만으로 구성할 수 있도록 단순화한 컴포넌트입니다. Compound 구조 없이 하나의 컴포넌트로 삭제 확인 등의 일반적인 확인 다이얼로그를 빠르게 만들 수 있습니다.

주요 특징

• ✅ 단일 컴포넌트 API: trigger, title, description, 버튼 텍스트만으로 완성
• ✅ 버튼 커스터마이징: 취소/확인 버튼의 size, variant 개별 지정
• ✅ 선택적 버튼: cancelText, actionText를 생략하면 해당 버튼 미표시
• ✅ 오버레이 제어: hideOverlay로 배경 오버레이 숨김 가능
• ✅ 제어/비제어 모드: Foundation AlertDialog Root의 open, defaultOpen, onOpenChange 지원
• ✅ 포커스 관리: 열릴 때 초기 포커스 자동 이동, 닫히면 트리거로 복귀

사용 예시

기본 사용법

삭제 확인과 같은 일반적인 확인 다이얼로그입니다.

<AlertDialog
  trigger={<Button variant="outline">다이얼로그 열기</Button>}
  title="정말 삭제하시겠습니까?"
  description="이 작업은 되돌릴 수 없습니다. 항목이 영구적으로 삭제됩니다."
  cancelText="취소"
  actionText="삭제"
/>

Destructive 액션

위험한 작업에는 확인 버튼에 destructive variant를 적용합니다.

<AlertDialog
  trigger={<Button variant="destructive">계정 삭제</Button>}
  title="계정을 삭제하시겠습니까?"
  description="계정과 모든 데이터가 영구적으로 삭제되며, 이 작업은 복구할 수 없습니다."
  cancelText="취소"
  actionText="계정 삭제"
  actionVariant="destructive"
/>

버튼 크기 및 스타일 변경

취소/확인 버튼의 크기와 스타일을 개별적으로 지정할 수 있습니다.

<AlertDialog
  trigger={<Button variant="outline">저장하지 않고 나가기</Button>}
  title="변경사항을 저장하시겠습니까?"
  description="저장하지 않은 변경사항은 사라집니다."
  cancelText="나가기"
  cancelVariant="ghost"
  cancelSize="lg"
  actionText="저장"
  actionVariant="default"
  actionSize="lg"
/>

단일 버튼

cancelText 또는 actionText를 생략하면 해당 버튼이 표시되지 않습니다.

<AlertDialog
  trigger={<Button variant="outline">알림 보기</Button>}
  title="세션이 곧 만료됩니다"
  description="10분 후 자동으로 로그아웃됩니다. 계속하려면 확인을 눌러주세요."
  actionText="확인"
/>

API Reference

Props

Events

기본 사용법

import { AlertDialog, Button } from "@vortex/ui-icignal"
 
<AlertDialog
  trigger={<Button variant="destructive">삭제</Button>}
  title="정말 삭제하시겠습니까?"
  description="이 작업은 되돌릴 수 없습니다."
  cancelText="취소"
  actionText="삭제"
  actionVariant="destructive"
  onAction={() => handleDelete()}
/>

제어 모드로 사용하려면 open과 onOpenChange를 함께 사용합니다.

const [open, setOpen] = useState(false)
 
<AlertDialog
  open={open}
  onOpenChange={setOpen}
  trigger={<Button>열기</Button>}
  title="제어 모드"
  description="외부 상태로 열림을 제어합니다."
  actionText="확인"
  onAction={() => setOpen(false)}
/>

접근성

ARIA 속성

Base UI AlertDialog가 자동으로 제공합니다:

• role="alertdialog" 자동 적용
• aria-labelledby, aria-describedby로 제목·설명 자동 연결
• ESC 키로 다이얼로그 닫기 지원
• 열릴 때 초기 포커스가 다이얼로그로 이동, 닫히면 트리거로 복귀

권장 사항

• ✅ 파괴적 작업에는 actionVariant="destructive" 사용
• ✅ title과 description에 작업의 결과를 명확히 기술
• ❌ 일반 정보 전달에는 AlertDialog 대신 Dialog 사용

관련 컴포넌트

• AlertDialog (Foundation): Compound 구조의 Foundation 레이어 다이얼로그
• Dialog (Foundation): 일반적인 모달 다이얼로그
• Button (Foundation): 취소/확인 버튼의 variant, size 규격