Merge pull request #44 from CodeitPart3/COMPONENT-42-HONG

ghdtnals · web-flow · commit eccdd2e0c48c · 2025-04-30T10:00:58.000+09:00
[feat] Toast 컴포넌트 구현
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/Toast.tsx b/src/components/Toast/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(
+        "relative inline-block rounded-md bg-red-30 px-4 py-[10px] text-white body1-regular",
+        className,
+      )}
+    >
+      {label}
+    </div>
+  );
+}
diff --git a/src/components/Toast/ToastContainer.tsx b/src/components/Toast/ToastContainer.tsx
@@ -0,0 +1,23 @@
+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 gap-y-2 pointer-events-none">
+        {toasts.map((toast) => (
+          <Toast
+            key={toast.id}
+            label={toast.label}
+            className={`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) => Promise<void>;
+  removeToast: (id: number) => void;
+}
+
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export const useToast = create<ToastState>((set) => ({
+  toasts: [],
+  showToast: async (label) => {
+    const id = Date.now();
+    set((state) => ({
+      toasts: [...state.toasts, { id, label, isVisible: true }],
+    }));
+
+    await delay(1000);
+    set((state) => ({
+      toasts: state.toasts.map((toast) =>
+        toast.id === id ? { ...toast, isVisible: false } : toast,
+      ),
+    }));
+
+    await delay(500);
+    set((state) => ({
+      toasts: state.toasts.filter((toast) => toast.id !== id),
+    }));
+  },
+  removeToast: (id) =>
+    set((state) => ({
+      toasts: state.toasts.filter((toast) => toast.id !== id),
+    })),
+}));
