50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
|
|
interface Props {
|
||
|
|
open: boolean;
|
||
|
|
title?: string;
|
||
|
|
message: string;
|
||
|
|
confirmLabel?: string;
|
||
|
|
cancelLabel?: string;
|
||
|
|
confirmColor?: string;
|
||
|
|
onConfirm: () => void;
|
||
|
|
onCancel: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function ConfirmModal({
|
||
|
|
open,
|
||
|
|
title = '확인',
|
||
|
|
message,
|
||
|
|
confirmLabel = '확인',
|
||
|
|
cancelLabel = '취소',
|
||
|
|
confirmColor = 'bg-wing-accent hover:bg-wing-accent/80',
|
||
|
|
onConfirm,
|
||
|
|
onCancel,
|
||
|
|
}: Props) {
|
||
|
|
if (!open) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-wing-overlay" onClick={onCancel}>
|
||
|
|
<div
|
||
|
|
className="bg-wing-surface rounded-xl shadow-2xl p-6 max-w-md w-full mx-4"
|
||
|
|
onClick={(e) => e.stopPropagation()}
|
||
|
|
>
|
||
|
|
<h3 className="text-lg font-semibold text-wing-text mb-2">{title}</h3>
|
||
|
|
<p className="text-wing-muted text-sm mb-6 whitespace-pre-line">{message}</p>
|
||
|
|
<div className="flex justify-end gap-3">
|
||
|
|
<button
|
||
|
|
onClick={onCancel}
|
||
|
|
className="px-4 py-2 text-sm font-medium text-wing-text bg-wing-card rounded-lg hover:bg-wing-hover transition-colors"
|
||
|
|
>
|
||
|
|
{cancelLabel}
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={onConfirm}
|
||
|
|
className={`px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors ${confirmColor}`}
|
||
|
|
>
|
||
|
|
{confirmLabel}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|