feat : 라우터 페이지 렌더링 부분 수정 및 실제 페이지 컴포넌트 import 테스트 코드 작성

jest.config.js

@@ -1,3 +1,6 @@
 module.exports = {
   testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
 };

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;

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('이 페이지를 찾을 수 없습니다.');
+  });
+});

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);
         }
       });