prgrms-fe-devcourse · judahhh · Jun 28, 2023 · Jul 5, 2023 · Jul 5, 2023 · Jul 5, 2023
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+ApiKey.js
diff --git a/index.html b/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Notion_cloning</title>
+    <link rel="stylesheet" href="./src/style/style.css" />
+    <script
+      src="https://kit.fontawesome.com/0ab4707042.js"
+      crossorigin="anonymous"
+    ></script>
+  </head>
+  <body>
+    <main id="app"></main>
+    <script src="/src/index.js" type="module"></script>
+  </body>
+</html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,52 @@
+import DocumentPage from "../src/components/DocumentPage.js";
+import DocumentEditPage from "../src/components/DocumentEditPage.js";
+import { editorRoute } from "../src/utils/router.js";
+import MainPage from "../src/pages/MainPage.js";
+import { removeDiv } from "./utils/removeDocumentList.js";
+
+export default function App({ $target }) {
+  const documentPage = new DocumentPage({
+    $target,
+  });
+
+  const documentEditPage = new DocumentEditPage({
+    $target,
+    initialState: {
+      documentId: null,
+      document: {
+        title: "",
+        content: "",
+      },
+    },
+  });
+
+  const mainPage = new MainPage({
+    $target,
+    initialState: "주다현",
+  });
+
+  this.render = () => {
+    documentPage.render();
+  };
+
+  this.render();
+
+  this.route = (parent) => {
+    const { pathname } = window.location;
+    if (pathname === "/") {
+      removeDiv(".edit-page");
+      mainPage.render();
+    } else {
+      removeDiv(".main-page");
+      const [, id] = pathname.split("/");
+      documentEditPage.setState({
+        documentId: id,
+        parentId: parent,
+      });
+    }
+  };
+
+  this.route();
+
+  editorRoute((parent) => this.route(parent));
+}
diff --git a/src/api/Api.js b/src/api/Api.js
@@ -0,0 +1,19 @@
+import API_BASE_URL from "../utils/ApiKey.js";
+
+export const request = async (url, options = {}) => {
+  try {
+    const res = await fetch(`${API_BASE_URL}${url}`, {
+      ...options,
+      headers: {
+        "Content-Type": "application/json",
+        "x-username": "dahyeon-Ju",
+      },
+    });
+
+    if (res.ok) return await res.json();
+
+    throw new Error("API 처리 실패");
+  } catch (error) {
+    alert(error.message);
+  }
+};
diff --git a/src/components/DocumentEditPage.js b/src/components/DocumentEditPage.js
@@ -0,0 +1,116 @@
+import Editor from "./Editor.js";
+import { setItem, getItem, removeItem } from "../utils/storage.js";
+import { request } from "../api/api.js";
+import { push } from "../utils/router.js";
+
+export default function DocumentEditPage({ $target, initialState }) {
+  const $editPage = document.createElement("div");
+  $editPage.className = "edit-page";
+  this.state = initialState;
+
+  let documentLocalSaveKey = `temp-document-${this.state.documentId}`;
+
+  const tempDocument = getItem(documentLocalSaveKey, {
+    title: "",
+    content: "",
+  });
+
+  let timer = null;
+
+  const editor = new Editor({
+    $target: $editPage,
+    initialState: tempDocument || {
+      title: "",
+      content: "",
+    },
+    onEditing: (document) => {
+      if (timer !== null) {
+        clearTimeout(timer);
+      }
+
+      timer = setTimeout(async () => {
+        setItem(documentLocalSaveKey, {
+          ...document,
+          tempSaveData: new Date(),
+        });
+
+        await request(`/${this.state.documentId}`, {
+          method: "PUT",
+          body: JSON.stringify(document),
+        });
+
+        if (this.state.document.title) {
+          if (this.state.document.title !== document.title) {
+            push({
+              type: null,
+              id: null,
+            });
+          }
+        }
+        removeItem(documentLocalSaveKey);
+      }, 500);
+    },
+  });
+
+  this.setState = async (nextState) => {
+    if (this.state.documentId !== nextState.documentId) {
+      documentLocalSaveKey = `temp-document-${this.state.documentId}`;
+      this.state = nextState;
+
+      if (this.state.documentId === "new") {
+        editor.setState(
+          this.state.document || {
+            title: "",
+            content: "",
+          }
+        );
+      } else {
+        await fetchDocument();
+      }
-
-      if (this.state.documentId === "new") {
-        editor.setState(
-          this.state.document || {
-            title: "",
-            content: "",
-          }
-        );
-      } else {
-        await fetchDocument();
-      }
+   function getEmptyDocument(){
+      return {title:'',content:''}
+   }
+
+      if (this.state.documentId === "new") {
+        editor.setState(
+          this.state.document || getEmptyDocument()
+        );
+      } else {
+        await fetchDocument();
+      }
-
-      if (this.state.documentId === "new") {
-        editor.setState(
-          this.state.document || {
-            title: "",
-            content: "",
-          }
-        );
-      } else {
-        await fetchDocument();
-      }
+   function getEmptyDocument(){
+      return {title:'',content:''}
+   }
+
+      if (this.state.documentId === "new") {
+        editor.setState(
+          this.state.document || getEmptyDocument()
+        );
+      } else {
+        await fetchDocument();
+      }
+
+      return;
+    }
+
+    this.state = nextState;
+    const document = this.state.document;
+    if (document) {
+      if (document.title === "제목없음") {
+        editor.setState({
+          title: "",
+          content: this.state.document.content,
+        });
+      } else {
+        editor.setState(
+          this.state.document || {
+            title: "",
+            content: "",
+          }
+        );
+      }
+    }
+
+    this.render();
+  };
+
+  this.render = () => {
+    $target.appendChild($editPage);
+  };
+
+  const fetchDocument = async () => {
+    const { documentId } = this.state;
+
+    if (this.state.documentId !== null) {
+      const document = await request(`/${documentId}`);
+
+      const getTempDocument = getItem(documentLocalSaveKey, {
+        title: "",
+        content: "",
+      });
+
+      this.setState({
+        ...this.state,
+        document,
+      });
+    }
+  };
+}
diff --git a/src/components/DocumentList.js b/src/components/DocumentList.js
@@ -0,0 +1,54 @@
+import { displayDocumentList } from "../utils/displayDocumentList.js";
+import { push } from "../utils/router.js";
+import { setItem, getItem, removeItem } from "../utils/storage.js";
+
+export default function PostList({ $target, initialState }) {
+  const $documentList = document.createElement("div");
+  $documentList.className = "document-list";
+  $target.appendChild($documentList);
+
+  this.state = initialState;
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+    this.render();
+  };
+
+  this.render = () => {
+    $documentList.innerHTML = `
+            <button name ="add-btn" data-id = "null" class="root-page-add" >페이지 추가</button>
+            <div class ="list-box">
+            ${displayDocumentList(this.state)}
+            </div>
+        `;
+  };
+
+  this.render();
+
+  $documentList.addEventListener("click", (e) => {
+    const { target } = e;
+    const element = target.closest("[name]");
-  $documentList.addEventListener("click", (e) => {
-    const { target } = e;
-    const element = target.closest("[name]");
+  $documentList.addEventListener("click", ({target}) => {
+    const element = target.closest("[name]");
-  $documentList.addEventListener("click", (e) => {
-    const { target } = e;
-    const element = target.closest("[name]");
+  $documentList.addEventListener("click", ({target}) => {
+    const element = target.closest("[name]");
+
+    if (element) {
+      const id = element.dataset.id;
-      const id = element.dataset.id;
+      const {id} = element.dataset;
-      const id = element.dataset.id;
+      const {id} = element.dataset;
+      const listToggleState = `isOpened-${id}`;
+      const name = element.getAttribute("name");
+      if (target.className === "toggle-btn") {
+        const getToggleState = getItem(listToggleState);
+        getToggleState
+          ? removeItem(listToggleState)
+          : setItem(listToggleState, "block");
+        this.render();
+
+        return;
+      }
+
+      if (name) {
+        push({
+          type: name,
+          id,
+        });
+      }
+    }
+  });
+}
diff --git a/src/components/DocumentPage.js b/src/components/DocumentPage.js
@@ -0,0 +1,36 @@
+import DocumentList from "./DocumentList.js";
+import { request } from "../api/api.js";
+import Header from "./Header.js";
+import { listRoute } from "../utils/router.js";
+
+//Sidebar
+export default function documentPage({ $target }) {
+  const $documentPage = document.createElement("div");
+  $documentPage.className = "document-page";
+
+  new Header({
+    $target: $documentPage,
+    initialState: "주다현",
+  });
+
+  const documentList = new DocumentList({
+    $target: $documentPage,
+    initialState: [],
+  });
+
+  const fetchDocuments = async () => {
+    const documents = await request("/");
+    documentList.setState(documents);
+  };
+
+  this.render = async () => {
+    await fetchDocuments();
+    $target.prepend($documentPage);
+  };
+
+  this.route = () => {
+    this.setState();
+  };
+
+  listRoute(() => fetchDocuments());
+}
diff --git a/src/components/Editor.js b/src/components/Editor.js
@@ -0,0 +1,48 @@
+export default function Editor({
+  $target,
+  initialState = {
+    titile: "",
+    content: "",
+  },
+  onEditing,
+}) {
+  const $editor = document.createElement("div");
+  $editor.className = "editor";
+  $target.appendChild($editor);
+  let isinitialize = false;
+
+  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();
+  };
+
+  this.render = () => {
+    if (!isinitialize) {
+      $editor.innerHTML = `
+              <input type ="text" name = "title" class="editor-title" placeholder ="제목없음" value = "${this.state.title}"/>
+              <textarea name ="content" class="editor-content" placeholder ="여기에 내용을 입력해 주세요.">${this.state.content}</textarea>
+          `;
+      isinitialize = true;
+    }
+  };
+
+  this.render();
+
+  $editor.addEventListener("keypress", (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/components/Header.js b/src/components/Header.js
@@ -0,0 +1,23 @@
+import { push } from "../utils/router.js";
+
+export default function Header({ $target, initialState }) {
+  const $header = document.createElement("h3");
+  $target.appendChild($header);
+  this.state = initialState;
+
+  this.render = () => {
+    $header.innerHTML = `🧡 ${this.state}'s Notion 🧡`;
+  };
+
+  this.render();
+
+  $header.addEventListener("click", (e) => {
+    const { target } = e;
+    if (target) {
+      push({
+        type: "header",
+        id: null,
+      });
+    }
+  });
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,5 @@
+import App from "./App.js";
+
+const $target = document.querySelector("#app");
+
+new App({ $target });
diff --git a/src/pages/MainPage.js b/src/pages/MainPage.js
@@ -0,0 +1,14 @@
+export default function MainPage({ $target, initialState }) {
+  const $mainPage = document.createElement("div");
+  $mainPage.className = "main-page";
+
+  this.state = initialState;
+
+  $mainPage.innerHTML = `<div class ="main-title">${this.state}님, Notion에 오신 것을 환영합니다.</div>
+
+  <div class="main-content">문서를 추가하여 작업을 시작해보세요</div>`;
+
+  this.render = () => {
+    $target.appendChild($mainPage);
+  };
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		ApiKey.js
Copy link Member DongjaJ Jul 9, 2023 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. p5: 이거는 혹시 무슨 이유로 추가하셨나요?? Copy link Member yohanpro Jul 10, 2023 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. apiKey가 여기서 노션 api에 접근하기 위한 auth인데 gitignore로 지금 감춰놨습니다. 여기 github 프로젝트에서는 다른 사람이 확인할수 없으므로 포함시켜주는게 맞습니다. @judahhh 만약 감추고 싶다면 배포된 페이지 링크라도 있어야해요.