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

Author: bgyoons

src/App.ts

@@ -3,38 +3,41 @@ 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 { TodoCount as TodoCnt, TodoItem } from "./types/todo.js";
+import { TodoCount as TodoCnt, TodoList as TodoLi } from "./types/todo.js";
 
 export default class App {
   private readonly todoList: TodoList;
   private readonly todoCount: TodoCount;
 
   constructor(
     private readonly $target: HTMLElement,
-    private readonly initialState: TodoItem[],
+    private readonly initialState: TodoLi,
     private readonly initialCount: TodoCnt
   ) {
-    new Header(this.$target, "Todo List");
+    new Header($target, "Todo List");
 
     new TodoForm(
-      this.$target,
+      $target,
       (text: string) => {
-        const nextState = [...this.todoList.state, { text, isCompleted: false }];
+        const nextState = [
+          ...this.todoList.state,
+          { text, isCompleted: false }
+        ];
         this.todoList.setState(nextState);
       },
     );
 
     this.todoList = new TodoList(
-      this.$target,
-      this.initialState,
-      (state: TodoItem[]) => this.#updateCount(state)
+      $target,
+      initialState,
+      (state: TodoLi) => this.#updateCount(state)
     );
 
-    this.todoCount = new TodoCount(this.$target, this.initialCount);
+    this.todoCount = new TodoCount($target, initialCount);
   }
 
   // 카운트 업데이트
-  #updateCount(todoList: TodoItem[]) {
+  #updateCount(todoList: TodoLi) {
     const done = todoList.filter((todo) => todo.isCompleted).length;
     const nextState = { total: todoList.length, done };
     this.todoCount.setState(nextState);

src/components/Header.ts

@@ -5,7 +5,7 @@ export default class Header {
     private readonly $target: HTMLElement,
     private readonly text: string
   ) {
-    this.$target.appendChild(this.$header);
+    $target.appendChild(this.$header);
     this.render();
   };
 

src/components/TodoCount.ts

@@ -8,11 +8,10 @@ export default class TodoCount {
     private readonly $target: HTMLElement,
     private readonly initialCount: TodoCnt
   ) {
-    this.$target.appendChild(this.$container);
+    $target.appendChild(this.$container);
 
-    if (this.initialCount.total) {
-      this.state = this.initialCount;
-    } else this.state = { total: 0, done: 0 };
+    if (initialCount.total) this.state = initialCount;
+    else this.state = { total: 0, done: 0 };
 
     this.render();
   }

src/components/TodoForm.ts

@@ -7,7 +7,7 @@ export default class TodoForm {
     private readonly $target: HTMLElement,
     private readonly onSubmit: (text: string) => void
   ) {
-    this.$target.appendChild(this.$form);
+    $target.appendChild(this.$form);
     this.render();
   }
 
@@ -17,17 +17,17 @@ export default class TodoForm {
       <button>추가</button>
     `;
 
-    if (!this.isInit) {
-      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("두 글자 이상 입력해주세요");
-      });
-    }
+    if (this.isInit) return;
+
+    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("두 글자 이상 입력해주세요");
+    });
   };
 }

src/components/TodoList.ts

@@ -1,19 +1,19 @@
 import { setItem } from "../utils/storage.js";
 import validation from "../utils/validation.js";
-import { TodoItem } from "../types/todo.js";
+import { TodoList as TodoLi } from "../types/todo.js";
 
 export default class TodoList {
-  state: TodoItem[];
+  state: TodoLi;
   private readonly $todoList = document.createElement("div");
 
   constructor(
     private readonly $target: HTMLElement,
-    private readonly initialState: TodoItem[],
-    private readonly updateCount: (state: TodoItem[]) => void
+    private readonly initialState: TodoLi,
+    private readonly updateCount: (state: TodoLi) => void
   ) {
-    this.$target.appendChild(this.$todoList);
+    $target.appendChild(this.$todoList);
 
-    if (Array.isArray(this.initialState)) this.state = this.initialState;
+    if (Array.isArray(initialState)) this.state = initialState;
     else this.state = [];
 
     this.render();
@@ -22,29 +22,29 @@ export default class TodoList {
       const target = e.target as HTMLLIElement;
       const $li = target.closest("li");
 
-      if ($li) {
-        const newState = [...this.state];
-        if (typeof $li.dataset.index !== "string") return;
-        const index = +$li.dataset.index;
+      if (!$li) return;
 
-        if (target.className === "deleteBtn") {
-          newState.splice(index, 1);
-          this.setState(newState);
-        } else if (target.className.includes("todoList")) {
-          const isCompleted = target.className.includes("completed");
-          if (isCompleted) target.classList.remove("completed");
-          else target.classList.add("completed");
-          newState[index] = {
-            ...newState[index],
-            isCompleted: !isCompleted,
-          };
-          this.setState(newState);
-        }
+      const newState = [...this.state];
+      if (typeof $li.dataset.index !== "string") return;
+      const index = +$li.dataset.index;
+
+      if (target.className === "deleteBtn") {
+        newState.splice(index, 1);
+        this.setState(newState);
+      } else if (target.className.includes("todoList")) {
+        const isCompleted = target.className.includes("completed");
+        if (isCompleted) target.classList.remove("completed");
+        else target.classList.add("completed");
+        newState[index] = {
+          ...newState[index],
+          isCompleted: !isCompleted,
+        };
+        this.setState(newState);
       }
     });
   }
 
-  setState(nextState: TodoItem[]) {
+  setState(nextState: TodoLi) {
     const newState = validation.state(nextState);
     this.state = newState;
     setItem("todo", JSON.stringify(newState));

src/types/todo.ts

@@ -1,9 +1,13 @@
-export interface TodoItem {
+export type StorageKey = "todo" | "count";
+
+export type TodoList = TodoItem[];
+
+interface TodoItem {
   text: string;
   isCompleted: boolean;
 }
 
 export interface TodoCount {
   total: number;
   done: number;
-}
+}

src/utils/storage.ts

@@ -1,20 +1,23 @@
+import { StorageKey } from "../types/todo";
+
 const storage = window.localStorage;
 
 export const setItem = (key: string, value: string) => {
   try {
     storage.setItem(key, value);
-  } catch (error) {
-    console.log(error);
+  }
+  catch (error: unknown) {
+    if (error instanceof Error) console.log(error);
   }
 };
 
-export const getItem = <T>(key: string, defaultValue: T): T => {
+export const getItem = <T>(key: StorageKey, defaultValue: T): T => {
   try {
     const data = storage.getItem(key);
     if (data) return JSON.parse(data);
     return defaultValue;
   } catch (error) {
-    console.log(error);
+    if (error instanceof Error) console.log(error);
     return defaultValue;
   }
 };

src/utils/validation.ts

@@ -1,7 +1,7 @@
-import { TodoItem } from "../types/todo.js";
+import { TodoList } from "../types/todo.js";
 
 const validation = {
-  state(todoList: TodoItem[]) {
+  state(todoList: TodoList) {
     return todoList.filter(
       (todo) =>
         typeof todo?.text === "string" && typeof todo?.isCompleted === "boolean"