refactor: 코드 개선

* refactor: 레이아웃 개선

* refactor: 이벤트 위임 개선

* fix: navigation 로그인 상태 반영

src/layout/DefaultLayout.js

@@ -1,10 +1,11 @@
-import { Header, Footer } from "@/layout";
+import { Header, Footer, Navigator } from "@/layout";
 
 export const DefaultLayout = (content) => {
   return `
-    <div class="bg-gray-100 min-h-screen flex justify-center">
+    <div id="root" class="bg-gray-100 min-h-screen flex justify-center">
       <div class="max-w-md w-full">
         ${Header()}
+        ${Navigator()} 
         ${content} 
         ${Footer()}
       </div>

src/layout/Header.js

@@ -1,26 +1,9 @@
-import { getUser } from "@/state/handle-state";
-
 export const Header = () => {
-  const user = getUser().user;
-
   const content = `
-  <header class="bg-blue-600 text-white p-4 sticky top-0">
-    <h1 class="text-2xl font-bold">항해플러스</h1>
-  </header>
-  <nav class="bg-white shadow-md p-2 sticky top-14">
-    <ul class="flex justify-around">
-      <li><a href="/" class="text-blue-600 font-bold">홈</a></li>
-      <li><a href="/profile" class="text-gray-600">프로필</a></li>
-      <li>
-        ${
-          user
-            ? '<a href="/login" id="logout" class="text-gray-600">로그아웃</a>'
-            : '<a href="/login" id="login" class="text-gray-600">로그인</a>'
-        }
-      </li>
-    </ul>
-  </nav>
-`;
+    <header class="bg-blue-600 text-white p-4 sticky top-0">
+      <h1 class="text-2xl font-bold">항해플러스</h1>
+    </header>
+  `;
 
   return content;
 };

src/layout/NavigationLinks.js

@@ -0,0 +1,17 @@
+export const NavigationLinks = (navigator) => {
+  const { id, href, text } = navigator;
+  const currentPath = window.location.pathname;
+  const isCurrentPath = currentPath === href;
+
+  return `
+    <li>
+      <a 
+        href="${href}" 
+        id="${id}" 
+        class="${isCurrentPath ? "font-bold text-blue-600" : "text-gray-600"}"
+      >
+        ${text}
+      </a>
+    </li>
+  `;
+};

src/layout/Navigator.js

@@ -0,0 +1,54 @@
+import { clearUser, getUser } from "@/state/handle-state";
+import { NavigationLinks } from "@/layout/NavigationLinks";
+
+export const Navigator = () => {
+  const user = getUser().user;
+
+  const content = `
+    <nav class="bg-white shadow-md p-2 sticky top-14">
+      <ul class="flex justify-around">
+        ${navigatorList({ isLoggedIn: user })
+          .map((navigator) => NavigationLinks(navigator))
+          .join("")}
+      </ul>
+    </nav>
+  `;
+
+  return content;
+};
+
+const navigatorList = ({ isLoggedIn }) => [
+  {
+    id: "home",
+    href: "/",
+    text: "홈",
+  },
+  ...(isLoggedIn
+    ? [
+        {
+          id: "profile",
+          href: "/profile",
+          text: "프로필",
+        },
+        {
+          id: "logout",
+          href: "/login",
+          text: "로그아웃",
+        },
+      ]
+    : [
+        {
+          id: "register",
+          href: "/login",
+          text: "로그인",
+        },
+      ]),
+];
+
+document.addEventListener("click", (e) => {
+  if (e.target.id === "logout") {
+    e.preventDefault();
+    clearUser();
+    alert("로그아웃 되었습니다.");
+  }
+});

src/layout/PlainLayout.js

@@ -0,0 +1,7 @@
+export const PlainLayout = (content) => {
+  return `
+    <main id="root" class="bg-gray-100 flex items-center justify-center min-h-screen">
+      ${content} 
+    </main>
+  `;
+};

src/layout/index.js

@@ -1,3 +1,5 @@
 export { DefaultLayout } from "@/layout/DefaultLayout";
+export { PlainLayout } from "@/layout/PlainLayout";
 export { Header } from "@/layout/Header";
+export { Navigator } from "@/layout/Navigator";
 export { Footer } from "@/layout/Footer";

src/pages/LoginPage.js

@@ -1,3 +1,4 @@
+import { PlainLayout } from "@/layout";
 import { setUser, getUser } from "@/state/handle-state";
 import { router } from "@/router";
 
@@ -8,11 +9,11 @@ export const renderLoginPage = () => {
   }
 
   document.body.innerHTML = LoginPage();
+  document.addEventListener("submit", handleSubmitLogin);
 };
 
 const LoginPage = () => {
   const content = `
-    <main class="bg-gray-100 flex items-center justify-center min-h-screen" id="root">
       <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
         <h1 class="text-2xl font-bold text-center text-blue-600 mb-8">항해플러스</h1>
         <form id="login-form">
@@ -32,12 +33,9 @@ const LoginPage = () => {
           <button class="bg-green-500 text-white px-4 py-2 rounded font-bold">새 계정 만들기</button>
         </div>
       </div>
-    </main>
   `;
 
-  document.addEventListener("submit", handleSubmitLogin);
-
-  return content;
+  return PlainLayout(content);
 };
 
 const handleSubmitLogin = (e) => {

src/pages/NotFoundPage.js

@@ -1,9 +1,11 @@
+import { PlainLayout } from "../layout/PlainLayout";
+
 export const renderNotFoundPage = () => {
   document.body.innerHTML = NotFoundPage();
 };
 
-const NotFoundPage = () => `
-  <main class="bg-gray-100 flex items-center justify-center min-h-screen" id="root">
+const NotFoundPage = () => {
+  const content = `
     <div class="bg-white p-8 rounded-lg shadow-md w-full text-center" style="max-width: 480px">
       <h1 class="text-2xl font-bold text-blue-600 mb-4">항해플러스</h1>
       <p class="text-4xl font-bold text-gray-800 mb-4">404</p>
@@ -15,5 +17,6 @@ const NotFoundPage = () => `
         홈으로 돌아가기
       </a>
     </div>
-  </main>
 `;
+  return PlainLayout(content);
+};

src/pages/ProfilePage.js

@@ -9,6 +9,7 @@ export const renderProfilePage = () => {
   }
 
   document.body.innerHTML = ProfilePage();
+  document.addEventListener("submit", handleProfileUpdate);
 };
 
 const ProfilePage = () => {
@@ -73,8 +74,6 @@ const ProfilePage = () => {
     </main>
 `;
 
-  document.addEventListener("submit", handleProfileUpdate);
-
   return DefaultLayout(content);
 };
 

src/router/createRouter.js

@@ -1,5 +1,3 @@
-import { clearUser } from "@/state/handle-state";
-
 class CreateRouter {
   constructor(routes = {}, { mode = "history" }) {
     this.routes = routes;
@@ -19,10 +17,6 @@ class CreateRouter {
 
   addEventListeners() {
     document.addEventListener("click", (e) => {
-      if (e.target.id === "logout") {
-        e.preventDefault();
-        clearUser();
-      }
       if (e.target.tagName === "A") {
         e.preventDefault();
         const path = e.target.getAttribute("href");