snp-batch-validation/frontend/src/components/ConfirmModal.tsx

50 lines
1.4 KiB
TypeScript
Raw Normal View 히스토리

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>
);
}