fix: 바뀐 Base 컴포넌트에 따른 라우팅, 컴포넌트 수정

src/app/index.js

@@ -1,9 +1,13 @@
 import { useRouter, Link } from "../shared";
+import { Layout } from "../widgets";
 
-import routes from "./routes";
+import { routes } from "./routes";
 
 import "./reset.scss";
 
+const layout = new Layout({});
+document.getElementById("#app").appendChild(layout.element);
+
 const router = useRouter();
 router.init({ routes });
 customElements.define("my-link", Link, { extends: "a" });

src/pages/home/index.js

@@ -2,21 +2,25 @@ import { createPost } from "../../features";
 import { Component, Card } from "../../shared";
 export class Home extends Component {
   setup() {
-    this.element.id = "my-app";
-    this.state = { text: "Hello, World!" };
+    this.element.id = "home";
+    this.state = { text: "홈페이지" };
     this.props.card = new Card({
       num: this.element.children.length + 1,
-    });
+    }, "li");
   }
 
   template() {
     const { text } = this.state;
-    return `${text} 를 써봅니다`;
+    return /* html */ `
+      <div>${text}를 써봅니다</div>
+      <ul></ul>
+    `;
   }
 
   mounted() {
     const { card } = this.props;
-    this.element.appendChild(card.element);
+    this.element.querySelector("ul").appendChild(card.element);
+
     card.element.addEventListener("click", (event) => {
       event.stopPropagation();
 

src/pages/mypage/index.js

@@ -1,27 +1,12 @@
-import { useRouter } from "../../shared";
+import { Component } from "../../shared";
+export class Mypage extends Component {
+  setup() {
+    this.element.id = "mypage";
+    this.state = { text: "마이페이지" };
+  }
 
-/**
- *
- * @param {object} params - Mypage에 전달할 데이터
- * @param {object} params.searchParams - 쿼리파라미터 객체
- */
-export const Mypage = ({ searchParams }) => {
-  const router = useRouter();
-  document.getElementById("#app").innerHTML = `
-  <nav>
-    <div>Mypage ${searchParams?.test || ""}</div>
-    <ul>
-      <li><button class="home">Home</button></li>
-      <li><button class="mypage">Mypage</button></li>
-    </ul>
-  </nav>
-`;
-
-  document.querySelector(".home").addEventListener("click", () => {
-    router.push("/?test=hi");
-  });
-
-  document.querySelector(".mypage").addEventListener("click", () => {
-    router.push("/mypage");
-  });
-};
+  template() {
+    const { text } = this.state;
+    return `${text}를 써봅니다`;
+  }
+}

src/shared/utils/router.js

@@ -1,9 +1,14 @@
 let routes = {};
 window.addEventListener("popstate", () => {
   if (routes[location.pathname]) {
-    routes[location.pathname]({
+    const Page = routes[location.pathname];
+    const page = new Page({
       searchParams: Object.fromEntries(new URLSearchParams(location.search)),
     });
+    const content = document.getElementById("content");
+
+    content.innerHTML = "";
+    content.appendChild(page.element);
   }
 });
 
@@ -34,9 +39,13 @@ export const useRouter = () => {
     if (routes[pathname]) {
       if (!isInit) history.pushState({}, "", url);
 
-      routes[pathname]({
-        searchParams: params,
-      });
+      const Page = routes[pathname];
+      const page = new Page({ searchParams: params });
+      const content = document.getElementById("content");
+
+      content.innerHTML = "";
+      content.appendChild(page.element);
+
       return;
     }
 

src/widgets/layout/index.js

@@ -15,20 +15,19 @@ export class Layout extends Component {
     this.element.className = styles.container;
   }
 
+  // eslint-disable-next-line class-methods-use-this
   template() {
-    const { children } = this.props;
-    if (!children) return "";
-
     return /* html */ `
-      ${children}
+      <nav></nav>
+      <main id="content"></main>
     `;
   }
 
   /**
    *
    */
   mounted() {
-    // eslint-disable-next-line no-new
-    new Navigation(this.element, {}, "nav");
+    const navigation = new Navigation({}, "div");
+    this.element.querySelector("nav").appendChild(navigation.element);
   }
 }

src/widgets/navigation/index.js

@@ -14,6 +14,11 @@ export class Navigation extends Component {
    */
   setup() {
     this.element.className = styles.container;
+    this.props.writeButton = new Button(
+      { type: "enable", content: "글쓰기" },
+      "button",
+    );
+    this.props.mypageButton = new Button({ content: "마이" }, "button");
   }
 
   /**
@@ -38,12 +43,10 @@ export class Navigation extends Component {
    */
   mounted() {
     const rightChild = this.element.querySelector(`.${styles.right}`);
-    const writeButton = new Button(
-      rightChild,
-      { type: "enable", content: "글쓰기" },
-      "button",
-    );
-    const mypageButton = new Button(rightChild, { content: "마이" }, "button");
+
+    const { writeButton, mypageButton } = this.props;
+    rightChild.appendChild(writeButton.element);
+    rightChild.appendChild(mypageButton.element);
 
     writeButton.element.addEventListener("click", () => {
       createPost();