Merge remote-tracking branch 'todo-list/main' into yoonseo_working

Author: bgyoons

src/App.ts

@@ -2,18 +2,20 @@ import Header from "./components/Header.js";
 import TodoForm from "./components/TodoForm.js";
 import TodoList from "./components/TodoList.js";
 import TodoCount from "./components/TodoCount.js";
-import { setItem } from "./utils/storage.js";
+import { setItem, getItem } from "./utils/storage.js";
 import { TodoCount as TodoCnt, TodoList as TodoLi } from "./types/todo.js";
-
 export default class App {
   private readonly todoList: TodoList;
   private readonly todoCount: TodoCount;
+  private readonly initialState: TodoLi;
+  private readonly initialCount: TodoCnt;
 
   constructor(
     private readonly $target: HTMLElement,
-    private readonly initialState: TodoLi,
-    private readonly initialCount: TodoCnt
   ) {
+    this.initialState = getItem("todo", []);
+    this.initialCount = getItem("count", { total: 0, done: 0 });
+
     new Header($target, "Todo List");
 
     new TodoForm(
@@ -29,11 +31,11 @@ export default class App {
 
     this.todoList = new TodoList(
       $target,
-      initialState,
+      this.initialState,
       (state: TodoLi) => this.#updateCount(state)
     );
 
-    this.todoCount = new TodoCount($target, initialCount);
+    this.todoCount = new TodoCount($target, this.initialCount);
   }
 
   // 카운트 업데이트

src/components/TodoForm.ts

@@ -1,33 +1,31 @@
 
 export default class TodoForm {
   private readonly $form = document.createElement("form");
-  private isInit = false;
 
   constructor(
     private readonly $target: HTMLElement,
     private readonly onSubmit: (text: string) => void
   ) {
     $target.appendChild(this.$form);
     this.render();
+    this.setEvent();
   }
 
   private render() {
     this.$form.innerHTML = `
-      <input type="text" placeholder="할 일을 입력하세요" name="todo" />
+      <input type="text" placeholder="할 일을 입력하세요" name="todo" minLength="2" autocomplete="off" />
       <button>추가</button>
     `;
+  };
 
-    if (this.isInit) return;
-
+  private setEvent() {
     this.$form.addEventListener("submit", (e) => {
       e.preventDefault();
       const $todo = this.$form.querySelector<HTMLInputElement>("input[name=todo]");
       if (!$todo) return;
       const text = $todo.value;
-      if (text.length > 1) {
-        $todo.value = "";
-        this.onSubmit(text);
-      } else alert("두 글자 이상 입력해주세요");
+      $todo.value = "";
+      this.onSubmit(text);
     });
-  };
+  }
 }

src/components/TodoList.ts

@@ -1,5 +1,4 @@
 import { setItem } from "../utils/storage.js";
-import validation from "../utils/validation.js";
 import { TodoList as TodoLi } from "../types/todo.js";
 
 export default class TodoList {
@@ -12,12 +11,37 @@ export default class TodoList {
     private readonly updateCount: (state: TodoLi) => void
   ) {
     $target.appendChild(this.$todoList);
+    this.state = initialState;
+    this.render();
+    this.setEvent();
+  }
 
-    if (Array.isArray(initialState)) this.state = initialState;
-    else this.state = [];
-
+  setState(nextState: TodoLi) {
+    this.state = nextState;
+    setItem("todo", JSON.stringify(nextState));
+    this.updateCount(nextState);
     this.render();
+  };
+
+  private render() {
+    this.$todoList.innerHTML = `
+      <ul>
+        ${this.state
+        .map(
+          ({ text, isCompleted }, index) => `
+              <li data-index=${index} class="todoList ${isCompleted ? "completed" : ""
+            }">
+                ${text}
+                <button class="deleteBtn">삭제</button>
+              </li>
+            `
+        )
+        .join("")}
+      </ul>
+    `;
+  };
 
+  private setEvent() {
     this.$todoList.addEventListener("click", (e) => {
       const target = e.target as HTMLLIElement;
       const $li = target.closest("li");
@@ -43,30 +67,4 @@ export default class TodoList {
       }
     });
   }
-
-  setState(nextState: TodoLi) {
-    const newState = validation.state(nextState);
-    this.state = newState;
-    setItem("todo", JSON.stringify(newState));
-    this.updateCount(newState);
-    this.render();
-  };
-
-  private render() {
-    this.$todoList.innerHTML = `
-      <ul>
-        ${this.state
-        .map(
-          ({ text, isCompleted }, index) => `
-              <li data-index=${index} class="todoList ${isCompleted ? "completed" : ""
-            }">
-                ${text}
-                <button class="deleteBtn">삭제</button>
-              </li>
-            `
-        )
-        .join("")}
-      </ul>
-    `;
-  };
 }

src/main.ts

@@ -1,8 +1,3 @@
 import App from "./App.js";
-import { getItem } from "./utils/storage.js";
-
-const initialState = getItem("todo", []);
-const initialCount = getItem("count", { total: 0, done: 0 });
 const $app = document.querySelector<HTMLElement>("#app");
-
-$app && new App($app, initialState, initialCount);
+$app && new App($app);