From 2dc8d03de020cc96967db8e396d0cd39b3543559 Mon Sep 17 00:00:00 2001
From: Geunbaek <rmsqor103@naver.com>
Date: Wed, 18 Dec 2024 04:59:09 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=9C=84?=
 =?UTF-8?q?=EC=9E=84=20=EC=B2=98=EB=A6=AC=20&=20isHash=20=EC=97=90=20?=
 =?UTF-8?q?=EB=94=B0=EB=A5=B8=20=EB=B6=84=EA=B8=B0=20&=20unmount=20?=
 =?UTF-8?q?=EC=8B=9C=20unsubscribe=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/login-form-component.jsx   | 23 +++++--
 src/components/nav-component.jsx          | 76 ++++++++++++++---------
 src/components/profile-form-component.jsx | 27 +++++++-
 src/pages/login-page.jsx                  | 14 +++++
 src/pages/profile-page.jsx                | 20 +-----
 5 files changed, 105 insertions(+), 55 deletions(-)

diff --git a/src/components/login-form-component.jsx b/src/components/login-form-component.jsx
index 3b964998..5be5f20e 100644
--- 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
index 41db5804..b28f1b30 100644
--- 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
index 50bdcbf1..6e9951ab 100644
--- 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
index 41e7d469..cef6681b 100644
--- 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
index da5bca62..36ddad87 100644
--- 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">