prgrms-fe-devcourse · colorkite10 · Jul 4, 2023 · Jul 4, 2023 · Jul 4, 2023 · Jul 4, 2023
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head lang="ko">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, height=device-height" />
+    <title>채연스 Notion cloning</title>
+  </head>
+  <body>
+    <main id="notion-app">
+      <script src="/src/main.js" type="module"></script>
+    </main>
+  </body>
+</html>
diff --git a/src/api/api.js b/src/api/api.js
@@ -0,0 +1,23 @@
+import { push } from "../routes/router.js";
+
+const API_END_POINT = "https://kdt-frontend.programmers.co.kr";
+
+export const request = async (url, options = {}) => {
+  try {
+    const res = await fetch(`${API_END_POINT}${url}`, {
+      ...options,
+      headers: {
+        "Content-Type": "application/json",
+        "x-username": "colorkite10",
+      },
-      ...options,
-      headers: {
-        "Content-Type": "application/json",
-        "x-username": "colorkite10",
-      },
+      ...options,
+      headers: {
+        "Content-Type": "application/json",
+        "x-username": "colorkite10",
+        ...options?.headers
+      },
-      ...options,
-      headers: {
-        "Content-Type": "application/json",
-        "x-username": "colorkite10",
-      },
+      ...options,
+      headers: {
+        "Content-Type": "application/json",
+        "x-username": "colorkite10",
+        ...options?.headers
+      },
+    });
+    if (res.ok) {
+      return await res.json();
+    }
+
+    throw new Error("API 연결에 오류가 발생했습니다.");
+  } catch (e) {
+    alert(e);
+    push("/");
+  }
+};
diff --git a/src/components/App.js b/src/components/App.js
@@ -0,0 +1,74 @@
+import { request } from "../api/api.js";
+import DocumentPage from "./DocumentPage.js";
+import DocumentEditPage from "./DocumentEditPage.js";
+import { initRouter } from "../routes/router.js";
+
+export default function App({ $target }) {
+  this.state = {
+    docId: null,
+    docs: [],
+  };
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+    documentPage.setState(nextState);
-    documentPage.setState(nextState);
+    documentPage.setState(this.state);
-    documentPage.setState(nextState);
+    documentPage.setState(this.state);
+  };
+
+  const documentPage = new DocumentPage({
+    $target,
+    initialState: {
+      docId: null,
+      docs: [],
+    },
+  });
+
+  const documentEditPage = new DocumentEditPage({
+    $target,
+    initialState: {
+      docId: "new",
+      doc: {
+        title: "",
+        content: "",
+      },
+    },
+  });
+
+  this.route = async () => {
+    await fetchDocuments();
+
+    const { pathname } = window.location;
+
+    if (pathname === "/") {
+      $target.innerHTML = "";
+      documentPage.render();
+
+      this.setState({ ...this.state });
+    } else if (pathname.indexOf("/documents/") === 0) {
+      const [, , docId] = pathname.split("/");
+
+      documentEditPage.setState({ docId });
+
+      this.setState({
+        ...this.state,
+        docId,
+      });
+    }
+  };
+
+  const fetchDocuments = async () => {
+    const docs = await request("/documents", {
+      method: "GET",
+    });
+
+    this.setState({
+      ...this.state,
+      docs,
+    });
+  };
+
+  this.route();
+
+  initRouter(() => this.route());
+
+  window.addEventListener("popstate", () => this.route());
+}
diff --git a/src/components/DocumentEditPage.js b/src/components/DocumentEditPage.js
@@ -0,0 +1,168 @@
+import Editor from "./Editor.js";
+import { request } from "../api/api.js";
+import { push } from "../routes/router.js";
+import { getItem, setItem, removeItem } from "../utils/storage.js";
+
+export default function DocumentEditPage({ $target, initialState }) {
+  const $documentEditPage = document.createElement("div");
+
+  $documentEditPage.className = "documentEditPage";
+
+  $documentEditPage.style.width = "60%";
+  $documentEditPage.style.margin = "auto";
+
+  this.state = initialState;
+
+  let docLocalSaveKey = `temp-document-${this.state.docId}`;
+  let timer = null;
+
+  const editor = new Editor({
+    $target: $documentEditPage,
+    initialState: {
+      title: "Untitled",
+      content: "",
+    },
+    onEditing: (doc) => {
+      setItem(docLocalSaveKey, {
+        ...doc,
+        tempSaveDate: new Date(),
+      });
+
+      if (timer !== null) {
+        clearTimeout(timer);
+      }
+
+      timer = setTimeout(async () => {
+        const isNew = this.state.docId === "new";
+        if (isNew) {
+          if (doc.title === "") {
+            doc.title = "Untitled";
+          }
+
+          const createDocument = await request("/documents", {
+            method: "POST",
+            body: JSON.stringify(doc),
+          });
+
+          await request(`/documents/${createDocument.id}`, {
+            method: "PUT",
+            body: JSON.stringify(doc),
+          });
+
+          history.replaceState(null, null, `/documents/${createDocument.id}`);
+          removeItem(docLocalSaveKey);
+
+          this.setState({
+            docId: createDocument.id,
+          });
+
+          push(createDocument.id);
+        } else {
+          if (doc.title === "") {
+            doc.title = "Untitled";
+          }
+          await request(`/documents/${doc.id}`, {
+            method: "PUT",
+            body: JSON.stringify(doc),
+          });
+
+          removeItem(docLocalSaveKey);
+        }
+      }, 1000);
+    },
+  });
+
+  this.setState = async (nextState) => {
+    if (this.state.docId === "new" && nextState.docId === "new") {
+      const tempDocument = await getItem(docLocalSaveKey, {
+        title: "Untitled",
+        content: "",
+      });
+
+      if (tempDocument.title !== "" || tempDocument.content !== "") {
-      if (tempDocument.title !== "" || tempDocument.content !== "") {
+      if (!(tempDocument.title === "" && tempDocument.content === "")) {
-      if (tempDocument.title !== "" || tempDocument.content !== "") {
+      if (!tempDocument.title || !tempDocument.content) {
-      if (tempDocument.title !== "" || tempDocument.content !== "") {
+      if (!(tempDocument.title === "" && tempDocument.content === "")) {
-      if (tempDocument.title !== "" || tempDocument.content !== "") {
+      if (!tempDocument.title || !tempDocument.content) {
+        this.state = {
+          ...this.state,
+          doc: tempDocument,
+        };
+      } else {
+        this.state = nextState;
+      }
+
+      editor.setState(this.state.doc);
+
+      this.render();
+      return;
+    }
+
+    if (this.state.docId !== nextState.docId) {
+      docLocalSaveKey = `temp-document-${nextState.docId}`;
+      this.state = nextState;
+
+      if (this.state.docId === "new") {
+        const doc = getItem(docLocalSaveKey, {
+          title: "Untitled",
+          content: "",
+        });
+
+        editor.setState(doc);
+
+        this.render();
+      } else {
+        await fetchDocument();
+      }
+      return;
+    }
+
+    this.state = nextState;
+
+    this.render();
+
+    if (this.state.doc) {
+      editor.setState(
+        this.state.doc || {
+          title: "Untitled",
+          content: "",
+        }
+      );
+    }
+  };
+
+  const fetchDocument = async () => {
+    const { docId } = this.state;
+
+    if (this.state !== "new") {
+      const doc = await request(`/documents/${docId}`, {
+        metohd: "GET",
+      });
+
+      if (doc.content === null) doc.content = "";
+
+      const tempDocument = await getItem(docLocalSaveKey, {
+        title: "Untitled",
+        content: "",
+      });
+
+      if (
+        tempDocument.tempSaveDate &&
+        tempDocument.tempSaveDate > doc.updatedAt
+      ) {
+        if (confirm("임시저장된 값을 불러올까요?")) {
+          this.setState({
+            ...this.state,
+            doc: tempDocument,
+          });
+          return;
+        }
+      }
+
+      this.setState({
+        ...this.state,
+        doc,
+      });
+    }
+  };
+
+  this.render = () => {
+    $target.appendChild($documentEditPage);
+  };
+}