prgrms-fe-devcourse · hyesung99 · Jun 29, 2023 · Jun 29, 2023 · Jun 29, 2023 · Jun 29, 2023
diff --git a/index.html b/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <title>Notion Clone Site</title>
+    <link rel="stylesheet" href="/src/style/style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="This is a text editor made with vanilla JavaScript for learning SPA methods and components.
+    "
+    />
+    <meta name="keyword" content="HTML, meta, tag, element, reference" />
+    <meta charset="UTF-8" />
+    <meta name="author" content="sungbird" />
+  </head>
+  <body>
+    <main id="app"></main>
+    <script src="/src/main.js" type="module"></script>
+  </body>
+</html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,130 @@
+import Component from "./core/Component.js";
+import { DocumentTreeComponent, EditorComponent } from "./Component/index.js";
+import { getDocumentTree } from "./service/index.js";
+import {
+  addDocumentButtonClickEvnet,
+  documentLinkClickEvent,
+  deleteDocumentButtonClickEvent,
+  documentInputChangeEvent,
+  textareaKeyupEvent,
+  titleKeyupEvent,
+  titleFocusoutEvent,
+  textareaFocusoutEvent,
+} from "./events/index.js";
+import { Document } from "./domain/index.js";
+import { initDocument } from "./constants.js/constants.js";
+
+export default class App extends Component {
+  async render() {
+    this.$target.innerHTML = `
+      <aside id='documentTree'></aside>
+      <section id='editor'></section>
+    `;
+
+    const $documentTree = this.$target.querySelector("#documentTree");
+    const $editor = this.$target.querySelector("#editor");
+    this.documentTree = new DocumentTreeComponent({
+      $target: $documentTree,
+      initialState: await getDocumentTree(),
+      events: [
+        {
+          action: "click",
+          tag: "a",
+          target: "a",
+          callback: ({ target, event }) =>
+            documentLinkClickEvent({
+              event,
+              app: this,
+              component: this.editor,
+              url: target.href,
+            }),
+        },
+        {
+          action: "click",
+          tag: ".addDocumentButton",
+          target: "li",
+          callback: ({ event, target }) =>
+            addDocumentButtonClickEvnet({
+              event,
+              target,
+              documentTree: this.documentTree,
+            }),
+        },
+        {
+          action: "click",
+          tag: ".deleteDocumentButton",
+          target: "li",
+          callback: async ({ target }) =>
+            deleteDocumentButtonClickEvent({
+              documentTree: this.documentTree,
+              editor: this.editor,
+              target,
+            }),
+        },
+        {
+          action: "change",
+          tag: "input",
+          target: "li",
+          callback: async ({ event, target }) =>
+            documentInputChangeEvent({
+              event,
+              documentTree: this.documentTree,
+              target,
+            }),
+        },
+      ],
+    });
+
+    this.editor = new EditorComponent({
+      $target: $editor,
+      initialState: new Document(initDocument),
+      events: [
+        {
+          action: "keyup",
+          tag: ".textarea",
+          target: ".textarea",
+          callback: ({ target }) => {
+            textareaKeyupEvent({
+              title: this.editor.state.title,
+              content: target.innerHTML,
+            });
+          },
+        },
+        {
+          action: "keyup",
+          tag: ".title",
+          target: ".title",
+          callback: ({ target }) => {
+            titleKeyupEvent({
+              title: target.innerHTML,
+              content: this.state.content,
+            });
+          },
+        },
+        {
+          action: "focusout",
+          tag: ".title",
+          target: ".title",
+          callback: async ({ target }) => {
+            titleFocusoutEvent({
+              documentTree: this.documentTree,
+              editor: this.editor,
+              title: target.innerHTML,
+            });
+          },
+        },
+        {
+          action: "focusout",
+          tag: ".textarea",
+          target: ".textarea",
+          callback: ({ target }) => {
+            textareaFocusoutEvent({
+              editor: this.editor,
+              content: target.innerHTML,
+            });
+          },
+        },
+      ],
+    });
+  }
+}
diff --git a/src/Component/DocumentTree.component.js b/src/Component/DocumentTree.component.js
@@ -0,0 +1,37 @@
+import Component from "../core/Component.js";
+import { DocumentTreeBranch } from "../domain/index.js";
+import { DocumentTreeBranchComponent } from "./index.js";
+
+export default class DocumentTreeComponent extends Component {
+  render() {
+    this.$target.innerHTML = `
+    <div class="rootUl">
+    </div>
+    <button class="addRootDocumentButton addDocumentButton">+</button>
+    `;
+
+    const $rootUl = this.$target.querySelector(".rootUl");
+    this.state.documentTree.forEach((doc) => {
+      this.getTemplate({
+        $target: $rootUl,
+        doc,
+      });
+    });
+  }
+
+  getTemplate({ $target, doc }) {
+    new DocumentTreeBranchComponent({
+      $target,
+      initialState: new DocumentTreeBranch(doc),
+      events: [],
+    });
+
+    if (doc.documents.length > 0) {
+      const $ul = document.createElement("ul");
+      $target.appendChild($ul);
+      doc.documents.forEach((childDoc) => {
+        this.getTemplate({ $target: $ul, doc: childDoc });
+      });
+    }
+  }
+}
diff --git a/src/Component/DocumentTreeBranch.component.js b/src/Component/DocumentTreeBranch.component.js
@@ -0,0 +1,18 @@
+import Component from "../core/Component.js";
+
+export default class DocumentTreeBranchComponent extends Component {
+  render() {
+    const $li = document.createElement("li");
+    $li.id = this.state.id;
+    $li.innerHTML = `
+      <span class="documentLicontainer">
+          <a class="documentLink" href="/documents/${this.state.id}">${this.state.title}</a>
+          <span class="documentTreeButtonContainer">
+            <button class="addDocumentButton" data-id="${this.state.id}">+</button>
+            <button class="deleteDocumentButton" data-id="${this.state.id}">x</button>
+          </span>
+        </span> 
+    `;
+    this.$target.appendChild($li);
+  }
+}
diff --git a/src/Component/Editor.component.js b/src/Component/Editor.component.js
@@ -0,0 +1,24 @@
+import Component from "../core/Component.js";
+
+export default class EditorComponent extends Component {
+  render() {
+    this.$target.innerHTML = `
+    <div class="editorContainer">
+      <div class="title" ${
+        this.state.id === -1
+          ? `contentEditable="false"`
+          : `contentEditable="true"`
+      } name="title">
+        ${this.state.title || "제목을 입력하세요"}
+      </div>
+      <div class="textarea" ${
+        this.state.id === -1
+          ? `contentEditable="false"`
+          : `contentEditable="true"`
+      } name="textarea">
+        ${this.state.content || ""}
+      </div>
+    </div>
+    `;
+  }
+}
diff --git a/src/Component/index.js b/src/Component/index.js
@@ -0,0 +1,3 @@
+export { default as DocumentTreeBranchComponent } from "./DocumentTreeBranch.component.js";
+export { default as DocumentTreeComponent } from "./DocumentTree.component.js";
+export { default as EditorComponent } from "./Editor.component.js";
diff --git a/src/api.js b/src/api.js
@@ -0,0 +1,13 @@
+export const API_END_POINT = "https://kdt-frontend.programmers.co.kr";
+
+export const request = async (url, options = {}) => {
+  const res = await fetch(`${API_END_POINT}${url}`, {
+    ...options,
+    headers: {
+      "x-username": "sungbird",
+      "Content-Type": "application/json",
+    },
+  });
+
+  return await res.json();
+};
diff --git a/src/constants.js/constants.js b/src/constants.js/constants.js
@@ -0,0 +1,8 @@
+export const initDocument = {
+  id: -1,
+  title: "환영합니다!",
+  content: "문서를 선택해주세요",
+  documents: [],
+  createdAt: "000-000",
+  updatedAt: "000-000",
+};
diff --git a/src/core/Component.js b/src/core/Component.js
@@ -0,0 +1,77 @@
+export default class Component {
+  #$target;
+  #state;
+  #events;
+  #allowedProperties = ["$target", "initialState", "events"];
+
+  constructor(properties) {
+    this.validate(properties);
+    this.#$target = properties.$target;
+    this.#state = properties.initialState;
+    this.#events = properties.events;
+    this.setEvent(this.#events);
+    this.render();
+  }
+
+  validate(properties) {
+    if (typeof properties !== "object")
+      throw new Error(
+        `Component: properties는 object 타입이어야 합니다. 현재타입 : ${typeof properties}`
+      );
+
+    Object.keys(properties).forEach((propertie) => {
+      if (!this.#allowedProperties.includes(propertie)) {
+        throw new Error(
+          `Component: ${propertie} 프로퍼티는 필수로 포함되어야 합니다.`
+        );
+      }
+    });
+
+    const { $target, initialState, events } = properties;
+
+    if (typeof $target !== "object") {
+      throw new Error(
+        `Component: $target은 object 타입이어야 합니다. 현재타입 : ${typeof $target}`
+      );
+    }
+
+    if (typeof initialState !== "object") {
+      throw new Error(
+        `Component: initialState는 object 타입이어야 합니다. 현재타입 : ${typeof initialState}`
+      );
+    }
+
+    if (!Array.isArray(events)) {
+      throw new Error(
+        `Component: events는 Array 타입이어야 합니다. 현재타입 : ${typeof events}`
+      );
+    }
+  }
+
+  setEvent(events) {
+    if (events) events.forEach((event) => this.setEventDelegation(event));
+  }
+
+  render() {}
+
+  setEventDelegation({ action, tag, target, callback }) {
+    this.#$target.addEventListener(action, (event) => {
+      if (event.target.closest(`${tag}`)) {
+        callback({ event, target: event.target.closest(`${target}`) });
+      }
+    });
+  }
+
+  get state() {
+    return this.#state;
+  }
+
+  set state(newState) {
+    this.#state = newState;
+    this.render();
+  }
+
+  get $target() {
+    return this.#$target;
+  }
+}
diff --git a/src/core/DomainModel.js b/src/core/DomainModel.js
@@ -0,0 +1,55 @@
+export default class DomainModel {
+  _properties;
+  _domainName;
+  allowedProperties;
+
+  constructor(properties, domainName) {
+    this._properties = properties;
+    this._domainName = domainName;
+  }
+
+  clone(newPropertie) {
+    return new this.constructor(
+      Object.assign({}, this._properties, newPropertie)
+    );
+  }
+
+  validate() {
+    if (typeof this._properties !== "object") {
+      throw new Error(
+        `${
+          this._domainName
+        }: properties는 object 타입이어야 합니다. 현재타입 : ${typeof properties}`
+      );
+    }
+
+    Object.keys(this._properties).forEach((propertie) => {
+      if (!Object.keys(this.allowedProperties).includes(propertie)) {
+        throw new Error(
+          `${this._domainName}: ${propertie} 프로퍼티는 필수로 포함되어야 합니다.`
+        );
+      }
+    });
+
+    Object.keys(this._properties).forEach((propertie) => {
+      if (this.allowedProperties[propertie] === "array") {
+        if (!Array.isArray(this._properties[propertie])) {
+          throw new Error(
+            `${
+              this._domainName
+            }: ${propertie} 프로퍼티는 array타입이어야 합니다. 현재타입 : ${typeof this
+              ._properties[propertie]}`
+          );
+        }
+      } else if (
+        typeof this._properties[propertie] !== this.allowedProperties[propertie]
+      ) {
+        throw new Error(
+          `${this._domainName}: ${propertie} 프로퍼티는 ${
+            this.allowedProperties[propertie]
+          } 타입이어야 합니다. 현재타입 : ${typeof this._properties[propertie]}`
+        );
+      }
+    });
+  }
+}