File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
interface Props {
title: string
lines: string[]
confirmLabel: string
onConfirm: () => void
onCancel: () => void
/** 확인 액션이 진행 중일 때 true. 두 버튼을 모두 비활성화해 중복 클릭을 막는다. */
busy?: boolean
}
export default function ConfirmDialog({
title,
lines,
confirmLabel,
onConfirm,
onCancel,
busy = false,
}: Props) {
return (
<div className="fixed inset-0 flex items-center justify-center bg-black/30">
<div className="w-96 rounded-lg bg-white p-5">
<h2 className="text-base font-semibold">{title}</h2>
<ul className="mt-3 space-y-1 rounded-md bg-gray-50 p-3 text-sm">
{lines.map((line) => (
<li key={line} className="font-mono text-xs">{line}</li>
))}
</ul>
<div className="mt-5 flex justify-end gap-2">
<button
type="button"
disabled={busy}
onClick={onCancel}
className="rounded-md border border-gray-300 px-3 py-1.5 text-sm disabled:opacity-50"
>
취소
</button>
<button
type="button"
disabled={busy}
onClick={onConfirm}
className="rounded-md bg-blue-600 px-3 py-1.5 text-sm text-white disabled:bg-gray-300"
>
{confirmLabel}
</button>
</div>
</div>
</div>
)
}