next-step · na-reum · Jul 11, 2021 · Jul 11, 2021 · Jul 11, 2021 · Jul 11, 2021
diff --git a/README.md b/README.md
@@ -39,9 +39,9 @@
 
 ## 🎯 요구사항
 
-- [ ] todo list에 todoItem을 키보드로 입력하여 추가하기
-- [ ] todo list의 체크박스를 클릭하여 complete 상태로 변경 (li tag 에 completed class 추가, input 태그에 checked 속성 추가)
-- [ ] todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제
+- [x] todo list에 todoItem을 키보드로 입력하여 추가하기
+- [x] todo list의 체크박스를 클릭하여 complete 상태로 변경 (li tag 에 completed class 추가, input 태그에 checked 속성 추가)
+- [x] todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제
 - [ ] todo list를 더블클릭했을 때 input 모드로 변경 (li tag 에 editing class 추가) 단 이때 수정을 완료하지 않은 상태에서 esc키를 누르면 수정되지 않은 채로 다시 view 모드로 복귀
 - [ ] todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기
 - [ ] todo list의 상태값을 확인하여, 해야할 일과, 완료한 일을 클릭하면 해당 상태의 아이템만 보여주기

diff --git a/src/css/style.css → css/style.css b/src/css/style.css → css/style.css
diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html lang="kr">
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>이벤트 - TODOS</title>
-    <link rel="stylesheet" href="./src/css/style.css" />
+    <link rel="stylesheet" href="css/style.css" />
   </head>
   <body>
     <div class="todoapp">
@@ -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 src="./src/App.js" type="module"></script>
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,18 @@
+import { ToDoInput,ToDoList } from "./component/index.js";
+class App {
+    $todoInput;
+    $todoList;
+    constructor(){
+        const toDoInputTarget = document.querySelector("#new-todo-title");
+        const toDoListTarget = document.querySelector('#todo-list');
+        this.$todoInput = new ToDoInput(toDoInputTarget,{
+            addToDoItem: itemTitle => this.addToDoItem(itemTitle)
+        });
+        this.$todoList = new ToDoList(toDoListTarget);
+    }
+    addToDoItem(itemTitle){
+        this.$todoList.addItem(itemTitle);
+    }
+}
+
+const app = new App();
diff --git a/src/component/ToDoInput.js b/src/component/ToDoInput.js
@@ -0,0 +1,37 @@
+export class ToDoInput {
+    state; 
+    $target;
+    props;
+    constructor(target,props){
+        this.$target = target;
+        this.props = props;
+        this.state = {
+            toDoItem : ""
+        }
+        this.initEventListener();
+    }
+
+    render () {
+
+    }
+
+    initEventListener () {
+        this.$target.addEventListener('input',({target})=>{
+            this.setState({toDoItem: target.value})
+        })
+        this.$target.addEventListener('keydown',({key})=>{
+            if(key === "Enter") {
+                this.props.addToDoItem(this.state.toDoItem);
+                this.reset();
+            };
+        })
+    }
+
+    setState (payload) {
+        this.state={...this.state,...payload}
+    }
+    reset(){
+        this.setState({toDoItem:""});
+        this.$target.value = "";
+    }
+}
diff --git a/src/component/ToDoList.js b/src/component/ToDoList.js
@@ -0,0 +1,74 @@
+import { TODO_STATE } from "../constant/index.js";
+const getStateClass = (state) => {
+    return state === TODO_STATE.COMPLETED ? 'class="completed"' :
+           state === TODO_STATE.EDITING   ? 'class="editing"'   :
+           '';
+  }
+export class ToDoList {
+    state; 
+    $target;
+    constructor(target){
+        this.$target = target;
+        this.setState({
+            items:[]
+        })
+    }
+    render(){
+        const {items} = this.state;
+        this.$target.innerHTML = items.map(({state,title})=>`
+         <li ${ getStateClass(state) }>
+            <div class="view">
+                <input class="toggle" type="checkbox" ${state === TODO_STATE.COMPLETED ? 'checked' : '' }/>
+                <label class="label">${title}</label>
+                <button class="destroy"></button>
+            </div>
+            ${ state === TODO_STATE.EDITING ? `<input class="edit" value="${title}" />` : '' }
+        </li>
+        `).join('')
+
+    }
+    initEventListener(){
+        this.addToggleEvent();
+        this.removeToggleEvent();
+
+    }
+
+    addToggleEvent(){
+        const toggleComponents = this.$target.querySelectorAll('.toggle');
+        const {items} = this.state;
+        toggleComponents.forEach((element,idx) => {
+            element.addEventListener('change',(({target})=>{
+                const todoItem = items[idx];
+                todoItem.state = target.checked ? TODO_STATE.COMPLETED : TODO_STATE.TODO
+                items[idx] = {...todoItem};
+                this.setState({items:[...items]});
+            })
+        )});
+    }
+
+    removeToggleEvent(){
+        const destroyComponents = this.$target.querySelectorAll('.destroy');
+        const {items} = this.state;
+        destroyComponents.forEach((element,idx)=>{
+            element.addEventListener('click',()=>{
+                items.splice(idx,1);
+                this.setState({items:[...items]})
+            })
+        })
+    }
+
+    setState(payload){
+        this.state = {...this.state, ...payload};
+        this.render();
+        this.initEventListener();
+    }
+    addItem(itemTitle){
+        this.setState({
+            items: [...this.state.items,
+                {
+                    title:itemTitle, state: TODO_STATE.TODO
+                }]
+        })
+    }
+}
+
diff --git a/src/component/index.js b/src/component/index.js
@@ -0,0 +1,2 @@
+export {ToDoList} from "./ToDoList.js"
+export {ToDoInput} from "./ToDoInput.js"
diff --git a/src/constant/index.js b/src/constant/index.js
@@ -0,0 +1,5 @@
+export const TODO_STATE = {
+    TODO: 0,
+    COMPLETED: 1,
+    EDITING: 2,
+  }
diff --git a/src/service/index.js b/src/service/index.js
diff --git a/src/storage/index.js b/src/storage/index.js
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export {ToDoList} from "./ToDoList.js"
		export {ToDoInput} from "./ToDoInput.js"