ref : 레이아웃 확장성 있게 수정

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

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git a/src/components/layout/Layout.js b/src/components/layout/Layout.js
@@ -3,6 +3,8 @@ import './Footer.js';
 import '../../core/router/RouterOutlet.js';
 
 export default class Layout extends HTMLElement {
+  static observedAttributes = ['header', 'footer'];
+
   constructor() {
     super();
   }
@@ -12,10 +14,12 @@ export default class Layout extends HTMLElement {
   }
 
   render() {
+    const headerTag = this.getAttribute('header') || '';
+    const footerTag = this.getAttribute('footer') || '';
     this.innerHTML = `
-      <app-header></app-header>
+      ${headerTag ? `<${headerTag}></${headerTag}>` : ''}
       <router-outlet></router-outlet>
-      <app-footer></app-footer>
+      ${footerTag ? `<${footerTag}></${footerTag}>` : ''}
     `;
   }
 }

diff --git a/src/core/router/Router.js b/src/core/router/Router.js
@@ -1,17 +1,6 @@
-import CanvasPage from '../../features/canvas/pages/CanvasPage.js';
 import Layout from '../../components/layout/Layout.js';
 import RouterOutlet from './RouterOutlet.js';
-
-const routes = {
-  '/': {
-    component: CanvasPage,
-    layout: Layout,
-  },
-  '*': {
-    component: CanvasPage,
-    layout: Layout,
-  },
-};
+import { routes } from './RouterConfig.js';
 
 class Router {
   static instance = null;
@@ -43,7 +32,9 @@ class Router {
       const app = document.querySelector('#app');
       if (route.layout) {
         app.innerHTML = '';
-        const layout = new route.layout();
+        const layout = new Layout();
+        layout.setAttribute('header', route.layout.header);
+        layout.setAttribute('footer', route.layout.footer);
         app.appendChild(layout);
       }
 

diff --git a/src/core/router/RouterConfig.js b/src/core/router/RouterConfig.js
@@ -0,0 +1,11 @@
+import CanvasPage from '../../features/canvas/pages/CanvasPage';
+
+export const routes = {
+  '*': {
+    component: CanvasPage,
+    layout: {
+      header: 'app-header',
+      footer: 'app-footer',
+    },
+  },
+};