From 9e951d8ac3681ca2bda3a6eba04fd23eddd8f65e Mon Sep 17 00:00:00 2001
From: BoMee Yoon <primavera0331@gmail.com>
Date: Thu, 3 Jun 2021 08:01:05 +0900
Subject: [PATCH 01/17] Add todolist

---
 README.md                | 27 ++++++++++++-------
 index.html               |  3 ++-
 src/js/app.js            | 17 ++++++++++++
 src/js/index.js          |  6 +++++
 src/js/routes/router.js  | 19 ++++++++++++++
 src/js/store/todoList.js | 57 ++++++++++++++++++++++++++++++++++++++++
 src/js/utils/element.js  | 12 +++++++++
 src/js/utils/event.js    | 46 ++++++++++++++++++++++++++++++++
 src/js/utils/helper.js   |  9 +++++++
 src/js/views/todoList.js | 29 ++++++++++++++++++++
 10 files changed, 214 insertions(+), 11 deletions(-)
 create mode 100644 src/js/app.js
 create mode 100644 src/js/index.js
 create mode 100644 src/js/routes/router.js
 create mode 100644 src/js/store/todoList.js
 create mode 100644 src/js/utils/element.js
 create mode 100644 src/js/utils/event.js
 create mode 100644 src/js/utils/helper.js
 create mode 100644 src/js/views/todoList.js

diff --git a/README.md b/README.md
index 24e05bed..19ab6bd4 100644
--- a/README.md
+++ b/README.md
@@ -14,13 +14,14 @@
 </p>
 
 # ☕️ 코드리뷰 모임 - Black Coffee
+
 <br/>
 
 > '훌륭한 의사소통은 블랙커피처럼 자극적이며, 후에 잠들기가 어렵다'. <br> A.M. 린드버그(미국의 작가, 수필가) -
 
 <br/>
 
-블랙커피처럼 서로를 자극해주고, 동기부여 해주며, 그 성장과정으로 인해 의미있는 가치를 만들어내고자 하는   
+블랙커피처럼 서로를 자극해주고, 동기부여 해주며, 그 성장과정으로 인해 의미있는 가치를 만들어내고자 하는  
 **프론트엔드 코드리뷰 모임** ☕️ **Black Coffee**입니다.
 
 <br/>
@@ -39,25 +40,28 @@
 
 ## 🎯 요구사항
 
-- [ ] 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를 반영하기. 따라서 새로고침하여도 저장된 데이터를 확인할 수 있어야 함
 
 <br/>
 
 ## 🔔 참고사항
+
 `TodoItem`을 추가할 시 아래 템플릿을 활용하면 됩니다.
+
 ```html
 <ul id="todo-list" class="todo-list">
   <li>
     <div class="view">
-      <input class="toggle" type="checkbox"/>
+      <input class="toggle" type="checkbox" />
       <label class="label">새로운 타이틀</label>
       <button class="destroy"></button>
     </div>
@@ -73,7 +77,7 @@
   </li>
   <li class="completed">
     <div class="view">
-      <input class="toggle" type="checkbox" checked/>
+      <input class="toggle" type="checkbox" checked />
       <label class="label">완료된 타이틀</label>
       <button class="destroy"></button>
     </div>
@@ -103,7 +107,9 @@ live-server 폴더명
 <br/>
 
 ## 💻 Code Review
-아래 링크들에 있는 리뷰 가이드를 보고, 좋은 코드 리뷰 문화를 만들어 나가려고 합니다.  
+
+아래 링크들에 있는 리뷰 가이드를 보고, 좋은 코드 리뷰 문화를 만들어 나가려고 합니다.
+
 - [코드리뷰 가이드1](https://edykim.com/ko/post/code-review-guide/)
 - [코드리뷰 가이드2](https://wiki.lucashan.space/code-review/01.intro.html#_1-code%EB%A5%BC-%EB%A6%AC%EB%B7%B0%ED%95%98%EB%8A%94-%EC%82%AC%EB%9E%8C%EB%93%A4%EC%9D%80-%EC%96%B4%EB%96%A4%EA%B2%83%EC%9D%84-%EC%A4%91%EC%A0%90%EC%A0%81%EC%9C%BC%EB%A1%9C-%EC%82%B4%ED%8E%B4%EC%95%BC%ED%95%98%EB%8A%94%EA%B0%80)
 
@@ -112,6 +118,7 @@ live-server 폴더명
 ## 💬 1주차 미션 후기 블로그
 
 아래 링크는 1주차 미션을 진행하면서 블로그를 작성해주신 분들의 글입니다. 미션을 진행하면서, 다른 분들의 문제 해결 과정이 궁금하다면 참고해주세요 😄
+
 - [1주차 미션후기](https://www.notion.so/1-2-8b624729fbce4174b8b583efb10c3200)
 - [블랙커피 프론트엔드 스터디 레벨1 후기](https://yujo11.github.io/%EB%B8%94%EB%9E%99%EC%BB%A4%ED%94%BC/%EB%B8%94%EB%9E%99%EC%BB%A4%ED%94%BC-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%8A%A4%ED%84%B0%EB%94%94-%EB%A0%88%EB%B2%A81-%ED%9B%84%EA%B8%B0/)
 - [블랙커피 프론트엔드 스터디 회고](https://www.notion.so/bffb14daea984293a954ac7cdb4f7c1e)
diff --git a/index.html b/index.html
index 13a02fdb..461e4746 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,7 @@ <h1>TODOS</h1>
           <span class="todo-count">총 <strong>0</strong> 개</span>
           <ul class="filters">
             <li>
-              <a class="all selected" href="#">전체보기</a>
+              <a class="all selected" href="#all">전체보기</a>
             </li>
             <li>
               <a class="active" href="#active">해야할 일</a>
@@ -34,5 +34,6 @@ <h1>TODOS</h1>
         </div>
       </main>
     </div>
+    <script type="module" src="./src/js/index.js"></script>
   </body>
 </html>
diff --git a/src/js/app.js b/src/js/app.js
new file mode 100644
index 00000000..1420175a
--- /dev/null
+++ b/src/js/app.js
@@ -0,0 +1,17 @@
+import { removeRouter, setRouter } from './routes/router.js';
+import { setEvent, removeEvent } from './utils/event.js';
+import { renderView } from './views/todoList.js';
+
+export default () => {
+  return {
+    init: () => {
+      renderView();
+      setEvent();
+      setRouter();
+    },
+    destroy: () => {
+      removeEvent();
+      removeRouter();
+    }
+  }
+}
diff --git a/src/js/index.js b/src/js/index.js
new file mode 100644
index 00000000..97593f40
--- /dev/null
+++ b/src/js/index.js
@@ -0,0 +1,6 @@
+import App from './app.js';
+
+const app = App();
+
+document.addEventListener('DOMContentLoaded', () => app.init());
+document.addEventListener('beforeunload', () => app.destroy());
\ No newline at end of file
diff --git a/src/js/routes/router.js b/src/js/routes/router.js
new file mode 100644
index 00000000..985bf993
--- /dev/null
+++ b/src/js/routes/router.js
@@ -0,0 +1,19 @@
+
+const filter = {
+  active: () => filteredList = todoList.filter(item => !item.completed),
+  completed: () => filteredList = todoList.filter(item => item.completed),
+  all: () => filteredList = [],
+}
+
+const filterBy = ({ newURL }) => {
+  const type = newURL.split('#')[1];
+  const filterType = filter[type];
+  if (!filterType) return;
+
+  filterType();
+  renderView();
+}
+
+export const setRouter = () => window.addEventListener('hashchange', filterBy);
+
+export const removeRouter = () =>   window.removeEventListener('hashchange', filterBy);
\ No newline at end of file
diff --git a/src/js/store/todoList.js b/src/js/store/todoList.js
new file mode 100644
index 00000000..132121d4
--- /dev/null
+++ b/src/js/store/todoList.js
@@ -0,0 +1,57 @@
+import { renderView } from "../views/todoList";
+
+const todoList = [];
+
+let filteredList = [];
+
+const addItem = (text) => {
+  
+  const newItem = {
+    text,
+    completed: false,
+  };
+
+  todoList.push(newItem);
+  renderView();
+}
+
+const putItem = (id, { key, value }) => {
+  todoList[Number(id)][key] = value;
+  renderView();
+}
+
+export const upsertItem = (event) => {
+  const { target } = event;
+  const trigger = getTriggerEventName(event);
+
+  if (trigger === 'update:text') {
+    putItem(target.id, { key: 'text', value: target.value });
+    stopEditing(target);
+    return
+  }
+
+  if (trigger === 'update:completed') {
+    putItem(target.id, { key: 'completed', value: target.checked });
+    return
+  }
+
+  addItem(target.value);
+  target.value = '';
+}
+
+export const deleteItem = (id) => {
+  todoList.splice(id, 1);
+  renderView();
+}
+
+export const getTotalCount = () => {
+  if (filteredList.length > 0) {
+    return filteredList.length;
+  }
+  return todoList.length;
+}
+
+export const getTodoList = () => {
+  if (filteredList.length > 0) return filteredList.map((item, id) => ({ ...item, id }));
+  return todoList.map((item, id) => ({ ...item, id }))
+}
\ No newline at end of file
diff --git a/src/js/utils/element.js b/src/js/utils/element.js
new file mode 100644
index 00000000..40f3f090
--- /dev/null
+++ b/src/js/utils/element.js
@@ -0,0 +1,12 @@
+export const getEletemt = (className) => document.querySelector(className);
+
+export const addClassName = ($element, className) => $element.classList.add(className);
+
+export const removeClassName = ($element, className) => $element.classList.remove(className);
+
+export const getTriggerEventName = (event) => {
+  if (keys.includes(event.key)) return event.key;
+  return event.target.dataset.event;
+}
+
+export const getTodoItemElement = target => target.closest('.todo-item');
\ No newline at end of file
diff --git a/src/js/utils/event.js b/src/js/utils/event.js
new file mode 100644
index 00000000..1c901bd6
--- /dev/null
+++ b/src/js/utils/event.js
@@ -0,0 +1,46 @@
+import { getTriggerEventName } from './element.js';
+import { upsertItem, deleteItem, stopEditing } from './todoList.js';
+import { getEletemt } from './todoListRenderer.js';
+
+const $todoapp = getEletemt('.todoapp');
+const $todoList = getEletemt('.todo-list');
+
+const eventTypes = ['keyup', 'click', 'change', 'dblclick'];
+
+const event = {
+  onkeyup: {
+    Enter: (event) => upsertItem(event),
+    Escape: ({ target }) => stopEditing(target),
+  },
+  onclick: {
+    delete: ({ id }) => deleteItem(id)
+  },
+  onchange: {
+    'update:completed': (event) => upsertItem(event)
+  },
+  ondblclick: {
+    'update:editing-mode': ({ target }) => stopEditing(target)
+  }
+}
+
+const eventHandler = (name, e) =>  {
+  const type = `on${name}`;
+  const trigger = getTriggerEventName(e);
+  const eventName = event[type];
+
+  if (!eventName) return;
+  if (!eventName[trigger]) return;
+
+  eventName[trigger](e);
+}
+
+export const setEvent = () => {
+  eventTypes.forEach(type => {
+    const $element = type === 'keyup' ? $todoapp : $todoList;
+    $element.addEventListener(type, event => eventHandler(type, event));
+  });
+}
+
+export const removeEvent = () => {
+  eventTypes.forEach(type => $todoList.removeEventListener(type, eventHandler));
+}
\ No newline at end of file
diff --git a/src/js/utils/helper.js b/src/js/utils/helper.js
new file mode 100644
index 00000000..a1d1614c
--- /dev/null
+++ b/src/js/utils/helper.js
@@ -0,0 +1,9 @@
+export const stopEditing = (target) => {
+  const $item = getTodoItemElement(target);
+  removeClassName($item, 'editing');
+}
+
+export const startEditing = (target) => {
+  const $item = getTodoItemElement(target);
+  addClassName($item, 'editing')
+}
\ No newline at end of file
diff --git a/src/js/views/todoList.js b/src/js/views/todoList.js
new file mode 100644
index 00000000..7cdb8070
--- /dev/null
+++ b/src/js/views/todoList.js
@@ -0,0 +1,29 @@
+import { getTotalCount, getTodoList } from "../todoList.js";
+import { getEletemt } from "../todoListRenderer.js"
+
+const todoItemHtml = ({id, text, completed}) => {
+  return `<li id="${id}" class="todo-item ${completed ? 'completed' : ''}">
+  <div class="view">
+      <input data-event="update:completed" class="toggle" type="checkbox" id="${id}" ${completed ? 'checked' : ''}>
+      <label data-event="update:editing-mode" class="label">${text}</label>
+      <button data-event="delete" class="destroy" id="${id}"></button>
+  </div>
+  <input data-event="update:text" class="edit" value="${text}">
+</li>`
+}
+
+const renderTodoList = () => {
+  const $todoList = getEletemt('.todo-list');
+  $todoList.innerHTML = getTodoList().map(todoItemHtml).join('');
+}
+
+const renderCount = () => {
+  const $count = getEletemt('.todo-count strong');
+  $count.textContent = getTotalCount();
+
+}
+
+export const renderView = () => {
+  renderTodoList();
+  renderCount();
+}
\ No newline at end of file

From d6b99b4c9772ac0892fd1faa79029bc450296dc5 Mon Sep 17 00:00:00 2001
From: BoMee-Yoon <primavera0331@naver.com>
Date: Thu, 3 Jun 2021 19:01:48 +0900
Subject: [PATCH 02/17] Refactor todoList

---
 src/js/app.js            |  1 +
 src/js/routes/router.js  | 19 ++++---------------
 src/js/store/todoList.js | 20 +++++++++++++++++---
 src/js/utils/element.js  |  6 ++++--
 src/js/utils/event.js    | 12 ++++++++----
 src/js/views/todoList.js |  5 +++--
 6 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/src/js/app.js b/src/js/app.js
index 1420175a..8e00551e 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -2,6 +2,7 @@ import { removeRouter, setRouter } from './routes/router.js';
 import { setEvent, removeEvent } from './utils/event.js';
 import { renderView } from './views/todoList.js';
 
+
 export default () => {
   return {
     init: () => {
diff --git a/src/js/routes/router.js b/src/js/routes/router.js
index 985bf993..26bbfcdd 100644
--- a/src/js/routes/router.js
+++ b/src/js/routes/router.js
@@ -1,19 +1,8 @@
+import { filterBy } from "../store/todoList.js";
 
-const filter = {
-  active: () => filteredList = todoList.filter(item => !item.completed),
-  completed: () => filteredList = todoList.filter(item => item.completed),
-  all: () => filteredList = [],
-}
-
-const filterBy = ({ newURL }) => {
+export const setRouter = () => window.addEventListener('hashchange', ({ newURL }) => {
   const type = newURL.split('#')[1];
-  const filterType = filter[type];
-  if (!filterType) return;
-
-  filterType();
-  renderView();
-}
-
-export const setRouter = () => window.addEventListener('hashchange', filterBy);
+  filterBy(type);
+});
 
 export const removeRouter = () =>   window.removeEventListener('hashchange', filterBy);
\ No newline at end of file
diff --git a/src/js/store/todoList.js b/src/js/store/todoList.js
index 132121d4..bf22eb2f 100644
--- a/src/js/store/todoList.js
+++ b/src/js/store/todoList.js
@@ -1,9 +1,8 @@
-import { renderView } from "../views/todoList";
+import { getTriggerEventName } from "../utils/element.js";
+import { renderView } from "../views/todoList.js";
 
 const todoList = [];
 
-let filteredList = [];
-
 const addItem = (text) => {
   
   const newItem = {
@@ -44,6 +43,21 @@ export const deleteItem = (id) => {
   renderView();
 }
 
+let filteredList = [];
+const filter = {
+  active: () => filteredList = todoList.filter(item => !item.completed),
+  completed: () => filteredList = todoList.filter(item => item.completed),
+  all: () => filteredList = [],
+}
+
+export const filterBy = (type) => {
+  const filterType = filter[type];
+  if (!filterType) return;
+
+  filterType();
+  renderView();
+}
+
 export const getTotalCount = () => {
   if (filteredList.length > 0) {
     return filteredList.length;
diff --git a/src/js/utils/element.js b/src/js/utils/element.js
index 40f3f090..9a902d60 100644
--- a/src/js/utils/element.js
+++ b/src/js/utils/element.js
@@ -1,11 +1,13 @@
-export const getEletemt = (className) => document.querySelector(className);
+import { eventKeys } from "./event.js";
+
+export const getElement = (className) => document.querySelector(className);
 
 export const addClassName = ($element, className) => $element.classList.add(className);
 
 export const removeClassName = ($element, className) => $element.classList.remove(className);
 
 export const getTriggerEventName = (event) => {
-  if (keys.includes(event.key)) return event.key;
+  if (eventKeys.includes(event.key)) return event.key;
   return event.target.dataset.event;
 }
 
diff --git a/src/js/utils/event.js b/src/js/utils/event.js
index 1c901bd6..2ba9e4bf 100644
--- a/src/js/utils/event.js
+++ b/src/js/utils/event.js
@@ -1,11 +1,12 @@
-import { getTriggerEventName } from './element.js';
-import { upsertItem, deleteItem, stopEditing } from './todoList.js';
-import { getEletemt } from './todoListRenderer.js';
+import { upsertItem, deleteItem } from "../store/todoList.js";
+import { getEletemt, getTriggerEventName } from "./element.js";
+import { stopEditing } from "./helper.js";
 
 const $todoapp = getEletemt('.todoapp');
 const $todoList = getEletemt('.todo-list');
 
 const eventTypes = ['keyup', 'click', 'change', 'dblclick'];
+export const eventKeys = ['Enter', 'Escape'];
 
 const event = {
   onkeyup: {
@@ -42,5 +43,8 @@ export const setEvent = () => {
 }
 
 export const removeEvent = () => {
-  eventTypes.forEach(type => $todoList.removeEventListener(type, eventHandler));
+  eventTypes.forEach(type => {
+    const $element = type === 'keyup' ? $todoapp : $todoList;
+    $element.removeEventListener(type, eventHandler)
+  });
 }
\ No newline at end of file
diff --git a/src/js/views/todoList.js b/src/js/views/todoList.js
index 7cdb8070..5768fe28 100644
--- a/src/js/views/todoList.js
+++ b/src/js/views/todoList.js
@@ -1,5 +1,6 @@
-import { getTotalCount, getTodoList } from "../todoList.js";
-import { getEletemt } from "../todoListRenderer.js"
+import { getTodoList, getTotalCount } from "../store/todoList.js";
+import { getEletemt } from "../utils/element.js";
+
 
 const todoItemHtml = ({id, text, completed}) => {
   return `<li id="${id}" class="todo-item ${completed ? 'completed' : ''}">

From 54aba4055ab54aac7ff916c7bd88a51f46057547 Mon Sep 17 00:00:00 2001
From: BoMee-Yoon <primavera0331@naver.com>
Date: Thu, 3 Jun 2021 19:01:48 +0900
Subject: [PATCH 03/17] Refactor todoList

---
 src/js/app.js            |  1 +
 src/js/routes/router.js  | 19 ++++---------------
 src/js/store/todoList.js | 20 +++++++++++++++++---
 src/js/utils/element.js  |  6 ++++--
 src/js/utils/event.js    | 12 ++++++++----
 src/js/views/todoList.js |  9 +++++----
 6 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/src/js/app.js b/src/js/app.js
index 1420175a..8e00551e 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -2,6 +2,7 @@ import { removeRouter, setRouter } from './routes/router.js';
 import { setEvent, removeEvent } from './utils/event.js';
 import { renderView } from './views/todoList.js';
 
+
 export default () => {
   return {
     init: () => {
diff --git a/src/js/routes/router.js b/src/js/routes/router.js
index 985bf993..26bbfcdd 100644
--- a/src/js/routes/router.js
+++ b/src/js/routes/router.js
@@ -1,19 +1,8 @@
+import { filterBy } from "../store/todoList.js";
 
-const filter = {
-  active: () => filteredList = todoList.filter(item => !item.completed),
-  completed: () => filteredList = todoList.filter(item => item.completed),
-  all: () => filteredList = [],
-}
-
-const filterBy = ({ newURL }) => {
+export const setRouter = () => window.addEventListener('hashchange', ({ newURL }) => {
   const type = newURL.split('#')[1];
-  const filterType = filter[type];
-  if (!filterType) return;
-
-  filterType();
-  renderView();
-}
-
-export const setRouter = () => window.addEventListener('hashchange', filterBy);
+  filterBy(type);
+});
 
 export const removeRouter = () =>   window.removeEventListener('hashchange', filterBy);
\ No newline at end of file
diff --git a/src/js/store/todoList.js b/src/js/store/todoList.js
index 132121d4..bf22eb2f 100644
--- a/src/js/store/todoList.js
+++ b/src/js/store/todoList.js
@@ -1,9 +1,8 @@
-import { renderView } from "../views/todoList";
+import { getTriggerEventName } from "../utils/element.js";
+import { renderView } from "../views/todoList.js";
 
 const todoList = [];
 
-let filteredList = [];
-
 const addItem = (text) => {
   
   const newItem = {
@@ -44,6 +43,21 @@ export const deleteItem = (id) => {
   renderView();
 }
 
+let filteredList = [];
+const filter = {
+  active: () => filteredList = todoList.filter(item => !item.completed),
+  completed: () => filteredList = todoList.filter(item => item.completed),
+  all: () => filteredList = [],
+}
+
+export const filterBy = (type) => {
+  const filterType = filter[type];
+  if (!filterType) return;
+
+  filterType();
+  renderView();
+}
+
 export const getTotalCount = () => {
   if (filteredList.length > 0) {
     return filteredList.length;
diff --git a/src/js/utils/element.js b/src/js/utils/element.js
index 40f3f090..9a902d60 100644
--- a/src/js/utils/element.js
+++ b/src/js/utils/element.js
@@ -1,11 +1,13 @@
-export const getEletemt = (className) => document.querySelector(className);
+import { eventKeys } from "./event.js";
+
+export const getElement = (className) => document.querySelector(className);
 
 export const addClassName = ($element, className) => $element.classList.add(className);
 
 export const removeClassName = ($element, className) => $element.classList.remove(className);
 
 export const getTriggerEventName = (event) => {
-  if (keys.includes(event.key)) return event.key;
+  if (eventKeys.includes(event.key)) return event.key;
   return event.target.dataset.event;
 }
 
diff --git a/src/js/utils/event.js b/src/js/utils/event.js
index 1c901bd6..2ba9e4bf 100644
--- a/src/js/utils/event.js
+++ b/src/js/utils/event.js
@@ -1,11 +1,12 @@
-import { getTriggerEventName } from './element.js';
-import { upsertItem, deleteItem, stopEditing } from './todoList.js';
-import { getEletemt } from './todoListRenderer.js';
+import { upsertItem, deleteItem } from "../store/todoList.js";
+import { getEletemt, getTriggerEventName } from "./element.js";
+import { stopEditing } from "./helper.js";
 
 const $todoapp = getEletemt('.todoapp');
 const $todoList = getEletemt('.todo-list');
 
 const eventTypes = ['keyup', 'click', 'change', 'dblclick'];
+export const eventKeys = ['Enter', 'Escape'];
 
 const event = {
   onkeyup: {
@@ -42,5 +43,8 @@ export const setEvent = () => {
 }
 
 export const removeEvent = () => {
-  eventTypes.forEach(type => $todoList.removeEventListener(type, eventHandler));
+  eventTypes.forEach(type => {
+    const $element = type === 'keyup' ? $todoapp : $todoList;
+    $element.removeEventListener(type, eventHandler)
+  });
 }
\ No newline at end of file
diff --git a/src/js/views/todoList.js b/src/js/views/todoList.js
index 7cdb8070..fb28bfe3 100644
--- a/src/js/views/todoList.js
+++ b/src/js/views/todoList.js
@@ -1,5 +1,6 @@
-import { getTotalCount, getTodoList } from "../todoList.js";
-import { getEletemt } from "../todoListRenderer.js"
+import { getTodoList, getTotalCount } from "../store/todoList.js";
+import { getElement } from "../utils/element.js";
+
 
 const todoItemHtml = ({id, text, completed}) => {
   return `<li id="${id}" class="todo-item ${completed ? 'completed' : ''}">
@@ -13,12 +14,12 @@ const todoItemHtml = ({id, text, completed}) => {
 }
 
 const renderTodoList = () => {
-  const $todoList = getEletemt('.todo-list');
+  const $todoList = getElement('.todo-list');
   $todoList.innerHTML = getTodoList().map(todoItemHtml).join('');
 }
 
 const renderCount = () => {
-  const $count = getEletemt('.todo-count strong');
+  const $count = getElement('.todo-counter');
   $count.textContent = getTotalCount();
 
 }

From 95f6dbd4cd2ff5f60e54b7c558278e7a674958fd Mon Sep 17 00:00:00 2001
From: BoMee-Yoon <primavera0331@naver.com>
Date: Thu, 3 Jun 2021 21:27:50 +0900
Subject: [PATCH 04/17] Add const

---
 index.html               |  2 +-
 src/js/const/CONST.js    | 30 ++++++++++++++++++++++++++++++
 src/js/routes/router.js  |  6 ++++--
 src/js/store/todoList.js | 11 +++++++----
 src/js/utils/event.js    | 33 +++++++++++++++++----------------
 src/js/views/todoList.js | 13 +++++++------
 6 files changed, 66 insertions(+), 29 deletions(-)
 create mode 100644 src/js/const/CONST.js

diff --git a/index.html b/index.html
index 461e4746..5ce4ccda 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@ <h1>TODOS</h1>
         <input class="toggle-all" type="checkbox" />
         <ul id="todo-list" class="todo-list"></ul>
         <div class="count-container">
-          <span class="todo-count">총 <strong>0</strong> 개</span>
+          <span class="todo-count">총 <strong class="todo-counter">0</strong> 개</span>
           <ul class="filters">
             <li>
               <a class="all selected" href="#all">전체보기</a>
diff --git a/src/js/const/CONST.js b/src/js/const/CONST.js
new file mode 100644
index 00000000..66e7139c
--- /dev/null
+++ b/src/js/const/CONST.js
@@ -0,0 +1,30 @@
+export const EVENT = {
+  KEYUP: 'keyup',
+  CLICK: 'click',
+  CHANGE: 'change',
+  DBLCLICK: 'dblclick',
+};
+
+export const KEYS = {
+  ENTER: 'Enter',
+  ESCAPE: 'Escape',
+};
+
+export const TRIGGER = {
+  UPDATE_TEXT: 'update:text',
+  UPDATE_COMPLETED: 'update:completed',
+  UPDATE_EDITING_MODE: 'update:editing-mode',
+  DELETE: 'delete',
+}
+
+export const FILTER = {
+  ACTIVE: 'active',
+  ALL: 'all',
+  COMPLETED: 'completed'
+}
+
+export const CLASS_NAME = {
+  $LIST: '.todo-list',
+  $COUNTER: '.todo-counter',
+
+}
\ No newline at end of file
diff --git a/src/js/routes/router.js b/src/js/routes/router.js
index 26bbfcdd..7dc8fa91 100644
--- a/src/js/routes/router.js
+++ b/src/js/routes/router.js
@@ -1,8 +1,10 @@
 import { filterBy } from "../store/todoList.js";
 
-export const setRouter = () => window.addEventListener('hashchange', ({ newURL }) => {
+const HASH_CHANGE = 'hashchange'
+
+export const setRouter = () => window.addEventListener(HASH_CHANGE, ({ newURL }) => {
   const type = newURL.split('#')[1];
   filterBy(type);
 });
 
-export const removeRouter = () =>   window.removeEventListener('hashchange', filterBy);
\ No newline at end of file
+export const removeRouter = () =>   window.removeEventListener(HASH_CHANGE, filterBy);
\ No newline at end of file
diff --git a/src/js/store/todoList.js b/src/js/store/todoList.js
index bf22eb2f..f8a632d3 100644
--- a/src/js/store/todoList.js
+++ b/src/js/store/todoList.js
@@ -1,3 +1,4 @@
+import { TRIGGER } from "../const/CONST.js";
 import { getTriggerEventName } from "../utils/element.js";
 import { renderView } from "../views/todoList.js";
 
@@ -23,13 +24,13 @@ export const upsertItem = (event) => {
   const { target } = event;
   const trigger = getTriggerEventName(event);
 
-  if (trigger === 'update:text') {
+  if (trigger === TRIGGER.UPDATE_TEXT) {
     putItem(target.id, { key: 'text', value: target.value });
     stopEditing(target);
     return
   }
 
-  if (trigger === 'update:completed') {
+  if (trigger === TRIGGER.UPDATE_COMPLETED) {
     putItem(target.id, { key: 'completed', value: target.checked });
     return
   }
@@ -65,7 +66,9 @@ export const getTotalCount = () => {
   return todoList.length;
 }
 
+const mapTodoItem = (item, id) => ({ ...item, id })
+
 export const getTodoList = () => {
-  if (filteredList.length > 0) return filteredList.map((item, id) => ({ ...item, id }));
-  return todoList.map((item, id) => ({ ...item, id }))
+  if (filteredList.length > 0) return filteredList.map((item, id) => mapTodoItem(item, id));
+  return todoList.map((item, id) => mapTodoItem(item, id))
 }
\ No newline at end of file
diff --git a/src/js/utils/event.js b/src/js/utils/event.js
index 2ba9e4bf..7a53dd2b 100644
--- a/src/js/utils/event.js
+++ b/src/js/utils/event.js
@@ -1,33 +1,34 @@
+import { EVENT, KEYS, TRIGGER } from "../const/CONST.js";
 import { upsertItem, deleteItem } from "../store/todoList.js";
 import { getEletemt, getTriggerEventName } from "./element.js";
-import { stopEditing } from "./helper.js";
+import { startEditing, stopEditing } from "./helper.js";
 
 const $todoapp = getEletemt('.todoapp');
 const $todoList = getEletemt('.todo-list');
 
-const eventTypes = ['keyup', 'click', 'change', 'dblclick'];
-export const eventKeys = ['Enter', 'Escape'];
+const eventTypes = Object.values(EVENT);
+
+export const eventKeys = Object.values(KEYS);
 
 const event = {
-  onkeyup: {
-    Enter: (event) => upsertItem(event),
-    Escape: ({ target }) => stopEditing(target),
+  [EVENT.KEYUP]: {
+    [KEYS.ENTER]: (event) => upsertItem(event),
+    [KEYS.ESCAPE]: ({ target }) => stopEditing(target),
   },
-  onclick: {
-    delete: ({ id }) => deleteItem(id)
+  [EVENT.CLICK]: {
+    [TRIGGER.DELETE]: ({ id }) => deleteItem(id)
   },
-  onchange: {
-    'update:completed': (event) => upsertItem(event)
+  [EVENT.CHANGE]: {
+    [TRIGGER.UPDATE_COMPLETED]: (event) => upsertItem(event)
   },
-  ondblclick: {
-    'update:editing-mode': ({ target }) => stopEditing(target)
+  [EVENT.DBLCLICK]: {
+    [TRIGGER.UPDATE_EDITING_MODE]: ({ target }) => startEditing(target)
   }
 }
 
 const eventHandler = (name, e) =>  {
-  const type = `on${name}`;
   const trigger = getTriggerEventName(e);
-  const eventName = event[type];
+  const eventName = event[name];
 
   if (!eventName) return;
   if (!eventName[trigger]) return;
@@ -37,14 +38,14 @@ const eventHandler = (name, e) =>  {
 
 export const setEvent = () => {
   eventTypes.forEach(type => {
-    const $element = type === 'keyup' ? $todoapp : $todoList;
+    const $element = type === EVENT.KEYUP ? $todoapp : $todoList;
     $element.addEventListener(type, event => eventHandler(type, event));
   });
 }
 
 export const removeEvent = () => {
   eventTypes.forEach(type => {
-    const $element = type === 'keyup' ? $todoapp : $todoList;
+    const $element = type === EVENT.KEYUP ? $todoapp : $todoList;
     $element.removeEventListener(type, eventHandler)
   });
 }
\ No newline at end of file
diff --git a/src/js/views/todoList.js b/src/js/views/todoList.js
index fb28bfe3..5117b492 100644
--- a/src/js/views/todoList.js
+++ b/src/js/views/todoList.js
@@ -1,3 +1,4 @@
+import { CLASS_NAME, TRIGGER } from "../const/CONST.js";
 import { getTodoList, getTotalCount } from "../store/todoList.js";
 import { getElement } from "../utils/element.js";
 
@@ -5,21 +6,21 @@ import { getElement } from "../utils/element.js";
 const todoItemHtml = ({id, text, completed}) => {
   return `<li id="${id}" class="todo-item ${completed ? 'completed' : ''}">
   <div class="view">
-      <input data-event="update:completed" class="toggle" type="checkbox" id="${id}" ${completed ? 'checked' : ''}>
-      <label data-event="update:editing-mode" class="label">${text}</label>
-      <button data-event="delete" class="destroy" id="${id}"></button>
+      <input data-event="${TRIGGER.UPDATE_COMPLETED}" class="toggle" type="checkbox" id="${id}" ${completed ? 'checked' : ''}>
+      <label data-event="${TRIGGER.UPDATE_EDITING_MODE}" class="label">${text}</label>
+      <button data-event="${TRIGGER.DELETE}" class="destroy" id="${id}"></button>
   </div>
-  <input data-event="update:text" class="edit" value="${text}">
+  <input data-event="${TRIGGER.UPDATE_TEXT}" class="edit" value="${text}">
 </li>`
 }
 
 const renderTodoList = () => {
-  const $todoList = getElement('.todo-list');
+  const $todoList = getElement(CLASS_NAME.$LIST);
   $todoList.innerHTML = getTodoList().map(todoItemHtml).join('');
 }
 
 const renderCount = () => {
-  const $count = getElement('.todo-counter');
+  const $count = getElement(CLASS_NAME.$COUNTER);
   $count.textContent = getTotalCount();
 
 }

From 458ce21299450cc922eac2a2958890dba97461e7 Mon Sep 17 00:00:00 2001
From: BoMee-Yoon <primavera0331@naver.com>
Date: Thu, 3 Jun 2021 21:33:50 +0900
Subject: [PATCH 05/17] Resolve conflicts

---
 src/js/const/CONST.js    |  1 +
 src/js/routes/router.js  | 10 +---------
 src/js/store/todoList.js |  3 ---
 src/js/utils/event.js    | 21 +++------------------
 src/js/views/todoList.js |  5 -----
 5 files changed, 5 insertions(+), 35 deletions(-)

diff --git a/src/js/const/CONST.js b/src/js/const/CONST.js
index 66e7139c..e0cb1a0b 100644
--- a/src/js/const/CONST.js
+++ b/src/js/const/CONST.js
@@ -24,6 +24,7 @@ export const FILTER = {
 }
 
 export const CLASS_NAME = {
+  $APP: '.todoapp',
   $LIST: '.todo-list',
   $COUNTER: '.todo-counter',
 
diff --git a/src/js/routes/router.js b/src/js/routes/router.js
index a3ba5fea..7dc8fa91 100644
--- a/src/js/routes/router.js
+++ b/src/js/routes/router.js
@@ -1,18 +1,10 @@
 import { filterBy } from "../store/todoList.js";
 
-<<<<<<< HEAD
 const HASH_CHANGE = 'hashchange'
 
 export const setRouter = () => window.addEventListener(HASH_CHANGE, ({ newURL }) => {
-=======
-export const setRouter = () => window.addEventListener('hashchange', ({ newURL }) => {
->>>>>>> d6b99b4c9772ac0892fd1faa79029bc450296dc5
   const type = newURL.split('#')[1];
   filterBy(type);
 });
 
-<<<<<<< HEAD
-export const removeRouter = () =>   window.removeEventListener(HASH_CHANGE, filterBy);
-=======
-export const removeRouter = () =>   window.removeEventListener('hashchange', filterBy);
->>>>>>> d6b99b4c9772ac0892fd1faa79029bc450296dc5
+export const removeRouter = () =>   window.removeEventListener(HASH_CHANGE, filterBy);
\ No newline at end of file
diff --git a/src/js/store/todoList.js b/src/js/store/todoList.js
index 43758a8b..f8a632d3 100644
--- a/src/js/store/todoList.js
+++ b/src/js/store/todoList.js
@@ -1,7 +1,4 @@
-<<<<<<< HEAD
 import { TRIGGER } from "../const/CONST.js";
-=======
->>>>>>> d6b99b4c9772ac0892fd1faa79029bc450296dc5
 import { getTriggerEventName } from "../utils/element.js";
 import { renderView } from "../views/todoList.js";
 
diff --git a/src/js/utils/event.js b/src/js/utils/event.js
index 04319d2f..4a7dde72 100644
--- a/src/js/utils/event.js
+++ b/src/js/utils/event.js
@@ -1,25 +1,14 @@
-<<<<<<< HEAD
-import { EVENT, KEYS, TRIGGER } from "../const/CONST.js";
+import { CLASS_NAME, EVENT, KEYS, TRIGGER } from "../const/CONST.js";
 import { upsertItem, deleteItem } from "../store/todoList.js";
 import { getEletemt, getTriggerEventName } from "./element.js";
 import { startEditing, stopEditing } from "./helper.js";
-=======
-import { upsertItem, deleteItem } from "../store/todoList.js";
-import { getEletemt, getTriggerEventName } from "./element.js";
-import { stopEditing } from "./helper.js";
->>>>>>> d6b99b4c9772ac0892fd1faa79029bc450296dc5
 
-const $todoapp = getEletemt('.todoapp');
-const $todoList = getEletemt('.todo-list');
+const $todoapp = getEletemt(CLASS_NAME.$APP);
+const $todoList = getEletemt(CLASS_NAME.$LIST);
 
-<<<<<<< HEAD
 const eventTypes = Object.values(EVENT);
 
 export const eventKeys = Object.values(KEYS);
-=======
-const eventTypes = ['keyup', 'click', 'change', 'dblclick'];
-export const eventKeys = ['Enter', 'Escape'];
->>>>>>> d6b99b4c9772ac0892fd1faa79029bc450296dc5
 
 const event = {
   [EVENT.KEYUP]: {
@@ -56,11 +45,7 @@ export const setEvent = () => {
 
 export const removeEvent = () => {
   eventTypes.forEach(type => {
-<<<<<<< HEAD
     const $element = type === EVENT.KEYUP ? $todoapp : $todoList;
-=======
-    const $element = type === 'keyup' ? $todoapp : $todoList;
->>>>>>> d6b99b4c9772ac0892fd1faa79029bc450296dc5
     $element.removeEventListener(type, eventHandler)
   });
 }
\ No newline at end of file
diff --git a/src/js/views/todoList.js b/src/js/views/todoList.js
index a5aa96c0..5117b492 100644
--- a/src/js/views/todoList.js
+++ b/src/js/views/todoList.js
@@ -1,11 +1,6 @@
-<<<<<<< HEAD
 import { CLASS_NAME, TRIGGER } from "../const/CONST.js";
 import { getTodoList, getTotalCount } from "../store/todoList.js";
 import { getElement } from "../utils/element.js";
-=======
-import { getTodoList, getTotalCount } from "../store/todoList.js";
-import { getEletemt } from "../utils/element.js";
->>>>>>> d6b99b4c9772ac0892fd1faa79029bc450296dc5
 
 
 const todoItemHtml = ({id, text, completed}) => {

From 3bd04d30523fd35ad611e458ac0afca1190c051a Mon Sep 17 00:00:00 2001
From: BoMee-Yoon <primavera0331@naver.com>
Date: Thu, 3 Jun 2021 21:36:11 +0900
Subject: [PATCH 06/17] Refactor filter

---
 src/js/store/todoList.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/js/store/todoList.js b/src/js/store/todoList.js
index f8a632d3..0c6988a3 100644
--- a/src/js/store/todoList.js
+++ b/src/js/store/todoList.js
@@ -1,4 +1,4 @@
-import { TRIGGER } from "../const/CONST.js";
+import { FILTER, TRIGGER } from "../const/CONST.js";
 import { getTriggerEventName } from "../utils/element.js";
 import { renderView } from "../views/todoList.js";
 
@@ -46,9 +46,9 @@ export const deleteItem = (id) => {
 
 let filteredList = [];
 const filter = {
-  active: () => filteredList = todoList.filter(item => !item.completed),
-  completed: () => filteredList = todoList.filter(item => item.completed),
-  all: () => filteredList = [],
+  [FILTER.ACTIVE]: () => filteredList = todoList.filter(item => !item.completed),
+  [FILTER.COMPLETED]: () => filteredList = todoList.filter(item => item.completed),
+  [FILTER.ALL]: () => filteredList = [],
 }
 
 export const filterBy = (type) => {

From 04df5e3dd82df6303f0ca1340b4204e902b9ebe0 Mon Sep 17 00:00:00 2001
From: BoMee-Yoon <primavera0331@naver.com>
Date: Sat, 5 Jun 2021 13:47:39 +0900
Subject: [PATCH 07/17] Delete all files

---
 index.html               |  1 -
 src/js/app.js            | 18 ----------
 src/js/const/CONST.js    | 31 -----------------
 src/js/index.js          |  6 ----
 src/js/routes/router.js  | 10 ------
 src/js/store/todoList.js | 74 ----------------------------------------
 src/js/utils/element.js  | 14 --------
 src/js/utils/event.js    | 51 ---------------------------
 src/js/utils/helper.js   |  9 -----
 src/js/views/todoList.js | 31 -----------------
 10 files changed, 245 deletions(-)
 delete mode 100644 src/js/app.js
 delete mode 100644 src/js/const/CONST.js
 delete mode 100644 src/js/index.js
 delete mode 100644 src/js/routes/router.js
 delete mode 100644 src/js/store/todoList.js
 delete mode 100644 src/js/utils/element.js
 delete mode 100644 src/js/utils/event.js
 delete mode 100644 src/js/utils/helper.js
 delete mode 100644 src/js/views/todoList.js

diff --git a/index.html b/index.html
index 5ce4ccda..91fb34de 100644
--- a/index.html
+++ b/index.html
@@ -34,6 +34,5 @@ <h1>TODOS</h1>
         </div>
       </main>
     </div>
-    <script type="module" src="./src/js/index.js"></script>
   </body>
 </html>
diff --git a/src/js/app.js b/src/js/app.js
deleted file mode 100644
index 8e00551e..00000000
--- a/src/js/app.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { removeRouter, setRouter } from './routes/router.js';
-import { setEvent, removeEvent } from './utils/event.js';
-import { renderView } from './views/todoList.js';
-
-
-export default () => {
-  return {
-    init: () => {
-      renderView();
-      setEvent();
-      setRouter();
-    },
-    destroy: () => {
-      removeEvent();
-      removeRouter();
-    }
-  }
-}
diff --git a/src/js/const/CONST.js b/src/js/const/CONST.js
deleted file mode 100644
index e0cb1a0b..00000000
--- a/src/js/const/CONST.js
+++ /dev/null
@@ -1,31 +0,0 @@
-export const EVENT = {
-  KEYUP: 'keyup',
-  CLICK: 'click',
-  CHANGE: 'change',
-  DBLCLICK: 'dblclick',
-};
-
-export const KEYS = {
-  ENTER: 'Enter',
-  ESCAPE: 'Escape',
-};
-
-export const TRIGGER = {
-  UPDATE_TEXT: 'update:text',
-  UPDATE_COMPLETED: 'update:completed',
-  UPDATE_EDITING_MODE: 'update:editing-mode',
-  DELETE: 'delete',
-}
-
-export const FILTER = {
-  ACTIVE: 'active',
-  ALL: 'all',
-  COMPLETED: 'completed'
-}
-
-export const CLASS_NAME = {
-  $APP: '.todoapp',
-  $LIST: '.todo-list',
-  $COUNTER: '.todo-counter',
-
-}
\ No newline at end of file
diff --git a/src/js/index.js b/src/js/index.js
deleted file mode 100644
index 97593f40..00000000
--- a/src/js/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import App from './app.js';
-
-const app = App();
-
-document.addEventListener('DOMContentLoaded', () => app.init());
-document.addEventListener('beforeunload', () => app.destroy());
\ No newline at end of file
diff --git a/src/js/routes/router.js b/src/js/routes/router.js
deleted file mode 100644
index 7dc8fa91..00000000
--- a/src/js/routes/router.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { filterBy } from "../store/todoList.js";
-
-const HASH_CHANGE = 'hashchange'
-
-export const setRouter = () => window.addEventListener(HASH_CHANGE, ({ newURL }) => {
-  const type = newURL.split('#')[1];
-  filterBy(type);
-});
-
-export const removeRouter = () =>   window.removeEventListener(HASH_CHANGE, filterBy);
\ No newline at end of file
diff --git a/src/js/store/todoList.js b/src/js/store/todoList.js
deleted file mode 100644
index 0c6988a3..00000000
--- a/src/js/store/todoList.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import { FILTER, TRIGGER } from "../const/CONST.js";
-import { getTriggerEventName } from "../utils/element.js";
-import { renderView } from "../views/todoList.js";
-
-const todoList = [];
-
-const addItem = (text) => {
-  
-  const newItem = {
-    text,
-    completed: false,
-  };
-
-  todoList.push(newItem);
-  renderView();
-}
-
-const putItem = (id, { key, value }) => {
-  todoList[Number(id)][key] = value;
-  renderView();
-}
-
-export const upsertItem = (event) => {
-  const { target } = event;
-  const trigger = getTriggerEventName(event);
-
-  if (trigger === TRIGGER.UPDATE_TEXT) {
-    putItem(target.id, { key: 'text', value: target.value });
-    stopEditing(target);
-    return
-  }
-
-  if (trigger === TRIGGER.UPDATE_COMPLETED) {
-    putItem(target.id, { key: 'completed', value: target.checked });
-    return
-  }
-
-  addItem(target.value);
-  target.value = '';
-}
-
-export const deleteItem = (id) => {
-  todoList.splice(id, 1);
-  renderView();
-}
-
-let filteredList = [];
-const filter = {
-  [FILTER.ACTIVE]: () => filteredList = todoList.filter(item => !item.completed),
-  [FILTER.COMPLETED]: () => filteredList = todoList.filter(item => item.completed),
-  [FILTER.ALL]: () => filteredList = [],
-}
-
-export const filterBy = (type) => {
-  const filterType = filter[type];
-  if (!filterType) return;
-
-  filterType();
-  renderView();
-}
-
-export const getTotalCount = () => {
-  if (filteredList.length > 0) {
-    return filteredList.length;
-  }
-  return todoList.length;
-}
-
-const mapTodoItem = (item, id) => ({ ...item, id })
-
-export const getTodoList = () => {
-  if (filteredList.length > 0) return filteredList.map((item, id) => mapTodoItem(item, id));
-  return todoList.map((item, id) => mapTodoItem(item, id))
-}
\ No newline at end of file
diff --git a/src/js/utils/element.js b/src/js/utils/element.js
deleted file mode 100644
index 9a902d60..00000000
--- a/src/js/utils/element.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { eventKeys } from "./event.js";
-
-export const getElement = (className) => document.querySelector(className);
-
-export const addClassName = ($element, className) => $element.classList.add(className);
-
-export const removeClassName = ($element, className) => $element.classList.remove(className);
-
-export const getTriggerEventName = (event) => {
-  if (eventKeys.includes(event.key)) return event.key;
-  return event.target.dataset.event;
-}
-
-export const getTodoItemElement = target => target.closest('.todo-item');
\ No newline at end of file
diff --git a/src/js/utils/event.js b/src/js/utils/event.js
deleted file mode 100644
index 4a7dde72..00000000
--- a/src/js/utils/event.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { CLASS_NAME, EVENT, KEYS, TRIGGER } from "../const/CONST.js";
-import { upsertItem, deleteItem } from "../store/todoList.js";
-import { getEletemt, getTriggerEventName } from "./element.js";
-import { startEditing, stopEditing } from "./helper.js";
-
-const $todoapp = getEletemt(CLASS_NAME.$APP);
-const $todoList = getEletemt(CLASS_NAME.$LIST);
-
-const eventTypes = Object.values(EVENT);
-
-export const eventKeys = Object.values(KEYS);
-
-const event = {
-  [EVENT.KEYUP]: {
-    [KEYS.ENTER]: (event) => upsertItem(event),
-    [KEYS.ESCAPE]: ({ target }) => stopEditing(target),
-  },
-  [EVENT.CLICK]: {
-    [TRIGGER.DELETE]: ({ id }) => deleteItem(id)
-  },
-  [EVENT.CHANGE]: {
-    [TRIGGER.UPDATE_COMPLETED]: (event) => upsertItem(event)
-  },
-  [EVENT.DBLCLICK]: {
-    [TRIGGER.UPDATE_EDITING_MODE]: ({ target }) => startEditing(target)
-  }
-}
-
-const eventHandler = (name, e) =>  {
-  const trigger = getTriggerEventName(e);
-  const eventName = event[name];
-
-  if (!eventName) return;
-  if (!eventName[trigger]) return;
-
-  eventName[trigger](e);
-}
-
-export const setEvent = () => {
-  eventTypes.forEach(type => {
-    const $element = type === EVENT.KEYUP ? $todoapp : $todoList;
-    $element.addEventListener(type, event => eventHandler(type, event));
-  });
-}
-
-export const removeEvent = () => {
-  eventTypes.forEach(type => {
-    const $element = type === EVENT.KEYUP ? $todoapp : $todoList;
-    $element.removeEventListener(type, eventHandler)
-  });
-}
\ No newline at end of file
diff --git a/src/js/utils/helper.js b/src/js/utils/helper.js
deleted file mode 100644
index a1d1614c..00000000
--- a/src/js/utils/helper.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export const stopEditing = (target) => {
-  const $item = getTodoItemElement(target);
-  removeClassName($item, 'editing');
-}
-
-export const startEditing = (target) => {
-  const $item = getTodoItemElement(target);
-  addClassName($item, 'editing')
-}
\ No newline at end of file
diff --git a/src/js/views/todoList.js b/src/js/views/todoList.js
deleted file mode 100644
index 5117b492..00000000
--- a/src/js/views/todoList.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { CLASS_NAME, TRIGGER } from "../const/CONST.js";
-import { getTodoList, getTotalCount } from "../store/todoList.js";
-import { getElement } from "../utils/element.js";
-
-
-const todoItemHtml = ({id, text, completed}) => {
-  return `<li id="${id}" class="todo-item ${completed ? 'completed' : ''}">
-  <div class="view">
-      <input data-event="${TRIGGER.UPDATE_COMPLETED}" class="toggle" type="checkbox" id="${id}" ${completed ? 'checked' : ''}>
-      <label data-event="${TRIGGER.UPDATE_EDITING_MODE}" class="label">${text}</label>
-      <button data-event="${TRIGGER.DELETE}" class="destroy" id="${id}"></button>
-  </div>
-  <input data-event="${TRIGGER.UPDATE_TEXT}" class="edit" value="${text}">
-</li>`
-}
-
-const renderTodoList = () => {
-  const $todoList = getElement(CLASS_NAME.$LIST);
-  $todoList.innerHTML = getTodoList().map(todoItemHtml).join('');
-}
-
-const renderCount = () => {
-  const $count = getElement(CLASS_NAME.$COUNTER);
-  $count.textContent = getTotalCount();
-
-}
-
-export const renderView = () => {
-  renderTodoList();
-  renderCount();
-}
\ No newline at end of file

From c4ed76d4ffa053eb839465950e830a1bdeea765f Mon Sep 17 00:00:00 2001
From: BoMee-Yoon <primavera0331@naver.com>
Date: Sat, 5 Jun 2021 13:59:40 +0900
Subject: [PATCH 08/17] Add TodoApp

---
 index.html                     |  1 +
 index.js                       |  3 ++
 src/js/App.js                  | 54 ++++++++++++++++++++++++++++++++++
 src/js/components/TodoInput.js |  5 ++++
 4 files changed, 63 insertions(+)
 create mode 100644 index.js
 create mode 100644 src/js/App.js
 create mode 100644 src/js/components/TodoInput.js

diff --git a/index.html b/index.html
index 91fb34de..fb746fef 100644
--- a/index.html
+++ b/index.html
@@ -34,5 +34,6 @@ <h1>TODOS</h1>
         </div>
       </main>
     </div>
+    <script type="module" src="./index.js"></script>
   </body>
 </html>
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..1e9a3392
--- /dev/null
+++ b/index.js
@@ -0,0 +1,3 @@
+import app from './src/js/App.js';
+
+document.addEventListener('DOMContentLoaded', app);
\ No newline at end of file
diff --git a/src/js/App.js b/src/js/App.js
new file mode 100644
index 00000000..d5f5f0a3
--- /dev/null
+++ b/src/js/App.js
@@ -0,0 +1,54 @@
+import { TodoInput } from "./components/TodoInput";
+
+class NewTodoItem {
+  constructor(text) {
+    return {
+      completed: false,
+      text,
+    }
+  } 
+}
+
+class App {
+  constructor(TodoList, TodoCount) {
+    this.TodoList = TodoList;
+    this.TodoCount = TodoCount;
+
+    this.items = [];
+
+    this.init();
+  }
+
+  init() {
+    this.setState([]);
+    this.setEvent();
+  }
+
+  get count() {
+    return this.items.length
+  }
+
+  setState(updatedItems) {
+    this.items = updatedItems.map((item, id) => ({ ...item, id }));
+    // this.TodoList.setState(this.items);
+    // this.TodoCount.setState(this.count);
+  }
+
+  setEvent() {
+    this.addTodo();
+  }
+
+  addTodo() {
+    new TodoInput({
+      add: text => {
+        const newItem = new NewTodoItem(text);
+        this.items.push(newItem);
+        this.setState(this.items);
+      }
+    })
+  }
+}
+
+export default function() {
+  return new App();
+}
\ No newline at end of file
diff --git a/src/js/components/TodoInput.js b/src/js/components/TodoInput.js
new file mode 100644
index 00000000..d8646076
--- /dev/null
+++ b/src/js/components/TodoInput.js
@@ -0,0 +1,5 @@
+export class TodoInput {
+  constructor(add) {
+    this._add = add;
+  }
+}
\ No newline at end of file

From cffeebe937f452cf44a219a2eaeb07f82a3ccd96 Mon Sep 17 00:00:00 2001
From: BoMee-Yoon <primavera0331@naver.com>
Date: Sat, 5 Jun 2021 14:03:13 +0900
Subject: [PATCH 09/17] Add TodoList

---
 src/js/App.js                  |  7 ++++---
 src/js/components/TodoInput.js |  2 +-
 src/js/components/TodoList.js  | 15 +++++++++++++++
 3 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 src/js/components/TodoList.js

diff --git a/src/js/App.js b/src/js/App.js
index d5f5f0a3..6b387fb7 100644
--- a/src/js/App.js
+++ b/src/js/App.js
@@ -1,4 +1,5 @@
-import { TodoInput } from "./components/TodoInput";
+import TodoInput from "./components/TodoInput.js";
+import TodoList from './components/TodoList.js';
 
 class NewTodoItem {
   constructor(text) {
@@ -30,7 +31,7 @@ class App {
 
   setState(updatedItems) {
     this.items = updatedItems.map((item, id) => ({ ...item, id }));
-    // this.TodoList.setState(this.items);
+    this.TodoList.setState(this.items);
     // this.TodoCount.setState(this.count);
   }
 
@@ -50,5 +51,5 @@ class App {
 }
 
 export default function() {
-  return new App();
+  return new App(new TodoList());
 }
\ No newline at end of file
diff --git a/src/js/components/TodoInput.js b/src/js/components/TodoInput.js
index d8646076..805faf48 100644
--- a/src/js/components/TodoInput.js
+++ b/src/js/components/TodoInput.js
@@ -1,4 +1,4 @@
-export class TodoInput {
+export default class TodoInput {
   constructor(add) {
     this._add = add;
   }
diff --git a/src/js/components/TodoList.js b/src/js/components/TodoList.js
new file mode 100644
index 00000000..03c97769
--- /dev/null
+++ b/src/js/components/TodoList.js
@@ -0,0 +1,15 @@
+export default class TodoList {
+  constructor() {
+
+    this.items = [];
+  }
+
+  setState(updatedItems) {
+    this.items = updatedItems;
+    this.render();
+  }
+
+  render() {
+    console.log('render');
+  }
+}
\ No newline at end of file

From 5ebaedb8a2464c7b4c54f7b6df21e0a2d0de883b Mon Sep 17 00:00:00 2001
From: BoMee-Yoon <primavera0331@naver.com>
Date: Sat, 5 Jun 2021 14:05:10 +0900
Subject: [PATCH 10/17] Add TodoCount

---
 src/js/App.js                  |  5 +++--
 src/js/components/TodoCount.js | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 src/js/components/TodoCount.js

diff --git a/src/js/App.js b/src/js/App.js
index 6b387fb7..7cd09057 100644
--- a/src/js/App.js
+++ b/src/js/App.js
@@ -1,5 +1,6 @@
 import TodoInput from "./components/TodoInput.js";
 import TodoList from './components/TodoList.js';
+import TodoCount from './components/TodoCount.js';
 
 class NewTodoItem {
   constructor(text) {
@@ -32,7 +33,7 @@ class App {
   setState(updatedItems) {
     this.items = updatedItems.map((item, id) => ({ ...item, id }));
     this.TodoList.setState(this.items);
-    // this.TodoCount.setState(this.count);
+    this.TodoCount.setState(this.count);
   }
 
   setEvent() {
@@ -51,5 +52,5 @@ class App {
 }
 
 export default function() {
-  return new App(new TodoList());
+  return new App(new TodoList(), new TodoCount());
 }
\ No newline at end of file
diff --git a/src/js/components/TodoCount.js b/src/js/components/TodoCount.js
new file mode 100644
index 00000000..e9d5c749
--- /dev/null
+++ b/src/js/components/TodoCount.js
@@ -0,0 +1,14 @@
+export default class TodoCount {
+  constructor() {
+    this.count = 0;
+  }
+
+  setState(updatedCount) {
+    this.count = updatedCount;
+    this.render();
+  }
+
+  render() {
+    console.log('count render');
+  }
+}
\ No newline at end of file

From 9a882488ab0c0ba714ade89dea7f620134db14e5 Mon Sep 17 00:00:00 2001
From: BoMee-Yoon <primavera0331@naver.com>
Date: Sat, 5 Jun 2021 14:11:35 +0900
Subject: [PATCH 11/17] Add const

---
 src/js/CONST.js         | 28 ++++++++++++++++++++++++++++
 src/js/utils/element.js |  1 +
 2 files changed, 29 insertions(+)
 create mode 100644 src/js/CONST.js
 create mode 100644 src/js/utils/element.js

diff --git a/src/js/CONST.js b/src/js/CONST.js
new file mode 100644
index 00000000..0136252e
--- /dev/null
+++ b/src/js/CONST.js
@@ -0,0 +1,28 @@
+export const EVENT = {
+  KEY_UP: 'keyup',
+  CLICK: 'click',
+  CHANGE: 'change',
+  DBL_CLICK: 'dblclick',
+}
+
+export const CUSTOM_EVENT = {
+  DELETE: 'delete',
+  UPDATE_TEXT: 'update:text',
+  UPDATE_COMPLETED: 'update:complated', 
+  ADD: 'add',
+}
+
+export const CLASS_NAME = {
+  TODO_APP: 'todo-app',
+  NEW_TODO: 'new-todo',
+  TODO_LIST: 'todo-list',
+  TODO_ITEM: 'todo-item',
+  TODO_COUNTER: 'todo-counter',
+  EDITING: 'editing',
+}
+
+export const FILTER = {
+  ALL: 'all',
+  ACTIVE: 'active',
+  COMPLETED: 'completed',
+}
\ No newline at end of file
diff --git a/src/js/utils/element.js b/src/js/utils/element.js
new file mode 100644
index 00000000..dbdf05ee
--- /dev/null
+++ b/src/js/utils/element.js
@@ -0,0 +1 @@
+export const $ = (className) => document.querySelector(`.${className}`);
\ No newline at end of file

From e28361458756cf49ffb04c7713f47c55721be824 Mon Sep 17 00:00:00 2001
From: BoMee-Yoon <primavera0331@naver.com>
Date: Sat, 5 Jun 2021 14:18:26 +0900
Subject: [PATCH 12/17] Add TodoList render method

---
 src/js/App.js                    |  3 ++-
 src/js/components/TodoList.js    |  8 ++++++--
 src/js/views/TodoItemTemplate.js | 12 ++++++++++++
 3 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 src/js/views/TodoItemTemplate.js

diff --git a/src/js/App.js b/src/js/App.js
index 7cd09057..58dd14f1 100644
--- a/src/js/App.js
+++ b/src/js/App.js
@@ -22,7 +22,8 @@ class App {
   }
 
   init() {
-    this.setState([]);
+    this.setState([{ completed: true, text: '1 할일' }]);
+    
     this.setEvent();
   }
 
diff --git a/src/js/components/TodoList.js b/src/js/components/TodoList.js
index 03c97769..c1fb9043 100644
--- a/src/js/components/TodoList.js
+++ b/src/js/components/TodoList.js
@@ -1,6 +1,10 @@
+import { CLASS_NAME } from "../CONST.js";
+import { $ } from "../utils/element.js";
+import TodoItemTemplate from "../views/TodoItemTemplate.js";
+
 export default class TodoList {
   constructor() {
-
+    this.$todoList = $(CLASS_NAME.TODO_LIST);
     this.items = [];
   }
 
@@ -10,6 +14,6 @@ export default class TodoList {
   }
 
   render() {
-    console.log('render');
+    this.$todoList.innerHTML = this.items.map(TodoItemTemplate).join('');
   }
 }
\ No newline at end of file
diff --git a/src/js/views/TodoItemTemplate.js b/src/js/views/TodoItemTemplate.js
new file mode 100644
index 00000000..be4e9c2a
--- /dev/null
+++ b/src/js/views/TodoItemTemplate.js
@@ -0,0 +1,12 @@
+export default function({ id, completed, text }) {
+  return `
+  <li id=${id}>
+    <div class="view">
+      <input id="${id}" class="toggle ${completed ? 'completed' : ''}" type="checkbox" ${completed ? 'checkted' : ''} />
+      <label class="label">${text}</label>
+      <button id="${id}" class="destroy"></button>
+    </div>
+    <input id="${id}" class="edit" value="${text}" />
+  </li>
+  `
+}
\ No newline at end of file

From c8247cceb75b7a1fb70b737af237925bceace946 Mon Sep 17 00:00:00 2001
From: BoMee-Yoon <primavera0331@naver.com>
Date: Sat, 5 Jun 2021 14:41:13 +0900
Subject: [PATCH 13/17] Add onKeyUp method

---
 src/js/CONST.js                |  5 +++++
 src/js/components/TodoInput.js | 39 +++++++++++++++++++++++++++++++++-
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/js/CONST.js b/src/js/CONST.js
index 0136252e..b1efa75b 100644
--- a/src/js/CONST.js
+++ b/src/js/CONST.js
@@ -5,6 +5,11 @@ export const EVENT = {
   DBL_CLICK: 'dblclick',
 }
 
+export const KEY_UP_EVENT = {
+  ENTER: 'Enter',
+  ESCAPE: 'Escape',
+}
+
 export const CUSTOM_EVENT = {
   DELETE: 'delete',
   UPDATE_TEXT: 'update:text',
diff --git a/src/js/components/TodoInput.js b/src/js/components/TodoInput.js
index 805faf48..e89c87e3 100644
--- a/src/js/components/TodoInput.js
+++ b/src/js/components/TodoInput.js
@@ -1,5 +1,42 @@
+import { CLASS_NAME, CUSTOM_EVENT, EVENT, KEY_UP_EVENT } from "../CONST.js";
+import { $ } from "../utils/element.js";
+
 export default class TodoInput {
-  constructor(add) {
+  constructor({add}) {
     this._add = add;
+
+    this.$todoInput = $(CLASS_NAME.NEW_TODO);
+    this.setEvent();
+  }
+
+  isValid(value) {
+    if (!value) {
+      alert('할일을 입력하세요.')
+    }
+    return !!value;
+  }
+
+  reset() {
+    this.$todoInput.value = '';
+  }
+
+  keyUpEvent = {
+    [KEY_UP_EVENT.ENTER]: ({ value }) => {
+      if (this.isValid(value)) {
+        this._add(value);
+      }
+      this.reset()
+    },
+    [KEY_UP_EVENT.ESCAPE]: () => {
+      this.reset();
+    }
+  }
+
+  onKeyUp({ key, target }) {
+    this.keyUpEvent[key] && this.keyUpEvent[key](target);
+  }
+
+  setEvent() {
+    this.$todoInput.addEventListener(EVENT.KEY_UP, this.onKeyUp.bind(this))
   }
 }
\ No newline at end of file

From 6b0495869504bfedd402fb92eec297831840ac37 Mon Sep 17 00:00:00 2001
From: BoMee-Yoon <primavera0331@naver.com>
Date: Sat, 5 Jun 2021 15:27:28 +0900
Subject: [PATCH 14/17] Add update events to TodoList

---
 src/js/App.js                    | 21 +++++++++++++----
 src/js/CONST.js                  |  5 ++++
 src/js/components/TodoList.js    | 39 +++++++++++++++++++++++++++++++-
 src/js/views/TodoItemTemplate.js | 10 ++++----
 4 files changed, 66 insertions(+), 9 deletions(-)

diff --git a/src/js/App.js b/src/js/App.js
index 58dd14f1..066f5db9 100644
--- a/src/js/App.js
+++ b/src/js/App.js
@@ -22,8 +22,7 @@ class App {
   }
 
   init() {
-    this.setState([{ completed: true, text: '1 할일' }]);
-    
+    this.setState([]);
     this.setEvent();
   }
 
@@ -39,6 +38,7 @@ class App {
 
   setEvent() {
     this.addTodo();
+    this.updateTodo();
   }
 
   addTodo() {
@@ -50,8 +50,21 @@ class App {
       }
     })
   }
-}
+
+  updateTodo() {
+    this.TodoList.setEvent({
+      update: (id, { key, value }) => {
+        this.items[id][key] = value;
+        this.setState(this.items);
+      },
+      delete: (id) => {
+        this.items.splice(id, 1);
+        this.setState(this.items);
+      }
+    })
+  }
+};
 
 export default function() {
   return new App(new TodoList(), new TodoCount());
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/src/js/CONST.js b/src/js/CONST.js
index b1efa75b..e275e8a4 100644
--- a/src/js/CONST.js
+++ b/src/js/CONST.js
@@ -30,4 +30,9 @@ export const FILTER = {
   ALL: 'all',
   ACTIVE: 'active',
   COMPLETED: 'completed',
+}
+
+export const ITEM_KEY = {
+  COMPLETED: 'completed',
+  TEXT: 'text',
 }
\ No newline at end of file
diff --git a/src/js/components/TodoList.js b/src/js/components/TodoList.js
index c1fb9043..95fd33f7 100644
--- a/src/js/components/TodoList.js
+++ b/src/js/components/TodoList.js
@@ -1,4 +1,4 @@
-import { CLASS_NAME } from "../CONST.js";
+import { CLASS_NAME, CUSTOM_EVENT, EVENT, ITEM_KEY, KEY_UP_EVENT } from "../CONST.js";
 import { $ } from "../utils/element.js";
 import TodoItemTemplate from "../views/TodoItemTemplate.js";
 
@@ -13,6 +13,43 @@ export default class TodoList {
     this.render();
   }
 
+  onClick(target, deleteItem) {
+    target.dataset.event === CUSTOM_EVENT.DELETE && deleteItem(Number(target.id)); 
+  }
+
+  onChange(target, update) {
+    if (target.dataset.event === CUSTOM_EVENT.UPDATE_COMPLETED) {
+      update(Number(target.id), { key: ITEM_KEY.COMPLETED, value: target.checked });
+      return;
+    }
+
+    if (target.dataset.event === CUSTOM_EVENT.UPDATE_TEXT) {
+      update(Number(target.id), { key: ITEM_KEY.TEXT, value: target.value });
+      return;
+    }
+  }
+
+  onDblclick(target) {
+    target.closest(`.${CLASS_NAME.TODO_ITEM}`).classList.add(CLASS_NAME.EDITING);
+  }
+
+  onKeyUp(key, target, update) {
+    if (key === KEY_UP_EVENT.ENTER) {
+      update(Number(target.id), { key: ITEM_KEY.TEXT, value: target.value });
+      return;
+    }
+    if (key === KEY_UP_EVENT.ESCAPE) {
+      target.closest(`.${CLASS_NAME.TODO_ITEM}`).classList.remove(CLASS_NAME.EDITING);
+    }
+  }
+
+  setEvent({ update, delete: deleteItem }) {
+    this.$todoList.addEventListener(EVENT.CLICK, ({ target }) => this.onClick(target, deleteItem));
+    this.$todoList.addEventListener(EVENT.CHANGE, ({ target }) => this.onChange(target, update));
+    this.$todoList.addEventListener(EVENT.DBL_CLICK, ({ target }) => this.onDblclick(target));
+    this.$todoList.addEventListener(EVENT.KEY_UP, ({ key, target }) => this.onKeyUp(key, target, update));
+  }
+
   render() {
     this.$todoList.innerHTML = this.items.map(TodoItemTemplate).join('');
   }
diff --git a/src/js/views/TodoItemTemplate.js b/src/js/views/TodoItemTemplate.js
index be4e9c2a..fc2df1d4 100644
--- a/src/js/views/TodoItemTemplate.js
+++ b/src/js/views/TodoItemTemplate.js
@@ -1,12 +1,14 @@
+import { CUSTOM_EVENT } from "../CONST.js";
+
 export default function({ id, completed, text }) {
   return `
-  <li id=${id}>
+  <li id=${id} class="todo-item ${completed ? 'completed' : ''}">
     <div class="view">
-      <input id="${id}" class="toggle ${completed ? 'completed' : ''}" type="checkbox" ${completed ? 'checkted' : ''} />
+      <input id="${id}" data-event="${CUSTOM_EVENT.UPDATE_COMPLETED}" class="toggle ${completed ? 'completed' : ''}" type="checkbox" ${completed ? 'checked' : ''} />
       <label class="label">${text}</label>
-      <button id="${id}" class="destroy"></button>
+      <button data-event="${CUSTOM_EVENT.DELETE}" id="${id}" class="destroy"></button>
     </div>
-    <input id="${id}" class="edit" value="${text}" />
+    <input id="${id}" data-event="${CUSTOM_EVENT.UPDATE_TEXT}" class="edit" value="${text}" />
   </li>
   `
 }
\ No newline at end of file

From 3e3811edb0b3ea6aea22b2c0fe289255d242776d Mon Sep 17 00:00:00 2001
From: BoMee-Yoon <primavera0331@naver.com>
Date: Sat, 5 Jun 2021 15:30:35 +0900
Subject: [PATCH 15/17] Add todoCount render method

---
 src/js/components/TodoCount.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/js/components/TodoCount.js b/src/js/components/TodoCount.js
index e9d5c749..2f0fa433 100644
--- a/src/js/components/TodoCount.js
+++ b/src/js/components/TodoCount.js
@@ -1,5 +1,9 @@
+import { CLASS_NAME } from "../CONST.js";
+import { $ } from "../utils/element.js";
+
 export default class TodoCount {
   constructor() {
+    this.$todoCount = $(CLASS_NAME.TODO_COUNTER);
     this.count = 0;
   }
 
@@ -9,6 +13,6 @@ export default class TodoCount {
   }
 
   render() {
-    console.log('count render');
+    this.$todoCount.textContent = this.count;
   }
 }
\ No newline at end of file

From 370523d23222fa3a2644c279d71bb15062dca2a9 Mon Sep 17 00:00:00 2001
From: BoMee-Yoon <primavera0331@naver.com>
Date: Sat, 5 Jun 2021 15:58:49 +0900
Subject: [PATCH 16/17] Add FilterCount

---
 src/js/App.js                   | 36 +++++++++++++++++++++++++++++++--
 src/js/CONST.js                 |  1 +
 src/js/components/FilterTodo.js | 14 +++++++++++++
 3 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 src/js/components/FilterTodo.js

diff --git a/src/js/App.js b/src/js/App.js
index 066f5db9..f70c7963 100644
--- a/src/js/App.js
+++ b/src/js/App.js
@@ -1,6 +1,8 @@
 import TodoInput from "./components/TodoInput.js";
 import TodoList from './components/TodoList.js';
 import TodoCount from './components/TodoCount.js';
+import FilterTodo from './components/FilterTodo.js';
+import { FILTER } from "./CONST.js";
 
 class NewTodoItem {
   constructor(text) {
@@ -17,6 +19,7 @@ class App {
     this.TodoCount = TodoCount;
 
     this.items = [];
+    this.filteredItems = [];
 
     this.init();
   }
@@ -30,8 +33,24 @@ class App {
     return this.items.length
   }
 
-  setState(updatedItems) {
-    this.items = updatedItems.map((item, id) => ({ ...item, id }));
+  get filteredCount() {
+    return this.filteredItems.length;
+  }
+
+  setFilteredState(updatedItems) {
+    this.filteredItems = updatedItems;
+    this.TodoList.setState(this.filteredItems);
+    this.TodoCount.setState(this.filteredCount);
+  }
+
+  setState(updatedItems, isFiltered) {
+    const mapItems = updatedItems.map((item, id) => ({ ...item, id }));
+    if (isFiltered) {
+      this.setFilteredState(mapItems);
+      return;
+    }
+
+    this.items = mapItems;
     this.TodoList.setState(this.items);
     this.TodoCount.setState(this.count);
   }
@@ -39,6 +58,7 @@ class App {
   setEvent() {
     this.addTodo();
     this.updateTodo();
+    this.filterTodo();
   }
 
   addTodo() {
@@ -63,6 +83,18 @@ class App {
       }
     })
   }
+
+  filter = {
+    [FILTER.ACTIVE]: () => this.setState(this.items.filter(item => !item.completed), true),
+    [FILTER.COMPLETED]: () => this.setState(this.items.filter(item => item.completed), true),
+    [FILTER.ALL]: () => this.setState(this.items, false),
+  }
+
+  filterTodo() {
+    new FilterTodo({
+      filterBy: (type) => this.filter[type] && this.filter[type]()
+    })
+  }
 };
 
 export default function() {
diff --git a/src/js/CONST.js b/src/js/CONST.js
index e275e8a4..363de4d1 100644
--- a/src/js/CONST.js
+++ b/src/js/CONST.js
@@ -1,4 +1,5 @@
 export const EVENT = {
+  HASH_CHANGE: 'hashchange',
   KEY_UP: 'keyup',
   CLICK: 'click',
   CHANGE: 'change',
diff --git a/src/js/components/FilterTodo.js b/src/js/components/FilterTodo.js
new file mode 100644
index 00000000..49c573a6
--- /dev/null
+++ b/src/js/components/FilterTodo.js
@@ -0,0 +1,14 @@
+import { EVENT } from "../CONST.js";
+
+export default class FilterTodo {
+  constructor({ filterBy }) {
+    this.setEvent(filterBy);
+  }
+
+  setEvent(filterBy) {
+    window.addEventListener(EVENT.HASH_CHANGE, ({ newURL }) => {
+      const type = newURL.split('#')[1];
+      type && filterBy(type);
+    })
+  }
+}
\ No newline at end of file

From 6fc54f77eb40f21b9526c2be9abd968042204f71 Mon Sep 17 00:00:00 2001
From: BoMee-Yoon <primavera0331@naver.com>
Date: Sat, 5 Jun 2021 16:45:57 +0900
Subject: [PATCH 17/17] Refactor TodoList

---
 src/js/components/TodoList.js | 43 +++++++++++++++++++----------------
 src/js/utils/element.js       |  8 ++++++-
 2 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/js/components/TodoList.js b/src/js/components/TodoList.js
index 95fd33f7..d4b5cb24 100644
--- a/src/js/components/TodoList.js
+++ b/src/js/components/TodoList.js
@@ -1,5 +1,5 @@
 import { CLASS_NAME, CUSTOM_EVENT, EVENT, ITEM_KEY, KEY_UP_EVENT } from "../CONST.js";
-import { $ } from "../utils/element.js";
+import { $, addClass, closest, removeClass } from "../utils/element.js";
 import TodoItemTemplate from "../views/TodoItemTemplate.js";
 
 export default class TodoList {
@@ -13,34 +13,37 @@ export default class TodoList {
     this.render();
   }
 
-  onClick(target, deleteItem) {
-    target.dataset.event === CUSTOM_EVENT.DELETE && deleteItem(Number(target.id)); 
+  stopEditing(target) {
+    removeClass(closest(CLASS_NAME.TODO_ITEM, target), CLASS_NAME.EDITING)
   }
 
-  onChange(target, update) {
-    if (target.dataset.event === CUSTOM_EVENT.UPDATE_COMPLETED) {
-      update(Number(target.id), { key: ITEM_KEY.COMPLETED, value: target.checked });
-      return;
-    }
+  startEditing(target) {
+    addClass(closest(CLASS_NAME.TODO_ITEM, target), CLASS_NAME.EDITING);
+  }
 
-    if (target.dataset.event === CUSTOM_EVENT.UPDATE_TEXT) {
-      update(Number(target.id), { key: ITEM_KEY.TEXT, value: target.value });
-      return;
-    }
+  event = {
+    [KEY_UP_EVENT.ENTER]: ({ id, value }, update) => update(Number(id), { key: ITEM_KEY.TEXT, value }),
+    [KEY_UP_EVENT.ESCAPE]: target => this.stopEditing(target),
+    [CUSTOM_EVENT.UPDATE_COMPLETED]: ({ id, checked }, update) => update(Number(id), { key: ITEM_KEY.COMPLETED, value: checked }),
+    [CUSTOM_EVENT.UPDATE_TEXT]: ({ id, value }, update) => update(Number(id), { key: ITEM_KEY.TEXT, value })
+  }
+
+  onClick(target, deleteItem) {
+    const {event} = target.dataset;
+    event === CUSTOM_EVENT.DELETE && deleteItem(Number(target.id)); 
   }
 
   onDblclick(target) {
-    target.closest(`.${CLASS_NAME.TODO_ITEM}`).classList.add(CLASS_NAME.EDITING);
+    this.startEditing(target)
+  }
+
+  onChange(target, update) {
+    const { event } = target.dataset;
+    this.event[event] && this.event[event](target, update);
   }
 
   onKeyUp(key, target, update) {
-    if (key === KEY_UP_EVENT.ENTER) {
-      update(Number(target.id), { key: ITEM_KEY.TEXT, value: target.value });
-      return;
-    }
-    if (key === KEY_UP_EVENT.ESCAPE) {
-      target.closest(`.${CLASS_NAME.TODO_ITEM}`).classList.remove(CLASS_NAME.EDITING);
-    }
+    this.event[key] && this.event[key](target, update);
   }
 
   setEvent({ update, delete: deleteItem }) {
diff --git a/src/js/utils/element.js b/src/js/utils/element.js
index dbdf05ee..312edab5 100644
--- a/src/js/utils/element.js
+++ b/src/js/utils/element.js
@@ -1 +1,7 @@
-export const $ = (className) => document.querySelector(`.${className}`);
\ No newline at end of file
+export const $ = (className) => document.querySelector(`.${className}`);
+
+export const addClass = (target, className) => target.classList.add(className);
+
+export const removeClass = (target, className) => target.classList.remove(className);
+
+export const closest = (target, className) => target.closest(`.${className}`);
\ No newline at end of file