prgrms-fe-devcourse · LucyYoo · Nov 12, 2022 · Nov 14, 2022 · Nov 14, 2022 · Nov 14, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+apiUrl.js
diff --git a/icon/chevron-right-solid.svg b/icon/chevron-right-solid.svg
diff --git a/icon/notion-logo.svg b/icon/notion-logo.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,20 @@
+<!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" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap"
+      rel="stylesheet"
+    />
+    <script src="/src/main.js" type="module"></script>
+    <link rel="stylesheet" href="/style/style.css" />
+    <title>노션 클로닝 프로젝트</title>
+  </head>
+  <body>
+    <main id="app"></main>
+  </body>
+</html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,53 @@
+import PostEditPage from "./Page/editPage/PostEditPage.js";
+import StartPage from "./Page/startPage/StartPage.js";
+import PostPage from "./Page/listPage/PostPage.js";
+import { initRouter } from "./utils/router.js";
+import instanceCheck from "./utils/instanceCheck.js";
+
+export default function App({ $target }) {
+  instanceCheck(new.target);
+
+  const $postListContainer = document.createElement("div");
+  const $postEditContainer = document.createElement("div");
+
+  $target.appendChild($postListContainer);
+  $target.appendChild($postEditContainer);
+
+  const postPage = new PostPage({
+    $target: $postListContainer,
+  });
+
+  const startPage = new StartPage({
+    $target: $postEditContainer,
+  });
+
+  const postEditPage = new PostEditPage({
+    $target: $postEditContainer,
+    initialState: {
+      postId: "new",
+      posts: {
+        title: "",
+        content: "",
+      },
+    },
+    listUpdate: () => {
+      postPage.render();
+    },
+  });
+
+  this.route = () => {
+    $postEditContainer.innerHTML = "";
+    const { pathname } = window.location;
+    if (pathname.indexOf("/documents/") === 0) {
+      const [, , postId] = pathname.split("/");
+      postEditPage.setState({ postId });
+    } else {
+      postPage.render();
+      startPage.render();
+    }
+  };
+
+  this.route();
+
+  initRouter(() => this.route());
+}
diff --git a/src/Page/editPage/Editor.js b/src/Page/editPage/Editor.js
@@ -0,0 +1,50 @@
+import instanceCheck from "../../utils/instanceCheck.js";
+
+/**편집기를 그리는 컴포넌트 */
+export default function Editor({
+  $target,
+  initialState = {
+    title: "",
+    content: "",
+  },
+  onEditing,
+}) {
+  instanceCheck(new.target);
+
+  const $editor = document.createElement("div");
+  $editor.classList.add("editor");
+  $target.appendChild($editor);
+
+  this.state = initialState;
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+    $editor.querySelector("[name=title]").value = this.state.title;
+    $editor.querySelector("[name=content]").value = this.state.content;
+  };
+
+  this.render = () => {
+    $editor.innerHTML = `
+    <input type="text" name="title" class="title" value="${this.state.title}"/>
+    <textarea name="content" class="content" placeholder="내용을 입력하세요.">${this.state.content}</textarea>
+    `;
+  };
+
+  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/Page/editPage/MarkUpList.js b/src/Page/editPage/MarkUpList.js
@@ -0,0 +1,55 @@
+import { push } from "../../utils/router.js";
+import instanceCheck from "../../utils/instanceCheck.js";
+
+/**편집기 아래에 해당 document의 하위 documents를 그리는 컴포넌트 */
+export default function MarkUpList({ $target, initialState }) {
+  instanceCheck(new.target);
+
+  const $markUpList = document.createElement("div");
+  $markUpList.classList.add("markUpList");
+  $target.appendChild($markUpList);
+
+  this.state = initialState;
+
+  this.setState = (nextState) => {
+    this.state = [nextState];
+    this.render();
+  };
+
+  const markUpList = (list, text) => {
+    text += `
+      <ul>
+      ${list
+        .map(
+          ({ id, title, documents }) => `
+      <div class='documentsTree'>
+        <li data-id="${id}">
+        <img class="svg" src="../icon/chevron-right-solid.svg" />
+        ${title}
+        </li>
+        ${documents.map((document) => markUpList([document], text)).join("")}
+      </div>
+      `
+        )
+        .join("")}
+      </ul>
+      `;
+
+    return text;
+  };
+
+  this.render = () => {
+    const documentsList = markUpList(this.state, "");
+    $markUpList.innerHTML = `<div class="list">${documentsList}</div>`;
+  };
+
+  this.render();
+
+  $markUpList.addEventListener("click", (e) => {
+    const $li = e.target.closest("li");
+    const id = $li.dataset.id;
+    if ($li) {
+      push(`/documents/${id}`);
+    }
+  });
+}
diff --git a/src/Page/editPage/PostEditPage.js b/src/Page/editPage/PostEditPage.js
@@ -0,0 +1,114 @@
+import { request } from "../../utils/api.js";
+import Editor from "./Editor.js";
+import MarkUpList from "./MarkUpList.js";
+import { getItem, removeItem, setItem } from "../../utils/storage.js";
+import instanceCheck from "../../utils/instanceCheck.js";
+
+/**편집기의 내용을 서버에 저장하고 불러오는 컴포넌트 */
+export default function PostEditPage({ $target, initialState, listUpdate }) {
+  instanceCheck(new.target);
+
+  const $page = document.createElement("div");
+  $page.classList.add("editPage");
+
+  this.state = initialState;
+
+  let postLocalSaveKey = `temp-post-${this.state.postId}`;
+
+  const editor = new Editor({
+    $target: $page,
+    initialState: {
+      title: "",
+      content: "",
+    },
+    onEditing: (post) => {
+      storageSave(post);
+      serverSave(post);
+    },
+  });
+
+  const markupList = new MarkUpList({
+    $target: $page,
+    initialState: [],
+  });
+
+  let storageTimer = null;
+  let serveTimer = null;
+
+  const storageSave = (post) => {
+    if (storageTimer !== null) {
+      clearTimeout(storageTimer);
+    }
+
+    storageTimer = setTimeout(() => {
+      setItem(postLocalSaveKey, {
+        ...post,
+        tempSaveDate: new Date(),
+      });
+    }, 500);
+  };
+
+  const serverSave = (post) => {
+    if (serveTimer !== null) {
+      clearTimeout(serveTimer);
+    }
+
+    serveTimer = setTimeout(async () => {
+      await request(`/documents/${post.id}`, {
+        method: "PUT",
+        body: JSON.stringify(post),
+      });
+
+      removeItem(postLocalSaveKey);
+      listUpdate();
+
+      const data = await request(`/documents/${post.id}`);
+      markupList.setState(data);
+    }, 1000);
+  };
+
+  this.setState = async (nextState) => {
+    if (this.state.postId !== nextState.postId) {
+      postLocalSaveKey = `temp-post-${nextState.postId}`;
+      this.state = nextState;
+      await fetchPost();
+      return;
+    }
+    this.state = nextState;
+
+    this.render();
+
+    if (this.state.post) {
+      markupList.setState(this.state.post);
+      editor.setState(this.state.post);
+    }
+  };
+
+  const fetchPost = async () => {
+    const { postId } = this.state;
+    const post = await request(`/documents/${postId}`);
+    const tempPost = getItem(postLocalSaveKey, {
+      title: "",
+      content: "",
+    });
+
+    if (tempPost.tempSaveDate && tempPost.tempSaveDate > post.updatedAt) {
+      if (confirm("저장되지 않은 임시 데이터가 있습니다. 불러오시겠습니까?")) {
+        this.setState({
+          ...this.state,
+          post: tempPost,
+        });
+        return;
+      }
+    }
+
+    this.setState({
+      ...this.state,
+      post,
+    });
+  };
+
+  this.render = () => {
+    $target.appendChild($page);
+  };
+}
diff --git a/src/Page/listPage/Header.js b/src/Page/listPage/Header.js
@@ -0,0 +1,34 @@
+import { push } from "../../utils/router.js";
+import instanceCheck from "../../utils/instanceCheck.js";
+
+/**user와 email을 받아서 헤더로 그리는 컴포넌트 */
+export default function Header({ $target, initialState }) {
+  instanceCheck(new.target);
+
+  const $header = document.createElement("div");
+  $header.classList.add("header");
+  $target.appendChild($header);
+
+  this.state = initialState;
+
+  this.render = () => {
+    const { user, email } = this.state;
+    $header.innerHTML = `
+        <img class="logo" src="../icon/notion-logo.svg" />
+        <div class="user">
+          <h3> ${user}의 notion</h3>
+          <h5>${email}</h5>
+        </div>
+        `;
+  };
+
+  this.render();
+
+  $header.addEventListener("click", (e) => {
+    const $user = e.target.closest(".header");
+
+    if ($user) {
+      push("/");
+    }
+  });
+}