Confirm

확인과 취소 두 버튼으로 결정을 받는 팝업이다. Alert 과 같이 dim 클릭과 ESC 로는 닫히지 않는다. 명령형으로만 쓰고, 결과는 콜백 또는 Promise 로 받는다.

import { useConfirm, Confirm } from "@nui-kit/react";
// 서브패스로 좁힐 때
import { useConfirm } from "@nui-kit/react/popup";
import "@nui-kit/react/styles/popup.css";   // 온디맨드일 때

useConfirm() 은 앱 루트의 PopupHost 가 있어야 동작한다. 설치는 Popup 개요 에 있다.

열기

confirm.open({ title: "삭제할까요?", confirmText: "삭제", onConfirm, onCancel });

useConfirm().open() — 콜백으로 받는다

Promise 로 결과 받기

openAsync 는 사용자의 선택을 Promise<boolean> 으로 돌려준다. 콜백을 나눠 쓰지 않고 흐름대로 분기한다. 확인이면 true, 취소나 close() 로 닫히면 false 다.

const isConfirmed = await confirm.openAsync({ title: "정말 진행할까요?" });

await confirm.openAsync(...)

const isConfirmed = await confirm.openAsync({
  title: "정말 진행할까요?",
});

if (isConfirmed) {
  // 확인을 누른 경우
}

옵션

옵션	기본값	설명
`title` · `description` · `icon`	—	Alert 과 같다
`confirmText` · `cancelText`	"확인" · "취소"	두 버튼 문구. 되돌릴 수 없는 일이면 "삭제" 처럼 행동을 그대로 쓴다
`onConfirm` · `onCancel`	—	각 버튼을 눌렀을 때. `openAsync` 와 함께 써도 둘 다 호출된다
`shouldCloseOnConfirm` · `shouldCloseOnCancel`	`true`	`false` 면 그 버튼을 눌러도 열려 있다. `close()` 로 직접 닫는다
`id`	자동 생성	`close(id)` 로 특정 팝업을 닫을 때

closeAll() 과 close() 는 openAsync 의 Promise 를 false 로 끝낸다. 기다리는 쪽이 영원히 멈추지 않도록 취소로 정리한다.

접근성

제목이 없으면 aria-label="Confirm 팝업" 이 붙는다
dim 클릭 · ESC 로 닫히지 않는다. 실수로 닫히면 어느 쪽을 골랐는지 모호해진다
취소는 line, 확인은 solid 버튼이라 색 없이도 구분된다
포커스 트랩 · 배경 inert · 모션 감소 등 공통 계약은 Popup 개요

API

Confirm

PopupHost 가 렌더하는 컴포넌트다. 훅의 옵션이 곧 이 props 다.

이름	타입	기본값	설명
`open` *	boolean	—	—
`cancelText`	ReactNode	—	—
`className`	string	—	—
`confirmText`	ReactNode	—	—
`description`	ReactNode	—	—
`icon`	ReactNode \| null	—	—
`id`	string	—	—
`isTopmost`	boolean	—	스택 최상단인가 — 포커스 트랩과 ESC 를 이 팝업만 처리한다
`onCancel`	() => void	—	—
`onConfirm`	() => void	—	—
`onExited`	() => void	—	닫힘 애니메이션까지 끝난 뒤 호출된다
`title`	ReactNode	—	—

ConfirmProps 에서 자동 생성됨 (components/Popup/Popup.types.ts).