+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>

+  );

+}