feat: 이벤트 위임 처리 & isHash 에 따른 분기 & unmount 시 unsubscribe 적용

hanghae-plus · Dec 17, 2024 · 2dc8d03 · 2dc8d03
1 parent ec764d5
commit 2dc8d03
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 55 deletions.
diff --git a/src/components/login-form-component.jsx b/src/components/login-form-component.jsx
@@ -6,19 +6,30 @@ class LoginFormComponent extends HTMLElement {
     super();
   }
 
+  addEvent() {
+    const loginForm = this.querySelector("#login-form");
+
+    this.addEventListener("submit", (event) => {
+      event.preventDefault();
+
+      if (event.target === loginForm) {
+        this.handleLogin();
+      }
+    });
+  }
+
   connectedCallback() {
     this.render();
   }
 
-  handleLogin(event) {
-    event.preventDefault();
+  handleLogin() {
     const username = this.querySelector("#username").value;
 
     if (!username) {
       return;
     }
 
-    navigateTo("/");
+    navigateTo("/", { hash: window.isHash });
 
     const user = {
       username,
@@ -31,13 +42,13 @@ class LoginFormComponent extends HTMLElement {
 
   render() {
     const element = (
-      <form id="login-form" onSubmit={this.handleLogin}>
+      <form id="login-form">
         <div class="mb-4">
           <input
             type="text"
             id="username"
             name="username"
-            placeholder="이메일 또는 전화번호"
+            placeholder="사용자 이름"
             class="w-full p-2 border rounded"
           />
         </div>
@@ -50,6 +61,7 @@ class LoginFormComponent extends HTMLElement {
           />
         </div>
         <button
+          role="button"
           type="submit"
           class="w-full bg-blue-600 text-white p-2 rounded font-bold"
         >
@@ -63,6 +75,7 @@ class LoginFormComponent extends HTMLElement {
     } else {
       this.appendChild(element);
     }
+    this.addEvent();
   }
 }
 

diff --git a/src/components/nav-component.jsx b/src/components/nav-component.jsx
@@ -7,20 +7,42 @@ class NavComponent extends HTMLElement {
     userStore.subscribe(this.render.bind(this));
   }
 
+  addEvent() {
+    const logoutButton = this.querySelector("#logout");
+
+    this.addEventListener("click", (event) => {
+      Array.from([...this.querySelectorAll("a")]).forEach((el) => {
+        event.preventDefault();
+        const url = new URL(el.href);
+
+        if (event.target === logoutButton) {
+          this.handleLogout();
+          return;
+        }
+
+        if (event.target === el) {
+          this.handleNavigate(url.pathname);
+          return;
+        }
+      });
+    });
+  }
+
   connectedCallback() {
     this.render();
   }
 
+  disconnectedCallback() {
+    userStore.unsubscribe(this.render.bind(this));
+  }
+
   handleNavigate(path) {
-    return function (e) {
-      e.preventDefault();
-      navigateTo(path);
-    };
+    navigateTo(path, { hash: window.isHash });
   }
 
   handleLogout() {
     userStoreActions.logout();
-    navigateTo("/");
+    navigateTo("/login", { hash: window.isHash });
   }
 
   render() {
@@ -31,13 +53,16 @@ class NavComponent extends HTMLElement {
         <ul class="flex justify-around">
           <li>
             <a
-              href="/"
+              href={"/"}
               class={
-                window.location.pathname === "/"
-                  ? "text-blue-600"
-                  : "text-gray-600"
+                window.isHash
+                  ? window.location.hash === "#/"
+                    ? "text-blue-600 font-bold"
+                    : "text-gray-600"
+                  : window.location.pathname === "/"
+                    ? "text-blue-600 font-bold"
+                    : "text-gray-600"
               }
-              onClick={this.handleNavigate("/")}
             >
               홈
             </a>
@@ -46,36 +71,27 @@ class NavComponent extends HTMLElement {
             <a
               href="/profile"
               class={
-                window.location.pathname === "/profile"
-                  ? "text-blue-600"
-                  : "text-gray-600"
+                window.isHash
+                  ? window.location.hash === "#/profile"
+                    ? "text-blue-600 font-bold"
+                    : "text-gray-600"
+                  : window.location.pathname === "/profile"
+                    ? "text-blue-600 font-bold"
+                    : "text-gray-600"
               }
-              onClick={this.handleNavigate("/profile")}
             >
               프로필
             </a>
           </li>
           {isLogin ? (
             <li>
-              <button
-                id="logout"
-                class="text-gray-600"
-                onClick={this.handleLogout}
-              >
+              <a href="#" id="logout" class="text-gray-600">
                 로그아웃
-              </button>
+              </a>
             </li>
           ) : (
             <li>
-              <a
-                href="/login"
-                class={
-                  window.location.pathname === "/login"
-                    ? "text-blue-600"
-                    : "text-gray-600"
-                }
-                onClick={this.handleNavigate("/login")}
-              >
+              <a href="/login" class={"text-gray-600"}>
                 로그인
               </a>
             </li>
@@ -89,6 +105,8 @@ class NavComponent extends HTMLElement {
     } else {
       this.appendChild(element);
     }
+
+    this.addEvent();
   }
 }
 

diff --git a/src/components/profile-form-component.jsx b/src/components/profile-form-component.jsx
@@ -1,17 +1,36 @@
 import { userStore, userStoreActions } from "../stores/userStore";
+import { navigateTo } from "../utils/router";
 
 class ProfileFormComponent extends HTMLElement {
   constructor() {
     super();
+    userStore.subscribe(this.render.bind(this));
+  }
+
+  addEvent() {
+    const profileForm = this.querySelector("#profile-form");
+
+    const handleSubmit = (event) => {
+      if (event.target === profileForm) {
+        event.preventDefault();
+
+        this.handleUpdateProfile();
+      }
+    };
+
+    this.removeEventListener("submit", handleSubmit);
+    this.addEventListener("submit", handleSubmit);
   }
 
   connectedCallback() {
     this.render();
-    userStore.subscribe(this.render.bind(this));
   }
 
-  handleUpdateProfile(event) {
-    event.preventDefault();
+  disconnectedCallback() {
+    userStore.unsubscribe(this.render.bind(this));
+  }
+
+  handleUpdateProfile() {
     const username = this.querySelector("#username").value;
     const email = this.querySelector("#email").value;
     const bio = this.querySelector("#bio").value;
@@ -23,6 +42,7 @@ class ProfileFormComponent extends HTMLElement {
     };
 
     userStoreActions.updateUser(user);
+    navigateTo("/profile");
   }
 
   render() {
@@ -85,6 +105,7 @@ class ProfileFormComponent extends HTMLElement {
     } else {
       this.appendChild(element);
     }
+    this.addEvent();
   }
 }
 

diff --git a/src/pages/login-page.jsx b/src/pages/login-page.jsx
@@ -1,13 +1,27 @@
+import { userStore } from "../stores/userStore";
+import { navigateTo } from "../utils/router";
+
 class LoginPage extends HTMLElement {
   constructor() {
     super();
+    userStore.subscribe(this.render.bind(this));
   }
 
   connectedCallback() {
     this.render();
   }
 
+  disconnectedCallback() {
+    userStore.unsubscribe(this.render.bind(this));
+  }
+
   render() {
+    const user = userStore.getState();
+
+    if (user.username) {
+      navigateTo(window.isHash ? "#/" : "/", { hash: window.isHash });
+    }
+
     const element = (
       <main class="bg-gray-100 flex items-center justify-center min-h-screen">
         <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">

diff --git a/src/pages/profile-page.jsx b/src/pages/profile-page.jsx
@@ -1,38 +1,22 @@
-import { userStore, userStoreActions } from "../stores/userStore";
+import { userStore } from "../stores/userStore";
 import { navigateTo } from "../utils/router";
 
 class ProfilePage extends HTMLElement {
   constructor() {
     super();
-    userStore.subscribe(this.render.bind(this));
   }
 
   connectedCallback() {
     const user = userStore.getState();
 
     if (!user?.username) {
-      navigateTo("/login");
+      navigateTo("/login", { hash: window.isHash });
       return;
     }
 
     this.render();
   }
 
-  handleUpdateProfile(event) {
-    event.preventDefault();
-    const username = this.querySelector("#username").value;
-    const email = this.querySelector("#email").value;
-    const bio = this.querySelector("#bio").value;
-
-    const user = {
-      username,
-      email,
-      bio,
-    };
-
-    userStoreActions.updateUser(user);
-  }
-
   render() {
     const element = (
       <div class="bg-gray-100 min-h-screen flex justify-center">