diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..73f69e0
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+# Editor-based HTTP Client requests
+/httpRequests/
diff --git a/.idea/js-todo-list-step1.iml b/.idea/js-todo-list-step1.iml
new file mode 100644
index 0000000..d6ebd48
--- /dev/null
+++ b/.idea/js-todo-list-step1.iml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 0000000..7747d4c
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="FLOW" />
+  </component>
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_1_8" project-jdk-name="1.8" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..e92d622
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/js-todo-list-step1.iml" filepath="$PROJECT_DIR$/.idea/js-todo-list-step1.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/prettier.xml b/.idea/prettier.xml
new file mode 100644
index 0000000..727b8b5
--- /dev/null
+++ b/.idea/prettier.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myRunOnSave" value="true" />
+    <option name="myRunOnReformat" value="true" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/saveactions_settings.xml b/.idea/saveactions_settings.xml
new file mode 100644
index 0000000..09fbfc6
--- /dev/null
+++ b/.idea/saveactions_settings.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="SaveActionSettings">
+    <option name="actions">
+      <set>
+        <option value="activate" />
+        <option value="organizeImports" />
+        <option value="reformat" />
+        <option value="rearrange" />
+        <option value="unnecessaryThis" />
+      </set>
+    </option>
+    <option name="configurationPath" value="" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/README.md b/README.md
index 36372ce..b127f48 100644
--- a/README.md
+++ b/README.md
@@ -1,39 +1,11 @@
-<p align="middle" >
-  <img width="200px;" src="./src/images/check_list.png"/>
-</p>
-<h2 align="middle">JS 투두리스트 스텝1</h2>
-<p align="middle">자바스크립트로 구현 하는 투두리스트</p>
-<p align="middle">
-  <img src="https://img.shields.io/badge/version-1.0.0-blue?style=flat-square" alt="template version"/>
-  <img src="https://img.shields.io/badge/language-html-red.svg?style=flat-square"/>
-  <img src="https://img.shields.io/badge/language-css-blue.svg?style=flat-square"/>
-  <img src="https://img.shields.io/badge/language-js-yellow.svg?style=flat-square"/>
-  <a href="https://github.com/daybrush/moveable/blob/master/LICENSE" target="_blank">
-    <img src="https://img.shields.io/github/license/woowacourse/javascript-lotto.svg?style=flat-square&label=license&color=08CE5D"/>
-  </a>
-</p>
-
-## 🔥 Projects!
-
-<p align="middle">
-  <img width="400" src="./src/images/sample.gif">
-</p>
-
-<p align="middle">
-  <a href="https://next-step.github.io/js-todo-list-step1/">🖥️ 데모 링크</a>
-</p>
-
-<br/>
-
 ## 🎯 요구사항
 
-- [ ] 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의 상태값을 확인하여, 해야할 일과, 완료한 일을 클릭하면 해당 상태의 아이템만 보여주기
-- [ ] localStorage에 데이터를 저장하여, TodoItem의 CRUD를 반영하기. 따라서 새로고침하여도 저장된 데이터를 확인할 수 있어야 함
+- [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의 상태값을 확인하여, 해야할 일과, 완료한 일을 클릭하면 해당 상태의 아이템만 보여주기
 
 <br/>
 
@@ -68,38 +40,3 @@
 </ul>
 ```
 
-<br/>
-
-## ⚙️ Before Started
-
-#### <img alt="Tip" src="https://img.shields.io/static/v1.svg?label=&message=Tip&style=flat-square&color=673ab8"> 로컬에서 서버 띄워서 손쉽게 static resources 변경 및 확인하는 방법
-
-로컬에서 웹서버를 띄워 html, css, js 등을 실시간으로 손쉽게 테스트해 볼 수 있습니다. 이를 위해서는 우선 npm이 설치되어 있어야 합니다. 구글에 `npm install` 이란 키워드로 각자의 운영체제에 맞게끔 npm을 설치해주세요. 이후 아래의 명령어를 통해 실시간으로 웹페이지를 테스트해볼 수 있습니다.
-
-```
-npm install -g live-server
-```
-
-실행은 아래의 커맨드로 할 수 있습니다.
-
-```
-live-server 폴더명
-```
-
-<br>
-
-## 👏 Contributing
-
-만약 미션 수행 중에 개선사항이 보인다면, 언제든 자유롭게 PR을 보내주세요.
-
-<br>
-
-## 🐞 Bug Report
-
-버그를 발견한다면, [Issues](https://github.com/woowacourse/js-todo-list-step1/issues)에 등록해주세요.
-
-<br>
-
-## 📝 License
-
-This project is [MIT](https://github.com/woowacourse/js-todo-list-step1/blob/main/LICENSE) licensed.
diff --git a/index.html b/index.html
index c1d9095..bd7fcd3 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="#">전체보기</a>
             </li>
             <li>
               <a class="active" href="#active">해야할 일</a>
@@ -34,5 +34,6 @@ <h1>TODOS</h1>
         </div>
       </main>
     </div>
+  <script type="module" src="./src/App.js"></script>
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
new file mode 100644
index 0000000..3a611d5
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,14 @@
+import addItem from "./todo/AddItem.js";
+import checkItem from "./todo/CheckItem.js";
+import editItem from "./todo/EditItem.js";
+import filterItem from "./todo/filterItem.js";
+import { EVENTS } from "./todo/constants.js";
+
+const $todoInput = document.querySelector("#new-todo-title");
+const $todoList = document.querySelector("#todo-list");
+const $filterList = document.querySelector(".filters");
+
+$todoInput.addEventListener(EVENTS.KEY_UP, addItem.onAddTodoItem);
+$todoList.addEventListener(EVENTS.MOUSE_UP, checkItem.onCheckToDoItem);
+$todoList.addEventListener(EVENTS.DOUBLE_CLICK, editItem.onEditTodoItem);
+$filterList.addEventListener(EVENTS.CLICK, filterItem.onFilterToDoItem);
diff --git a/src/MiniMission/BOM.js b/src/MiniMission/BOM.js
new file mode 100644
index 0000000..b56913e
--- /dev/null
+++ b/src/MiniMission/BOM.js
@@ -0,0 +1,18 @@
+let join_bt = document.getElementById('join-button');
+let exit_bt = document.getElementById('exit-button');
+
+join_bt.onclick = function () {
+  let answer = prompt("토끼가 좋아하는 채소는?", '');
+  if (answer === "당근") {
+    alert("환영합니다.");
+    return;
+  }
+  alert("모르면 못 들어옵니다.");
+}
+
+exit_bt.onclick = function () {
+  let exitGame = confirm("게임을 종료하시겠습니까?");
+  if (exitGame) {
+    alert("방에서 나갔습니다.");
+  }
+}
diff --git a/src/MiniMission/DOM.js b/src/MiniMission/DOM.js
new file mode 100644
index 0000000..2c43ba0
--- /dev/null
+++ b/src/MiniMission/DOM.js
@@ -0,0 +1,3 @@
+let newYork = document.createElement('li');
+newYork.innerText = "뉴욕";
+document.getElementById('wrap').lastElementChild.append(newYork);
diff --git a/src/MiniMission/EVENT.js b/src/MiniMission/EVENT.js
new file mode 100644
index 0000000..323a36c
--- /dev/null
+++ b/src/MiniMission/EVENT.js
@@ -0,0 +1,31 @@
+/*
+const $todoInput = document.querySelector("#new-todo-title");
+
+$todoInput.addEventListener("keyup", onAddTodoItem);
+document.getElementById("todo-list").addEventListener("click", onToggleTodoItem); // 바뀐 부분
+
+function onAddTodoItem(event) {
+const todoTitle = event.target.value;
+const todoList = document.getElementById("todo-list");
+if (event.key === "Enter" && todoTitle !== "") {
+todoList.insertAdjacentHTML("beforeend", renderTodoItemTemplate(todoTitle));
+event.target.value = "";
+}
+}
+
+function onToggleTodoItem(event) {
+event.target.closest("li").classList.toggle("completed");
+}
+
+function renderTodoItemTemplate(title) {
+return `
+<li>
+  <div class="view">
+    <input class="toggle" type="checkbox">
+    <label class="label">${title}</label>
+    <button class="destroy"></button>
+  </div>
+  <input class="edit" value="새로운 타이틀">
+</li>`;
+}
+*/
diff --git a/src/css/style.css b/src/css/style.css
index 7dcbc6d..432c721 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,334 +1,338 @@
 html,
 body {
-    margin: 0;
-    padding: 10px;
+  margin: 0;
+  padding: 10px;
 }
 
 button {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    background: none;
-    font-size: 100%;
-    vertical-align: baseline;
-    font-family: inherit;
-    font-weight: inherit;
-    color: inherit;
-    -webkit-appearance: none;
-    appearance: none;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 100%;
+  vertical-align: baseline;
+  font-family: inherit;
+  font-weight: inherit;
+  color: inherit;
+  -webkit-appearance: none;
+  appearance: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 body {
-    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    line-height: 1.4em;
-    background: #f5f5f5;
-    color: #4d4d4d;
-    min-width: 230px;
-    max-width: 550px;
-    margin: 0 auto;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-weight: 300;
+  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  line-height: 1.4em;
+  background: #f5f5f5;
+  color: #4d4d4d;
+  min-width: 230px;
+  max-width: 550px;
+  margin: 0 auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 300;
 }
 
 :focus {
-    outline: 0;
+  outline: 0;
 }
 
 .hidden {
-    display: none;
+  display: none;
 }
 
 .todoapp {
-    background: #fff;
-    margin: 130px 0 40px 0;
-    position: relative;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
-    0 25px 50px 0 rgba(0, 0, 0, 0.1);
+  background: #fff;
+  margin: 130px 0 40px 0;
+  position: relative;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+  0 25px 50px 0 rgba(0, 0, 0, 0.1);
 }
 
 .todoapp input::-webkit-input-placeholder {
-    font-style: italic;
-    font-weight: 300;
-    color: #e6e6e6;
+  font-style: italic;
+  font-weight: 300;
+  color: #e6e6e6;
 }
 
 .todoapp h1 {
-    position: absolute;
-    top: -125px;
-    width: 100%;
-    font-size: 60px;
-    text-align: center;
-    color: dimgray;
-    font-weight: 100;
-    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+  position: absolute;
+  top: -125px;
+  width: 100%;
+  font-size: 60px;
+  text-align: center;
+  color: dimgray;
+  font-weight: 100;
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 .new-todo,
 .edit {
-    position: relative;
-    margin: 0;
-    width: 100%;
-    font-size: 24px;
-    font-family: inherit;
-    font-weight: inherit;
-    line-height: 1.4em;
-    border: 0;
-    color: inherit;
-    padding: 6px;
-    box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-    box-sizing: border-box;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  position: relative;
+  margin: 0;
+  width: 100%;
+  font-size: 24px;
+  font-family: inherit;
+  font-weight: inherit;
+  line-height: 1.4em;
+  border: 0;
+  color: inherit;
+  padding: 6px;
+  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .new-todo {
-    padding: 16px 16px 16px 60px;
-    border: none;
-    background: rgba(0, 0, 0, 0.003);
-    box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+  padding: 16px 16px 16px 60px;
+  border: none;
+  background: rgba(0, 0, 0, 0.003);
+  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
 }
 
 main {
-    position: relative;
-    z-index: 2;
-    border-top: 1px solid #e6e6e6;
+  position: relative;
+  z-index: 2;
+  border-top: 1px solid #e6e6e6;
 }
 
 .toggle-all {
-    width: 1px;
-    height: 1px;
-    border: none;
-    opacity: 0;
-    position: absolute;
-    right: 100%;
-    bottom: 100%;
+  width: 1px;
+  height: 1px;
+  border: none;
+  opacity: 0;
+  position: absolute;
+  right: 100%;
+  bottom: 100%;
 }
 
 .toggle-all + label {
-    width: 60px;
-    height: 34px;
-    font-size: 0;
-    position: absolute;
-    top: -52px;
-    left: -13px;
-    -webkit-transform: rotate(90deg);
-    transform: rotate(90deg);
+  width: 60px;
+  height: 34px;
+  font-size: 0;
+  position: absolute;
+  top: -52px;
+  left: -13px;
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
 }
 
 .toggle-all + label:before {
-    content: '❯';
-    font-size: 22px;
-    color: #e6e6e6;
-    padding: 10px 27px 10px 27px;
+  content: '❯';
+  font-size: 22px;
+  color: #e6e6e6;
+  padding: 10px 27px 10px 27px;
 }
 
 .toggle-all:checked + label:before {
-    color: #737373;
+  color: #737373;
 }
 
 .todo-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
 .todo-list li {
-    position: relative;
-    font-size: 24px;
-    border-bottom: 1px solid #ededed;
+  position: relative;
+  font-size: 24px;
+  border-bottom: 1px solid #ededed;
 }
 
 .todo-list li:last-child {
-    border-bottom: none;
+  border-bottom: none;
 }
 
 .todo-list li.editing {
-    border-bottom: none;
-    padding: 0;
+  border-bottom: none;
+  padding: 0;
 }
 
 .todo-list li.editing .edit {
-    display: block;
-    width: calc(100% - 43px);
-    padding: 12px 16px;
-    margin: 0 0 0 43px;
+  display: block;
+  width: calc(100% - 43px);
+  padding: 12px 16px;
+  margin: 0 0 0 43px;
 }
 
 .todo-list li.editing .view {
-    display: none;
+  display: none;
 }
 
 .todo-list li .toggle {
-    text-align: center;
-    width: 40px;
-    height: auto;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    margin: auto 0;
-    border: none;
-    -webkit-appearance: none;
-    appearance: none;
+  text-align: center;
+  width: 40px;
+  height: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  border: none;
+  -webkit-appearance: none;
+  appearance: none;
 }
 
 .todo-list li .toggle {
-    opacity: 0;
+  opacity: 0;
 }
 
 .todo-list li .toggle + label {
-    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
-    background-repeat: no-repeat;
-    background-position: center left;
+  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
+  background-repeat: no-repeat;
+  background-position: center left;
 }
 
 .todo-list li .toggle:checked + label {
-    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
+  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
 }
 
 .todo-list li label {
-    word-break: break-all;
-    padding: 15px 15px 15px 60px;
-    display: block;
-    line-height: 1.2;
-    transition: color 0.4s;
+  word-break: break-all;
+  padding: 15px 15px 15px 60px;
+  display: block;
+  line-height: 1.2;
+  transition: color 0.4s;
 }
 
 .todo-list li.completed label {
-    color: #d9d9d9;
-    text-decoration: line-through;
+  color: #d9d9d9;
+  text-decoration: line-through;
 }
 
 .todo-list li .destroy {
-    display: none;
-    position: absolute;
-    top: 0;
-    right: 10px;
-    bottom: 0;
-    width: 40px;
-    height: 40px;
-    margin: auto 0;
-    font-size: 30px;
-    color: #cc9a9a;
-    margin-bottom: 11px;
-    transition: color 0.2s ease-out;
-    cursor: pointer;
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 10px;
+  bottom: 0;
+  width: 40px;
+  height: 40px;
+  margin: auto 0;
+  font-size: 30px;
+  color: #cc9a9a;
+  margin-bottom: 11px;
+  transition: color 0.2s ease-out;
+  cursor: pointer;
 }
 
 .todo-list li .destroy:hover {
-    color: #af5b5e;
+  color: #af5b5e;
 }
 
 .todo-list li .destroy:after {
-    content: '×';
+  content: '×';
 }
 
 .todo-list li:hover .destroy {
-    display: block;
+  display: block;
 }
 
 .todo-list li .edit {
-    display: none;
+  display: none;
 }
 
 .todo-list li.editing:last-child {
-    margin-bottom: -1px;
+  margin-bottom: -1px;
 }
 
 .count-container {
-    color: #777;
-    padding: 10px 15px;
-    height: 20px;
-    text-align: center;
-    border-top: 1px solid #e6e6e6;
+  color: #777;
+  padding: 10px 15px;
+  height: 20px;
+  text-align: center;
+  border-top: 1px solid #e6e6e6;
 }
 
 .count-container:before {
-    content: '';
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: 50px;
-    overflow: hidden;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
-    0 8px 0 -3px #f6f6f6,
-    0 9px 1px -3px rgba(0, 0, 0, 0.2),
-    0 16px 0 -6px #f6f6f6,
-    0 17px 2px -6px rgba(0, 0, 0, 0.2);
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 50px;
+  overflow: hidden;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+  0 8px 0 -3px #f6f6f6,
+  0 9px 1px -3px rgba(0, 0, 0, 0.2),
+  0 16px 0 -6px #f6f6f6,
+  0 17px 2px -6px rgba(0, 0, 0, 0.2);
 }
 
 .todo-count {
-    float: left;
-    text-align: left;
+  float: left;
+  text-align: left;
 }
 
 .todo-count strong {
-    font-weight: 300;
+  font-weight: 300;
 }
 
 .filters {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    position: absolute;
-    right: 0;
-    left: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: absolute;
+  right: 0;
+  left: 0;
 }
 
 .filters li {
-    display: inline;
+  display: inline;
 }
 
 .filters li a {
-    color: inherit;
-    margin: 3px;
-    padding: 3px 7px;
-    text-decoration: none;
-    border: 1px solid transparent;
-    border-radius: 3px;
+  color: inherit;
+  margin: 3px;
+  padding: 3px 7px;
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: 3px;
 }
 
 .filters li a:hover {
-    border-color: rgba(175, 47, 47, 0.1);
+  border-color: rgba(175, 47, 47, 0.1);
 }
 
 .filters li a.selected {
-    border-color: rgba(175, 47, 47, 0.2);
+  border-color: rgba(175, 47, 47, 0.2);
 }
 
 .clear-completed, html .clear-completed:active {
-    float: right;
-    position: relative;
-    line-height: 20px;
-    text-decoration: none;
-    cursor: pointer;
+  float: right;
+  position: relative;
+  line-height: 20px;
+  text-decoration: none;
+  cursor: pointer;
 }
 
 .clear-completed:hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 .info {
-    margin: 65px auto 0;
-    color: #bfbfbf;
-    font-size: 10px;
-    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-    text-align: center;
+  margin: 65px auto 0;
+  color: #bfbfbf;
+  font-size: 10px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  text-align: center;
 }
 
 .info p {
-    line-height: 1;
+  line-height: 1;
 }
 
 .info a {
-    color: inherit;
-    text-decoration: none;
-    font-weight: 400;
+  color: inherit;
+  text-decoration: none;
+  font-weight: 400;
 }
 
 .info a:hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
+
+.d-none {
+  display: none;
+}
\ No newline at end of file
diff --git a/src/todo/addItem.js b/src/todo/addItem.js
new file mode 100644
index 0000000..c88d1bd
--- /dev/null
+++ b/src/todo/addItem.js
@@ -0,0 +1,32 @@
+import countItem from "./countItem.js";
+import { STATES } from "./constants.js";
+
+export default {
+  onAddTodoItem: function ({ target, key }) {
+    const todoTitle = target.value;
+    const todoList = document.getElementById("todo-list");
+    const li = document.createElement("li");
+    li.classList.add(STATES.ACTIVE);
+    li.innerHTML = renderTodoItemTemplate(todoTitle);
+    if (key === "Enter" && todoTitle !== "") {
+      todoList.appendChild(li);
+      target.value = "";
+    }
+    countItem.onCountItem();
+
+    const $filterState = document.querySelector(".selected").classList;
+    if ($filterState.contains(STATES.COMPLETED)) {
+      li.classList.add("d-none");
+    }
+  },
+};
+
+function renderTodoItemTemplate(title) {
+  return `
+    <div class="view">
+      <input class="toggle" type="checkbox">
+      <label class="label">${title}</label>
+      <button class="destroy"></button>
+    </div>
+    <input class="edit" value="새로운 타이틀">`;
+}
diff --git a/src/todo/checkItem.js b/src/todo/checkItem.js
new file mode 100644
index 0000000..ab1a1ea
--- /dev/null
+++ b/src/todo/checkItem.js
@@ -0,0 +1,43 @@
+import { STATES } from "./constants.js";
+import countItem from "./countItem.js";
+
+export default {
+  onCheckToDoItem: function ({ target }) {
+    if (target.classList.contains("toggle")) {
+      toggleOn(target);
+    } else if (target.classList.contains("destroy")) {
+      removeItem(target);
+    }
+    countItem.onCountItem();
+  },
+};
+
+function toggleOn(target) {
+  const $targetToggle = target.closest("li").classList;
+  const $filterState = document.querySelector(".selected").classList;
+
+  if ($targetToggle.contains(STATES.ACTIVE)) {
+    $targetToggle.toggle(STATES.COMPLETED);
+    $targetToggle.remove(STATES.ACTIVE);
+    $targetToggle.add(STATES.COMPLETED);
+
+    if ($filterState.contains(STATES.ACTIVE)) {
+      target.parentElement.parentElement.classList.add("d-none");
+    }
+    return;
+  }
+  if ($targetToggle.contains(STATES.COMPLETED)) {
+    $targetToggle.toggle(STATES.COMPLETED);
+    $targetToggle.remove(STATES.COMPLETED);
+    $targetToggle.add(STATES.ACTIVE);
+
+    if ($filterState.contains(STATES.COMPLETED)) {
+      target.parentElement.parentElement.classList.add("d-none");
+    }
+    return;
+  }
+}
+
+function removeItem(target) {
+  target.parentNode.parentElement.remove();
+}
diff --git a/src/todo/constants.js b/src/todo/constants.js
new file mode 100644
index 0000000..7d029c5
--- /dev/null
+++ b/src/todo/constants.js
@@ -0,0 +1,12 @@
+export const STATES = {
+  ALL: "all",
+  ACTIVE: "active",
+  COMPLETED: "completed",
+};
+
+export const EVENTS = {
+  KEY_UP: "keyup",
+  MOUSE_UP: "mouseup",
+  CLICK: "click",
+  DOUBLE_CLICK: "dblclick",
+};
diff --git a/src/todo/countItem.js b/src/todo/countItem.js
new file mode 100644
index 0000000..a10705e
--- /dev/null
+++ b/src/todo/countItem.js
@@ -0,0 +1,13 @@
+export default {
+  onCountItem: function count() {
+    const todos = document.querySelectorAll(".todo-list > li");
+    let visible = 0;
+    for (const todo of todos) {
+      if (!todo.classList.contains("d-none")) {
+        visible++;
+      }
+    }
+    document.querySelector(".todo-count").innerHTML =
+      "총 " + `<strong>${visible}</strong>` + " 개";
+  },
+};
diff --git a/src/todo/editItem.js b/src/todo/editItem.js
new file mode 100644
index 0000000..995afa9
--- /dev/null
+++ b/src/todo/editItem.js
@@ -0,0 +1,23 @@
+export default {
+  onEditTodoItem: function onEditTodoItem({ target }) {
+    if (target.classList.contains("toggle")) {
+      return;
+    }
+    const $editTarget = target.closest("li");
+    $editTarget.classList.add("editing");
+
+    const editInputs = document.querySelectorAll(".edit");
+    for (const editInput of editInputs) {
+      editInput.addEventListener("keyup", registerEditedItem);
+    }
+  },
+};
+
+function registerEditedItem({ target, key }) {
+  if (key === "Escape") {
+    target.parentElement.classList.remove("editing");
+  } else if (key === "Enter") {
+    target.parentElement.querySelector("label").innerHTML = target.value;
+    target.parentElement.classList.remove("editing");
+  }
+}
diff --git a/src/todo/filterItem.js b/src/todo/filterItem.js
new file mode 100644
index 0000000..c484d2b
--- /dev/null
+++ b/src/todo/filterItem.js
@@ -0,0 +1,69 @@
+import { STATES } from "./constants.js";
+import countItem from "./countItem.js";
+
+export default {
+  onFilterToDoItem: function onFilterToDoItem({ target }) {
+    const todos = document.querySelectorAll(".todo-list > li");
+    const status = target.classList;
+
+    function renderFilters(target) {
+      const filters = document.querySelector(".filters").querySelectorAll("a");
+      for (const filter of filters) {
+        if (target.classList.contains(filter.className)) {
+          filter.classList.add("selected");
+        } else {
+          filter.classList.remove("selected");
+        }
+      }
+    }
+
+    function filterSelected(target) {
+      if (target.classList.contains("selected")) {
+        return;
+      }
+      renderFilters(target);
+    }
+
+    function showAll() {
+      for (const todo of todos) {
+        todo.classList.remove("d-none");
+      }
+    }
+
+    function showCompleted(target) {
+      if (target.classList.contains("selected")) {
+        return;
+      }
+      for (let todo of todos) {
+        if (todo.classList.contains(STATES.COMPLETED)) {
+          todo.classList.remove("d-none");
+        } else {
+          todo.classList.add("d-none");
+        }
+      }
+    }
+
+    function showActive(target) {
+      if (target.classList.contains("selected")) {
+        return;
+      }
+      for (let todo of todos) {
+        if (todo.classList.contains(STATES.ACTIVE)) {
+          todo.classList.remove("d-none");
+        } else {
+          todo.classList.add("d-none");
+        }
+      }
+    }
+
+    if (status.contains(STATES.COMPLETED)) {
+      showCompleted(target);
+    } else if (status.contains(STATES.ACTIVE)) {
+      showActive(target);
+    } else {
+      showAll();
+    }
+    filterSelected(target);
+    countItem.onCountItem();
+  },
+};