next-step · jeleedev · Jul 12, 2021 · Jul 12, 2021 · Jul 12, 2021 · Jul 12, 2021
diff --git a/README.md b/README.md
@@ -39,15 +39,15 @@
 
 ## 🎯 요구사항
 
-- [ ] todo list에 todoItem을 키보드로 입력하여 추가하기
-- [ ] todo list의 체크박스를 클릭하여 complete 상태로 변경 (li tag 에 completed class 추가, input 태그에 checked 속성 추가)
-- [ ] todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제
-- [ ] todo list를 더블클릭했을 때 input 모드로 변경 (li tag 에 editing class 추가) 단 이때 수정을 완료하지 않은 상태에서 esc키를 누르면 수정되지 않은 채로 다시 view 모드로 복귀
-- [ ] todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기
-- [ ] todo list의 상태값을 확인하여, 해야할 일과, 완료한 일을 클릭하면 해당 상태의 아이템만 보여주기
+- [x] todo list에 todoItem을 키보드로 입력하여 추가하기
+- [x] todo list의 체크박스를 클릭하여 complete 상태로 변경 (li tag 에 completed class 추가, input 태그에 checked 속성 추가)
+- [x] todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제
+- [x] todo list를 더블클릭했을 때 input 모드로 변경 (li tag 에 editing class 추가) 단 이때 수정을 완료하지 않은 상태에서 esc키를 누르면 수정되지 않은 채로 다시 view 모드로 복귀
+- [x] todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기
+- [x] todo list의 상태값을 확인하여, 해야할 일과, 완료한 일을 클릭하면 해당 상태의 아이템만 보여주기
 
 ## 🎯🎯 심화 요구사항
-- [ ] localStorage에 데이터를 저장하여, TodoItem의 CRUD를 반영하기. 따라서 새로고침하여도 저장된 데이터를 확인할 수 있어야 함
+- [x] localStorage에 데이터를 저장하여, TodoItem의 CRUD를 반영하기. 따라서 새로고침하여도 저장된 데이터를 확인할 수 있어야 함
 
 <br/>
 

diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>이벤트 - TODOS</title>
     <link rel="stylesheet" href="./src/css/style.css" />
+    <script type="module" src="./src/app.js" defer></script>
   </head>
   <body>
     <div class="todoapp">

diff --git a/src/app.js b/src/app.js
@@ -0,0 +1,11 @@
+import TodoApp from './components/TodoApp.js';
+import LocalStorage from './components/LocalStorage.js';
+
+const LS_KEY = 'TODOS';
+window.addEventListener('DOMContentLoaded', () => {
+  const storage = new LocalStorage(LS_KEY);
+  const savedData = storage.getItems();
+
+  const todoApp = new TodoApp(storage);
+  todoApp.init(savedData);
+});
diff --git a/src/components/LocalStorage.js b/src/components/LocalStorage.js
@@ -0,0 +1,13 @@
+export default class LocalStorage {
+  constructor(key) {
+    this.key = key;
+  }
+  saveItems = (todoItems) => {
+    localStorage.setItem(this.key, JSON.stringify(todoItems));
+  };
+
+  getItems = () => {
+    const parsedData = localStorage.getItem(this.key);
+    return parsedData && JSON.parse(parsedData);
+  };
+}
diff --git a/src/components/TodoApp.js b/src/components/TodoApp.js
@@ -0,0 +1,111 @@
+import TodoItem from './TodoItem.js';
+import TodoInput from './TodoInput.js';
+import TodoList from './TodoList.js';
+import TodoCount from './TodoCount.js';
+import { TodoFilter, FilterType } from './TodoFilter.js';
+
+export default function TodoApp(storage) {
+  this.storage = storage;
+  this.todoItems = [];
+  let id = 0;
+
+  this.init = (savedData) => {
+    this.todoItems = savedData ?? [];
+    id = savedData.length ?? 0;
+
+    savedData && this.setState(savedData);
+  };
+
+  this.setState = (updatedItems) => {
+    todoList.setState(updatedItems);
+    todoCount.setState(updatedItems);
+  };
+
+  const onAdd = (contents) => {
+    const newTodoItem = new TodoItem(contents, ++id);
+    this.todoItems.push(newTodoItem);
+    this.setState(this.todoItems);
+    this.storage.saveItems(this.todoItems);
+  };
+
+  const onComplete = (id) => {
+    this.todoItems = this.todoItems.map((item) => {
+      if (item.id === id) {
+        item.completed = !item.completed;
+      }
+      return item;
+    });
+    this.setState(this.todoItems);
+    this.storage.saveItems(this.todoItems);
+  };
+
+  const onDelete = (id) => {
+    this.todoItems = this.todoItems.filter((item) => {
+      return item.id !== id;
+    });
+    this.setState(this.todoItems);
+    this.storage.saveItems(this.todoItems);
+  };
+
+  const onEdit = (id) => {
+    this.todoItems = this.todoItems.map((item) => {
+      if (item.id === id) {
+        item.editing = !item.editing;
+      }
+      return item;
+    });
+    this.setState(this.todoItems);
+    this.storage.saveItems(this.todoItems);
+  };
+
+  const onUpdate = (e, id) => {
+    if (e.key === 'Enter') {
+      this.todoItems = this.todoItems.map((item) => {
+        if (item.id === id) {
+          item.contents = e.target.value;
+          item.editing = false;
+        }
+        return item;
+      });
+      this.setState(this.todoItems);
+      this.storage.saveItems(this.todoItems);
+    }
+    if (e.key === 'Escape') {
+      this.todoItems = this.todoItems.map((item) => {
+        if (item.id === id) {
+          item.editing = false;
+        }
+        return item;
+      });
+      this.setState(this.todoItems);
+      this.storage.saveItems(this.todoItems);
+    }
+  };
+
+  const onFilter = (type) => {
+    if (type === FilterType.all) {
+      this.setState(this.todoItems);
+    } else if (type === FilterType.active) {
+      const activeItems = this.todoItems.filter(
+        (item) => item.completed === false
+      );
+      this.setState(activeItems);
+    } else if (type === FilterType.completed) {
+      const completedItems = this.todoItems.filter(
+        (item) => item.completed === true
+      );
+      this.setState(completedItems);
+    }
+  };
+
+  const todoInput = new TodoInput();
+  todoInput.setEventListener(onAdd);
+
+  const todoList = new TodoList();
+  todoList.setEventListener(onComplete, onDelete, onEdit, onUpdate);
+
+  const todoCount = new TodoCount();
+
+  const todoFilter = new TodoFilter();
+  todoFilter.setEventListener(onFilter);
+}
diff --git a/src/components/TodoCount.js b/src/components/TodoCount.js
@@ -0,0 +1,7 @@
+export default function TodoCount() {
+  this.todoCount = document.querySelector('.todo-count strong');
+
+  this.setState = (todoItems) => {
+    this.todoCount.textContent = todoItems.length;
+  };
+}
diff --git a/src/components/TodoFilter.js b/src/components/TodoFilter.js
@@ -0,0 +1,37 @@
+export const FilterType = Object.freeze({
+  all: 'all',
+  active: 'active',
+  completed: 'completed',
+});
+
+export function TodoFilter() {
+  this.filters = document.querySelector('.filters');
+  this.filtersBtn = this.filters.querySelectorAll('a');
+
+  this.filters.addEventListener('click', (event) => this.handleClick(event));
+
+  this.setEventListener = (onFilter) => {
+    this.onFilter = onFilter;
+  };
+
+  this.handleClick = (event) => {
+    const type = event.target.className;
+
+    this.removeSelectedClass();
+    this.addSelectedClass(event.target);
+
+    this.onFilter && this.onFilter(type);
+  };
+
+  this.removeSelectedClass = () => {
+    this.filtersBtn.forEach((item) => {
+      if (item.classList.contains('selected')) {
+        item.classList.remove('selected');
+      }
+    });
+  };
+
+  this.addSelectedClass = (target) => {
+    target.classList.add('selected');
+  };
+}
diff --git a/src/components/TodoInput.js b/src/components/TodoInput.js
@@ -0,0 +1,18 @@
+// 입력받는 컴포넌트
+export default function TodoInput() {
+  const todoInput = document.querySelector('#new-todo-title');
+
+  todoInput.addEventListener('keydown', (event) => this.handleOnAdd(event));
+
+  this.setEventListener = (onAdd) => {
+    this.onAdd = onAdd;
+  };
+
+  this.handleOnAdd = (event) => {
+    if (event.key === 'Enter') {
+      const newTodoTarget = event.target;
+      this.onAdd && this.onAdd(newTodoTarget.value);
+      newTodoTarget.value = '';
+    }
+  };
+}
diff --git a/src/components/TodoItem.js b/src/components/TodoItem.js
@@ -0,0 +1,8 @@
+export default class TodoItem {
+  constructor(contents, id) {
+    this.id = id;
+    this.contents = contents;
+    this.completed = false;
+    this.editing = false;
+  }
+}
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
@@ -0,0 +1,60 @@
+// todoList 보여주는 컴포넌트
+export default function TodoList() {
+  const todoList = document.querySelector('#todo-list');
+
+  todoList.addEventListener('click', (event) => this.handleClick(event));
+  todoList.addEventListener('dblclick', (event) => this.handleDblClick(event));
+  todoList.addEventListener('keydown', (event) => this.handleKeydown(event));
+
+  this.setEventListener = (onComplete, onDelete, onEdit, onUpdate) => {
+    this.onComplete = onComplete;
+    this.onDelete = onDelete;
+    this.onEdit = onEdit;
+    this.onUpdate = onUpdate;
+  };
+
+  this.setState = (updatedTodoItems) => {
+    this.todoItems = updatedTodoItems;
+    this.render(this.todoItems);
+  };
+
+  this.render = (items) => {
+    const template = items.map((item) => {
+      return `
+      <li class="${item.completed ? 'completed' : ''} ${
+        item.editing ? 'editing' : ''
+      }" data-id="${item.id}">
+        <div class="view">
+          <input class="toggle" type="checkbox" ${
+            item.completed ? 'checked' : ''
+          }/>
+          <label class="label">${item.contents}</label>
+          <button class="destroy"></button>
+        </div>
+        <input class="edit" value="${item.contents}" />
+      </li>
+      `;
+    });
+    todoList.innerHTML = template.join('');
+  };
+
+  this.handleKeydown = (event) => {
+    const id = parseInt(event.target.parentNode.dataset.id);
+    this.onUpdate && this.onUpdate(event, id);
+  };
+
+  this.handleDblClick = (event) => {
+    const id = parseInt(event.target.parentNode.parentNode.dataset.id);
+    this.onEdit && this.onEdit(id);
+  };
+
+  this.handleClick = (event) => {
+    const id = parseInt(event.target.parentNode.parentNode.dataset.id);
+    if (event.target.className === 'toggle') {
+      this.onComplete && this.onComplete(id);
+    }
+    if (event.target.className === 'destroy') {
+      this.onDelete && this.onDelete(id);
+    }
+  };
+}