next-step · rlatmdgns · Jul 7, 2021 · Jul 11, 2021 · Jul 11, 2021 · Jul 12, 2021
diff --git a/.gitmessage.txt b/.gitmessage.txt
@@ -0,0 +1,26 @@
+################
+# <타입> : <제목> 의 형식으로 제목을 아래 공백줄에 작성
+# 제목은 50자 이내 / 변경사항이 "무엇"인지 명확히 작성 / 끝에 마침표 금지
+# 예) feat: 로그인 기능 추가
+
+# 바로 아래 공백은 지우지 마세요 (제목과 본문의 분리를 위함)
+
+################
+# 본문(구체적인 내용)을 아랫줄에 작성
+# 여러 줄의 메시지를 작성할 땐 "-"로 구분 (한 줄은 72자 이내)
+
+################
+# 꼬릿말(footer)을 아랫줄에 작성 (현재 커밋과 관련된 이슈 번호 추가 등)
+# 예) Close #7
+
+################
+# feat : 새로운 기능 추가
+# fix : 버그 수정
+# docs : 문서 수정
+# test : 테스트 코드 추가
+# refact : 코드 리팩토링
+# style : 코드 의미에 영향을 주지 않는 변경사항
+# chore : 빌드 부분 혹은 패키지 매니저 수정사항
+# design : CSS 등 사용자 UI 디자인 변경
+# etc : 기타변경
+################
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "semi": true,
+  "useTabs": false,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}
diff --git a/index.html b/index.html
@@ -5,16 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>이벤트 - TODOS</title>
     <link rel="stylesheet" href="./src/css/style.css" />
+    <script type="module" src="src/index.js" defer></script>
   </head>
   <body>
     <div class="todoapp">
       <h1>TODOS</h1>
-      <input
-        id="new-todo-title"
-        class="new-todo"
-        placeholder="할일을 추가해주세요"
-        autofocus
-      />
+      <input id="new-todo-title" class="new-todo" placeholder="할일을 추가해주세요" autofocus />
       <main>
         <input class="toggle-all" type="checkbox" />
         <ul id="todo-list" class="todo-list"></ul>

diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,56 @@
+import TodoInput from './components/TodoInput.js';
+import TodoList from './components/TodoList.js';
+import TodoCount from './components/TodoCount.js';
+import { storage } from './utills/storage.js';
+export default class App {
+  constructor() {
+    this.todoItems = storage.get('todo') || [];
+    this.todoInput = new TodoInput();
+    this.todoList = new TodoList();
+    this.todoCount = new TodoCount();
+
+    this.setState = updatedItems => {
+      storage.set('todo', this.todoItems);
+      this.todoItems = updatedItems;
+      this.todoList.render(this.todoItems)
+      this.todoCount.showCount(this.todoItems.length)
+    };
+
+    this.init();
+  }
+
+  init() {
+    this.setState(this.todoItems);
+    this.todoInput.setEvent({
+      onAdd: text => {
+        const todo =  {
+          id: Date.now(),
+          text,
+          completed:false,
+        }
+        this.todoItems.push(todo);
+        this.setState(this.todoItems);
+      },
+    });
+    this.todoList.render(this.todoItems)
+    this.todoList.setEvent({
+      onDelete: (event) => {
+        const target = event.target;
+        if (!target.classList.contains('destroy')) return;
+        const id = Number(target.closest('li').dataset.id);
+        const itemIdx = this.todoItems.findIndex((item) => item.id === id);
+        this.todoItems.splice(itemIdx, 1);
+        this.setState(this.todoItems);
+      },
+      onCompleted : (event) =>{
+        const target = event.target;
+        if (!target.classList.contains('toggle')) return;
+        const id = Number(target.closest('li').dataset.id);
+        console.log(id)
+        const item = this.todoItems.find((todoItem) => todoItem.id === id);
+        item.completed = !item.completed;
+        this.setState(this.todoItems);
+      }
+    });
+  }
+}
diff --git a/src/components/TodoCount.js b/src/components/TodoCount.js
@@ -0,0 +1,9 @@
+export default class TodoCount{
+  constructor(){
+    this.count = document.querySelector('.todo-count strong');
+  }
+  showCount(count){
+    console.log(count)
+    this.count.innerHTML = count;
+  }
+}
diff --git a/src/components/TodoInput.js b/src/components/TodoInput.js
@@ -0,0 +1,14 @@
+export default class TodoInput {
+  setEvent({onAdd}){
+    const todoInput = document.querySelector('#new-todo-title');
+    todoInput.addEventListener('keydown', event => this.addTodoItem(event, onAdd));
+  }
+  addTodoItem(event, onAdd) {
+    const $newTodoTarget = event.target;
+    if (event.key === 'Enter') {
+      if ($newTodoTarget.value === '') return alert('할일을 입력하세여.');
+      onAdd($newTodoTarget.value);
+      $newTodoTarget.value = '';
+    }
+  }
+}
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
@@ -0,0 +1,25 @@
+export default class TodoList {
+  constructor() {
+    this.todoList = document.querySelector('#todo-list');
+  }
+  render(todoItems){
+    const todoItemTemplate = (todo) => {
+      return `
+        <li data-id="${todo.id}" class="${todo.completed ? 'completed' : ''}">
+            <div class="view">
+            <input class="toggle" type="checkbox" ${todo.completed ? 'checked' : ''} />
+              <label class="label">${todo.text}</label>
+              <button class="destroy"></button>
+            </div>
+            <input class="edit" value=${todo.text} />
+        </li>
+        `
+    }
+    const template = todoItems.map((todo)=>todoItemTemplate(todo));
+    this.todoList.innerHTML = template.join("");
+  }
+  setEvent({onDelete,onCompleted}){
+    this.todoList.addEventListener('click', onDelete);
+    this.todoList.addEventListener('click', onCompleted);
+  }
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,3 @@
+import App from './App.js';
+
+new App();
diff --git a/src/utills/storage.js b/src/utills/storage.js
@@ -0,0 +1,12 @@
+export const storage = {
+  get: (KEY, defaultData = []) => {
+    try {
+      return JSON.parse(window.localStorage.getItem(KEY))
+    } catch (e) {
+      return defaultData
+    }
+  },
+  set: (KEY, value) => {
+    window.localStorage.setItem(KEY, JSON.stringify(value))
+  }
+}