From 5ad344fd63d1f37710155d260ea7f72786e7f890 Mon Sep 17 00:00:00 2001
From: lionleee <lee97hun3@gmail.com>
Date: Tue, 24 Dec 2024 14:00:37 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20route=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EC=84=A4=EC=A0=95=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Index.js              |  3 ---
 src/core/router/Router.js | 18 ++++++++++++++++--
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/Index.js b/src/Index.js
index b6b8a78..4778808 100644
--- 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
index a57eeb2..e738d55 100644
--- 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 = '';