[10기 김장후] TodoList with CRUD

src/App.js

@@ -1,4 +1,5 @@
 import NewTodoInput from './components/NewTodoInput.js';
+import TodoList from './components/TodoList.js';
 import Component from './core/component.js';
 import State from './core/State.js';
 import { $ } from './utils/utils.js';
@@ -15,11 +16,18 @@ export default class App extends Component {
   mountChildren() {
     new NewTodoInput($('#new-todo-title'), {
       todoList: this.todoList,
-      onSubmitTodo: this.onSubmitTodo,
+      onSubmitTodo: this.mountTodoList.bind(this),
     });
   }
 
-  onSubmitTodo() {
-    console.log(this.todoList);
+  mountTodoList() {
+    new TodoList($('#todo-list'), {
+      todoList: this.todoList,
+      deleteTodo: this.deleteTodo.bind(this),
+    });
+  }
+
+  deleteTodo(id) {
+    console.log(id);
   }
 }

src/components/TodoList.js

@@ -0,0 +1,42 @@
+import Component from '../core/component.js';
+import { $ } from '../utils/utils.js';
+import { todoButton } from '../utils/constants.js';
+
+export default class TodoList extends Component {
+  render() {
+    const todoList = this.props.todoList
+      .get()
+      .reduce((html, { id, todo }) => (html += this.renderTodo({ id, todo })), '');
+    this.$target.innerHTML = todoList;
+  }
+
+  renderTodo({ id, todo }) {
+    return `
+      <li class="todo" id=${id}>
+        <div class="view">
+          <input class="toggle" type="checkbox" id=${id} />
+          <label class="label">${todo}</label>
+          <button class="destroy" id=${id}></button>
+        </div>
+        <input class="edit" value="${todo}" />
+      </li>
+    `;
+  }
+
+  bindEvents() {
+    this.$target.addEventListener('click', (e) => {
+      console.log(1);
+      if (e.target.classList.contains(todoButton.TOGGLE)) {
+        const checkId = e.target.id;
+        // this.$target.removeChild(target.closest('.todo'));
+        e.target.closest('.todo').classList.toggle('completed');
+        return;
+        // console.log(target.closest('.todo'));
+        // this.props.deleteTodo(checkId);
+      }
+      e.stopPropagation();
+      // if (target.classList.contains(todoButton.DESTROY)) {
+      // }
+    });
+  }
+}

src/utils/constants.js

@@ -0,0 +1,10 @@
+const todoButton = {
+  TOGGLE: 'toggle',
+  LABEL: 'label',
+  DESTROY: 'destroy',
+  EDIT: 'edit',
+  EDITING: 'editing',
+  COMPLETED: 'completed',
+};
+
+export { todoButton };