feat: 커스텀 토스트 컴포넌트 작성

Author: WooGi1020

src/components/Toast/ToastItem.tsx

@@ -0,0 +1,74 @@
+import clsx from "clsx";
+import { motion } from "motion/react";
+import { useEffect, type JSX } from "react";
+import Button from "../Button";
+import { X, CheckCircle, Info, AlertTriangle } from "lucide-react";
+
+const TOAST_TYPE_CONFIG: Record<string, { base: string; icon: JSX.Element }> = {
+  info: {
+    base: "text-gray-500 border-2 border-blue-300",
+    icon: <Info className="w-5 h-5 mr-2 stroke-blue-500" />,
+  },
+  success: {
+    base: "text-gray-500 border-2 border-green-300",
+    icon: <CheckCircle className="w-5 h-5 mr-2 stroke-green-500" />,
+  },
+  error: {
+    base: "text-gray-500 border-2 border-red-300",
+    icon: <AlertTriangle className="w-5 h-5 mr-2 stroke-red-500" />,
+  },
+};
+
+const TOAST_COMMON =
+  "min-w-[260px] w-full rounded-lg px-4 py-3 shadow-lg font-medium flex items-center justify-between bg-white";
+
+export default function ToastItem({
+  id,
+  message,
+  type = "info",
+  duration = 3000,
+  onClose,
+}: {
+  id: string;
+  message: string;
+  type?: keyof typeof TOAST_TYPE_CONFIG;
+  duration?: number;
+  onClose: (id: string) => void;
+}) {
+  useEffect(() => {
+    const timer = setTimeout(() => onClose(id), duration);
+    return () => clearTimeout(timer);
+  }, [duration, onClose, id]);
+
+  const config = TOAST_TYPE_CONFIG[type];
+
+  return (
+    <motion.div
+      layout
+      key={id}
+      initial={{ opacity: 0, y: 20, scale: 0.95 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      exit={{ opacity: 0, y: -20, scale: 0.95 }}
+      transition={{
+        type: "spring",
+        damping: 18,
+        stiffness: 200,
+        layout: { duration: 0.2, delay: 0 },
+      }}
+      className={clsx(TOAST_COMMON, config.base)}
+    >
+      <div className="flex items-center">
+        {config.icon}
+        <p className="select-none">{message}</p>
+      </div>
+      <Button
+        variant="ghost"
+        size="icon"
+        className="p-1"
+        onClick={() => onClose(id)}
+      >
+        <X className="w-4 h-4" />
+      </Button>
+    </motion.div>
+  );
+}

src/components/Toast/index.tsx

@@ -0,0 +1,37 @@
+import useUiStore from "@/store/useUiStore";
+import { AnimatePresence } from "motion/react";
+import { createPortal } from "react-dom";
+import ToastItem from "./ToastItem";
+
+const placementClasses: Record<string, string> = {
+  "top-left": "top-4 left-4",
+  "top-right": "top-4 right-4",
+  "bottom-left": "bottom-4 left-4",
+  "bottom-right": "bottom-4 right-4",
+  "top-center": "top-4 left-1/2 transform -translate-x-1/2",
+  "bottom-center": "bottom-4 left-1/2 transform -translate-x-1/2",
+};
+
+export default function ToastRoot() {
+  const toasts = useUiStore((s) => s.toasts);
+  const placement = useUiStore((s) => s.placement || "top-right");
+  const removeToast = useUiStore((s) => s.removeToast);
+
+  return createPortal(
+    <div
+      className={`fixed ${placementClasses[placement]} flex flex-col gap-2 z-50`}
+    >
+      <AnimatePresence>
+        {toasts.map((toast) => (
+          <ToastItem
+            key={toast.id}
+            duration={toast.duration!}
+            onClose={() => removeToast(toast.id)}
+            {...toast}
+          />
+        ))}
+      </AnimatePresence>
+    </div>,
+    document.getElementById("modal-root")!
+  );
+}

src/routes/pages/ButtonPage.tsx

@@ -1,24 +1,33 @@
 import Button from "@/components/Button";
+import ToastRoot from "@/components/Toast";
+import useUiStore from "@/store/useUiStore";
 import { Menu, Loader2 } from "lucide-react";
 
 export default function ButtonPage() {
+  const addToast = useUiStore((s) => s.addToast);
+
   return (
     <section>
       <h1>공통 버튼 컴포넌트</h1>
       <div className="mt-4 flex flex-col gap-4 lg:flex-row">
         <Button
           className="max-w-20"
-          onClick={() => console.log("버튼 클릭됨!")}
+          onClick={() =>
+            addToast("버튼 클릭됨!", "success", "top-center", 1000)
+          }
         >
           버튼
         </Button>
-        <Button variant="danger" onClick={() => console.log("버튼 클릭됨!")}>
+        <Button
+          variant="danger"
+          onClick={() => addToast("버튼 클릭됨!", "error", "top-center", 1000)}
+        >
           버튼
         </Button>
         <Button
           variant="secondary"
           className="whitespace-nowrap"
-          onClick={() => alert("버튼 클릭됨!")}
+          onClick={() => addToast("버튼 클릭됨!", "info", "top-center", 1000)}
         >
           넓고 회색인 버튼
         </Button>
@@ -34,6 +43,8 @@ export default function ButtonPage() {
           <Menu className="size-6" />
         </Button>
       </div>
+
+      <ToastRoot />
     </section>
   );
 }

src/store/useUiStore.ts

@@ -6,6 +6,21 @@ interface ModalData {
   props?: Record<string, any>;
 }
 
+interface ToastData {
+  id: string;
+  message: string;
+  type: "info" | "success" | "error";
+  duration?: number;
+}
+
+type ToastPlacement =
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right"
+  | "top-center"
+  | "bottom-center";
+
 type UiStore = {
   isSidebarOpen: boolean;
   toggleSidebar: () => void;
@@ -17,6 +32,16 @@ type UiStore = {
     props?: Record<string, any>
   ) => void;
   closeModal: (id?: string) => void;
+
+  toasts: ToastData[];
+  placement?: ToastPlacement;
+  addToast: (
+    message: string,
+    type?: "info" | "success" | "error",
+    placement?: ToastPlacement,
+    duration?: number
+  ) => void;
+  removeToast: (id: string) => void;
 };
 
 const useUiStore = create<UiStore>((set) => ({
@@ -34,6 +59,25 @@ const useUiStore = create<UiStore>((set) => ({
     set((s) => ({
       modals: id ? s.modals.filter((m) => m.id !== id) : s.modals.slice(0, -1),
     })),
+
+  toasts: [],
+  addToast: (
+    message,
+    type = "info",
+    placement = "top-right",
+    duration = 1000
+  ) =>
+    set((s) => ({
+      toasts: [
+        ...s.toasts,
+        { id: crypto.randomUUID(), message, type, duration },
+      ],
+      placement,
+    })),
+  removeToast: (id) =>
+    set((s) => ({
+      toasts: s.toasts.filter((t) => t.id !== id),
+    })),
 }));
 
 export default useUiStore;