f-lab-edu · lionleeee · Dec 26, 2024 · Dec 23, 2024 · Dec 23, 2024 · Dec 23, 2024
diff --git a/index.html b/index.html
@@ -9,6 +9,6 @@
   <body>
     <div id="app"></div>
 
-    <script type="module" src="./src/main.js"></script>
+    <script type="module" src="./src/Index.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "build:dev": "vite build --mode development",
     "preview": "vite preview",
     "format": "prettier --write ."
   },

diff --git a/src/Index.js b/src/Index.js
@@ -0,0 +1,6 @@
+import './style.css';
+import { router } from './core/router/Router.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  router.init();
+});
diff --git a/src/Main.js b/src/Main.js
diff --git a/src/Router.js b/src/Router.js
diff --git a/src/layout/Footer.js → src/components/layout/Footer.js b/src/layout/Footer.js → src/components/layout/Footer.js
@@ -1,8 +1,4 @@
 export default class Footer extends HTMLElement {
-  constructor() {
-    super();
-  }
-
   connectedCallback() {
     this.render();
   }

diff --git a/src/layout/Header.js → src/components/layout/Header.js b/src/layout/Header.js → src/components/layout/Header.js
@@ -1,8 +1,4 @@
 export default class Header extends HTMLElement {
-  constructor() {
-    super();
-  }
-
   connectedCallback() {
     this.render();
   }

diff --git a/src/components/layout/Layout.js b/src/components/layout/Layout.js
@@ -0,0 +1,23 @@
+import './Header.js';
+import './Footer.js';
+import '../../core/router/RouterOutlet.js';
+
+export default class Layout extends HTMLElement {
+  static observedAttributes = ['header', 'footer'];
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    const headerTag = this.getAttribute('header') || '';
+    const footerTag = this.getAttribute('footer') || '';
+    this.innerHTML = `
+      ${headerTag ? `<${headerTag}></${headerTag}>` : ''}
+      <router-outlet></router-outlet>
+      ${footerTag ? `<${footerTag}></${footerTag}>` : ''}
+    `;
+  }
+}
+
+customElements.define('app-layout', Layout);
diff --git a/src/core/router/Router.js b/src/core/router/Router.js
@@ -0,0 +1,60 @@
+import Layout from '../../components/layout/Layout.js';
+import RouterOutlet from './RouterOutlet.js';
+import { routes } from './RouterConfig.js';
+
+class Router {
+  static instance = null;
+
+  constructor() {
+    if (Router.instance) {
+      return Router.instance;
+    }
+    Router.instance = this;
+
+    this.routes = new Map(Object.entries(routes));
+
+    window.addEventListener('popstate', () => {
+      this.handleRoute(window.location.pathname);
+    });
+
+    document.addEventListener('click', (e) => {
+      const link = e.target.closest('[data-link]');
+      if (link) {
+        e.preventDefault();
+        this.navigate(link.getAttribute('href'));
+      }
+    });
+  }
+
+  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 Layout();
+        layout.setAttribute('header', route.layout.header);
+        layout.setAttribute('footer', route.layout.footer);
+        app.appendChild(layout);
+      }
+
+      const outlet = RouterOutlet.getInstance();
+      if (outlet) {
+        outlet.innerHTML = '';
+        outlet.appendChild(new route.component());
+      }
+    }
+  }
+
+  navigate(path) {
+    window.history.pushState({}, '', path);
+    this.handleRoute(path);
+  }
+
+  init() {
+    this.handleRoute(window.location.pathname);
+    return this;
+  }
+}
+
+export const router = new Router();
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',
+    },
+  },
+};
diff --git a/src/core/router/RouterOutlet.js b/src/core/router/RouterOutlet.js
@@ -0,0 +1,27 @@
+export default class RouterOutlet extends HTMLElement {
+  static instance = null;
+
+  constructor() {
+    super();
+
+    RouterOutlet.instance = this;
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    this.innerHTML = '';
+  }
+
+  disconnectedCallback() {
+    RouterOutlet.instance = null;
+  }
+
+  static getInstance() {
+    return RouterOutlet.instance;
+  }
+}
+
+customElements.define('router-outlet', RouterOutlet);
diff --git a/src/pages/components/LayerSidebar.js → ...s/canvas/components/CanvasLayerSidebar.js b/src/pages/components/LayerSidebar.js → ...s/canvas/components/CanvasLayerSidebar.js
@@ -1,8 +1,4 @@
-export default class LayerSidebar extends HTMLElement {
-  constructor() {
-    super();
-  }
-
+export default class CanvasLayerSidebar extends HTMLElement {
   connectedCallback() {
     this.render();
   }
@@ -17,4 +13,4 @@ export default class LayerSidebar extends HTMLElement {
   }
 }
 
-customElements.define('app-layer-sidebar', LayerSidebar);
+customElements.define('canvas-layer-sidebar', CanvasLayerSidebar);
diff --git a/src/features/canvas/components/CanvasToolsSidebar.js b/src/features/canvas/components/CanvasToolsSidebar.js
@@ -0,0 +1,61 @@
+import './ToolButton.js';
+import './PropertyInput.js';
+
+export default class CanvasToolsSidebar extends HTMLElement {
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    this.innerHTML = `
+    <div class="tools-sidebar">
+      <div class="property-group">
+        <h2 class="section-title">도형</h2>
+        <tool-button 
+          icon-path="<rect x='3' y='3' width='18' height='18' fill='none' stroke='currentColor' stroke-width='2'/>"
+          label="사각형">
+        </tool-button>
+        <tool-button 
+          icon-path="<circle cx='12' cy='12' r='9' fill='none' stroke='currentColor' stroke-width='2'/>"
+          label="원형">
+        </tool-button>
+        <tool-button 
+          icon-path="<line x1='3' y1='12' x2='21' y2='12' stroke='currentColor' stroke-width='2'/>"
+          label="직선">
+        </tool-button>
+        <tool-button 
+          icon-path="<text x='6' y='16' font-size='14'>T</text>"
+          label="텍스트">
+        </tool-button>
+      </div>
+
+      <div class="property-group">
+        <h2 class="section-title">설정</h2>
+        <property-input
+          type="number"
+          label="가로"
+          placeholder="Width">
+        </property-input>
+
+        <property-input
+          type="number"
+          label="세로"
+          placeholder="Height">
+        </property-input>
+
+        <property-input
+          type="range"
+          label="투명도"
+          min="0"
+          max="100"
+          value="100">
+        </property-input>
+      </div>
+
+      <button class="reset-button">초기화</button>
+    </div>
+    `;
+  }
+}
+
+customElements.define('canvas-tools-sidebar', CanvasToolsSidebar);
diff --git a/src/features/canvas/components/PropertyInput.js b/src/features/canvas/components/PropertyInput.js
@@ -0,0 +1,49 @@
+export default class PropertyInput extends HTMLElement {
+  static get observedAttributes() {
+    return ['label', 'type', 'placeholder', 'min', 'max', 'value'];
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    const label = this.getAttribute('label') || '';
+    const type = this.getAttribute('type') || 'text';
+    const placeholder = this.getAttribute('placeholder') || '';
+    const min = this.getAttribute('min') || 0;
+    const max = this.getAttribute('max') || 100;
+    const value = this.getAttribute('value') || 100;
+
+    let inputElement = ``;
+
+    if (type === 'range') {
+      inputElement = `
+        <input 
+          type="range" 
+          class="range-slider" 
+          min="${min}" 
+          max="${max}" 
+          value="${value}"
+        />
+      `;
+    } else {
+      inputElement = `
+        <input 
+          type="${type}" 
+          class="input-field" 
+          placeholder="${placeholder}"
+        />
+      `;
+    }
+
+    this.innerHTML = `
+      <div class="property-input">
+        <label class="input-label">${label}</label>
+        ${inputElement}
+      </div>
+    `;
+  }
+}
+
+customElements.define('property-input', PropertyInput);
diff --git a/src/features/canvas/components/ToolButton.js b/src/features/canvas/components/ToolButton.js
@@ -0,0 +1,25 @@
+export default class ToolButton extends HTMLElement {
+  static get observedAttributes() {
+    return ['icon-path', 'label'];
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    const iconPath = this.getAttribute('icon-path') || '';
+    const label = this.getAttribute('label') || '';
+
+    this.innerHTML = `
+      <button class="tool-button">
+        <svg class="tool-icon" viewBox="0 0 24 24">
+          ${iconPath}
+        </svg>
+        ${label}
+      </button>
+    `;
+  }
+}
+
+customElements.define('tool-button', ToolButton);