prgrms-fe-devcourse · 1eecan · Jul 6, 2023 · Jul 17, 2023 · jgjgill · Jul 10, 2023
diff --git a/index.html b/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Observer</title>
+  </head>
+  <body>
+    <div
+      id="app"
+      style="display: flex; flex-direction: row; justify-content: space-around"
+    ></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,111 @@
+import DocumentList from "./component/DocumentList.js";
+import Document from "./component/Document.js";
+import { initRouter, push } from "./core/router.js";
+import nestedObjectToArray from "./core/nestedObjectToArray.js";
+import { getItem, setItem } from "./core/storage.js";
+import { request } from "./core/api.js";
+import editor from "./component/Editor.js";
+
+export default function App({ $target }) {
+  this.state = getItem("tempSaveKey") || alert("새로고침을 해주세요");
+
+  this.setState = async (nextState) => {
+    this.state = nextState;
+    await documentList.setState(this.state);
+    await document.setState(this.state);
-    this.state = nextState;
-    await documentList.setState(this.state);
-    await document.setState(this.state);
+    this.state = nextState;
+    
+    await documentList.setState(this.state);
+    await document.setState(this.state);
-    this.state = nextState;
-    await documentList.setState(this.state);
-    await document.setState(this.state);
+    this.state = nextState;
+    
+    await documentList.setState(this.state);
+    await document.setState(this.state);
+  };
+
+  this.fetchDocument = async () => {
+    if (getItem("tempSaveKey") == null) {
+      const serverDocument = nestedObjectToArray(
+        await request("/documents", {
+          method: "GET",
+        })
+      );
+      setItem("tempSaveKey", {
+        documentList: serverDocument,
+        currentDocumentId: serverDocument[0].id,
+      });
-      const serverDocument = nestedObjectToArray(
-        await request("/documents", {
-          method: "GET",
-        })
-      );
-      setItem("tempSaveKey", {
-        documentList: serverDocument,
-        currentDocumentId: serverDocument[0].id,
-      });
+      const serverDocumentList = await request('/document', {...});
+      const currentDocumentList = nestedObjectToArray(serverDocumentList);
+      
+      setItem("tempSaveKey", {
+        documentList: currentDocumentList,
+        currentDocumentId: currentDocumentList[0].id,
+      });
-      const serverDocument = nestedObjectToArray(
-        await request("/documents", {
-          method: "GET",
-        })
-      );
-      setItem("tempSaveKey", {
-        documentList: serverDocument,
-        currentDocumentId: serverDocument[0].id,
-      });
+      const serverDocumentList = await request('/document', {...});
+      const currentDocumentList = nestedObjectToArray(serverDocumentList);
+      
+      setItem("tempSaveKey", {
+        documentList: currentDocumentList,
+        currentDocumentId: currentDocumentList[0].id,
+      });
+    }
+    await this.setState(getItem("tempSaveKey"));
+  };
+
+  this.fetchDocument();
+
+  const documentList = new DocumentList({
+    $target,
+    initialState: this.state,
+    onClick: async (clickedId) => {
+      const nextState = {
+        documentList: nestedObjectToArray(
+          await documentList.fetchDocumentList()
+        ),
+        currentDocumentId: clickedId,
+      };
+      setItem("tempSaveKey", nextState);
+    },
+    onPost: async (clickedId) => {
+      await request("/documents", {
+        method: "POST",
+        body: JSON.stringify({
+          title: "문서 제목",
+          parent: clickedId,
+        }),
+      });
+      const nextState = {
+        documentList: nestedObjectToArray(
+          await documentList.fetchDocumentList()
+        ),
+        currentDocumentId:
+          clickedId == "null"
+            ? getItem("tempSaveKey").currentDocumentId
+            : clickedId,
+      };
+      this.setState(nextState);
+      setItem("tempSaveKey", nextState);
+    },
+    onDelete: async (clickedId) => {
+      await request(`/documents/${clickedId}`, {
+        method: "DELETE",
+      });
+      const nextState = {
+        documentList: nestedObjectToArray(
+          await documentList.fetchDocumentList()
+        ),
+        currentDocumentId:
+          getItem("tempSaveKey").documentList[
+            getItem("tempSaveKey").documentList.findIndex(
+              (document) => document.id == clickedId
-              (document) => document.id == clickedId
+              (document) => document.id === Number(clickedId)
-              (document) => document.id == clickedId
+              (document) => document.id === Number(clickedId)
+            ) - 1
+          ].id,
+      };
+      push(`/documents/${nextState.currentDocumentId}`);
+      this.setState(nextState);
+      setItem("tempSaveKey", nextState);
+    },
+  });
+
+  const document = new Document({
+    $target,
+    initialState: this.state,
+  });
+
+  this.route = async () => {
+    const { pathname } = window.location;
+    if (pathname === "/") {
+      await this.setState({ ...this.state, currentDocumentId: null });
+    } else if (pathname.indexOf("/documents/") === 0) {
+      const splitedPathname = pathname.split("/");
+      const documentId = splitedPathname[2];
+      const nextState = {
+        ...this.state,
+        currentDocumentId: Number(documentId),
+      };
+      await this.setState(nextState);
+    }
+  };
+
+  this.route();
+
+  initRouter(() => this.route());
+}
diff --git a/src/component/Document.js b/src/component/Document.js
@@ -0,0 +1,44 @@
+import { request } from "../core/api.js";
+import Editor from "./Editor.js";
+import nestedObjectToArray from "../core/nestedObjectToArray.js";
+export default function Document({ $target, initialState }) {
+  const $document = document.createElement("div");
+  $target.appendChild($document);
+  this.state = initialState;
+  this.setState = async (nextState) => {
+    this.state = nextState;
+    await editor.setState(this.state);
+    await this.render();
+  };
+
+  this.render = async () => {
+    $target.appendChild($document);
+  };
+
+  this.render();
+
+  let timer = null;
+
+  const editor = new Editor({
+    $target: $document,
+    initialState: this.state,
+    onEditing: async (document) => {
+      const documentId = this.state.currentDocumentId;
+      if (timer !== null) {
+        clearTimeout(timer);
+      }
+      timer = setTimeout(async () => {
+        await request(`/documents/${documentId}`, {
+          method: "PUT",
+          body: JSON.stringify(document),
+        });
+        const nextState = nestedObjectToArray(
+          await request(`/documents/${documentId}`, {
+            method: "GET",
+          })
+        );
+        setItem("tempSaveKey", nextState);
+      }, 1000);
+    },
+  });
+}
diff --git a/src/component/DocumentList.js b/src/component/DocumentList.js
@@ -0,0 +1,82 @@
+import { setItem } from "../core/storage.js";
+import { push } from "../core/router.js";
+import { request } from "../core/api.js";
+export default function DocumentList({
+  $target,
+  initialState,
+  onClick,
+  onPost,
+  onDelete,
+}) {
+  const $documentList = document.createElement("div");
+  $target.appendChild($documentList);
+  this.state = initialState;
+
+  this.setState = async (nextState) => {
+    this.state = nextState;
+    await this.render();
+  };
+
+  this.render = async () => {
+    if (this.state.documentList.length == 0) return;
+    const documentId = this.state.currentDocumentId;
+    $documentList.innerHTML = `<div class="documentListItem">${this.state.documentList
+      .map(
+        (document) => `
+  <p id="${document.id}" style="text-indent:${
+          document.depth * 10
+        }px; background-color:${
+          document.id == documentId ? "gray" : "white"
+        }">${
+          document.title
+        }<button class="postDocument">+</button><button class="deleteDocument">x</button></p>
+    `
+      )
+      .join("")}<p id="null"><button class="postDocument">+</button></p></div>`;
+  };
+
+  this.render();
+
+  this.fetchDocumentList = async () => {
+    let res = await request("/documents", {
+      method: "GET",
+    });
+
+    if (res.length == 0) {
+      await request("/documents", {
+        method: "POST",
+        body: JSON.stringify({
+          title: "문서 제목",
+          parent: null,
+        }),
+      });
+      res = await request("/documents", {
+        method: "GET",
+      });
+    }
+
+    return res;
+  };
+
+  $documentList.addEventListener("click", (e) => {
+    if (e.target.id != "") {
+      const { id } = e.target;
+      const nextState = onClick(id);
+      setItem("tempSaveKey", nextState);
+      this.setState(nextState);
+      push(`/documents/${id}`);
+    }
+  });
+
+  $documentList.addEventListener("click", (e) => {
+    const { className } = e.target;
+    const { id } = e.target.closest("p");
+
+    if (className == "postDocument") {
+      onPost(id);
+    }
+    if (className == "deleteDocument") {
+      onDelete(id);
+    }
+  });
+}
diff --git a/src/component/Editor.js b/src/component/Editor.js
@@ -0,0 +1,49 @@
+import { request } from "../core/api.js";
+
+export default function Editor({
+  $target,
+  initialState = { title: "", content: "" },
+  onEditing,
+}) {
+  const $editor = document.createElement("div");
+
+  let isInitialize = false;
+
+  this.state = initialState;
+  $editor.style.width = "300px";
+  $editor.style.height = "300px";
+  $target.appendChild($editor);
+
+  this.setState = async (nextState) => {
+    this.state = nextState;
+    const documentId = this.state.currentDocumentId;
+    const currentDocument = await request(`/documents/${documentId}`, {
+      method: "GET",
+    });
+    $editor.querySelector("[name=title]").value = currentDocument.title;
+    $editor.querySelector("[name=content]").value = currentDocument.content;
+    this.render();
+  };
+
+  this.render = async () => {
+    const documentId = this.state.currentDocumentId;
+    const currentDocument = await request(`/documents/${documentId}`, {
+      method: "GET",
+    });
+    if (!isInitialize) {
+      $editor.innerHTML = `
+      <input type="text" name="title" style="width:300px;" value="${currentDocument.title}"/>
+      <textarea name="content" style="width:300px;height:300px;">${currentDocument.content}</textarea>`;
+      isInitialize = true;
+    }
+  };
+  this.render();
+
+  $editor.addEventListener("keyup", async (e) => {
+    const document = {
+      title: $editor.querySelector("[name=title]").value,
+      content: $editor.querySelector("[name=content]").value,
+    };
+    onEditing(document);
+  });
+}
diff --git a/src/core/api.js b/src/core/api.js
@@ -0,0 +1,21 @@
+export const API_END_POINT = "https://kdt-frontend.programmers.co.kr";
+
+export const request = async (url, option = {}) => {
+  try {
+    const res = await fetch(`${API_END_POINT}${url}`, {
+      ...option,
+      headers: {
+        "Content-Type": "application/json",
+        "x-username": "1eecan",
+      },
+    });
+
+    if (res.ok) {
+      return await res.json();
+    }
+
+    throw new Error("API 처리 중 이상 발생");
+  } catch (e) {
+    console.log(e.message);
+  }
+};
diff --git a/src/core/nestedObjectToArray.js b/src/core/nestedObjectToArray.js
@@ -0,0 +1,25 @@
+export default function nestedObjectToArray(nestedObject) {
+  const nestedObjectArray = [];
+
+  function recuresiveNestedObjectToArray(nestedObject, depth = 1) {
+    nestedObject.forEach((document) => {
+      if (document.documents.length !== 0) {
+        nestedObjectArray.push({
+          id: document.id,
+          title: document.title,
+          depth: depth,
+        });
+        recuresiveNestedObjectToArray(document.documents, depth + 1);
+      } else {
+        nestedObjectArray.push({
+          id: document.id,
+          title: document.title,
+          depth: depth,
+        });
+      }
-      if (document.documents.length !== 0) {
-        nestedObjectArray.push({
-          id: document.id,
-          title: document.title,
-          depth: depth,
-        });
-        recuresiveNestedObjectToArray(document.documents, depth + 1);
-      } else {
-        nestedObjectArray.push({
-          id: document.id,
-          title: document.title,
-          depth: depth,
-        });
-      }
+      nestedObjectArray.push({
+        id: document.id,
+        title: document.title,
+        depth: depth,
+      });
+
+      if (document.documents.length !== 0) {
+        recuresiveNestedObjectToArray(document.documents, depth + 1);
+      }
-      if (document.documents.length !== 0) {
-        nestedObjectArray.push({
-          id: document.id,
-          title: document.title,
-          depth: depth,
-        });
-        recuresiveNestedObjectToArray(document.documents, depth + 1);
-      } else {
-        nestedObjectArray.push({
-          id: document.id,
-          title: document.title,
-          depth: depth,
-        });
-      }
+      nestedObjectArray.push({
+        id: document.id,
+        title: document.title,
+        depth: depth,
+      });
+
+      if (document.documents.length !== 0) {
+        recuresiveNestedObjectToArray(document.documents, depth + 1);
+      }
+    });
+  }
+
+  recuresiveNestedObjectToArray(nestedObject);
+  return nestedObjectArray;
+}
diff --git a/src/core/router.js b/src/core/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 push = (nextUrl) => {
+  window.dispatchEvent(
+    new CustomEvent(ROUTE_CHANGE_EVENT_NAME, {
+      detail: {
+        nextUrl,
+      },
+    })
+  );
+};
diff --git a/src/core/storage.js b/src/core/storage.js
@@ -0,0 +1,18 @@
+const storage = window.localStorage;
+
+export const getItem = (key, defaultValue) => {
+  try {
+    const storedValue = storage.getItem(key);
+    return storedValue ? JSON.parse(storedValue) : defaultValue;
+  } catch (e) {
+    return defaultValue;
+  }
+};
+
+export const setItem = (key, value) => {
+  storage.setItem(key, JSON.stringify(value));
+};
+
+export const removeItem = (key) => {
+  storage.removeItem(key);
+};