feat : route 레이아웃 설정 추가

f-lab-edu · Dec 24, 2024 · 5ad344f · 5ad344f
1 parent 223df14
commit 5ad344f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/src/Index.js b/src/Index.js
@@ -1,9 +1,6 @@
 import './style.css';
-import './components/layout/Layout.js';
 import { router } from './core/router/Router.js';
 
 document.addEventListener('DOMContentLoaded', () => {
-  const app = document.querySelector('#app');
-  app.innerHTML = '<app-layout></app-layout>';
   router.init();
 });
diff --git a/src/core/router/Router.js b/src/core/router/Router.js
@@ -1,9 +1,16 @@
 import CanvasPage from '../../features/canvas/pages/CanvasPage.js';
+import Layout from '../../components/layout/Layout.js';
 import RouterOutlet from './RouterOutlet.js';
 
 const routes = {
-  '/': { component: CanvasPage },
-  '*': { component: CanvasPage },
+  '/': {
+    component: CanvasPage,
+    layout: Layout,
+  },
+  '*': {
+    component: CanvasPage,
+    layout: Layout,
+  },
 };
 
 class Router {
@@ -33,6 +40,13 @@ class Router {
   handleRoute(pathname) {
     const route = this.routes.get(pathname) || this.routes.get('*');
     if (route) {
+      const app = document.querySelector('#app');
+      if (route.layout) {
+        app.innerHTML = '';
+        const layout = new route.layout();
+        app.appendChild(layout);
+      }
+
       const outlet = RouterOutlet.getInstance();
       if (outlet) {
         outlet.innerHTML = '';