refactor: App.tsx에서 NotificationList 컴포넌트로 알림 표시 로직 분리

Author: realstone2

src/basic/App.tsx

@@ -13,8 +13,9 @@ import {
   calculateItemTotal,
   getCartItemCount,
 } from "./utils/cartUtils";
+import { NotificationList } from "./NotificationList";
 
-interface Notification {
+export interface Notification {
   id: string;
   message: string;
   type: "error" | "success" | "warning";
@@ -61,46 +62,10 @@ const App = () => {
 
   return (
     <div className="min-h-screen bg-gray-50">
-      {notifications.length > 0 && (
-        <div className="fixed top-20 right-4 z-50 space-y-2 max-w-sm">
-          {notifications.map((notif) => (
-            <div
-              key={notif.id}
-              className={`p-4 rounded-md shadow-md text-white flex justify-between items-center ${
-                notif.type === "error"
-                  ? "bg-red-600"
-                  : notif.type === "warning"
-                  ? "bg-yellow-600"
-                  : "bg-green-600"
-              }`}
-            >
-              <span className="mr-2">{notif.message}</span>
-              <button
-                onClick={() =>
-                  setNotifications((prev) =>
-                    prev.filter((n) => n.id !== notif.id)
-                  )
-                }
-                className="text-white hover:text-gray-200"
-              >
-                <svg
-                  className="w-4 h-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-              </button>
-            </div>
-          ))}
-        </div>
-      )}
+      <NotificationList
+        notifications={notifications}
+        setNotifications={setNotifications}
+      />
       <Header
         isAdmin={isAdmin}
         setIsAdmin={setIsAdmin}

src/basic/NotificationList.tsx

@@ -0,0 +1,48 @@
+import { Notification } from "./App";
+
+export const NotificationList = ({
+  notifications,
+  setNotifications,
+}: {
+  notifications: Notification[];
+  setNotifications: React.Dispatch<React.SetStateAction<Notification[]>>;
+}) => {
+  return (
+    <div className="fixed top-20 right-4 z-50 space-y-2 max-w-sm">
+      {notifications.map((notif) => (
+        <div
+          key={notif.id}
+          className={`p-4 rounded-md shadow-md text-white flex justify-between items-center ${
+            notif.type === "error"
+              ? "bg-red-600"
+              : notif.type === "warning"
+              ? "bg-yellow-600"
+              : "bg-green-600"
+          }`}
+        >
+          <span className="mr-2">{notif.message}</span>
+          <button
+            onClick={() =>
+              setNotifications((prev) => prev.filter((n) => n.id !== notif.id))
+            }
+            className="text-white hover:text-gray-200"
+          >
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+};