ink-0 · ink-0 · Jul 18, 2021 · Jul 14, 2021 · Jul 18, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/index.html b/index.html
@@ -14,7 +14,13 @@
   </head>
   <body>
     <div class="todoapp">
-      <h1>TODOS</h1>
+      <h1>
+        <span style="color: rgb(251, 73, 73)">T</span
+        ><span style="color: rgb(225, 217, 152)">O</span
+        ><span style="color: rgb(99, 201, 106)">D</span
+        ><span style="color: rgb(18, 72, 208)">O</span
+        ><span style="color: rgb(133, 70, 188)">S</span>
+      </h1>
       <main class="App">
         <input class="toggle-all" type="checkbox" />
       </main>

diff --git a/index.js b/index.js
@@ -1,2 +1,4 @@
+import TodoLocalStore from './src/js/core/TodoLocalStore.js';
 import TodoApp from './src/js/TodoApp.js';
+import { FILTER_TYPES } from './src/utils/const.js';
 new TodoApp(document.querySelector('.App'));
diff --git a/src/js/TodoApp.js b/src/js/TodoApp.js
@@ -1,10 +1,13 @@
 import TodoFilter from './components/TodoFilter.js';
 import TodoInput from './components/TodoInput.js';
 import TodoList from './components/TodoList.js';
+import TodoLocalStore from './core/TodoLocalStore.js';
 import { FILTER_TYPES } from '../utils/const.js';
 
 export default function TodoApp($app) {
-  this.state = {
+  // localStorage.clear();
+
+  const initialDtate = {
     todoes: [
       {
         idx: 0,
@@ -18,9 +21,12 @@ export default function TodoApp($app) {
       },
     ],
     todoesFiltered: [],
-    isFilter: false,
+    filterState: FILTER_TYPES.ALL,
     todoesCount: '0',
   };
+  const localData = JSON.parse(localStorage.getItem('state'));
+  const viewData = localData ? localData : initialDtate;
+  this.state = viewData;
 
   this.setState = (nextState) => {
     this.state = nextState;
@@ -44,7 +50,7 @@ export default function TodoApp($app) {
   });
   const todoFilter = new TodoFilter({
     $app,
-    initialState: this.state,
+
     onFilter: (filterType) => filterTodo(filterType),
   });
 
@@ -65,7 +71,9 @@ export default function TodoApp($app) {
       edit: '',
     };
     todoes.push(newTodo);
-
+    localStorage.clear();
+    localStorage.setItem('state', JSON.stringify({ ...this.state }));
+    this.state = JSON.parse(localStorage.getItem('state'));
     this.setState({
       ...this.state,
     });
@@ -79,6 +87,9 @@ export default function TodoApp($app) {
         todo.state = todo.state === '' ? FILTER_TYPES.COMPLETE : '';
       }
     });
+    localStorage.clear();
+    localStorage.setItem('state', JSON.stringify({ ...this.state }));
+    this.state = JSON.parse(localStorage.getItem('state'));
     this.setState({
       ...this.state,
     });
@@ -90,9 +101,12 @@ export default function TodoApp($app) {
     const resetTodoes = todoes.filter((todo) => {
       return todo.idx !== idx;
     });
-
+    this.state['todoes'] = resetTodoes;
+    localStorage.clear();
+    localStorage.setItem('state', JSON.stringify({ ...this.state }));
+    this.state = JSON.parse(localStorage.getItem('state'));
     this.setState({
-      todoes: resetTodoes,
+      ...this.state,
     });
   };
 
@@ -107,18 +121,23 @@ export default function TodoApp($app) {
         }
       }
     });
+    localStorage.clear();
+    localStorage.setItem('state', JSON.stringify({ ...this.state }));
+    this.state = JSON.parse(localStorage.getItem('state'));
+    this.setState({
+      ...this.state,
+    });
     this.setState({
       ...this.state,
     });
   };
 
   const filterTodo = (filterType) => {
     const { todoes } = this.state;
-
     if (filterType === FILTER_TYPES.ALL) {
       this.setState({
         ...this.state,
-        isFilter: false,
+        filterState: FILTER_TYPES.ALL,
         todoesCount: todoes.length,
       });
     } else if (filterType === FILTER_TYPES.COMPLETE) {
@@ -129,7 +148,7 @@ export default function TodoApp($app) {
       this.setState({
         ...this.state,
         todoesFiltered: completedTodoes,
-        isFilter: true,
+        filterState: FILTER_TYPES.COMPLETE,
         todoesCount: completedTodoes.length,
       });
     } else if (filterType === FILTER_TYPES.ACTIVE) {
@@ -139,7 +158,7 @@ export default function TodoApp($app) {
       this.setState({
         ...this.state,
         todoesFiltered: activeTodoes,
-        isFilter: true,
+        filterState: FILTER_TYPES.ACTIVE,
         todoesCount: activeTodoes.length,
       });
     }

diff --git a/src/js/components/TodoFilter.js b/src/js/components/TodoFilter.js
@@ -1,6 +1,9 @@
+import TodoLocalStore from '../core/TodoLocalStore.js';
 import { FILTER_TYPES, TODO_FILTER_MENU } from '../../utils/const.js';
-export default function TodoFilter({ $app, initialState, onFilter }) {
-  this.state = initialState;
+export default function TodoFilter({ $app, onFilter }) {
+  // const todoLocalStore = new TodoLocalStore();
+  // this.state = todoLocalStore.getItems();
+  this.state = localStorage.getItem('state');
 
   this.$target = document.createElement('div');
   this.$target.className = 'count-container';
@@ -14,31 +17,37 @@ export default function TodoFilter({ $app, initialState, onFilter }) {
 
   $nodeTodoFilter.addEventListener('click', (e) => {
     const $node = e.target;
-
-    if ($node.className === FILTER_TYPES.COMPLETE) {
+    const nodeClass = $node.className.trim();
+    if (nodeClass === FILTER_TYPES.COMPLETE) {
       onFilter(FILTER_TYPES.COMPLETE);
-    } else if ($node.className === FILTER_TYPES.ACTIVE) {
+    } else if (nodeClass === FILTER_TYPES.ACTIVE) {
       onFilter(FILTER_TYPES.ACTIVE);
     } else {
       onFilter(FILTER_TYPES.ALL);
     }
   });
 
   this.render = () => {
-    const { todoes, isFilter, todoesFiltered } = this.state;
-
-    const todoTotalCount = isFilter ? todoesFiltered.length : todoes.length;
+    const { todoes, todoesFiltered, filterState } = this.state;
+    const todoTotalCount =
+      filterState === FILTER_TYPES.ALL ? todoes.length : todoesFiltered.length;
     const todoFilterTemplate = `
       <span class="todo-count">총 <strong>${todoTotalCount}</strong> 개</span>
       <ul class="filters">
         <li>
-          <a class=${FILTER_TYPES.ALL} href="#">${TODO_FILTER_MENU.ALL_MENU}</a>
+          <a class="${FILTER_TYPES.ALL} ${
+      filterState === FILTER_TYPES.ALL ? 'selected' : ''
+    }" href="#">${TODO_FILTER_MENU.ALL_MENU}</a>
         </li>
         <li>
-          <a class=${FILTER_TYPES.ACTIVE} href="#${FILTER_TYPES.ACTIVE}">${TODO_FILTER_MENU.ACTIVE_MENU}</a>
+          <a class="${FILTER_TYPES.ACTIVE} ${
+      filterState === FILTER_TYPES.ACTIVE ? 'selected' : ''
+    }" href="#${FILTER_TYPES.ACTIVE}">${TODO_FILTER_MENU.ACTIVE_MENU}</a>
         </li>
         <li>
-          <a class="completed" href="#${FILTER_TYPES.COMPLETE}">${TODO_FILTER_MENU.COMPLETE_MENU}</a>
+          <a class="${FILTER_TYPES.COMPLETE} ${
+      filterState === FILTER_TYPES.COMPLETE ? 'selected' : ''
+    }" href="#${FILTER_TYPES.COMPLETE}">${TODO_FILTER_MENU.COMPLETE_MENU}</a>
         </li>
       </ul>`;
     $nodeTodoFilter.innerHTML = todoFilterTemplate;

diff --git a/src/js/components/TodoList.js b/src/js/components/TodoList.js
@@ -1,12 +1,14 @@
+import TodoLocalStore from '../core/TodoLocalStore.js';
 import { FILTER_TYPES, TODO_ITEM_CLASS } from '../../utils/const.js';
+
 export default function TodoList({
   $app,
   initialState,
   onToggle,
   onDelete,
   onEdit,
 }) {
-  this.state = initialState;
+  this.state = JSON.parse(localStorage.getItem('state'));
   this.$target = document.createElement('ul');
   this.$target.className = 'todo-list';
   this.$target.id = 'todo-list';
@@ -72,9 +74,9 @@ export default function TodoList({
   };
 
   this.render = () => {
-    const { todoes, isFilter, todoesFiltered } = this.state;
-    const viewTodoes = isFilter ? todoesFiltered : todoes;
-
+    const { todoes, filterState, todoesFiltered } = this.state;
+    const viewTodoes =
+      filterState === FILTER_TYPES.ALL ? todoes : todoesFiltered;
     const todoTemplate = `${viewTodoes
       .map(
         (todo, idx) =>
@@ -89,7 +91,7 @@ export default function TodoList({
           <label class="${TODO_ITEM_CLASS.LABEL}">${todo.content}</label>
           <button class="${TODO_ITEM_CLASS.DESTROY}"></button>
         </div>
-        <input class="edit" value="${todo.content}"/>
+        <input class="${TODO_ITEM_CLASS.EDIT}" value="${todo.content}"/>
       </li>`
       )
       .join('')}`;

diff --git a/src/js/core/TodoLocalStore.js b/src/js/core/TodoLocalStore.js
@@ -0,0 +1,33 @@
+import { FILTER_TYPES } from '../../utils/const.js';
+export default function TodoLocalStore() {
+  this.setState = (nextState) => {
+    this.state = nextState;
+  };
+  this.setItems = (newState) => {
+    this.state = { ...this.state, ...newState };
+    // localStorage.clear();
+    // localStorage.removeItem('state');
+    localStorage.setItem('state', JSON.stringify(this.state));
+  };
+  this.getItems = () => {
+    const initialDtate = {
+      todoes: [
+        {
+          idx: 0,
+          content: 'Hi Every One',
+          state: '',
+        },
+        {
+          idx: 1,
+          content: 'Im Tami',
+          state: '',
+        },
+      ],
+      todoesFiltered: [],
+      filterState: FILTER_TYPES.ALL,
+      todoesCount: '0',
+    };
+    const localData = JSON.parse(localStorage.getItem('state'));
+    return localData ? localData : initialDtate;
+  };
+}
diff --git a/src/utils/const.js b/src/utils/const.js
@@ -1,5 +1,5 @@
 export const FILTER_TYPES = {
-  ALL: 'FILTER_TYPES.ALL',
+  ALL: 'all',
   COMPLETE: 'completed',
   ACTIVE: 'active',
 };