#2/refactor/function to class

src/components/Alert.js

@@ -1,45 +1,53 @@
 import { $create } from "../../utils/dom.js";
 
-export default function Alert({ $target, initState }) {
-  const $alertDiv = $create("div");
-  $target.appendChild($alertDiv);
-  $alertDiv.className = "alert";
-
-  const $alertTopDiv = $create("div");
-  $alertDiv.appendChild($alertTopDiv);
-  $alertTopDiv.className = "alert-top-div";
-
-  const $alertText = $create("div");
-  $alertDiv.appendChild($alertText);
-
-  const $alertCloseButton = $create("div");
-  $alertTopDiv.appendChild($alertCloseButton);
-  $alertCloseButton.className = "alert-close-button";
-  $alertCloseButton.textContent = "X";
-
-  this.state = initState;
-
-  this.setState = (nextState) => {
+export default class Alert {
+  constructor({ $target, initialState }) {
+    const $alertDiv = $create("div");
+    $alertDiv.className = "alert";
+
+    const $alertTopDiv = $create("div");
+    $alertDiv.appendChild($alertTopDiv);
+    $alertTopDiv.className = "alert-top-div";
+
+    const $alertText = $create("div");
+    $alertDiv.appendChild($alertText);
+
+    const $alertCloseButton = $create("div");
+    $alertTopDiv.appendChild($alertCloseButton);
+    $alertCloseButton.className = "alert-close-button";
+    $alertCloseButton.textContent = "X";
+
+    this.state = initialState;
+    this.$alertDiv = $alertDiv;
+    this.$alertText = $alertText;
+    this.$alertCloseButton = $alertCloseButton;
+    this.setEvent();
+    $target.appendChild($alertDiv);
+  }
+
+  setEvent() {
+    this.$alertCloseButton.addEventListener("click", () => {
+      this.$alertDiv.style.display = "none";
+    });
+  }
+
+  setState(nextState) {
     this.state = nextState;
     this.render();
-  };
+  }
 
-  this.render = () => {
+  render() {
     const { text, ok } = this.state;
 
-    $alertText.textContent = text;
-    $alertDiv.style.backgroundColor = ok ? "burlywood" : "brown";
-    $alertDiv.style.display = "flex";
+    this.$alertText.textContent = text;
+    this.$alertDiv.style.backgroundColor = ok ? "burlywood" : "brown";
+    this.$alertDiv.style.display = "flex";
 
     // 오류가 발생한 경우 자동으로 닫히지 않음
     if (ok) {
       setTimeout(() => {
-        $alertDiv.style.display = "none";
+        this.$alertDiv.style.display = "none";
       }, 2000);
     }
-  };
-
-  $alertCloseButton.addEventListener("click", () => {
-    $alertDiv.style.display = "none";
-  });
+  }
 }

src/components/App.js

@@ -4,91 +4,107 @@ import SideBar from "./SideBar.js";
 import Alert from "./Alert.js";
 import { getDocs } from "../request/index.js";
 
-export default function App({ $target, initialState }) {
-  this.state = initialState;
-
-  const myAlert = new Alert({
-    $target,
-    initState: {
-      text: "안녕하세요",
-      ok: true,
-    },
-  });
+export default class App {
+  constructor({ $target, initialState }) {
+    const myAlert = new Alert({
+      $target,
+      initState: {
+        text: "안녕하세요",
+        ok: true,
+      },
+    });
 
-  const sideBar = new SideBar({
-    $target,
-    initialState: this.state.root,
-    onDocumentClick: () => {
-      this.route();
-    },
-    displayAlert: ({ text, ok }) => {
-      myAlert.setState({ text, ok });
-    },
-  });
+    const sideBar = new SideBar({
+      $target,
+      initialState: initialState.root,
+      onDocumentClick: () => {
+        this.route();
+      },
+      displayAlert: ({ text, ok }) => {
+        myAlert.setState({ text, ok });
+      },
+    });
 
-  const $contentContainer = $create("div");
-  $target.appendChild($contentContainer);
-  $contentContainer.classList.add("content-container");
+    const $contentContainer = $create("div");
+    $contentContainer.classList.add("content-container");
 
-  const $editor = $create("div");
-  $contentContainer.appendChild($editor);
-  $editor.classList.add("editor");
+    const $editor = $create("div");
+    $editor.classList.add("editor");
+    $contentContainer.appendChild($editor);
 
-  const editor = new Editor({
-    $target: $editor,
-    initialState: {
-      info: {
-        id: "",
-        title: "",
-        content: "",
-        documents: [],
-        createdAt: "",
-        updatedAt: "",
+    const editor = new Editor({
+      $target: $editor,
+      initialState: {
+        info: {
+          id: "",
+          title: "",
+          content: "",
+          documents: [],
+          createdAt: "",
+          updatedAt: "",
+        },
+        flatRoot: initialState.flatRoot,
+      },
+      FuncAppRoute: () => {
+        this.route();
       },
-      flatRoot: this.state.flatRoot,
-    },
-    FuncAppRoute: () => {
+      displayAlert: ({ text, ok }) => {
+        myAlert.setState({ text, ok });
+      },
+    });
+
+    this.state = initialState;
+    this.myAlert = myAlert;
+    this.sideBar = sideBar;
+    this.editor = editor;
+    this.setEvent();
+    this.route();
+    $target.appendChild($contentContainer);
+  }
+
+  setEvent() {
+    window.addEventListener("popstate", () => {
       this.route();
-    },
-    displayAlert: ({ text, ok }) => {
-      myAlert.setState({ text, ok });
-    },
-  });
+    });
+  }
 
   // 제목 검색을 위해 depth 1로 펼치기
-  function makeFlatState(input) {
+  makeFlatState(input) {
     return input.reduce((accArr, docElement) => {
       const { id, title, documents } = docElement;
 
       accArr = [...accArr, { id, title }];
       if (documents.length) {
-        accArr = [...accArr, ...makeFlatState(documents)];
+        accArr = [...accArr, ...this.makeFlatState(documents)];
       }
       return accArr;
     }, []);
   }
 
-  this.setState = async (documentId) => {
+  async setState(documentId) {
     try {
       const root = await getDocs();
 
       this.state = {
         ...this.state,
         root,
-        flatRoot: makeFlatState(root),
+        flatRoot: this.makeFlatState(root),
       };
 
-      sideBar.setState(this.state.root);
-      editor.setState({
+      this.sideBar.setState(this.state.root);
+      this.editor.setState({
         documentId,
         flatRoot: this.state.flatRoot,
       });
     } catch (e) {
-      myAlert.setState({ text: "전체 문서를 가져오지 못했습니다.", ok: false });
+      this.myAlert.setState({
+        text: "전체 문서를 가져오지 못했습니다.",
+        ok: false,
+      });
     }
-  };
+  }
 
-  this.route = () => {
+  route() {
     const { pathname } = location;
 
     if (pathname.indexOf("/documents") === 0) {
@@ -98,9 +114,5 @@ export default function App({ $target, initialState }) {
       // /documents로 시작안할 때
       this.setState(null);
     }
-  };
-
-  this.route();
-
-  window.addEventListener("popstate", this.route);
+  }
 }

src/components/Button.js

@@ -1,14 +1,22 @@
 import { $create } from "../../utils/dom.js";
 
-export default function Button({ $target, initText, onClick }) {
-  const $button = $create("button");
-  $target.appendChild($button);
+export default class Button {
+  constructor({ $target, initText, onClick }) {
+    const $button = $create("button");
 
-  this.render = () => {
-    $button.innerText = initText;
-  };
+    this.$button = $button;
+    this.text = initText;
+    this.onClick = onClick;
+    this.setEvent();
+    this.render();
+    $target.appendChild($button);
+  }
 
-  this.render();
+  setEvent() {
+    this.$button.addEventListener("click", this.onClick);
+  }
 
-  $button.addEventListener("click", onClick);
+  render() {
+    this.$button.innerText = this.text;
+  }
 }