WIP : feat advanced test

hanghae-plus · Dec 17, 2024 · 79e05fd · 79e05fd
1 parent d3be0ff
commit 79e05fd
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 58 deletions.
diff --git a/src/__tests__/basic.test.js b/src/__tests__/basic.test.js
@@ -10,8 +10,6 @@ import {
   vi,
 } from "vitest";
 
-import { LOGIN_FORM_ID, USER_NAME_INPUT_ID } from "../pages/LoginPage.js";
-
 beforeAll(async () => {
   // DOM 초기화
   window.alert = vi.fn();
@@ -77,15 +75,9 @@ describe("기본과제 테스트", () => {
     it("로그인 폼에서 사용자 이름을 입력하고 제출하면 로그인 되고, 로그아웃 버튼 클릭시 로그아웃 된다.", async () => {
       goTo("/login");
 
-      const loginForm = document.getElementById(LOGIN_FORM_ID);
-      console.log(loginForm);
-      document.querySelectorAll("input").forEach((input) => {
-        console.log(input);
-      }),
-        await user.type(
-          document.getElementById(USER_NAME_INPUT_ID),
-          "testuser",
-        );
+      const loginForm = document.getElementById("login-form");
+
+      await user.type(document.getElementById("username"), "testuser");
 
       loginForm.dispatchEvent(
         new SubmitEvent("submit", { bubbles: true, cancelable: true }),
@@ -135,7 +127,7 @@ describe("기본과제 테스트", () => {
       profileForm.dispatchEvent(
         new SubmitEvent("submit", { bubbles: true, cancelable: true }),
       );
-      console.log("###", JSON.parse(localStorage.getItem("user"))["email"]);
+
       expect(localStorage.getItem("user")).toEqual(
         `{"username":"testuser","email":"","bio":"Updated bio"}`,
       );

diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -1,14 +1,14 @@
 import { userManager } from "../utils/user";
 
-const ATAG_IN_NAVIGATOR_ATTRIBUTE_VALUE_MAP_LIST = [
+const HREF_TAG_IN_NAVIGATOR_ATTRIBUTE_VALUE_MAP_LIST = [
   {
     href: "/",
     id: "home",
     text: "홈",
   },
 ];
 
-const SIGNIN_USER_ATAG_ATTRIBUTE_VALUE_MAP_LIST = [
+const SIGNIN_USER_HREF_TAG_ATTRIBUTE_VALUE_MAP_LIST = [
   {
     href: "/profile",
     id: "profile",
@@ -21,7 +21,7 @@ const SIGNIN_USER_ATAG_ATTRIBUTE_VALUE_MAP_LIST = [
   },
 ];
 
-const NON_SIGNIN_USER_ATAG_ATTRIBUTE_VALUE_MAP_LIST = [
+const NON_SIGNIN_USER_HREF_TAG_ATTRIBUTE_VALUE_MAP_LIST = [
   {
     href: "/login",
     id: "login",
@@ -39,18 +39,23 @@ export const Navigation = () => {
   const isLogin = userManager.isLogin();
 
   const aTagDataList = [
-    ...ATAG_IN_NAVIGATOR_ATTRIBUTE_VALUE_MAP_LIST,
+    ...HREF_TAG_IN_NAVIGATOR_ATTRIBUTE_VALUE_MAP_LIST,
     ...(isLogin
-      ? SIGNIN_USER_ATAG_ATTRIBUTE_VALUE_MAP_LIST
-      : NON_SIGNIN_USER_ATAG_ATTRIBUTE_VALUE_MAP_LIST),
+      ? SIGNIN_USER_HREF_TAG_ATTRIBUTE_VALUE_MAP_LIST
+      : NON_SIGNIN_USER_HREF_TAG_ATTRIBUTE_VALUE_MAP_LIST),
   ];
 
+  const path = window.location.pathname;
+
+  const currentPageTabStyleClassName = "text-blue-600 font-bold";
+  const defaultPageTabStyleClassName = "text-gray-600";
+
   return `<nav class="bg-white shadow-md p-2 sticky top-14">
     <ul class="flex justify-around">
     ${aTagDataList
       .map(
         (data) => `<li>
-        <a href="${data.href}" id="${data.id}">${data.text}</a>
+        <a class="${path === data.href ? currentPageTabStyleClassName : defaultPageTabStyleClassName}" href="${data.href}" id="${data.id}">${data.text}</a>
         </li>`,
       )
       .join("")} 

diff --git a/src/main.js b/src/main.js
@@ -1,4 +1,6 @@
-import { router } from "./utils/router";
+import { useRouter } from "./utils/router";
+
+const { router } = useRouter();
 
 window.addEventListener("load", () => {
   router();

diff --git a/src/pages/LoginPage.js b/src/pages/LoginPage.js
@@ -8,7 +8,7 @@ export const LoginPage = () => {
       <h1 class="text-2xl font-bold text-center text-blue-600 mb-8">항해플러스</h1>
       <form id="${LOGIN_FORM_ID}">
         <div class="mb-4">
-          <input type="text" id="username" placeholder="이메일 또는 전화번호" class="w-full p-2 border rounded">
+          <input type="text" id="username" placeholder="사용자 이름" class="w-full p-2 border rounded">
         </div>
         <div class="mb-6">
           <input type="password" placeholder="비밀번호" class="w-full p-2 border rounded">

diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
@@ -8,7 +8,7 @@ export const BIO_TEXTAREA = "bio";
 
 export const ProfilePage = () => {
   const { username = "", email = "", bio = "" } = userManager.getData();
-  console.log(email);
+
   return `
   <div class="bg-gray-100 min-h-screen flex justify-center">
     <div class="max-w-md w-full">

diff --git a/src/utils/router.js b/src/utils/router.js
@@ -4,33 +4,80 @@ import { ProfilePage } from "../pages/ProfilePage";
 import { userManager } from "./user";
 import { NotFoundPage } from "../pages/NotFoundPage";
 
-export const PATHNAME_COMPONENT_MAP = Object.freeze({
+const PATHNAME_COMPONENT_MAP = Object.freeze({
   "/": () => renderMainPage(),
   "/profile": () => renderProfilePage(),
   "/login": () => renderLoginPage(),
 });
 
-const handleRouteGuard = (path) => {
+const HASH_PATHNAME_COMPONENT_MAP = Object.freeze({
+  "#/": () => renderMainPage(),
+  "#/profile": () => renderProfilePage(),
+  "#/login": () => renderLoginPage(),
+});
+
+const historyRouteGuard = (path) => {
   const isLogin = userManager.isLogin();
   if (path === "/login" && isLogin) return "/";
   if (path === "/profile" && !isLogin) return "/login";
   return path;
 };
 
-export const router = (path) => {
-  let pathname = path || window.location.pathname;
+const hashRouteGuard = (hash) => {
+  const isLogin = userManager.isLogin();
+  if (hash === "#/login" && isLogin) return "#/";
+  if (hash === "#/profile" && !isLogin) return "#/login";
+  return hash;
+};
+
+export const useRouter = () => {
+  const historyRouter = (path) => {
+    let pathname = path || window.location.pathname;
 
-  const isInvalid = !Object.keys(PATHNAME_COMPONENT_MAP).includes(pathname);
+    const isInvalid = !Object.keys(PATHNAME_COMPONENT_MAP).includes(pathname);
 
-  pathname = handleRouteGuard(pathname);
+    pathname = historyRouteGuard(pathname);
+
+    const page = isInvalid
+      ? renderNotFoundPage
+      : PATHNAME_COMPONENT_MAP[pathname];
 
-  const page = isInvalid
-    ? renderNotFoundPage
-    : PATHNAME_COMPONENT_MAP[pathname];
-  if (window.location.pathname !== pathname) {
     history.pushState(null, "", pathname);
-  }
-  page();
+
+    page();
+  };
+
+  const hashRouter = (hash) => {
+    let refinedHash = hash || window.location.hash;
+
+    if (!refinedHash.includes("#")) {
+      refinedHash = `#${hash}`;
+    }
+
+    const isInvalid = !Object.keys(HASH_PATHNAME_COMPONENT_MAP).includes(
+      refinedHash,
+    );
+
+    refinedHash = hashRouteGuard(refinedHash);
+
+    const page = isInvalid
+      ? renderNotFoundPage
+      : HASH_PATHNAME_COMPONENT_MAP[refinedHash];
+
+    history.pushState(null, "", refinedHash);
+
+    page();
+  };
+
+  return {
+    router(value) {
+      if (window.location.hash) {
+        hashRouter(value);
+      } else {
+        historyRouter(value);
+      }
+    },
+  };
 };
 
 const renderMainPage = () => {
@@ -41,40 +88,51 @@ const renderMainPage = () => {
 const renderProfilePage = () => {
   document.querySelector("#root").innerHTML = ProfilePage();
   document.querySelector("nav").addEventListener("click", handleClick);
-  document.querySelector("#profile-form").addEventListener("submit", (e) => {
-    e.preventDefault();
-    const userDataMap = {
-      username: "",
-      email: "",
-      bio: "",
-    };
-
-    document.querySelectorAll("input, textarea").forEach((element) => {
-      const userDataKey = element.id;
-
-      userDataMap[userDataKey] = element.value;
-
-      userManager.setUserLocalStorage(userDataMap);
-      alert("프로필이 업데이트되었습니다.");
-    });
-  });
+  document
+    .querySelector("#profile-form")
+    .addEventListener("submit", handleProfileFormSubmit);
 };
 
 const renderLoginPage = () => {
   document.querySelector("#root").innerHTML = LoginPage();
-  document.querySelector("#login-form").addEventListener("submit", (e) => {
-    e.preventDefault();
-    const userName = document.body.querySelector(`#username`)?.value;
-
-    userManager.setUserLocalStorage({ username: userName, email: "", bio: "" });
-    router("/profile");
-  });
+  document
+    .querySelector("#login-form")
+    .addEventListener("submit", handleLoginFormSubmit);
 };
 
 const renderNotFoundPage = () => {
   document.querySelector("#root").innerHTML = NotFoundPage();
 };
 
+const handleProfileFormSubmit = (e) => {
+  e.preventDefault();
+  const userDataMap = {
+    username: "",
+    email: "",
+    bio: "",
+  };
+
+  document.querySelectorAll("input, textarea").forEach((element) => {
+    const userDataKey = element.id;
+
+    userDataMap[userDataKey] = element.value;
+
+    userManager.setUserLocalStorage(userDataMap);
+  });
+
+  alert("프로필이 업데이트되었습니다.");
+};
+
+const handleLoginFormSubmit = (e) => {
+  e.preventDefault();
+  const userName = document.body.querySelector(`#username`)?.value;
+
+  userManager.setUserLocalStorage({ username: userName, email: "", bio: "" });
+
+  const { router } = useRouter();
+  router("/profile");
+};
+
 const handleClick = (e) => {
   if (e.target.tagName === "A") {
     const { href } = e.target;
@@ -87,6 +145,8 @@ const handleClick = (e) => {
       path = "/login";
     }
 
+    const { router } = useRouter();
+
     router(path);
   }
 };