feat: TodoCount 컴포넌트 클래스 + ts 변환

Author: bgyoons

src/App.ts

@@ -7,7 +7,7 @@ import { TodoCount as TodoCnt, TodoItem } from "./types/todo.js";
 
 export default class App {
   todoList: TodoList;
-  // todoCount: TodoCount;
+  todoCount: TodoCount;
 
   constructor(
     protected readonly $target: HTMLElement,
@@ -30,10 +30,7 @@ export default class App {
       (state: TodoItem[]) => this.updateCount(state)
     );
 
-    // this.todoCount = new TodoCount({
-    //   $target: this.$target,
-    //   initialCount: this.initialCount,
-    // });
+    this.todoCount = new TodoCount(this.$target, this.initialCount);
   }
 
   // 카운트 업데이트

src/components/TodoCount.ts

@@ -1,23 +1,28 @@
-import validation from "../utils/validation.js";
+import { TodoCount as TodoCnt } from "../types/todo.js";
 
-export default function TodoCount({ $target, initialCount }) {
-  validation.newTarget(new.target);
+export default class TodoCount {
+  $container = document.createElement("div");
+  state: TodoCnt;
 
-  const $container = document.createElement("div");
-  $target.appendChild($container);
+  constructor(
+    private readonly $target: HTMLElement,
+    private readonly initialCount: TodoCnt
+  ) {
+    this.$target.appendChild(this.$container);
 
-  if (initialCount.total) {
-    this.state = initialCount;
-  } else this.state = { total: 0, done: 0 };
+    if (this.initialCount.total) {
+      this.state = this.initialCount;
+    } else this.state = { total: 0, done: 0 };
 
-  this.setState = (nextState) => {
+    this.render();
+  }
+
+  setState(nextState: TodoCnt) {
     this.state = nextState;
     this.render();
   };
 
-  this.render = () => {
-    $container.textContent = `완료 ${this.state.done}개 / 총 ${this.state.total}개`;
+  render() {
+    this.$container.textContent = `완료 ${this.state.done}개 / 총 ${this.state.total}개`;
   };
-
-  this.render();
 }