CodeitPart3 · ghdtnals · Apr 30, 2025 · Apr 28, 2025 · Apr 29, 2025 · Apr 29, 2025
diff --git a/index.html b/index.html
@@ -12,6 +12,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <div id="toast-root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,14 @@
 import { RouterProvider } from "react-router-dom";
 
 import { router } from "./Router";
+import ToastContainer from "@/components/Toast/ToastContainer";
 
 function App() {
-  return <RouterProvider router={router} />;
+  return (
+    <>
+      <RouterProvider router={router} />
+      <ToastContainer />
+    </>
+  );
 }
 export default App;
diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
@@ -0,0 +1,19 @@
+import { cn } from "@/utils/cn";
+
+interface ToastProps {
+  label: string;
+  className?: string;
+}
+
+export default function Toast({ label, className }: ToastProps) {
+  return (
+    <div
+      className={cn(
+        "inline-block rounded-md bg-red-30 px-4 py-[10px] text-white body1-regular",
+        className,
+      )}
+    >
+      {label}
+    </div>
+  );
+}
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
@@ -0,0 +1,20 @@
+interface ToastProps {
+  label: string;
+  onClose?: () => void;
+}
+
+export default function Toast({ label, onClose }: ToastProps) {
+  return (
+    <div className="relative inline-block rounded-md bg-red-30 px-4 py-[10px] text-white body1-regular">
+      {label}
+      {onClose && (
+        <button
+          onClick={onClose}
+          className="absolute top-1 right-2 text-white text-xs"
+        >
+          ✕
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Toast/ToastContainer.tsx b/src/components/Toast/ToastContainer.tsx
@@ -0,0 +1,24 @@
+import { useToast } from "@/hooks/useToast";
+import ToastPortal from "@/components/Toast/ToastPortal";
+import Toast from "@/components/Toast/Toast";
+
+export default function ToastContainer() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastPortal>
+      <div className="fixed inset-0 z-50 flex flex-col items-center justify-center pointer-events-none">
+        {toasts.map((toast) => (
+          <div
+            key={toast.id}
+            className={`transition-opacity duration-500 ${
+              toast.isVisible ? "opacity-100" : "opacity-0"
+            }`}
+          >
+            <Toast label={toast.label} />
+          </div>
-          <div
-            key={toast.id}
-            className={`transition-opacity duration-500 ${
-              toast.isVisible ? "opacity-100" : "opacity-0"
-            }`}
-          >
-            <Toast label={toast.label} />
-          </div>
+            <Toast 
+              key={toast.id}
+              label={toast.label} 
+              className={cn(
+                "transition-opacity duration-500",
+                toast.isVisible ? "opacity-100" : "opacity-0",
+              )}
+             />
-          <div
-            key={toast.id}
-            className={`transition-opacity duration-500 ${
-              toast.isVisible ? "opacity-100" : "opacity-0"
-            }`}
-          >
-            <Toast label={toast.label} />
-          </div>
+            <Toast 
+              key={toast.id}
+              label={toast.label} 
+              className={cn(
+                "transition-opacity duration-500",
+                toast.isVisible ? "opacity-100" : "opacity-0",
+              )}
+             />
+        ))}
+      </div>
+    </ToastPortal>
+  );
+}
diff --git a/src/components/Toast/ToastPortal.tsx b/src/components/Toast/ToastPortal.tsx
@@ -0,0 +1,21 @@
+import { createPortal } from "react-dom";
+import { ReactNode, useEffect, useState } from "react";
+
+interface ToastPortalProps {
+  children: ReactNode;
+}
+
+export default function ToastPortal({ children }: ToastPortalProps) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (typeof window === "undefined") return null;
+
+  const el = document.getElementById("toast-root");
+  if (!el || !mounted) return null;
+
+  return createPortal(children, el);
+}
diff --git a/src/hooks/useToast.tsx b/src/hooks/useToast.tsx
@@ -0,0 +1,41 @@
+import { create } from "zustand";
+
+interface ToastItem {
+  id: number;
+  label: string;
+  isVisible: boolean;
+}
+
+interface ToastState {
+  toasts: ToastItem[];
+  showToast: (label: string) => void;
+  removeToast: (id: number) => void;
+}
+
+export const useToast = create<ToastState>((set) => ({
+  toasts: [],
+  showToast: (label) => {
+    const id = Date.now();
+    set((state) => ({
+      toasts: [...state.toasts, { id, label, isVisible: true }],
+    }));
+
+    setTimeout(() => {
+      set((state) => ({
+        toasts: state.toasts.map((toast) =>
+          toast.id === id ? { ...toast, isVisible: false } : toast,
+        ),
+      }));
+
+      setTimeout(() => {
+        set((state) => ({
+          toasts: state.toasts.filter((toast) => toast.id !== id),
+        }));
+      }, 500);
+    }, 1000);
+  },
-  showToast: (label) => {
-    const id = Date.now();
-    set((state) => ({
-      toasts: [...state.toasts, { id, label, isVisible: true }],
-    }));
-
-    setTimeout(() => {
-      set((state) => ({
-        toasts: state.toasts.map((toast) =>
-          toast.id === id ? { ...toast, isVisible: false } : toast,
-        ),
-      }));
-
-      setTimeout(() => {
-        set((state) => ({
-          toasts: state.toasts.filter((toast) => toast.id !== id),
-        }));
-      }, 500);
-    }, 1000);
-  },
+  showToast: async (label) => {
+    const id = Date.now();
+    set((state) => ({
+      toasts: [...state.toasts, { id, label, isVisible: true }],
+    }));
+    await new Promise((r) => setTimeout(r, 1000));
+    set((state) => ({
+      toasts: state.toasts.map((t) =>
+        t.id === id ? { ...t, isVisible: false } : t
+      ),
+    }));
+    await new Promise((r) => setTimeout(r, 500));
+    set((state) => ({
+      toasts: state.toasts.filter((t) => t.id !== id),
+    }));
+  };
-  showToast: (label) => {
-    const id = Date.now();
-    set((state) => ({
-      toasts: [...state.toasts, { id, label, isVisible: true }],
-    }));
-
-    setTimeout(() => {
-      set((state) => ({
-        toasts: state.toasts.map((toast) =>
-          toast.id === id ? { ...toast, isVisible: false } : toast,
-        ),
-      }));
-
-      setTimeout(() => {
-        set((state) => ({
-          toasts: state.toasts.filter((toast) => toast.id !== id),
-        }));
-      }, 500);
-    }, 1000);
-  },
+  showToast: async (label) => {
+    const id = Date.now();
+    set((state) => ({
+      toasts: [...state.toasts, { id, label, isVisible: true }],
+    }));
+    await new Promise((r) => setTimeout(r, 1000));
+    set((state) => ({
+      toasts: state.toasts.map((t) =>
+        t.id === id ? { ...t, isVisible: false } : t
+      ),
+    }));
+    await new Promise((r) => setTimeout(r, 500));
+    set((state) => ({
+      toasts: state.toasts.filter((t) => t.id !== id),
+    }));
+  };
+  removeToast: (id) =>
+    set((state) => ({
+      toasts: state.toasts.filter((toast) => toast.id !== id),
+    })),
+}));