[Mission5/이종길] Project_Notion_VanillaJS 과제

src/App.js

@@ -7,8 +7,10 @@ import { PATH } from "./constants/path.js";
 import { initRouter, push } from "./utils/route.js";
 import RecurDocumentList from "./components/template/RecurDocumentList.js";
 import {
+  TrieDocument,
   addChildDocument,
   editTitleDocument,
+  findAllDocument,
   removeDocument,
 } from "./utils/document.js";
 
@@ -25,21 +27,26 @@ export default function App({ appElement }) {
   leftContainerElement.className = "left-container";
   rightContainerEleement.className = "right-container";
 
+  const trie = new TrieDocument();
+
   let timer = null;
 
   this.state = [];
 
   this.setState = (nextState) => {
     this.state = nextState;
+    findAllDocument(this.state, (title, id) => trie.insert(title, id));
+
     documentListComponent.render();
   };
 
-  this.tempSetState = (nextState) => {
+  this.editorSetState = (nextState) => {
     this.state = nextState;
     documentEditorComponent.render();
   };
 
   const layoutComponent = new Layout({ appElement });
+
   const documentListComponent = new DocumentList({
     parentElement: leftContainerElement,
     renderItemComponent: (parentElement) => {
@@ -53,7 +60,7 @@ export default function App({ appElement }) {
         (documentId) => {
           const newState = removeDocument(documentId, this.state);
           if (Number(window.location.pathname.split("/")[2]) !== documentId) {
-            this.tempSetState(newState);
+            this.editorSetState(newState);
           }
 
           push(PATH.HOME);
@@ -67,7 +74,12 @@ export default function App({ appElement }) {
       this.setState(nextState);
     },
   });
-  const homeComponent = new Home({ parentElement: rightContainerEleement });
+
+  const homeComponent = new Home({
+    parentElement: rightContainerEleement,
+    search: (text) => trie.search(text),
+  });
+
   const documentEditorComponent = new DocumentEditor({
     parentElement: rightContainerEleement,
     onEditing: (document) => {

src/components/domain/Home.js

@@ -1,12 +1,80 @@
-export default function Home({ parentElement }) {
+import { PATH } from "../../constants/path.js";
+import { push } from "../../utils/route.js";
+import { getItem, setItem } from "../../utils/storage.js";
+
+export default function Home({ parentElement, search }) {
   if (!new.target) return new Home(...arguments);
 
   const containerElement = document.createElement("div");
 
+  let timer = null;
+
+  this.state = {
+    text: "",
+    list: [],
+  };
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+    this.render();
+  };
+
+  containerElement.addEventListener("input", (e) => {
+    if (!e.target.closest(".search-input")) return;
+
+    if (timer !== null) {
+      clearTimeout(timer);
+    }
+
+    timer = setTimeout(() => {
+      if (e.target.value === "") {
+        this.setState({ text: e.target.value, list: [] });
+        return;
+      }
+
+      const searchList = search(e.target.value);
+      this.setState({ text: e.target.value, list: searchList });
+    }, 1000);
+  });
+
+  containerElement.addEventListener("click", (e) => {
+    if (!e.target.closest("li")) return;
+
+    push(`${PATH.DOCUMENTS}/${e.target.dataset.id}`);
+    setItem("recent-search-list", [
+      ...getItem("recent-search-list", []),
+      { id: e.target.dataset.id, title: e.target.innerText },
+    ]);
+  });
+
   this.render = () => {
     parentElement.append(containerElement);
     containerElement.innerHTML = `
       <h1>Home 입니다.</h1>
+      <input placeholder="종션 전체 문서 검색" autofocus class="search-input" value="${
+        this.state.text
+      }" />
+      ${
+        this.state.list.length === 0 && this.state.text !== ""
+          ? `<p>${this.state.text}와(과) 일치하는 검색결과가 없습니다.</p>`
+          : `<ul>${this.state.list
+              .map(
+                (item) =>
+                  `<li data-id=${item.id}>${
+                    item.title === "" ? "제목 없음" : item.title
+                  }</li>`
+              )
+              .join("")}
+            </ul>`
+      }
+      <div>
+      <h3>최근 검색어 목록</h3>
+      <ul>
+      ${getItem("recent-search-list", [])
+        .map((item) => `<li data-id="${item.id}">${item.title}</li>`)
+        .join("")}
+      </ul>
+      </div>
     `;
   };
 

src/utils/document.js

@@ -64,3 +64,81 @@ export function editTitleDocument(documentId, state, documentTitle) {
 
   return tempState;
 }
+
+export function findAllDocument(state, temp) {
+  const stack = [];
+  const tempState = structuredClone(state);
+
+  for (const temp of tempState) {
+    stack.push(temp);
+  }
+
+  while (stack.length !== 0) {
+    const current = stack.pop();
+
+    temp(current.title ?? "", current.id);
+
+    for (const document of current.documents) {
+      stack.push(document);
+    }
+  }
+}
+
+function Node(value = "") {
+  this.value = value;
+  this.children = new Map();
+  this.isWord = false;
+  this.list = [];
+}
+
+export function TrieDocument() {
+  this.root = new Node();
+
+  this.insert = (string, id) => {
+    let currentNode = this.root;
+
+    for (const char of string) {
+      if (!currentNode.children.has(char)) {
+        currentNode.children.set(char, new Node(currentNode.value + char));
+      }
+      currentNode = currentNode.children.get(char);
+    }
+
+    currentNode.isWord = true;
+    currentNode.list.push({ title: string, id });
+  };
+
+  this.search = (value) => {
+    const queue = [];
+    const searchList = [];
+    let index = 0;
+    let currentNode = this.root;
+
+    for (const char of value) {
+      if (!currentNode.children.has(char)) {
+        return [];
+      }
+
+      currentNode = currentNode.children.get(char);
+    }
+
+    queue.push(currentNode);
+
+    while (index < queue.length) {
+      const currentNode = queue[index];
+      index += 1;
+
+      if (currentNode.isWord) {
+        for (const item of currentNode.list) {
+          searchList.push(item);
+        }
+      }
+
+      for (const [key, child] of currentNode.children) {
+        queue.push(child);
+      }
+    }
+
+    return searchList;
+  };
+}