File name
Commit message
Commit date
File name
Commit message
Commit date
import type { ReactNode } from "react";
type AlertVariant = "info" | "danger";
const TITLE_TONE_CLASSES: Record<AlertVariant, string> = {
info: "text-foreground",
danger: "text-danger",
};
interface AlertProps {
variant?: AlertVariant;
title: string;
children?: ReactNode;
actions?: ReactNode;
}
/**
* 확인/경고 다이얼로그 비주얼(scrim 오버레이 + 패널).
* 열림/닫힘 여부는 호출부(feature)가 마운트/언마운트로 제어하고, 포커스 트랩도
* 호출부 책임이다. 이 컴포넌트는 상태를 가지지 않는다.
*/
export function Alert({ variant = "info", title, children, actions }: AlertProps) {
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-scrim p-4">
<div
role="alertdialog"
aria-modal="true"
aria-label={title}
className="w-full max-w-sm animate-dialog-in rounded-xl bg-surface p-6 shadow-dialog"
>
<h2 className={`text-title-lg ${TITLE_TONE_CLASSES[variant]}`}>{title}</h2>
{children && (
<div className="mt-2 text-body-md text-foreground-muted">{children}</div>
)}
{actions && <div className="mt-6 flex justify-end gap-2">{actions}</div>}
</div>
</div>
);
}