prgrms-fe-devcourse · jgjgill · Jun 30, 2023 · Jul 1, 2023 · Jul 1, 2023 · Jul 1, 2023
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Jongtion</title>
+    <link rel="stylesheet" href="/src/styles/styles.css" />
+  </head>
+  <body>
+    <main id="app"></main>
+    <script src="/src/main.js" type="module"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "FEDC4-5_Project_Notion_VanillaJS",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://github.com/prgrms-fe-devcourse/FEDC4-5_Project_Notion_VanillaJS.git",
+  "author": "jgjgill <[email protected]>",
+  "license": "MIT",
+  "scripts": {
+    "dev": "yarn serve -s"
+  },
+  "devDependencies": {
+    "serve": "^14.2.0"
+  }
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,147 @@
+import { getDocuments, putDocument } from "./api/document.js";
+import Layout from "./components/common/Layout.js";
+import { PATH } from "./constants/path.js";
+import { initRouter, push } from "./utils/route.js";
+import {
+  TrieDocument,
+  addChildDocument,
+  editTitleDocument,
+  insertAllDocument,
+  findChildDocuments,
+  removeDocument,
+} from "./utils/document.js";
+import NotFound from "./components/common/NotFound.js";
+import { debounce } from "./utils/debounce.js";
+import DocumentList from "./components/domain/document/DocumentList.js";
+import DocumentEditor from "./components/domain/document/DocumentEditor.js";
+import Home from "./components/domain/home/Home.js";
+import RecurDocumentList from "./components/domain/document/template/RecurDocumentList.js";
+
+/**
+ * @param {{appElement: Element | null}}
+ */
+
+export default function App({ appElement }) {
+  if (!new.target) return new App(...arguments);
+
+  const wrapperContainer = document.createElement("div");
+  const leftContainerElement = document.createElement("div");
+  const rightContainerEleement = document.createElement("div");
+  const leftListElement = document.createElement("div");
+
+  wrapperContainer.className = "wrapper-container";
+  leftContainerElement.className = "left-container";
+  rightContainerEleement.className = "right-container";
+  leftListElement.className = "left-list-container";
+
+  const trie = new TrieDocument();
+
+  const processEdit = debounce(async (documentId, docunemt) => {
+    await putDocument({ documentId, data: docunemt });
+  }, 1000);
+
+  this.state = [];
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+    documentListComponent.render();
+  };
+
+  this.editorSetState = (nextState) => {
+    this.state = nextState;
+    documentEditorComponent.render();
+  };
+
+  const layoutComponent = new Layout({ parentElement: leftContainerElement });
+
+  const documentListComponent = new DocumentList({
+    parentElement: leftListElement,
+    renderItemComponent: (parentElement) => {
+      RecurDocumentList({
+        rootDocuments: this.state,
+        parentElement,
+        childRender: (parentId, newDocument) => {
+          const nextState = addChildDocument(parentId, this.state, newDocument);
+          this.setState(nextState);
+        },
+        removeRender: (documentId) => {
+          const newState = removeDocument(documentId, this.state);
+          const stringDocumentId = window.location.pathname.split("/")[2];
+
+          Number(stringDocumentId) !== documentId
+            ? this.editorSetState(newState)
+            : push(PATH.HOME);
+
+          this.setState(newState);
+        },
+        depthCount: 1,
+      });
+    },
+    onAddButtonClick: (newDocument) => {
+      const nextState = [...this.state, newDocument];
+      this.setState(nextState);
+    },
+  });
+
+  const homeComponent = new Home({
+    parentElement: rightContainerEleement,
+    search: (text) => trie.search(text),
+  });
+
+  const documentEditorComponent = new DocumentEditor({
+    parentElement: rightContainerEleement,
+    onEditing: (document) => {
+      const { documentId, title, isChangeTitle } = document;
+
+      if (isChangeTitle) {
+        const newState = editTitleDocument(documentId, this.state, title);
+        this.setState(newState);
+      }
+
+      processEdit(documentId, document);
+    },
+    getChildDocuments: (documentId) =>
+      findChildDocuments(this.state, documentId),
+  });
+
+  const notFoundComponent = new NotFound({
+    parentCompoent: rightContainerEleement,
+  });
+
+  window.addEventListener("popstate", () => {
+    this.route();
+  });
+
+  initRouter(() => this.route());
+
+  this.init = async () => {
+    appElement.append(wrapperContainer);
+    wrapperContainer.append(leftContainerElement, rightContainerEleement);
+
+    layoutComponent.render();
+    leftContainerElement.append(leftListElement);
+
+    const newState = await getDocuments();
+    this.setState(newState);
+
+    insertAllDocument(newState, (title, id) => trie.insert(title, id));
+
+    this.route();
+  };
+
+  this.route = () => {
+    const { pathname } = window.location;
+    rightContainerEleement.innerHTML = ``;
+
+    if (pathname === PATH.HOME) {
+      trie.reset();
+      insertAllDocument(this.state, (title, id) => trie.insert(title, id));
+
+      homeComponent.render();
+    } else if (pathname.split("/")[1] === "documents") {
+      documentEditorComponent.render();
+    } else {
+      notFoundComponent.render();
+    }
+  };
+}
diff --git a/src/api/document.js b/src/api/document.js
@@ -0,0 +1,30 @@
+import { PATH } from "../constants/path.js";
+import { request } from "./request.js";
+
+export const postDocument = async (data) => {
+  return await request(PATH.DOCUMENTS, {
+    method: "POST",
+    body: JSON.stringify(data),
+  });
+};
+
+export const getDocuments = async () => {
+  return await request(PATH.DOCUMENTS);
+};
+
+export const getDocument = async (documentId) => {
+  return await request(`${PATH.DOCUMENTS}/${documentId}`);
+};
+
+export const putDocument = async ({ documentId, data }) => {
+  return await request(`${PATH.DOCUMENTS}/${documentId}`, {
+    method: "PUT",
+    body: JSON.stringify(data),
+  });
+};
+
+export const deleteDocument = async (documentId) => {
+  return await request(`${PATH.DOCUMENTS}/${documentId}`, {
+    method: "DELETE",
+  });
+};
diff --git a/src/api/request.js b/src/api/request.js
@@ -0,0 +1,25 @@
+import { PATH } from "../constants/path.js";
+import { push } from "../utils/route.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": "jgjgill",
+      },
+    });
+
+    if (res.ok) {
+      return await res.json();
+    }
+
+    throw new Error("API 에러가 발생했습니다!");
+  } catch (err) {
+    alert(err.message);
+    push(PATH.HOME);
+  }
+};
diff --git a/src/components/common/AddButton.js b/src/components/common/AddButton.js
@@ -0,0 +1,36 @@
+import Tooltip from "./Tooltip.js";
+
+export default function AddButton({
+  parentElement,
+  onClick,
+  text,
+  tooltipText,
+}) {
+  const buttonElement = document.createElement("button");
+  buttonElement.className = "add-button";
+
+  const tooltipElement = new Tooltip({ text: tooltipText });
+
+  buttonElement.addEventListener("click", () => {
+    onClick();
+  });
+
+  buttonElement.addEventListener("mouseover", (e) => {
+    if (!e.target.closest(".text")) return;
+
+    tooltipElement.toggle(e.target);
+  });
+
+  buttonElement.addEventListener("mouseout", (e) => {
+    if (!e.target.closest(".text")) return;
+
+    tooltipElement.toggle(e.target);
+  });
+
+  this.render = () => {
+    parentElement.append(buttonElement);
+    buttonElement.innerHTML = tooltipElement.render(
+      `<div class="text">${text}</div>`
+    );
+  };
+}
diff --git a/src/components/common/Layout.js b/src/components/common/Layout.js
@@ -0,0 +1,21 @@
+import { PATH } from "../../constants/path.js";
+import { push } from "../../utils/route.js";
+
+export default function Layout({ parentElement }) {
+  if (!new.target) return new Layout(...arguments);
+
+  const containerElement = document.createElement("div");
+
+  containerElement.addEventListener("click", (e) => {
+    if (e.target.closest("h1")) {
+      push(PATH.HOME);
+    }
+  });
+
+  this.render = () => {
+    parentElement.append(containerElement);
+    containerElement.innerHTML = `
+      <h1 class="logo">Jongtion</h1>
+    `;
+  };
+}
diff --git a/src/components/common/NotFound.js b/src/components/common/NotFound.js
@@ -0,0 +1,22 @@
+import { PATH } from "../../constants/path.js";
+import { push } from "../../utils/route.js";
+
+export default function NotFound({ parentCompoent }) {
+  const containerElement = document.createElement("div");
+  containerElement.className = "not-found-container";
+
+  containerElement.addEventListener("click", (e) => {
+    if (!e.target.closest(".home-button")) return;
+
+    push(PATH.HOME);
+  });
+
+  this.render = () => {
+    parentCompoent.append(containerElement);
+
+    containerElement.innerHTML = `
+      <h2 class="not-found-title">잘못된 경로입니다!</h2>
+      <button class="home-button">홈으로 이동하기</button>
+    `;
+  };
+}
diff --git a/src/components/common/Tooltip.js b/src/components/common/Tooltip.js
@@ -0,0 +1,14 @@
+export default function Tooltip({ text }) {
+  this.toggle = (targetElement) => {
+    targetElement.nextElementSibling.classList.toggle("toggle");
+  };
+
+  this.render = (content) => {
+    return `
+    <div class="tooltip">
+      ${content}
+      <div class="tooltip-text">${text}</div>
+    </div>
+    `;
+  };
+}