feat: advanced test pass

hanghae-plus · Dec 19, 2024 · 1fe081b · 1fe081b
1 parent 43764ef
commit 1fe081b
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 7 deletions.
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -7,12 +7,12 @@ const Header = () => `
   
   <nav class="bg-white shadow-md p-2 sticky top-14">
     <ul class="flex justify-around">
-      <li><a href="/" class="text-blue-600">홈</a></li>
-      <li><a href="/profile" class="text-gray-600">프로필</a></li>
+      <li><a href="/" class="text-blue-600 font-bold">홈</a></li>
+      <li><a href="/profile" class="text-gray-600 font-bold">프로필</a></li>
       <li>${
         isAuthenticated()
-          ? '<a id="logout" href="#" class="text-gray-600">로그아웃</a>'
-          : '<a href="/login" class="text-gray-600">로그인</a>'
+          ? '<a id="logout" href="#" class="text-gray-600 font-bold">로그아웃</a>'
+          : '<a href="/login" class="text-gray-600 font-bold">로그인</a>'
       }</li>
     </ul>
   </nav>

diff --git a/src/main.js b/src/main.js
@@ -14,6 +14,11 @@ import {
 
 const $root = document.getElementById("root");
 
+const hashRoutes = [
+  { path: "#/", component: () => Layout(HomePage) },
+  { path: "#/profile", component: () => Layout(ProfilePage) },
+  { path: "#/login", component: () => LoginPage },
+];
 const routes = [
   { path: "/", component: () => Layout(HomePage) },
   { path: "/profile", component: () => Layout(ProfilePage) },
@@ -26,6 +31,10 @@ const router = (path) => {
   if (_path === "/profile" && !isAuthenticated()) {
     _path = "/login";
   }
+  if (_path === "/login" && isAuthenticated()) {
+    _path = "/";
+  }
+
   const route = routes.find((route) => route.path === _path);
   window.history.pushState(null, "", _path);
 
@@ -38,8 +47,34 @@ const router = (path) => {
     $root.innerHTML = ErrorPage();
   }
 };
+const hashRouter = (path) => {
+  let _path = path ?? window.location.hash;
+
+  const routeName = _path.replace("#/", "");
+
+  if (routeName === "profile" && !isAuthenticated()) {
+    window.location.hash = "#/login";
+    return;
+  }
+  if (routeName === "login" && isAuthenticated()) {
+    window.location.hash = "#/";
+    return;
+  }
+
+  const route = hashRoutes.find((route) => route.path === `#/${routeName}`);
+  window.location.hash = `#/${routeName}`;
 
-const setProfile = () => {
+  if (route) {
+    $root.innerHTML = route.component();
+    if (routeName === "profile" && isAuthenticated()) {
+      setProfile();
+    }
+  } else {
+    $root.innerHTML = ErrorPage();
+  }
+};
+
+export const setProfile = () => {
   const user = getUserFromStorage();
   const profileForm = document.getElementById("profile-form");
 
@@ -76,11 +111,14 @@ const handleLogout = () => {
 };
 
 window.addEventListener("DOMContentLoaded", () => {
-  router();
+  window.location.hash ? hashRouter() : router();
 });
 window.addEventListener("popstate", () => {
   router();
 });
+window.addEventListener("hashchange", () => {
+  hashRouter();
+});
 window.addEventListener("click", (e) => {
   if (e.target.tagName === "A" && e.target.pathname) {
     e.preventDefault();
@@ -89,7 +127,9 @@ window.addEventListener("click", (e) => {
       handleLogout();
       return;
     }
-    router(e.target.pathname);
+    window.location.hash
+      ? hashRouter(e.target.pathname)
+      : router(e.target.pathname);
   }
 });
 window.addEventListener("submit", (e) => {