feat: 이벤트 분리

hanghae-plus · Dec 18, 2024 · d12c8fb · d12c8fb
1 parent 941fa52
commit d12c8fb
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 45 deletions.
diff --git a/src/main.js b/src/main.js
@@ -1,4 +1,6 @@
 import { createRouter } from "./router/router";
+import { setupEventListeners } from "./managers/eventManager.js";
 
 const root = document.getElementById("root");
-createRouter(root);
+const { navigate } = createRouter(root);
+setupEventListeners(navigate);
diff --git a/src/managers/eventManager.js b/src/managers/eventManager.js
@@ -0,0 +1,44 @@
+export const setupEventListeners = (navigate) => {
+  document.addEventListener("click", (e) => {
+    if (e.target.id === "logout") {
+      e.preventDefault();
+      localStorage.removeItem("user");
+      navigate("/login");
+      return;
+    }
+
+    if (e.target.matches("[data-link]")) {
+      e.preventDefault();
+      navigate(e.target.getAttribute("href"));
+    }
+  });
+
+  document.addEventListener("submit", (e) => {
+    if (e.target.id === "profile-form") {
+      e.preventDefault();
+      const formData = new FormData(e.target);
+      const user = JSON.parse(localStorage.getItem("user") || "{}");
+      const updatedUser = {
+        username: formData.get("username") || user.username,
+        email: formData.get("email") || user.email,
+        bio: formData.get("bio") || user.bio,
+      };
+      localStorage.setItem("user", JSON.stringify(updatedUser));
+      navigate("/profile");
+    }
+
+    if (e.target.id === "login-form") {
+      e.preventDefault();
+      const username = e.target.querySelector("#username").value;
+      localStorage.setItem(
+        "user",
+        JSON.stringify({
+          username,
+          email: "",
+          bio: "",
+        }),
+      );
+      navigate("/");
+    }
+  });
+};
diff --git a/src/router/router.js b/src/router/router.js
@@ -14,6 +14,7 @@ export const createRouter = (root) => {
   const handleRoute = () => {
     const path = window.location.pathname;
 
+    //라우트 가드
     if (path === "/profile" && !localStorage.getItem("user")) {
       navigate("/login");
       return;
@@ -29,54 +30,12 @@ export const createRouter = (root) => {
   };
 
   const navigate = (path) => {
+    // 브라우저 url 업데이트
     window.history.pushState({}, "", path);
+    // 페이지 렌더링
     handleRoute();
   };
 
-  // 전역 이벤트 리스너 등록
-  document.addEventListener("click", (e) => {
-    if (e.target.id === "logout") {
-      e.preventDefault();
-      localStorage.removeItem("user");
-      navigate("/login");
-      return;
-    }
-
-    if (e.target.matches("[data-link]")) {
-      e.preventDefault();
-      navigate(e.target.getAttribute("href"));
-    }
-  });
-
-  document.addEventListener("submit", (e) => {
-    if (e.target.id === "profile-form") {
-      e.preventDefault();
-      const formData = new FormData(e.target);
-      const user = JSON.parse(localStorage.getItem("user") || "{}");
-      const updatedUser = {
-        username: formData.get("username") || user.username,
-        email: formData.get("email") || user.email,
-        bio: formData.get("bio") || user.bio,
-      };
-      localStorage.setItem("user", JSON.stringify(updatedUser));
-      navigate("/profile");
-    }
-
-    if (e.target.id === "login-form") {
-      e.preventDefault();
-      const username = e.target.querySelector("#username").value;
-      localStorage.setItem(
-        "user",
-        JSON.stringify({
-          username,
-          email: "",
-          bio: "",
-        }),
-      );
-      navigate("/");
-    }
-  });
-
   window.addEventListener("popstate", handleRoute);
   handleRoute();