From ac8ac21e7e20a0b6c202e12d73bbeef475a7e40d Mon Sep 17 00:00:00 2001 From: hyungraelee Date: Thu, 19 Dec 2024 00:02:45 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC,=20=ED=8F=B4=EB=8D=94=EA=B5=AC=EC=A1=B0=20?= =?UTF-8?q?=EC=A0=95=EB=A6=AC,=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/render/render.js | 7 ++ src/core/router/router.js | 15 +++ src/core/router/routes.js | 20 +++ src/main.js | 259 +++----------------------------------- src/pages/error-page.js | 15 +++ src/pages/login-page.js | 23 ++++ src/pages/main-page.js | 111 ++++++++++++++++ src/pages/profile-page.js | 82 ++++++++++++ 8 files changed, 291 insertions(+), 241 deletions(-) create mode 100644 src/core/render/render.js create mode 100644 src/core/router/router.js create mode 100644 src/core/router/routes.js create mode 100644 src/pages/error-page.js create mode 100644 src/pages/login-page.js create mode 100644 src/pages/main-page.js create mode 100644 src/pages/profile-page.js diff --git a/src/core/render/render.js b/src/core/render/render.js new file mode 100644 index 00000000..4173f07a --- /dev/null +++ b/src/core/render/render.js @@ -0,0 +1,7 @@ +import ROUTES from "../router/routes"; + +export default function render(pathname) { + document.body.innerHTML = ` + ${ROUTES[pathname]()} + `; +} diff --git a/src/core/router/router.js b/src/core/router/router.js new file mode 100644 index 00000000..e4d930c0 --- /dev/null +++ b/src/core/router/router.js @@ -0,0 +1,15 @@ +import render from "../render/render"; +import ROUTES from "../router/routes"; + +export const router = { + push: (pathname) => { + const route = ROUTES[pathname] ? pathname : "#"; + history.pushState({}, "", route); + render(route); + }, + replace: (pathname) => { + const route = ROUTES[pathname] ? pathname : "#"; + history.replaceState({}, "", route); + render(route); + }, +}; diff --git a/src/core/router/routes.js b/src/core/router/routes.js new file mode 100644 index 00000000..09e131d6 --- /dev/null +++ b/src/core/router/routes.js @@ -0,0 +1,20 @@ +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 PAGES = { + MAIN_PAGE: "/", + LOGIN_PAGE: "/login", + PROFILE_PAGE: "/profile", + ERROR_PAGE: "#", +}; + +const ROUTES = { + [PAGES.MAIN_PAGE]: MainPage, + [PAGES.LOGIN_PAGE]: LoginPage, + [PAGES.PROFILE_PAGE]: ProfilePage, + [PAGES.ERROR_PAGE]: ErrorPage, +}; + +export default ROUTES; diff --git a/src/main.js b/src/main.js index 036c2a38..ed8e7192 100644 --- a/src/main.js +++ b/src/main.js @@ -1,241 +1,18 @@ -const MainPage = () => ` -
-
-
-

항해플러스

-
- - - -
-
- - -
- -
- -
-
- 프로필 -
-

홍길동

-

5분 전

-
-
-

오늘 날씨가 정말 좋네요. 다들 좋은 하루 보내세요!

-
- - - -
-
- -
-
- 프로필 -
-

김철수

-

15분 전

-
-
-

새로운 프로젝트를 시작했어요. 열심히 코딩 중입니다!

-
- - - -
-
- -
-
- 프로필 -
-

이영희

-

30분 전

-
-
-

오늘 점심 메뉴 추천 받습니다. 뭐가 좋을까요?

-
- - - -
-
- -
-
- 프로필 -
-

박민수

-

1시간 전

-
-
-

주말에 등산 가실 분 계신가요? 함께 가요!

-
- - - -
-
- -
-
- 프로필 -
-

정수연

-

2시간 전

-
-
-

새로 나온 영화 재미있대요. 같이 보러 갈 사람?

-
- - - -
-
-
-
- -
-

© 2024 항해플러스. All rights reserved.

-
-
-
-`; - -const ErrorPage = () => ` -
-
-

항해플러스

-

404

-

페이지를 찾을 수 없습니다

-

- 요청하신 페이지가 존재하지 않거나 이동되었을 수 있습니다. -

- - 홈으로 돌아가기 - -
-
-`; - -const LoginPage = () => ` -
-
-

항해플러스

-
-
- -
-
- -
- -
-
- 비밀번호를 잊으셨나요? -
-
-
- -
-
-
-`; - -const ProfilePage = () => ` -
-
-
-
-

항해플러스

-
- - - -
-
-

- 내 프로필 -

-
-
- - -
-
- - -
-
- - -
- -
-
-
- -
-

© 2024 항해플러스. All rights reserved.

-
-
-
-
-`; - -document.body.innerHTML = ` - ${MainPage()} - ${ProfilePage()} - ${LoginPage()} - ${ErrorPage()} -`; +import { router } from "./core/router/router"; + +document.addEventListener("DOMContentLoaded", () => { + router.push(location.pathname); + document.body.addEventListener("click", (e) => { + if (e.target.tagName === "A" && e.target.getAttribute("href")) { + e.preventDefault(); + const href = e.target.getAttribute("href"); + router.push(href); + } + }); +}); + +window.addEventListener("popstate", () => { + const pathname = location.pathname; + console.log(pathname); + router.replace(pathname); +}); diff --git a/src/pages/error-page.js b/src/pages/error-page.js new file mode 100644 index 00000000..a4dedeb3 --- /dev/null +++ b/src/pages/error-page.js @@ -0,0 +1,15 @@ +export const ErrorPage = () => ` +
+
+

항해플러스

+

404

+

페이지를 찾을 수 없습니다

+

+ 요청하신 페이지가 존재하지 않거나 이동되었을 수 있습니다. +

+ + 홈으로 돌아가기 + +
+
+`; diff --git a/src/pages/login-page.js b/src/pages/login-page.js new file mode 100644 index 00000000..84fcf51d --- /dev/null +++ b/src/pages/login-page.js @@ -0,0 +1,23 @@ +export const LoginPage = () => ` +
+
+

항해플러스

+
+
+ +
+
+ +
+ +
+
+ 비밀번호를 잊으셨나요? +
+
+
+ +
+
+
+`; diff --git a/src/pages/main-page.js b/src/pages/main-page.js new file mode 100644 index 00000000..cb2306a8 --- /dev/null +++ b/src/pages/main-page.js @@ -0,0 +1,111 @@ +export const MainPage = () => ` +
+
+
+

항해플러스

+
+ + + +
+
+ + +
+ +
+ +
+
+ 프로필 +
+

홍길동

+

5분 전

+
+
+

오늘 날씨가 정말 좋네요. 다들 좋은 하루 보내세요!

+
+ + + +
+
+ +
+
+ 프로필 +
+

김철수

+

15분 전

+
+
+

새로운 프로젝트를 시작했어요. 열심히 코딩 중입니다!

+
+ + + +
+
+ +
+
+ 프로필 +
+

이영희

+

30분 전

+
+
+

오늘 점심 메뉴 추천 받습니다. 뭐가 좋을까요?

+
+ + + +
+
+ +
+
+ 프로필 +
+

박민수

+

1시간 전

+
+
+

주말에 등산 가실 분 계신가요? 함께 가요!

+
+ + + +
+
+ +
+
+ 프로필 +
+

정수연

+

2시간 전

+
+
+

새로 나온 영화 재미있대요. 같이 보러 갈 사람?

+
+ + + +
+
+
+
+ +
+

© 2024 항해플러스. All rights reserved.

+
+
+
+`; diff --git a/src/pages/profile-page.js b/src/pages/profile-page.js new file mode 100644 index 00000000..30e689af --- /dev/null +++ b/src/pages/profile-page.js @@ -0,0 +1,82 @@ +export const ProfilePage = () => ` +
+
+
+
+

항해플러스

+
+ + + +
+
+

+ 내 프로필 +

+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+ +
+

© 2024 항해플러스. All rights reserved.

+
+
+
+
+`; From 5c5e879a5d8092c9fc71e02daacd21f1d3530525 Mon Sep 17 00:00:00 2001 From: hyungraelee Date: Thu, 19 Dec 2024 01:04:19 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=97=AC=EB=B6=80=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=9D=BC?= =?UTF-8?q?=EC=9A=B0=ED=8A=B8=20=EB=A6=AC=EB=8B=A4=EC=9D=B4=EB=A0=89?= =?UTF-8?q?=EC=85=98=20=EA=B8=B0=EB=8A=A5=20/=20NavBar=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/auth/auth.js | 7 +++++++ src/common/const.js | 8 ++++++++ src/components/nav-bar.js | 24 ++++++++++++++++++++++++ src/core/router/router.js | 14 ++++++++++++-- src/core/router/routes.js | 8 +------- src/main.js | 1 - src/pages/main-page.js | 10 +++------- src/pages/profile-page.js | 10 +++------- 8 files changed, 58 insertions(+), 24 deletions(-) create mode 100644 src/auth/auth.js create mode 100644 src/common/const.js create mode 100644 src/components/nav-bar.js diff --git a/src/auth/auth.js b/src/auth/auth.js new file mode 100644 index 00000000..b855a564 --- /dev/null +++ b/src/auth/auth.js @@ -0,0 +1,7 @@ +import { USER_KEY } from "../common/const"; + +export class Auth { + static get isLoggedIn() { + return localStorage.getItem(USER_KEY) ? true : false; + } +} diff --git a/src/common/const.js b/src/common/const.js new file mode 100644 index 00000000..424749c8 --- /dev/null +++ b/src/common/const.js @@ -0,0 +1,8 @@ +export const USER_KEY = "user"; + +export const PAGES = { + MAIN_PAGE: "/", + LOGIN_PAGE: "/login", + PROFILE_PAGE: "/profile", + ERROR_PAGE: "#", +}; diff --git a/src/components/nav-bar.js b/src/components/nav-bar.js new file mode 100644 index 00000000..3a7ea718 --- /dev/null +++ b/src/components/nav-bar.js @@ -0,0 +1,24 @@ +import { Auth } from "../auth/auth"; +import { PAGES } from "../common/const"; + +export const NavBar = () => { + const isLoggedIn = Auth.isLoggedIn; + + return ` + + `; +}; diff --git a/src/core/router/router.js b/src/core/router/router.js index e4d930c0..19f5264b 100644 --- a/src/core/router/router.js +++ b/src/core/router/router.js @@ -1,14 +1,24 @@ +import { Auth } from "../../auth/auth"; +import { PAGES } from "../../common/const"; import render from "../render/render"; import ROUTES from "../router/routes"; export const router = { push: (pathname) => { - const route = ROUTES[pathname] ? pathname : "#"; + let route = ROUTES[pathname] ? pathname : "#"; + route = + route === PAGES.PROFILE_PAGE && !Auth.isLoggedIn + ? PAGES.LOGIN_PAGE + : route; history.pushState({}, "", route); render(route); }, replace: (pathname) => { - const route = ROUTES[pathname] ? pathname : "#"; + let route = ROUTES[pathname] ? pathname : "#"; + route = + route === PAGES.PROFILE_PAGE && !Auth.isLoggedIn + ? PAGES.LOGIN_PAGE + : route; history.replaceState({}, "", route); render(route); }, diff --git a/src/core/router/routes.js b/src/core/router/routes.js index 09e131d6..4c2c60dd 100644 --- a/src/core/router/routes.js +++ b/src/core/router/routes.js @@ -1,15 +1,9 @@ +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 PAGES = { - MAIN_PAGE: "/", - LOGIN_PAGE: "/login", - PROFILE_PAGE: "/profile", - ERROR_PAGE: "#", -}; - const ROUTES = { [PAGES.MAIN_PAGE]: MainPage, [PAGES.LOGIN_PAGE]: LoginPage, diff --git a/src/main.js b/src/main.js index ed8e7192..173f96b5 100644 --- a/src/main.js +++ b/src/main.js @@ -13,6 +13,5 @@ document.addEventListener("DOMContentLoaded", () => { window.addEventListener("popstate", () => { const pathname = location.pathname; - console.log(pathname); router.replace(pathname); }); diff --git a/src/pages/main-page.js b/src/pages/main-page.js index cb2306a8..7b222837 100644 --- a/src/pages/main-page.js +++ b/src/pages/main-page.js @@ -1,3 +1,5 @@ +import { NavBar } from "../components/nav-bar"; + export const MainPage = () => `
@@ -5,13 +7,7 @@ export const MainPage = () => `

항해플러스

- + ${NavBar()}
diff --git a/src/pages/profile-page.js b/src/pages/profile-page.js index 30e689af..8105b421 100644 --- a/src/pages/profile-page.js +++ b/src/pages/profile-page.js @@ -1,3 +1,5 @@ +import { NavBar } from "../components/nav-bar"; + export const ProfilePage = () => `
@@ -6,13 +8,7 @@ export const ProfilePage = () => `

항해플러스

- + ${NavBar()}
From b90fb137e72fcd25f82e58efd00c64364de56ffc Mon Sep 17 00:00:00 2001 From: hyungraelee Date: Thu, 19 Dec 2024 02:41:23 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20/=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/auth/auth.js | 8 ++++++ src/common/const.js | 7 ++++++ src/components/nav-bar.js | 4 +-- src/core/router/router.js | 52 ++++++++++++++++++++++++++++++--------- src/pages/login-page.js | 8 +++--- 5 files changed, 63 insertions(+), 16 deletions(-) diff --git a/src/auth/auth.js b/src/auth/auth.js index b855a564..79d42f0e 100644 --- a/src/auth/auth.js +++ b/src/auth/auth.js @@ -4,4 +4,12 @@ export class Auth { static get isLoggedIn() { return localStorage.getItem(USER_KEY) ? true : false; } + + static login(user) { + localStorage.setItem(USER_KEY, JSON.stringify(user)); + } + + static logout() { + this.isLoggedIn && localStorage.removeItem(USER_KEY); + } } diff --git a/src/common/const.js b/src/common/const.js index 424749c8..c83a8042 100644 --- a/src/common/const.js +++ b/src/common/const.js @@ -6,3 +6,10 @@ export const PAGES = { PROFILE_PAGE: "/profile", ERROR_PAGE: "#", }; + +export const ID = { + LOGIN_FORM: "login-form", + LOGOUT: "logout", + LOGIN_USER_NAME: "username", + LOGIN_PASSWORD: "password", +}; diff --git a/src/components/nav-bar.js b/src/components/nav-bar.js index 3a7ea718..8a552925 100644 --- a/src/components/nav-bar.js +++ b/src/components/nav-bar.js @@ -1,5 +1,5 @@ import { Auth } from "../auth/auth"; -import { PAGES } from "../common/const"; +import { PAGES, ID } from "../common/const"; export const NavBar = () => { const isLoggedIn = Auth.isLoggedIn; @@ -12,7 +12,7 @@ export const NavBar = () => { isLoggedIn ? `
  • 프로필
    • -
  • 로그아웃
    • +
  • 로그아웃
    • ` : `
  • 로그인
    • diff --git a/src/core/router/router.js b/src/core/router/router.js index 19f5264b..f3970eae 100644 --- a/src/core/router/router.js +++ b/src/core/router/router.js @@ -1,25 +1,55 @@ import { Auth } from "../../auth/auth"; -import { PAGES } from "../../common/const"; +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(); + }); + break; + } +}; + export const router = { push: (pathname) => { - let route = ROUTES[pathname] ? pathname : "#"; - route = - route === PAGES.PROFILE_PAGE && !Auth.isLoggedIn - ? PAGES.LOGIN_PAGE - : route; + const route = updateRoute(pathname); history.pushState({}, "", route); render(route); + handleAfterRender(route); }, replace: (pathname) => { - let route = ROUTES[pathname] ? pathname : "#"; - route = - route === PAGES.PROFILE_PAGE && !Auth.isLoggedIn - ? PAGES.LOGIN_PAGE - : route; + const route = updateRoute(pathname); history.replaceState({}, "", route); render(route); + handleAfterRender(route); }, }; diff --git a/src/pages/login-page.js b/src/pages/login-page.js index 84fcf51d..de5f3ae4 100644 --- a/src/pages/login-page.js +++ b/src/pages/login-page.js @@ -1,13 +1,15 @@ +import { ID } from "../common/const"; + export const LoginPage = () => `

    항해플러스

    -
    +
    - +
    - +
    From 88ff1730250f7b16c3d0998b8d93cb7119a5945d Mon Sep 17 00:00:00 2001 From: hyungraelee Date: Thu, 19 Dec 2024 03:09:24 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=EC=9D=BD=EA=B8=B0,=20=EB=B3=80=EA=B2=BD=20=EA=B8=B0=EB=8A=A5?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/auth/auth.js | 8 ++++++++ src/common/const.js | 3 +++ src/core/render/render.js | 2 +- src/core/router/router.js | 9 +++++++++ src/pages/profile-page.js | 11 ++++++----- 5 files changed, 27 insertions(+), 6 deletions(-) diff --git a/src/auth/auth.js b/src/auth/auth.js index 79d42f0e..a880de75 100644 --- a/src/auth/auth.js +++ b/src/auth/auth.js @@ -6,10 +6,18 @@ export class Auth { } 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)); + } } diff --git a/src/common/const.js b/src/common/const.js index c83a8042..a2371b4a 100644 --- a/src/common/const.js +++ b/src/common/const.js @@ -12,4 +12,7 @@ export const ID = { LOGOUT: "logout", LOGIN_USER_NAME: "username", LOGIN_PASSWORD: "password", + PROFILE_FORM: "profile-form", + EMAIL: "email", + BIO: "bio", }; diff --git a/src/core/render/render.js b/src/core/render/render.js index 4173f07a..8ad68ce3 100644 --- a/src/core/render/render.js +++ b/src/core/render/render.js @@ -1,7 +1,7 @@ import ROUTES from "../router/routes"; export default function render(pathname) { - document.body.innerHTML = ` + document.getElementById("root").innerHTML = ` ${ROUTES[pathname]()} `; } diff --git a/src/core/router/router.js b/src/core/router/router.js index f3970eae..f618274b 100644 --- a/src/core/router/router.js +++ b/src/core/router/router.js @@ -35,6 +35,15 @@ const handleAfterRender = (route) => { 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; } }; diff --git a/src/pages/profile-page.js b/src/pages/profile-page.js index 8105b421..c2105cb4 100644 --- a/src/pages/profile-page.js +++ b/src/pages/profile-page.js @@ -1,3 +1,5 @@ +import { Auth } from "../auth/auth"; +import { ID } from "../common/const"; import { NavBar } from "../components/nav-bar"; export const ProfilePage = () => ` @@ -15,7 +17,7 @@ export const ProfilePage = () => `

    내 프로필

    -
    +
    @@ -40,7 +42,7 @@ export const ProfilePage = () => ` type="email" id="email" name="email" - value="hong@example.com" + value="${Auth.user.email}" class="w-full p-2 border rounded" />
    @@ -55,8 +57,7 @@ export const ProfilePage = () => ` name="bio" rows="4" class="w-full p-2 border rounded" - > -안녕하세요, 항해플러스에서 열심히 공부하고 있는 홍길동입니다.${Auth.user.bio}