From fb13045637d85dbd4f0e48c8a677d2fd62a59f41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9E=84=EB=B9=9B=EB=82=98?= <devbit4@gmail.com>
Date: Tue, 16 Jan 2024 01:43:47 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20=EB=9D=BC=EC=9A=B0=ED=84=B0=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A0=8C=EB=8D=94=EB=A7=81=20?=
 =?UTF-8?q?=EB=B6=80=EB=B6=84=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EC=8B=A4?=
 =?UTF-8?q?=EC=A0=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20import=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jest.config.js                    |  3 +++
 src/core/Page.js                  | 35 ++++++++++++++++++++++++++
 src/router/__test__/index.test.js | 42 ++++++++++++++++++++++++++++++-
 src/router/index.js               |  4 ++-
 4 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 src/core/Page.js

diff --git a/jest.config.js b/jest.config.js
index 4931934..e745510 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,3 +1,6 @@
 module.exports = {
   testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
 };
diff --git a/src/core/Page.js b/src/core/Page.js
new file mode 100644
index 0000000..af88a3c
--- /dev/null
+++ b/src/core/Page.js
@@ -0,0 +1,35 @@
+import Component from '@/core/Component';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import Banner from '@/components/Banner';
+
+class Page extends Component {
+  constructor(target, props, routePage) {
+    super(target, props);
+
+    this.renderLayout(routePage);
+  }
+
+  template() {
+    return `
+      <header></header>
+      <div class="content"></div>
+      <div class="banner"></div>
+      <footer></footer>
+    `;
+  }
+
+  renderLayout(routePage) {
+    const header = this.target.querySelector('header');
+    const content = this.target.querySelector('.content');
+    const banner = this.target.querySelector('.banner');
+    const footer = this.target.querySelector('footer');
+
+    new Header(header, {});
+    new routePage(content, this.props);
+    new Banner(banner, {});
+    new Footer(footer, {});
+  }
+}
+
+export default Page;
diff --git a/src/router/__test__/index.test.js b/src/router/__test__/index.test.js
index 9ad081a..a46c1c2 100644
--- a/src/router/__test__/index.test.js
+++ b/src/router/__test__/index.test.js
@@ -1,7 +1,12 @@
-const { default: Component } = require('../../core/Component');
+const { default: Component } = require('@/core/Component');
 const { default: Router } = require('..');
 const { pathToRegex, getParams, getQueryParams } = require('../utils');
 
+// 실제 페이지 컴포넌트 import
+const { default: ArticlesPage } = require('@/pages/Articles');
+const { default: DesignPage } = require('@/pages/Design');
+const { default: NotFoundPage } = require('@/pages/NotFound');
+
 class Home extends Component {
   template() {
     return `<h3>home</h3>`;
@@ -112,3 +117,38 @@ describe('router test', () => {
     expect(target.innerHTML).toContain('<h3>404</h3>');
   });
 });
+
+describe('toss-tech page router test', () => {
+  const target = document.body;
+  const router = new Router(target);
+
+  beforeAll(() => {
+    router
+      .addRoute({
+        path: '/',
+        page: ArticlesPage,
+      })
+      .addRoute({
+        path: '/design',
+        page: DesignPage,
+      })
+      .addRoute({
+        path: '*',
+        page: NotFoundPage,
+      });
+  });
+
+  test('should render the target page when the navigateTo function works properly', () => {
+    router._navigateTo('/');
+
+    expect(target.innerHTML).toContain('개발');
+
+    router._navigateTo('/design');
+
+    expect(target.innerHTML).toContain('디자인');
+
+    router._navigateTo('/hello');
+
+    expect(target.innerHTML).toContain('이 페이지를 찾을 수 없습니다.');
+  });
+});
diff --git a/src/router/index.js b/src/router/index.js
index 1426372..a2eb690 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,3 +1,4 @@
+import Page from '@/core/Page';
 import { pathToRegex, getParams, getQueryParams } from './utils';
 
 class Router {
@@ -31,7 +32,7 @@ class Router {
       queryParams: getQueryParams(location),
     };
 
-    new targetRoute.route.page(this.target, props);
+    new Page(this.target, props, targetRoute.route.page);
   }
 
   _navigateTo(url) {
@@ -45,6 +46,7 @@ class Router {
         if (e.target.matches('[data-link]')) {
           e.preventDefault();
           this._navigateTo(e.target.href);
+          scrollTo(0, 0);
         }
       });