확인 다이얼로그

예/아니오 한 가지 확인만 필요한 상황을 위한 단일 목적 모달이다. 제목·설명과 확인/취소 두 버튼만 제공해 삭제·이동 같은 되돌리기 어려운 액션 앞에서 한 번 더 확인받는다. tone이 danger면 확인 버튼이 위험 색으로 바뀐다. 폼 입력이나 상세 조회처럼 본문이 필요한 경우는 Dialog를 쓴다.

활용 방법

일반 확인

저장·이동처럼 위험도가 낮은 확인에는 기본 tone을 쓴다.

Preview

tsx

<ConfirmDialog
  open={open}
  onClose={() => setOpen(false)}
  onConfirm={handleSave}
  title="변경 사항을 저장할까요?"
  description="저장하면 바로 반영됩니다."
  confirmLabel="저장"
  cancelLabel="취소"
/>

위험 확인 (danger)

삭제처럼 되돌릴 수 없는 액션은 tone="danger"로 확인 버튼을 위험 색으로 강조한다.

Preview

tsx

<ConfirmDialog
  open={open}
  onClose={() => setOpen(false)}
  onConfirm={handleDelete}
  tone="danger"
  title="항목을 삭제할까요?"
  description="삭제하면 되돌릴 수 없습니다."
  confirmLabel="삭제"
  cancelLabel="취소"
/>

사용 지침

· 예/아니오 확인 전용이다. 입력 폼이나 상세 내용이 필요하면 Dialog를 쓴다.
· 삭제 등 되돌릴 수 없는 액션에는 tone="danger"로 위험을 드러낸다.
· cancelLabel을 생략하면 확인 버튼 하나만 남는다: 알림성 확인에 적합하다.

속성

이름	타입	기본값	설명
open	boolean	-	열림 상태
onClose	() => void	-	닫기 콜백: 취소 버튼, backdrop, Esc 에서 호출
onConfirm	() => void	-	확인 버튼 클릭 시 호출. 호출 직후 onClose도 함께 호출된다
title	ReactNode	-	확인 문구
description	ReactNode	-	제목 아래 보조 설명
confirmLabel	string	"확인"	확인 버튼 라벨
cancelLabel	string	-	취소 버튼 라벨: 생략하면 취소 버튼 자체가 렌더되지 않는다
tone	"primary" \| "danger"	"primary"	확인 버튼 색조: danger는 삭제 등 위험 액션용