[5팀 이형래] Chapter 1-1. 프레임워크 없이 SPA 만들기

src/auth/auth.js

@@ -0,0 +1,23 @@
+import { USER_KEY } from "../common/const";
+
+export class Auth {
+  static get isLoggedIn() {
+    return localStorage.getItem(USER_KEY) ? true : false;
+  }
+
+  static login(user) {
+    this.setUser(user);
+  }
+
+  static setUser(user) {
+    localStorage.setItem(USER_KEY, JSON.stringify(user));
+  }
+
+  static logout() {
+    this.isLoggedIn && localStorage.removeItem(USER_KEY);
+  }
+
+  static get user() {
+    return JSON.parse(localStorage.getItem(USER_KEY));
+  }
+}

src/common/const.js

@@ -0,0 +1,18 @@
+export const USER_KEY = "user";
+
+export const PAGES = {
+  MAIN_PAGE: "/",
+  LOGIN_PAGE: "/login",
+  PROFILE_PAGE: "/profile",
+  ERROR_PAGE: "#",
+};
+
+export const ID = {
+  LOGIN_FORM: "login-form",
+  LOGOUT: "logout",
+  LOGIN_USER_NAME: "username",
+  LOGIN_PASSWORD: "password",
+  PROFILE_FORM: "profile-form",
+  EMAIL: "email",
+  BIO: "bio",
+};

src/components/footer.js

@@ -0,0 +1,7 @@
+const Footer = () => `
+  <footer class="bg-gray-200 p-4 text-center">
+    <p>&copy; 2024 항해플러스. All rights reserved.</p>
+  </footer>
+`;
+
+export default Footer;

src/components/header.js

@@ -0,0 +1,11 @@
+import { NavBar } from "./nav-bar";
+
+const Header = () => `
+  <header class="bg-blue-600 text-white p-4 sticky top-0">
+    <h1 class="text-2xl font-bold">항해플러스</h1>
+  </header>
+
+  ${NavBar()}
+`;
+
+export default Header;

src/components/nav-bar.js

@@ -0,0 +1,24 @@
+import { Auth } from "../auth/auth";
+import { PAGES, ID } from "../common/const";
+
+export const NavBar = () => {
+  const isLoggedIn = Auth.isLoggedIn;
+
+  return `
+    <nav class="bg-white shadow-md p-2 sticky top-14">
+      <ul class="flex justify-around">
+        <li><a href=${PAGES.MAIN_PAGE} class="text-blue-600">홈</a></li>
+        ${
+          isLoggedIn
+            ? `
+          <li><a href=${PAGES.PROFILE_PAGE} class="text-gray-600">프로필</a></li>
+          <li><a href=${PAGES.LOGIN_PAGE} id=${ID.LOGOUT} class="text-gray-600">로그아웃</a></li>
+          `
+            : `
+          <li><a href=${PAGES.LOGIN_PAGE} class="text-gray-600">로그인</a></li>
+          `
+        }
+      </ul>
+    </nav>
+  `;
+};

src/core/render/render.js

@@ -0,0 +1,7 @@
+import ROUTES from "../router/routes";
+
+export default function render(pathname) {
+  document.getElementById("root").innerHTML = `
+    ${ROUTES[pathname]()}
+  `;
+}

src/core/router/router.js

@@ -0,0 +1,64 @@
+import { Auth } from "../../auth/auth";
+import { PAGES, ID } from "../../common/const";
+import render from "../render/render";
+import ROUTES from "../router/routes";
+
+const updateRoute = (pathname) => {
+  let route = ROUTES[pathname] ? pathname : "#";
+  route =
+    route === PAGES.PROFILE_PAGE && !Auth.isLoggedIn ? PAGES.LOGIN_PAGE : route;
+  return route;
+};
+
+const handleAfterRender = (route) => {
+  switch (route) {
+    case PAGES.LOGIN_PAGE:
+      document.getElementById(ID.LOGIN_FORM).addEventListener("submit", (e) => {
+        e.preventDefault();
+        const username = document.getElementById(ID.LOGIN_USER_NAME).value;
+        Auth.login({
+          username,
+          email: "",
+          bio: "",
+        });
+        router.push(PAGES.MAIN_PAGE);
+      });
+      break;
+    case PAGES.MAIN_PAGE:
+      if (Auth.isLoggedIn) {
+        document.getElementById(ID.LOGOUT).addEventListener("click", () => {
+          Auth.logout();
+        });
+      }
+      break;
+    case PAGES.PROFILE_PAGE:
+      document.getElementById(ID.LOGOUT).addEventListener("click", () => {
+        Auth.logout();
+      });
+      document
+        .getElementById(ID.PROFILE_FORM)
+        .addEventListener("submit", (e) => {
+          e.preventDefault();
+          const username = document.getElementById(ID.LOGIN_USER_NAME).value;
+          const email = document.getElementById(ID.EMAIL).value;
+          const bio = document.getElementById(ID.BIO).value;
+          Auth.setUser({ username, email, bio });
+        });
+      break;
+  }
+};
+
+export const router = {
+  push: (pathname) => {
+    const route = updateRoute(pathname);
+    history.pushState({}, "", route);
+    render(route);
+    handleAfterRender(route);
+  },
+  replace: (pathname) => {
+    const route = updateRoute(pathname);
+    history.replaceState({}, "", route);
+    render(route);
+    handleAfterRender(route);
+  },
+};

src/core/router/routes.js

@@ -0,0 +1,14 @@
+import { PAGES } from "../../common/const";
+import { MainPage } from "../../pages/main-page";
+import { LoginPage } from "../../pages/login-page";
+import { ProfilePage } from "../../pages/profile-page";
+import { ErrorPage } from "../../pages/error-page";
+
+const ROUTES = {
+  [PAGES.MAIN_PAGE]: MainPage,
+  [PAGES.LOGIN_PAGE]: LoginPage,
+  [PAGES.PROFILE_PAGE]: ProfilePage,
+  [PAGES.ERROR_PAGE]: ErrorPage,
+};
+
+export default ROUTES;