[공통컴포넌트] alert 제작

2026-02-13 16:12:08 +09:00
parent 7c194d7452
commit b73867c65d
6 changed files with 427 additions and 0 deletions
--- a/features/layout/components/GlobalAlertModal.tsx
+++ b/features/layout/components/GlobalAlertModal.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { AlertCircle, AlertTriangle, CheckCircle2, Info } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { useGlobalAlertStore } from "@/features/layout/stores/use-global-alert-store";
+import { cn } from "@/lib/utils";
+
+export function GlobalAlertModal() {
+  const {
+    isOpen,
+    type,
+    title,
+    message,
+    confirmLabel,
+    cancelLabel,
+    onConfirm,
+    onCancel,
+    isSingleButton,
+    closeAlert,
+  } = useGlobalAlertStore();
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      closeAlert();
+    }
+  };
+
+  const handleConfirm = () => {
+    onConfirm?.();
+    closeAlert();
+  };
+
+  const handleCancel = () => {
+    onCancel?.();
+    closeAlert();
+  };
+
+  const Icon = {
+    success: CheckCircle2,
+    error: AlertCircle,
+    warning: AlertTriangle,
+    info: Info,
+  }[type];
+
+  const iconColor = {
+    success: "text-emerald-500",
+    error: "text-red-500",
+    warning: "text-amber-500",
+    info: "text-blue-500",
+  }[type];
+
+  const bgColor = {
+    success: "bg-emerald-50 dark:bg-emerald-950/20",
+    error: "bg-red-50 dark:bg-red-950/20",
+    warning: "bg-amber-50 dark:bg-amber-950/20",
+    info: "bg-blue-50 dark:bg-blue-950/20",
+  }[type];
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={handleOpenChange}>
+      <AlertDialogContent className="sm:max-w-[400px]">
+        <AlertDialogHeader>
+          <div className="flex flex-col items-center gap-4 text-center sm:flex-row sm:text-left">
+            <div
+              className={cn(
+                "flex h-12 w-12 shrink-0 items-center justify-center rounded-full",
+                bgColor,
+                iconColor,
+              )}
+            >
+              <Icon className="h-6 w-6" />
+            </div>
+            <div className="flex-1 space-y-2">
+              <AlertDialogTitle>{title}</AlertDialogTitle>
+              <AlertDialogDescription className="text-sm leading-relaxed">
+                {message}
+              </AlertDialogDescription>
+            </div>
+          </div>
+        </AlertDialogHeader>
+        <AlertDialogFooter className="mt-4 sm:justify-end">
+          {!isSingleButton && (
+            <AlertDialogCancel onClick={handleCancel} className="mt-2 sm:mt-0">
+              {cancelLabel || "취소"}
+            </AlertDialogCancel>
+          )}
+          <AlertDialogAction
+            onClick={handleConfirm}
+            className={cn(
+              type === "error" && "bg-red-600 hover:bg-red-700",
+              type === "warning" && "bg-amber-600 hover:bg-amber-700",
+              type === "success" && "bg-emerald-600 hover:bg-emerald-700",
+            )}
+          >
+            {confirmLabel || "확인"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}