From ab71b6af69b6f375e9ef0a1c20290e0459fee1ea Mon Sep 17 00:00:00 2001 From: BoYoung00 Date: Wed, 18 Dec 2024 20:58:50 +0900 Subject: [PATCH] =?UTF-8?q?12/18=20=EB=9D=BC=EC=9A=B0=ED=84=B0=20=EB=B6=84?= =?UTF-8?q?=EB=A5=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header.js | 6 +-- src/main.hash.js | 18 ++++++++- src/main.js | 82 ++-------------------------------------- src/pages/loginPage.js | 46 +++++++++++----------- src/router.js | 77 +++++++++++++++++++++++++++++++++++++ 5 files changed, 124 insertions(+), 105 deletions(-) create mode 100644 src/router.js diff --git a/src/components/Header.js b/src/components/Header.js index 3b737e76..0fec5552 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -16,13 +16,13 @@ function renderLoginStatus() { if (user.username) { return ` -
  • 홈
    • -
  • 프로필
    • +
  • 홈
    • +
  • 프로필
  • 로그아웃
    • `; } else { return ` -
  • 홈
    • +
  • 홈
  • 로그인
    • `; } diff --git a/src/main.hash.js b/src/main.hash.js index 3ef381e0..ff3dad1c 100644 --- a/src/main.hash.js +++ b/src/main.hash.js @@ -1 +1,17 @@ -import "./main.js"; +import { resolveRoute } from "./router.js"; + +document.addEventListener("click", (e) => { + if (e.target && e.target.id === "logout") { + e.preventDefault(); + localStorage.clear(); + } +}); + +// 이벤트 초기화 +const initializeRouter = () => { + window.addEventListener("hashchange", () => resolveRoute(true)); + window.addEventListener("load", () => resolveRoute(true)); +}; + +// 라우터 초기화 호출 +initializeRouter(); diff --git a/src/main.js b/src/main.js index b6546cc2..7c018753 100644 --- a/src/main.js +++ b/src/main.js @@ -1,9 +1,5 @@ -import { MainPage } from "./pages/mainPage.js"; -import { attachLoginHandler, LoginPage } from "./pages/loginPage.js"; -import { ProfilePage } from "./pages/profilePage.js"; -import { ErrorPage } from "./pages/errorPage.js"; +import { resolveRoute } from "./router.js"; -// 로그아웃 document.addEventListener("click", (e) => { if (e.target && e.target.id === "logout") { e.preventDefault(); @@ -11,82 +7,10 @@ document.addEventListener("click", (e) => { } }); -// 링크 이벤트 처리 -const routeHandlers = () => { - document.querySelectorAll("a").forEach((link) => { - link.addEventListener("click", (e) => { - e.preventDefault(); - const href = link.getAttribute("href"); - navigateTo(href); - }); - }); -}; - -// 라우터 설정 -const Routes = { - "/": () => MainPage(), - "/login": () => LoginPage(), - "/profile": () => ProfilePage(), -}; - -// 초기 URL 모드 확인 -const isHashMode = window.location.href.includes("index.hash.html"); - -// 현재 경로 계산 -const getCurrentPath = () => { - if (isHashMode) { - const hash = window.location.hash.slice(1); // # 제거 - return hash || "/"; // 빈 해시인 경우 홈 경로로 설정 - } else { - return window.location.pathname; - } -}; - -// 공통 라우팅 처리 -const resolveRoute = () => { - const path = getCurrentPath(); - const user = JSON.parse(localStorage.getItem("user") || "{}"); - const root = document.getElementById("root"); - - // 인증된 사용자 경로 처리 - if (path === "/profile" && !user.username) { - navigateTo("/login"); - return; - } - - const route = Routes[path]; - if (route) { - root.innerHTML = route(); - } else { - root.innerHTML = ErrorPage(); - } - - // 로그인 이벤트 핸들러 추가 - if (path === "/login") { - attachLoginHandler(); - } - // 링크 이벤트 처리 - routeHandlers(); -}; - -// 페이지 이동 함수 -export const navigateTo = (path) => { - if (isHashMode) { - window.location.hash = `#${path}`; - } else { - window.history.pushState(null, null, path); - } - resolveRoute(); -}; - // 이벤트 초기화 const initializeRouter = () => { - if (isHashMode) { - window.addEventListener("hashchange", resolveRoute); - } else { - window.addEventListener("popstate", resolveRoute); - } - window.addEventListener("load", resolveRoute); + window.addEventListener("popstate", () => resolveRoute(false)); + window.addEventListener("load", () => resolveRoute(false)); }; // 라우터 초기화 호출 diff --git a/src/pages/loginPage.js b/src/pages/loginPage.js index 89a44a1b..e9756513 100644 --- a/src/pages/loginPage.js +++ b/src/pages/loginPage.js @@ -1,30 +1,32 @@ -import { navigateTo } from "../main.js"; +import { navigateTo } from "../router.js"; -export const LoginPage = () => ` -
    -
    -

    항해플러스

    -
    -
    - +export const LoginPage = () => { + return ` +
    +
    +

    항해플러스

    + +
    + +
    +
    + +
    + + +
    + 비밀번호를 잊으셨나요?
    -
    - +
    +
    +
    - - -
    - 비밀번호를 잊으셨나요?
    -
    -
    - -
    -
    -
    -`; +
    + `; +}; -export const attachLoginHandler = () => { +export const loginHandles = () => { const form = document.getElementById("login-form"); const emailInput = document.getElementById("username"); const passwordInput = document.getElementById("passwordInput"); diff --git a/src/router.js b/src/router.js new file mode 100644 index 00000000..5355329c --- /dev/null +++ b/src/router.js @@ -0,0 +1,77 @@ +import { MainPage } from "./pages/mainPage.js"; +import { loginHandles, LoginPage } from "./pages/loginPage.js"; +import { ProfilePage } from "./pages/profilePage.js"; +import { ErrorPage } from "./pages/errorPage.js"; + +// 초기 URL 모드 +let isHashMode = false; + +// 링크 이벤트 처리 +const routeHandlers = () => { + document.querySelectorAll("a").forEach((link) => { + link.addEventListener("click", (e) => { + e.preventDefault(); + const href = link.getAttribute("href"); + navigateTo(href); + }); + }); +}; + +const Routes = { + "/": () => MainPage(), + "/login": () => LoginPage(), + "/profile": () => ProfilePage(), +}; + +// 현재 경로 계산 +const getCurrentPath = () => { + if (isHashMode) { + const hash = window.location.hash.slice(1); // # 제거 + return hash || "/"; + } else { + return window.location.pathname; + } +}; + +// 공통 라우팅 처리 +export const resolveRoute = (isHash = false) => { + isHashMode = isHash; + const path = getCurrentPath(); + const user = JSON.parse(localStorage.getItem("user") || null); + const root = document.getElementById("root"); + console.log("user", user); + + // 인증 경로 가드 + if (path === "/profile" && user == null) { + navigateTo("/login"); + return; + } + if (path === "/login" && user != null) { + navigateTo("/"); + return; + } + + const route = Routes[path]; + + if (route) { + root.innerHTML = route(); + } else { + root.innerHTML = ErrorPage(); + } + + // 로그인 이벤트 핸들러 추가 + if (path === "/login") { + loginHandles(); + } + routeHandlers(); +}; + +// 페이지 이동 함수 +export const navigateTo = (path) => { + if (isHashMode) { + window.location.hash = `#${path}`; + } else { + window.history.pushState(null, null, path); + } + resolveRoute(); +};