feat: mpa,spa1,spa2,spa3

5529aa5c · 김영진 · acf16727 · 5529aa5c · 5529aa5c · 5529aa5c
Commit 5529aa5c authored 3 years ago by 김영진
--- a/test/.DS_Store
+++ b/test/.DS_Store
--- a/test/mpa/Asset/menu.png
+++ b/test/mpa/Asset/menu.png
--- a/test/mpa/CSS/Main.css
+++ b/test/mpa/CSS/Main.css
+#header {
+  width: 100%;
+  height: 80px;
+  background-color: #045d8b;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  color: #ffffff;
+}
+
+#header div {
+  cursor: pointer;
+}
--- a/test/mpa/JS/Main.js
+++ b/test/mpa/JS/Main.js
+// const headerContainer = document.querySelector("#header");
+
+// headerContainer.innerHTML = `
+//     <div class="Header__MenuIcon__Container">
+//         <img src="../Asset/menu.png" />
+//     </div>
+//     <div class="Header__Title__Container" >
+//         <a href="../Page/write.html" >
+//             Ajou Memo
+//         </a>
+//     </div>
+//     <div class="Header__Login__Container">
+//         Login
+//     </div>
+
+// `;
--- a/test/mpa/Page/main.html
+++ b/test/mpa/Page/main.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="../CSS/Main.css" />
+  </head>
+  <body>
+    <div id="header">
+      <div class="Header__MenuIcon__Container">
+        <img src="../Asset/menu.png" />
+      </div>
+      <div class="Header__Title__Container">
+        <a href="../Page/write.html"> Ajou Memo </a>
+      </div>
+      <div class="Header__Login__Container">Login</div>
+    </div>
+    <div id="body"></div>
+    <div id="footer"></div>
+    <script type="module" src="../JS/Main.js"></script>
+  </body>
+</html>
--- a/test/mpa/Page/write.html
+++ b/test/mpa/Page/write.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div>ㅇㅕ기는 글쓰기 페이지</div>
+  </body>
+</html>
--- a/test/spa1/public/Asset/menu.png
+++ b/test/spa1/public/Asset/menu.png
--- a/test/spa1/public/index.html
+++ b/test/spa1/public/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="../src/Main/Main.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="../src/index.js"></script>
+  </body>
+</html>
--- a/test/spa1/src/Header.js
+++ b/test/spa1/src/Header.js
+import { WritePage } from "./Write/write.js";
+
+export const Header = () => {
+  const root = document.querySelector("#root");
+  root.innerHTML = `
+          <div id="header">
+              <div class="Header__MenuIcon__Container">
+                  <img src="../public/Asset/menu.png" />
+              </div>
+              <div class="Header__Title__Container" >
+                  Ajou Memo
+              </div>
+              <div class="Header__Login__Container">
+                  Login
+              </div>
+          </div>
+      `;
+};
+
+export const addEvent = () => {
+  const titleContainer = document.querySelector(".Header__Title__Container");
+  titleContainer.addEventListener("click", () => {
+    WritePage();
+    history.pushState(null, null, "/write");
+  });
+};
--- a/test/spa1/src/Main/Main.css
+++ b/test/spa1/src/Main/Main.css
+#header {
+  width: 100%;
+  height: 80px;
+  background-color: #045d8b;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  color: #ffffff;
+}
+
+#header div {
+  cursor: pointer;
+}
--- a/test/spa1/src/Main/main.js
+++ b/test/spa1/src/Main/main.js
+export const MainPage = () => {
+  makeBodyTitle();
+  makeBodyContainer();
+  makeFooter();
+
+  // const root = document.querySelector("#root");
+
+  // const MainBody = document.createElement("div");
+  // MainBody.className = "body";
+  // MainBody.innerHTML = `<div>메인페이지</div>`;
+
+  // root.appendChild(MainBody);
+};
+
+const makeBodyTitle = () => {};
+const makeBodyContainer = () => {};
+const makeFooter = () => {};
--- a/test/spa1/src/Write/write.js
+++ b/test/spa1/src/Write/write.js
+export const WritePage = () => {
+  const body = document.querySelector(".body");
+  body.innerHTML = "<div>여기는 글쓰기 페이지 입니다.</div>";
+};
--- a/test/spa1/src/index.js
+++ b/test/spa1/src/index.js
+import { MainPage } from "./Main/main.js";
+import { Header, addEvent } from "./Header.js";
+
+const init = () => {
+  Header();
+  MainPage();
+  addEvent();
+};
+
+init();
--- a/test/spa2/public/index.html
+++ b/test/spa2/public/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="../src/index.js"></script>
+  </body>
+</html>
--- a/test/spa2/src/Component/bye.js
+++ b/test/spa2/src/Component/bye.js
+import Component from "../common/Component.js";
+
+export default class Bye extends Component {
+  constructor(...args) {
+    super(...args);
+  }
+
+  template() {
+    return `bye`;
+  }
+}
--- a/test/spa2/src/common/Component.js
+++ b/test/spa2/src/common/Component.js
+export default class Component {
+  $target;
+  $state;
+
+  constructor(target, state) {
+    this.$target = target;
+    this.$state = state;
+
+    this.render();
+  }
+
+  template() {
+    return `<div>hi</div>`;
+  }
+
+  render() {
+    this.$target.innerHTML = this.template();
+  }
+}
--- a/test/spa2/src/index.js
+++ b/test/spa2/src/index.js
+import Component from "./common/Component.js";
+import Bye from "./Component/bye.js";
+
+const $ = (selector) => document.querySelector(selector);
+const create = (selector) => document.createElement(selector);
+
+const root = $("#root");
+
+const app = new Component(root, null);
+
+const temp = create("div");
+temp.className = "Temp";
+
+root.appendChild(temp);
+
+const bye = new Bye(temp, null);
--- a/test/spa3/public/index.html
+++ b/test/spa3/public/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="../src/index.js"></script>
+  </body>
+</html>
--- a/test/spa3/src/Component/bye.js
+++ b/test/spa3/src/Component/bye.js
--- a/test/spa3/src/Component/hi.js
+++ b/test/spa3/src/Component/hi.js
+export default function Hi(el) {
+  const target = el;
+
+  const template = () => {
+    return `
+        <div>header</div>
+        <div>body</div>
+        <div>footer</div>
+    `;
+  };
+
+  const render = () => {
+    target.innerHTML = template();
+    addEvent();
+  };
+
+  const addEvent = () => {};
+
+  return render;
+}