⚠️ useConfirm

네이티브 window.confirm 보다 예쁘고, 브랜드 일관성 유지. Promise 기반이라 async/await 로 자연스럽게.

라이브 데모

사용법

import { useConfirm } from "~/features/common";

function Page() {
    const [confirm, confirmNode] = useConfirm();

    const handleDelete = async () => {
        const ok = await confirm({
            title: "정말 삭제할까요?",
            description: "복구할 수 없습니다.",
            variant: "danger",
            confirmText: "삭제",
        });
        if (ok) doDelete();
    };

    return <>
        <button onClick={handleDelete}>삭제</button>
        {confirmNode /* 컴포넌트 트리에 한 번만 마운트 */}
    </>;
}