prgrms-fe-devcourse · Lim-JiSeon · Jul 6, 2023 · Jul 6, 2023 · Jul 6, 2023 · Jul 6, 2023
diff --git a/index.html b/index.html
@@ -0,0 +1,10 @@
+<html>
+  <head>
+    <title>Notion Project</title>
+  </head>
+  <body>
+    <main id="app"></main>
+    <link rel="stylesheet" href="style.css" />
+    <script src="/src/main.js" type="module"></script>
+  </body>
+</html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,35 @@
+import PostEditPage from "./PostEditPage.js";
+import PostNavBar from "./PostNavBar.js";
+import { initRouter } from "./router.js";
+
+export default function App({ $target }) {
+  const postNavBar = new PostNavBar({
+    $target,
+  });
+
+  const postEditPage = new PostEditPage({
+    $target,
+    initialState: {
+      postId: "new",
+      post: {
+        title: "",
+        content: "",
+      },
+    },
+  });
+
+  this.route = () => {
+    $target.innerHTML = "";
+    const { pathname } = window.location;
+
+    if (pathname !== "/" && pathname.indexOf("/") === 0) {
+      const [, postId] = pathname.split("/");
+      postEditPage.setState({ postId });
+    }
+    postNavBar.setState();
+  };
+
+  this.route();
+
+  initRouter(() => this.route());
+}
diff --git a/src/Editor.js b/src/Editor.js
@@ -0,0 +1,50 @@
+export default function Editor({
+  $target,
+  initialState = {
+    title: "",
+    content: "",
+  },
+  onEditing,
+}) {
+  const $editor = document.createElement("div");
+  $editor.id = "editor";
+
+  let isinitialize = false;
+
+  this.state = initialState;
+
+  $target.appendChild($editor);
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+    $editor.querySelector("[name=title]").value = this.state.title;
+    $editor.querySelector("[name=content]").value = this.state.content;
+    this.render();
+  };
+
+  this.render = () => {
+    if (!isinitialize) {
+      $editor.innerHTML = `
+        <input type="text" name="title" value="${this.state.title}" />
+        <textarea name="content">${this.state.content}</textarea>
+      `;
+      isinitialize = true;
+    }
+  };
+  this.render();
+
+  $editor.addEventListener("keyup", (e) => {
+    const { target } = e;
+
+    const name = target.getAttribute("name");
+
+    if (this.state[name] !== undefined) {
+      const nextState = {
+        ...this.state,
+        [name]: target.value,
+      };
+      this.setState(nextState);
+      onEditing(this.state);
+    }
+  });
+}
diff --git a/src/PostEditPage.js b/src/PostEditPage.js
@@ -0,0 +1,73 @@
+import { request } from "./api.js";
+import Editor from "./Editor.js";
+import { pushRouter } from "./router.js";
+
+export default function PostEditPage({ $target, initialState }) {
+  const $page = document.createElement("div");
+  $page.id = "editPage";
+  $page.className = "2";
+
+  this.state = initialState;
+
+  let timer = null;
+
+  const editor = new Editor({
+    $target: $page,
+    initialState: {
+      title: "",
+      content: "",
+    },
+    onEditing: (post) => {
+      if (timer !== null) {
+        clearTimeout(timer);
+      }
+
+      timer = setTimeout(async () => {
+        if (this.state.postId) {
+          await request(`/documents/${this.state.postId}`, {
+            method: "PUT",
+            body: JSON.stringify(post),
+          });
+          pushRouter(`/${this.state.postId}`);
+          await getDocument();
+        }
+      }, 2000);
+    },
+  });
+
+  this.setState = async (nextState) => {
+    if (this.state.postId !== nextState.postId) {
+      this.state = nextState;
+      await getDocument();
+      return;
+    } else {
+      this.state = nextState;
+      this.render();
+    }
+
+    editor.setState(
+      this.state.post || {
+        title: "",
+        content: "",
+      }
+    );
+  };
+
+  this.render = () => {
+    $target.appendChild($page);
+    console.log($target)
+  };
+
+  const getDocument = async () => {
+    const { postId } = this.state;
+
+    if (postId) {
+      const post = await request(`/documents/${postId}`);
+
+      this.setState({
+        ...this.state,
+        post,
+      });
+    }
+  };
+}
diff --git a/src/PostItem.js b/src/PostItem.js
@@ -0,0 +1,55 @@
+import { request } from "./api.js";
+import { pushRouter } from "./router.js";
+
+export default function PostItem(title, id) {
+  const $postItemBox = document.createElement("div");
+  $postItemBox.className = id;
+
+  const $li = document.createElement("li");
+  $li.className = id;
+
+  const $title = document.createElement("span");
+  $title.className = id;
+  $title.textContent = title;
+  $li.appendChild($title);
+
+  const $addButton = document.createElement("button");
+  $addButton.textContent = "+";
+  $addButton.className = id;
+  $li.appendChild($addButton);
+
+  const $removeButton = document.createElement("button");
+  $removeButton.textContent = "-";
+  $removeButton.className = id;
+  $li.appendChild($removeButton);
+
+  const $postSubItemBox = document.createElement("ul");
+
+  $postItemBox.appendChild($li);
+  $postItemBox.append($postSubItemBox);
+
+  $title.addEventListener("click", async () => {
+    request(`/documents/${$title.className}`);
+    pushRouter(`/${$title.className}`);
+  });
+
+  $addButton.addEventListener("click", async () => {
+    const createdPost = await request("/documents", {
+      method: "POST",
+      body: JSON.stringify({
+        title: "제목 없음",
+        parent: $addButton.className,
+      }),
+    });
+    pushRouter(`/${createdPost.id}`);
+  });
+
+  $removeButton.addEventListener("click", async () => {
+    await request(`/documents/${$removeButton.className}`, {
+      method: "DELETE",
+    });
+    pushRouter(`/`);
+  });
+
+  return { $postItemBox, $postSubItemBox };
+}
diff --git a/src/PostList.js b/src/PostList.js
@@ -0,0 +1,32 @@
+import PostItem from "./PostItem.js";
+
+export default function PostList({ $target, initialState }) {
+  const $postList = document.createElement("ul");
+  $target.appendChild($postList);
+
+  this.state = initialState;
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+    this.render();
+  };
+
+  this.makeList = ($wrap, data) => {
+    data.forEach(({ title, documents, id }) => {
+      const { $postItemBox, $postSubItemBox } = PostItem(title, id);
+
+      $wrap.appendChild($postItemBox);
+
+      if (documents.length > 0) {
+        this.makeList($postSubItemBox, documents);
+      }
+    });
+  };
+
+  this.render = () => {
+    $postList.innerHTML = "";
+    this.makeList($postList, this.state);
+  };
+
+  this.render();
+}
diff --git a/src/PostNavBar.js b/src/PostNavBar.js
@@ -0,0 +1,43 @@
+import { request } from "./api.js";
+import PostList from "./PostList.js";
+import { pushRouter } from "./router.js";
+
+export default function PostNavBar({ $target }) {
+  const $nav = document.createElement("div");
+  const $createButton = document.createElement("button");
+  const $title = document.createElement("h1");
+  $nav.id = "nav";
+  $nav.className = "1";
+  $createButton.id = "createButton";
+  $title.id = "title";
+
+  const postList = new PostList({
+    $target: $nav,
+    initialState: [],
+  });
+
+  this.setState = async () => {
+    const documents = await request("/documents");
+    postList.setState(documents);
+    this.render();
+  };
+
+  this.render = async () => {
+    $createButton.textContent = "문서 생성하기";
+    $title.textContent = "Notion Project";
+    $nav.appendChild($title);
+    $nav.appendChild($createButton);
+    $target.appendChild($nav);
+  };
+
+  $createButton.addEventListener("click", async () => {
+    const createdPost = await request("/documents", {
+      method: "POST",
+      body: JSON.stringify({
+        title: "제목 없음",
+        parent: null,
+      }),
+    });
+    pushRouter(`/${createdPost.id}`);
+  });
+}
diff --git a/src/api.js b/src/api.js
@@ -0,0 +1,23 @@
+export const API_END_POINT = "https://kdt-frontend.programmers.co.kr";
+export const API_X_USERNAME = "API_X_USERNAME_LIMJISEON";
+
+export const request = async (url, options = {}) => {
+  try {
+    const response = await fetch(`${API_END_POINT}${url}`, {
+      ...options,
+      headers: {
+        "Content-Type": "application/json",
+        "x-username": API_X_USERNAME,
+      },
+    });
+
+    if (response.ok) {
+      return await response.json();
+    }
+
+    throw new Error("API 처리중 에러가 발생했습니다.");
+  } catch (e) {
+    alert(e.message);
+    console.error();
+  }
+};
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,6 @@
+import App from "./App.js";
+
+const $target = document.querySelector("#app");
+$target.id = "contentWrap";
+
+new App({ $target });
diff --git a/src/router.js b/src/router.js
@@ -0,0 +1,22 @@
+const ROUTE_CHANGE_EVENT_NAME = "route-change";
+
+export const initRouter = (onRoute) => {
+  window.addEventListener(ROUTE_CHANGE_EVENT_NAME, (e) => {
+    const { nextUrl } = e.detail;
+
+    if (nextUrl) {
+      history.pushState(null, null, nextUrl);
+      onRoute();
+    }
+  });
+};
+
+export const pushRouter = (nextUrl) => {
+  window.dispatchEvent(
+    new CustomEvent("route-change", {
+      detail: {
+        nextUrl,
+      },
+    })
+  );
+};