From 770fb0e7295e6aa0eabdd1ef4aa50ac43247a029 Mon Sep 17 00:00:00 2001 From: Dayglow0926 Date: Mon, 16 Dec 2024 00:11:37 +0900 Subject: [PATCH 01/23] =?UTF-8?q?feat:=20Router=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/Router.js | 61 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 src/router/Router.js diff --git a/src/router/Router.js b/src/router/Router.js new file mode 100644 index 00000000..2e076739 --- /dev/null +++ b/src/router/Router.js @@ -0,0 +1,61 @@ +import ErrorPage from "../page/ErrorPage"; + +class Router { + constructor() { + this.root = document.querySelector("#root"); + this.routes = {}; + window.addEventListener("popstate", this.handlePopState.bind(this)); + } + + /** + * routes 경로 추가 + */ + addRoute(path, handler) { + this.routes[path] = handler; + } + + /** + * history 상태 추가 + */ + navigateTo(path, state = null) { + history.pushState(state, "", path); + this.handleRoute(path); + } + + /** + * popstate 이벤트 발생시 호출 + * handleRoute를 통해 페이지 랜더링 진행 + */ + handlePopState() { + this.handleRoute(window.location.pathname); + } + + /** + * routes의 path key를 가진 handler 를 실행하는 함수 + * path를 가지고 있으면 handler 를 실행 + * 없으면 ErrorPage 를 호출 + * + * 문제점 : nav가 계속 변경되는 현상에서 addEventListener 오류가 발생 + * HTML 을 새로 랜더링 할때마다 새롭게 이벤트를 등록 + */ + handleRoute(path) { + const handler = this.routes[path]; + + if (handler) { + handler.render(); + } else { + this.root.innerHTML = `${ErrorPage()}`; + } + + if (document.querySelector("nav")) { + document.querySelector("nav").addEventListener("click", (e) => { + if (e.target.tagName === "A") { + e.preventDefault(); + this.navigateTo(e.target.pathname); + } + }); + } + } +} + +export default new Router(); From 756d573d031401505543f12bc93bab904e09185f Mon Sep 17 00:00:00 2001 From: Dayglow0926 Date: Mon, 16 Dec 2024 00:11:59 +0900 Subject: [PATCH 02/23] =?UTF-8?q?feat:=20ErrorPage=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/ErrorPage.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/page/ErrorPage.js diff --git a/src/page/ErrorPage.js b/src/page/ErrorPage.js new file mode 100644 index 00000000..6182b3f3 --- /dev/null +++ b/src/page/ErrorPage.js @@ -0,0 +1,17 @@ +const ErrorPage = () => ` +
+
+

항해플러스

+

404

+

페이지를 찾을 수 없습니다

+

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

+ + 홈으로 돌아가기 + +
+
+`; + +export default ErrorPage; From 0b069a04e7fd386bcdab11486cc6e271dad3dd01 Mon Sep 17 00:00:00 2001 From: Dayglow0926 Date: Mon, 16 Dec 2024 00:12:30 +0900 Subject: [PATCH 03/23] =?UTF-8?q?feat:=20LoginPage=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/LoginPage.js | 47 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 src/page/LoginPage.js diff --git a/src/page/LoginPage.js b/src/page/LoginPage.js new file mode 100644 index 00000000..2674a0ef --- /dev/null +++ b/src/page/LoginPage.js @@ -0,0 +1,47 @@ +class LoginPage { + constructor() { + this.root = document.querySelector("#root"); + this.render(); + this.attachEventListeners(); + } + render() { + this.root.innerHTML = ` +
+
+

항해플러스

+
+
+ +
+
+ +
+ +
+
+ 비밀번호를 잊으셨나요? +
+
+
+ +
+
+
+`; + } + + attachEventListeners() { + document.addEventListener("submit", (e) => { + e.preventDefault(); + + const id = e.target.id.value; + const password = e.target.password.value; + + if (id && password) { + localStorage.setItem("id", id); + } + }); + } +} + +export default LoginPage; From 5a650ce3fbfee2fe7486e05e5d260f6a473e1bfe Mon Sep 17 00:00:00 2001 From: Dayglow0926 Date: Mon, 16 Dec 2024 00:12:38 +0900 Subject: [PATCH 04/23] =?UTF-8?q?feat:=20MainPage=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/MainPage.js | 124 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 src/page/MainPage.js diff --git a/src/page/MainPage.js b/src/page/MainPage.js new file mode 100644 index 00000000..a7d3d1e1 --- /dev/null +++ b/src/page/MainPage.js @@ -0,0 +1,124 @@ +class MainPage { + constructor() { + this.root = document.querySelector("#root"); + this.render(); + this.attachEventListeners(); + } + render() { + this.root.innerHTML = ` +
+
+
+

항해플러스

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

홍길동

+

5분 전

+
+
+

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

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

김철수

+

15분 전

+
+
+

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

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

이영희

+

30분 전

+
+
+

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

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

박민수

+

1시간 전

+
+
+

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

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

정수연

+

2시간 전

+
+
+

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

+
+ + + +
+
+
+
+ +
+

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

+
+
+
+`; + } + + attachEventListeners() {} +} + +export default MainPage; From f079114739a6cc92f1ed5097b710c77b76da99d1 Mon Sep 17 00:00:00 2001 From: Dayglow0926 Date: Mon, 16 Dec 2024 00:12:54 +0900 Subject: [PATCH 05/23] =?UTF-8?q?feat:=20ProfilePage=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/ProfilePage.js | 98 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 src/page/ProfilePage.js diff --git a/src/page/ProfilePage.js b/src/page/ProfilePage.js new file mode 100644 index 00000000..660ceb6d --- /dev/null +++ b/src/page/ProfilePage.js @@ -0,0 +1,98 @@ +class ProfilePage { + constructor() { + this.root = document.querySelector("#root"); + this.render(); + // this.attachEventListeners(); + } + render() { + this.root.innerHTML = ` +
+
+
+

항해플러스

+
+ + + +
+
+

+ 내 프로필 +

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

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

+
+
+
+`; + } + auth() { + const id = localStorage.getItem("id"); + + if (!id) { + return; + } + } +} + +export default ProfilePage; From 65c44b2ebe9acf394483c5f8fd4f43edcc66df37 Mon Sep 17 00:00:00 2001 From: Dayglow0926 Date: Mon, 16 Dec 2024 00:13:11 +0900 Subject: [PATCH 06/23] =?UTF-8?q?feat:=20router=20=EC=A3=BC=EC=86=8C=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/main.js | 247 ++-------------------------------------------------- 1 file changed, 8 insertions(+), 239 deletions(-) diff --git a/src/main.js b/src/main.js index 036c2a38..8afbc0f0 100644 --- a/src/main.js +++ b/src/main.js @@ -1,241 +1,10 @@ -const MainPage = () => ` -
-
-
-

항해플러스

-
+import LoginPage from "./page/LoginPage"; +import MainPage from "./page/MainPage"; +import ProfilePage from "./page/ProfilePage"; +import router from "./router/Router"; - +router.addRoute("/", new MainPage()); +router.addRoute("/login", new LoginPage()); +router.addRoute("/profile", new ProfilePage()); -
-
- - -
- -
- -
-
- 프로필 -
-

홍길동

-

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()} -`; +router.navigateTo(window.location.pathname); From d215e6c065c623a7af12269b97be0e622f041571 Mon Sep 17 00:00:00 2001 From: Dayglow0926 Date: Mon, 16 Dec 2024 13:13:15 +0900 Subject: [PATCH 07/23] =?UTF-8?q?feat:=20Nav=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Nav.js | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 src/components/Nav.js diff --git a/src/components/Nav.js b/src/components/Nav.js new file mode 100644 index 00000000..e7bbabc4 --- /dev/null +++ b/src/components/Nav.js @@ -0,0 +1,33 @@ +function Nav() { + const id = localStorage.getItem("id"); + const path = window.location.pathname; + return ``; +} + +export default Nav; From 618a6e26972e09c5704dcfe80bf5c9b7e5a48615 Mon Sep 17 00:00:00 2001 From: Dayglow0926 Date: Mon, 16 Dec 2024 15:56:11 +0900 Subject: [PATCH 08/23] =?UTF-8?q?feat:=20Footer=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Footer.js | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/components/Footer.js diff --git a/src/components/Footer.js b/src/components/Footer.js new file mode 100644 index 00000000..386bdfc8 --- /dev/null +++ b/src/components/Footer.js @@ -0,0 +1,8 @@ +function Footer() { + return ` +
+

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

+
`; +} + +export default Footer; From d5c200d177450f59188197d1402245a7966a9384 Mon Sep 17 00:00:00 2001 From: Dayglow0926 Date: Mon, 16 Dec 2024 16:01:23 +0900 Subject: [PATCH 09/23] =?UTF-8?q?refactor:=20Header=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 src/components/Header.js diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 00000000..4ec28c4b --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,12 @@ +import Nav from "./Nav"; + +function Header() { + return ` +
+

항해플러스

+
+ ${Nav()} + `; +} + +export default Header; From 22a17e90c7acefe56a5ac1817045b1a50fc11412 Mon Sep 17 00:00:00 2001 From: Dayglow0926 Date: Mon, 16 Dec 2024 16:06:57 +0900 Subject: [PATCH 10/23] =?UTF-8?q?fix:=20localStorage=20Key=20=EA=B0=92=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Nav.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/Nav.js b/src/components/Nav.js index e7bbabc4..b203ab6a 100644 --- a/src/components/Nav.js +++ b/src/components/Nav.js @@ -1,6 +1,7 @@ function Nav() { - const id = localStorage.getItem("id"); + const user = localStorage.getItem("user"); const path = window.location.pathname; + return `