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

Author: bgyoons

src/App.ts

@@ -16,13 +16,13 @@ export default class App {
   ) {
     new Header(this.$target, "Todo List");
 
-    // new TodoForm({
-    //   $target: this.$target,
-    //   onSubmit: (text: string) => {
-    //     const nextState = [...this.todoList.state, { text, isCompleted: false }];
-    //     this.todoList.setState(nextState);
-    //   },
-    // });
+    new TodoForm(
+      this.$target,
+      (text: string) => {
+        const nextState = [...this.todoList.state, { text, isCompleted: false }];
+        this.todoList.setState(nextState);
+      },
+    );
 
     this.todoList = new TodoList(
       this.$target,

src/components/TodoForm.ts

@@ -1,32 +1,32 @@
-import validation from "../utils/validation.js";
 
-export default function TodoForm({ $target, onSubmit }) {
-  validation.newTarget(new.target);
+export default class TodoForm {
+  $form = document.createElement("form");
+  isInit = false;
 
-  const $form = document.createElement("form");
-  $target.appendChild($form);
+  constructor(
+    private readonly $target: HTMLElement,
+    private readonly onSubmit: (text: string) => void
+  ) {
+    this.$target.appendChild(this.$form);
+    this.render();
+  }
 
-  let isInit = false;
-
-  this.render = () => {
-    $form.innerHTML = `
+  render() {
+    this.$form.innerHTML = `
       <input type="text" placeholder="할 일을 입력하세요" name="todo" />
       <button>추가</button>
     `;
 
-    if (!isInit) {
-      $form.addEventListener("submit", (e) => {
-        e.preventDefault(); // 태그가 갖고 있는 고유 기능 막기(form 태그의 새로고침 막기)
-
-        const $todo = $form.querySelector("input[name=todo]");
+    if (!this.isInit) {
+      this.$form.addEventListener("submit", (e) => {
+        e.preventDefault();
+        const $todo = this.$form.querySelector("input[name=todo]") as HTMLInputElement;
         const text = $todo.value;
         if (text.length > 1) {
           $todo.value = "";
-          onSubmit(text);
+          this.onSubmit(text);
         } else alert("두 글자 이상 입력해주세요");
       });
     }
   };
-
-  this.render();
 }