[Mission4/김재현] - Project_Notion_VanillaJS

api/api.js

@@ -0,0 +1,21 @@
+import { API_END_POINT, HEADER } from "./apiConstans.js";
+
+export const request = async (url, options = {}) => {
+  try {
+    const res = await fetch(`${API_END_POINT}${url}`, {
+      ...options,
+      headers: {
+        "Content-Type": "application/json",
+        "x-username": HEADER,
+      },
+    });
+
+    if (res.ok) {
+      return await res.json();
+    }
+
+    throw new Error("API 처리중 뭔가 이상합니다!");
+  } catch (error) {
+    alert(error.message);
+  }
+};

components/Content/Content.js

@@ -0,0 +1,99 @@
+import ContentEditor from "./ContentEditor.js";
+import { request } from "../../api/api.js";
+import { push } from "../../utils/router.js";
+
+export default function Content({ $target, initialState }) {
+  const $content = document.createElement("div");
+  $content.classList.add("layout-content");
+
+  this.state = initialState;
+
+  const post = {
+    title: "",
+    content: "",
+  };
+
+  let timer = null;
+
+  const contentEditor = new ContentEditor({
+    $target: $content,
+    initialState: post,
+    onEditing: (post) => {
+      if (timer !== null) {
+        clearTimeout(timer);
+      }
+
+      timer = setTimeout(async () => {
+        const isNew = this.state.documentId === "new";
+
+        if (isNew) {
+          const createdPost = await request("/documents", {
+            method: "post",
+            body: JSON.stringify(post),
+          });
+
+          this.setState({
+            documentId: createdPost.id,
+          });
+
+          push(`/documents/${createdPost.id}`);
+        } else {
+          await request(`/documents/${post.id}`, {
+            method: "put",
+            body: JSON.stringify(post),
+          });
+        }
+      }, 500);
+    },
+  });
+
+  this.setState = async (nextState) => {
+    if (this.state.documentId !== nextState.documentId) {
+      this.state = nextState;
+
+      if (this.state.documentId === "new") {
+        const document = {
+          title: "",
+          content: "",
+        };
+
+        contentEditor.setState(document);
+        contentEditor.render();
+        this.render();
+      } else {
+        await fetchPost();
+      }
+
+      return;
+    }
+
+    this.state = nextState;
+    this.render();
+    contentEditor.setState(
+      this.state.document || {
+        title: "",
+        content: "",
+      }
+    );
+    contentEditor.render();
+  };
+
+  this.render = () => {
+    $target.appendChild($content);
+  };
+
+  const fetchPost = async () => {
+    const { documentId } = this.state;
+
+    if (documentId !== "new") {
+      const document = await request(`/documents/${documentId}`, {
+        method: "get",
+      });
+
+      this.setState({
+        ...this.state,
+        document,
+      });
+    }
+  };
+}

components/Content/ContentEditor.js

@@ -0,0 +1,51 @@
+export default function ContentEditor({
+  $target,
+  initialState = {
+    title: "",
+    content: "",
+  },
+  onEditing,
+}) {
+  const $contentEditor = document.createElement("div");
+
+  this.state = initialState;
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+  };
+
+  $contentEditor.innerHTML = `
+    <input
+      type="text"
+      class="editor-title"
+      name="title"
+    />
+    <textarea
+      class="editor-content"
+      name="content"
+    >
+      ${this.state.content}
+    </textarea>
+  `;
+
+  $target.appendChild($contentEditor);
+
+  this.render = () => {
+    $contentEditor.querySelector("[name=title]").value = this.state.title;
+    $contentEditor.querySelector("[name=content]").value = this.state.content;
+  };
+
+  this.render();
+
+  $contentEditor.addEventListener("keyup", (e) => {
+    const { target } = e;
+    const name = target.getAttribute("name");
+    const nextState = {
+      ...this.state,
+      [name]: target.value,
+    };
+
+    this.setState(nextState);
+    onEditing(this.state);
+  });
+}

components/SideBar/SideBar.js

@@ -0,0 +1,25 @@
+import SideBarList from "./SideBarList.js";
+import { request } from "../../api/api.js";
+
+export default function SideBar({ $target }) {
+  const $sideBar = document.createElement("div");
+  $sideBar.classList.add("layout-sidebar");
+
+  const sideBarList = new SideBarList({
+    $target: $sideBar,
+    initialState: [],
+  });
+
+  this.setState = async () => {
+    const documents = await request("/documents", {
+      method: "get",
+    });
+
+    sideBarList.setState(documents);
+    this.render();
+  };
+
+  this.render = async () => {
+    $target.appendChild($sideBar);
+  };
+}

components/SideBar/SideBarItem.js

@@ -0,0 +1,14 @@
+export default function SideBarItem(item) {
+  return `
+    <li data-id="${item.id}">
+      <span class="item-load">
+        ${item.title}
+      </span>
+      <button class="item-remove">-</button>
+      <button class="item-add">+</button>
+      <ul class="sidebar-list-ul">
+        ${item.documents.length > 0 ? item.documents.map((item) => SideBarItem(item)).join("") : ""}
+      </ul>
+    </li>
+  `;
+}

components/SideBar/SideBarList.js

@@ -0,0 +1,63 @@
+import SideBarItem from "./SideBarItem.js";
+import { request } from "../../api/api.js";
+import { push } from "../../utils/router.js";
+
+export default function SideBarList({ $target, initialState }) {
+  const $sideBarList = document.createElement("div");
+
+  this.state = initialState;
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+    this.render();
+  };
+
+  this.render = () => {
+    if (!this.state) return;
+
+    $sideBarList.innerHTML = `
+      <ul class="sidebar-list-ul">
+        ${this.state.map((item) => SideBarItem(item)).join("")}
+      </ul>
+    `;
+
+    $target.appendChild($sideBarList);
+  };
+
+  this.render();
+
+  $sideBarList.addEventListener("click", async (e) => {
+    const $item = e.target;
+    const { id } = $item.parentElement.dataset;
+
+    if ($item.className === "item-load") {
+      push(`/documents/${id}`);
+
+      return;
+    }
+
+    if ($item.className === "item-remove") {
+      await request(`/documents/${id}`, {
+        method: "delete",
+      });
+
+      push(`/`);
+
+      return;
+    }
+
+    if ($item.className === "item-add") {
+      const tempPost = {
+        title: "",
+        parent: id,
+      };
+      const createdPost = await request("/documents", {
+        method: "post",
+        body: JSON.stringify(tempPost),
+      });
+
+      // this.setState()
+      push(`/documents/${createdPost.id}`);
+    }
+  });
+}

index.html

@@ -0,0 +1,10 @@
+<html>
+  <head>
+    <title>Notion</title>
+    <link rel="stylesheet" href="/style/style.css" />
+  </head>
+  <body>
+    <main id="app"></main>
+    <script src="/index.js" type="module"></script>
+  </body>
+</html>

index.js

@@ -0,0 +1,5 @@
+import App from "./pages/App.js";
+
+const $target = document.querySelector("#app");
+
+new App({ $target });

pages/App.js

@@ -0,0 +1,40 @@
+import SideBar from "../components/SideBar/SideBar.js";
+import Content from "../components/Content/Content.js";
+import { initRouter } from "../utils/router.js";
+
+export default function App({ $target }) {
+  const $layout = document.createElement("div");
+  $layout.classList.add("layout-main");
+
+  const sideBar = new SideBar({
+    $target: $layout,
+  });
+  const content = new Content({
+    $target: $layout,
+    initialState: {
+      documentId: "new",
+    },
+  });
+
+  this.route = async () => {
+    $target.innerHTML = ``;
+
+    const { pathname } = window.location;
+
+    if (pathname === "/") {
+      await sideBar.setState();
+      await content.setState({ documentId: "new" });
+    } else if (pathname.indexOf("/documents/" === 0)) {
+      const [, , documentId] = pathname.split("/");
+
+      await sideBar.setState();
+      await content.setState({ documentId });
+    }
+
+    $target.appendChild($layout);
+  };
+
+  this.route();
+
+  initRouter(() => this.route());
+}

style/style.css

@@ -0,0 +1,41 @@
+.layout-main {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  color: #37352f;
+  background: #ffffff;
+}
+
+.layout-sidebar {
+  width: 20%;
+  max-width: 280px;
+  min-width: 200px;
+  height: 100%;
+  font-size: 14px;
+  font-weight: bold;
+  color: #37352f;
+  background: #fbfbfa;
+  overflow: auto;
+  float: left;
+}
+
+.layout-content {
+  width: 80%;
+  height: 100%;
+  float: left;
+}
+
+.sidebar-list-ul {
+  list-style: none;
+}
+
+.editor-title {
+  width: 100%;
+  height: 5%;
+  max-height: 60px;
+}
+
+.editor-content {
+  width: 100%;
+  height: 95%;
+}

utils/localStorage.js

@@ -0,0 +1,19 @@
+const localStorage = window.localStorage;
+
+export const getItem = (key, defaultValue) => {
+  try {
+    const storedValue = localStorage.getItem(key);
+
+    return storedValue ? JSON.parse(storedValue) : defaultValue;
+  } catch (error) {
+    return defaultValue;
+  }
+};
+
+export const setItem = (key, value) => {
+  localStorage.setItem(key, JSON.stringify(value));
+};
+
+export const removeItem = (key) => {
+  localStorage.removeItem(key);
+};