[라빈] TodoList 상태관리 하기 미션 제출합니다.

index.html

@@ -15,30 +15,6 @@ <h1>TODOS</h1>
   <div class="main">
     <input class="toggle-all" type="checkbox">
     <ul id="todo-list" class="todo-list">
-      <li>
-        <div class="view">
-          <input class="toggle" type="checkbox">
-          <label class="label">새로운 타이틀</label>
-          <button class="destroy"></button>
-        </div>
-        <input class="edit" value="새로운 타이틀">
-      </li>
-      <li class="editing">
-        <div class="view">
-          <input class="toggle" type="checkbox">
-          <label class="label">완료된 타이틀</label>
-          <button class="destroy"></button>
-        </div>
-        <input class="edit" value="완료된 타이틀">
-      </li>
-      <li class="completed">
-        <div class="view">
-          <input class="toggle" type="checkbox">
-          <label class="label">완료된 타이틀</label>
-          <button class="destroy"></button>
-        </div>
-        <input class="edit" value="완료된 타이틀">
-      </li>
     </ul>
   </div>
   <div class="count-container">
@@ -56,6 +32,6 @@ <h1>TODOS</h1>
     </ul>
   </div>
 </section>
-<script src="js/app.js"></script>
+<script type="module" src="./js/module/TodoApp.js"></script>
 </body>
 </html>

js/module/TodoApp.js

@@ -0,0 +1,126 @@
+import { STATUS, EVENT_TYPE, KEY_TYPE, TAG_TYPE } from "../util/constants.js";
+import { TodoInput } from './TodoInput.js';
+import { TodoItem } from './TodoItem.js';
+import { TodoList } from './TodoList.js';
+import { TodoCount } from './TodoCount.js';
+
+function TodoApp() {
+    this.$todoList = document.querySelector("#todo-list");
+    this.$todoInput = document.querySelector("#new-todo-title");
+    this.$todoCount = document.querySelector("body > section > div.count-container > span > strong");
+
+    this.todoItems = [];
+    this.todoList = new TodoList(this.$todoList);
+
+    let todoItemIndex = this.todoItems.length;
+
+    new TodoCount(event => {
+        event.preventDefault();
+        const $target = event.target;
+        const tag = $target.getAttribute("href");
+        if (tag === TAG_TYPE.ALL) {
+            this.setState(this.todoItems);
+            return;
+        }
+        if (tag === TAG_TYPE.ACTIVE) {
+            const activeItems = this.todoItems.filter(item => item.status === STATUS.TODO);
+            this.setState(activeItems);
+            return;
+        }
+        if (tag === TAG_TYPE.COMPLETED) {
+            const completedItems = this.todoItems.filter(item => item.status === STATUS.COMPLETED);
+            this.setState(completedItems);
+        }
+    });
+
+    new TodoInput({
+        onAdd: contents => {
+            const newTodoItem = new TodoItem(todoItemIndex++, contents, STATUS.TODO);
+            this.todoItems.push(newTodoItem);
+            this.setState(this.todoItems);
+        }
+    }, this.$todoInput);
+
+    this.setState = updatedItems => {
+        const showItems = updatedItems;
+        this.todoList.setState(showItems);
+        this.$todoCount.innerText = showItems.length;
+    };
+
+    const completedTodoItem = event => {
+        event.preventDefault();
+        const $target = event.target;
+        const isCompletedButton = $target.classList.contains("toggle");
+        if (isCompletedButton) {
+            const todoItemId = Number.parseInt($target.closest("div").dataset.itemId);
+            const targetItem = this.todoItems.find(item => item.id === todoItemId);
+            targetItem.status = targetItem.status === STATUS.TODO ? STATUS.COMPLETED : STATUS.TODO;
+            this.todoList.setState(this.todoItems);
+        }
+    };
+
+    const removeTodoItem = event => {
+        event.preventDefault();
+        const $target = event.target;
+        const isDeleteButton = $target.classList.contains("destroy");
+        if (isDeleteButton) {
+            removeTargetTodoItem($target);
+        }
+    }
+
+    const removeTargetTodoItem = ($target) => {
+        const todoItemId = Number.parseInt($target.closest("div").dataset.itemId);
+        const targetItem = this.todoItems.find(item => item.id === todoItemId);
+        const isConfirmDelete = confirm(`${targetItem.content}를 삭제하시겠습니까?`);
+        if (isConfirmDelete) {
+            const targetItemIndex = this.todoItems.indexOf(targetItem);
+            this.todoItems.splice(targetItemIndex, 1)
+            this.setState(this.todoItems);
+        }
+    }
+
+    const setEditMode = event => {
+        event.preventDefault();
+        const $target = event.target;
+        const isDeleteButton = $target.classList.contains("destroy");
+        const isCompletedButton = $target.classList.contains("toggle");
+        if (!isDeleteButton && !isCompletedButton) {
+            const todoItemId = Number.parseInt($target.closest("div").dataset.itemId);
+            const targetItem = this.todoItems.find(item => item.id === todoItemId);
+            targetItem.status = STATUS.EDIT;
+            this.todoList.setState(this.todoItems);
+            document.querySelector("#todo-list > li.editing > input").addEventListener(EVENT_TYPE.KEY_DOWN, editMode);
+        }
+    }
+
+    const editMode = event => {
+        const $target = event.target;
+        const todoItemId = Number.parseInt($target.previousSibling.previousSibling.dataset.itemId);
+        const targetItem = this.todoItems.find(item => item.id === todoItemId);
+        if (event.target.value !== 0 && event.key === KEY_TYPE.ESC) {
+            event.preventDefault();
+            targetItem.status = STATUS.TODO;
+            this.todoList.setState(this.todoItems);
+            return;
+        }
+        if ($target.value.trim() !== 0 && event.key === KEY_TYPE.ENTER) {
+            const updateItem = new TodoItem(targetItem.id, $target.value, STATUS.TODO);
+            const targetItemIndex = this.todoItems.indexOf(targetItem);
+            this.todoItems.splice(targetItemIndex, 1, updateItem);
+            this.todoList.setState(this.todoItems);
+        }
+    }
+
+    const initEventListener = () => {
+        this.$todoList.addEventListener(EVENT_TYPE.CLICK, completedTodoItem);
+        this.$todoList.addEventListener(EVENT_TYPE.CLICK, removeTodoItem);
+        this.$todoList.addEventListener(EVENT_TYPE.DOUBLE_CLICK, setEditMode);
+    }
+
+    this.init = () => {
+        initEventListener();
+    }
+}
+
+const todoApp = new TodoApp();
+todoApp.init();

js/module/TodoCount.js

@@ -0,0 +1,16 @@
+import {EVENT_TYPE} from "../util/constants.js";
+
+export function TodoCount(showItems) {
+    this.number = document.querySelector("div.count-container > span > strong");
+    this.allTodoItems = document.querySelector("div.count-container > ul > li:nth-child(1) > a");
+    this.todoItems = document.querySelector("div.count-container > ul > li:nth-child(2) > a");
+    this.doneItems = document.querySelector("div.count-container > ul > li:nth-child(3) > a");
+
+    this.initEventListener = () => {
+        this.allTodoItems.addEventListener(EVENT_TYPE.CLICK, showItems);
+        this.todoItems.addEventListener(EVENT_TYPE.CLICK, showItems);
+        this.doneItems.addEventListener(EVENT_TYPE.CLICK, showItems);
+    }
+
+    return this.initEventListener();
+}

js/module/TodoInput.js

@@ -0,0 +1,19 @@
+import { EVENT_TYPE, KEY_TYPE } from "../util/constants.js";
+
+export function TodoInput({ onAdd }, todoInput) {
+    todoInput.addEventListener(EVENT_TYPE.KEY_DOWN, event => this.addTodoItem(event));
+
+    this.isValid = (event, value) => {
+        return (event.key === KEY_TYPE.ENTER)
+            && value.trim().length !== 0;
+    }
+
+    this.addTodoItem = event => {
+        const $newTodoTarget = event.target;
+        if (this.isValid(event, $newTodoTarget.value)) {
+            event.preventDefault();
+            onAdd($newTodoTarget.value);
+            $newTodoTarget.value = "";
+        }
+    };
+}

js/module/TodoItem.js

@@ -0,0 +1,7 @@
+export function TodoItem(id, content, status) {
+     this.id = id;
+     this.content = content;
+     this.status = status;
+
+     return this;
+}

js/module/TodoList.js

@@ -0,0 +1,13 @@
+import { todoItemTemplate } from '../util/templates.js'
+
+export function TodoList(todoList) {
+    this.setState = updatedTodoItems => {
+        this.todoItems = updatedTodoItems;
+        this.render(this.todoItems);
+    };
+
+    this.render = items => {
+        const template = items.map(todoItemTemplate);
+        todoList.innerHTML = template.join("");
+    };
+}

js/util/constants.js

@@ -0,0 +1,23 @@
+export const STATUS = {
+    TODO: "todo",
+    COMPLETED: "completed",
+    EDIT: "editing"
+};
+
+export const EVENT_TYPE = {
+    CLICK: "click",
+    KEY_PRESS: "keypress",
+    DOUBLE_CLICK: "dblclick",
+    KEY_DOWN: "keydown"
+};
+
+export const KEY_TYPE = {
+    ESC: "Escape",
+    ENTER: "Enter"
+};
+
+export const TAG_TYPE = {
+    ALL: "#/",
+    ACTIVE: "#/active",
+    COMPLETED: "#/completed"
+}

js/util/templates.js

@@ -0,0 +1,13 @@
+import {STATUS} from "./constants.js";
+
+export const todoItemTemplate = item => {
+    const isChecked = item.status === STATUS.COMPLETED ? "checked" : "";
+    return `<li class="${item.status}">
+        <div class="view" data-item-id="${item.id}">
+          <input class="toggle" type="checkbox" ${isChecked}>
+          <label class="label">${item.content}</label>
+          <button class="destroy"></button>
+        </div>
+        <input class="edit" value="${item.content}">
+      </li>`
+};