ink-0 · ink-0 · Jul 19, 2021 · Jul 19, 2021 · Jul 19, 2021
diff --git a/index.html b/index.html
@@ -13,17 +13,20 @@
     <script defer src="./index.js" type="module"></script>
   </head>
   <body>
-    <div class="todoapp">
-      <h1>
-        <span style="color: rgb(251, 73, 73)">T</span
-        ><span style="color: rgb(249, 209, 90)">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>
+    <div class="todoWrap">
+      <div class="todoapp">
+        <h1>
+          <span style="color: rgb(251, 73, 73)">T</span
+          ><span style="color: rgb(249, 209, 90)">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>
+      </div>
+      <div class="userApp"></div>
     </div>
   </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,5 +1,2 @@
-import TodoLocalStore from './src/js/core/TodoLocalStore.js';
-import userList from './src/js/core/UserList.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/css/style.css b/src/css/style.css
@@ -40,8 +40,12 @@ body {
 .hidden {
   display: none;
 }
+.todoWrap {
+  display: flex;
+}
 
 .todoapp {
+  min-width: 500px;
   background: #fff;
   margin: 130px 0 40px 0;
   position: relative;
@@ -331,3 +335,44 @@ html .clear-completed:active {
 .info a:hover {
   text-decoration: underline;
 }
+
+.userApp {
+  /* margin-left: 50px; */
+  min-width: 200px;
+  font-size: 20px;
+}
+
+.user-drop {
+  margin-left: 40px;
+  font-size: 20px;
+  cursor: pointer;
+  color: dimgray;
+  padding: 3px 7px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+}
+
+.user-list {
+  list-style: none;
+}
+.user-list li {
+  float: left;
+  margin-left: 20px;
+  margin-bottom: 10px;
+
+  border: 1px solid transparent;
+
+  border-radius: 3px;
+
+  outline: 1px solid #c9c9c9;
+  padding: 3px;
+  cursor: pointer;
+}
+.user-list li:hover {
+  color: white;
+  background-color: #c1c1c1;
+}
+
+.drop {
+  display: none;
+}
diff --git a/src/js/TodoApp.js b/src/js/TodoApp.js
@@ -1,12 +1,14 @@
 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';
-import getUserList from './core/UserList.js';
+import getUserList from './core/getUserList.js';
+import UserList from './components/user/UserList.js';
+import getUserData from './core/getUserData.js';
 
 export default function TodoApp($app) {
-  const initialDtate = {
+  // localStorage.clear();
+  const initialData = {
     todoes: [
       {
         idx: 0,
@@ -22,16 +24,18 @@ export default function TodoApp($app) {
     todoesFiltered: [],
     filterState: FILTER_TYPES.ALL,
     todoesCount: '0',
+    users: [],
   };
   const localData = JSON.parse(localStorage.getItem('state'));
-  const viewData = localData ? localData : initialDtate;
+  const viewData = localData ? localData : initialData;
   this.state = viewData;
 
   this.setState = (nextState) => {
     this.state = nextState;
     todoList.setState(nextState);
     todoInput.setState(nextState);
     todoFilter.setState(nextState);
+    userList.setState(nextState);
   };
 
   const todoInput = new TodoInput({
@@ -53,6 +57,15 @@ export default function TodoApp($app) {
     onFilter: (filterType) => filterTodo(filterType),
   });
 
+  const userList = new UserList({
+    initialState: this.state,
+    onUser: (userId) => updateTodo(userId),
+  });
+
+  const updateTodo = (userId) => {
+    getUserData(userId);
+  };
+
   const addTodo = (addContent) => {
     const { todoes } = this.state;
     const nextIdx = Math.max(0, ...todoes.map((todo) => todo.idx)) + 1;
@@ -157,11 +170,11 @@ export default function TodoApp($app) {
   };
 
   const init = async () => {
+    const userData = await getUserList();
+    this.state['users'] = userData;
     this.setState({
       ...this.state,
     });
-    const a = await getUserList();
-    console.log(a);
   };
   init();
 }
diff --git a/src/js/components/user/UserList.js b/src/js/components/user/UserList.js
@@ -0,0 +1,41 @@
+export default function UserList({ initialState, onUser }) {
+  this.state = initialState;
+
+  this.$targetBtn = document.createElement('input');
+  this.$targetBtn.type = 'button';
+  this.$targetBtn.value = '📄 USER';
+  this.$targetBtn.className = 'user-drop';
+
+  this.$target = document.createElement('ul');
+  this.$target.className = 'user-list';
+  this.$target.id = 'user-list';
+  const $userApp = document.querySelector('.userApp');
+  $userApp.append(this.$targetBtn, this.$target);
+
+  const { users } = this.state;
+
+  this.setState = (newState) => {
+    this.state = newState;
+    this.render();
+  };
+
+  this.$targetBtn.addEventListener('click', (e) => {
+    if (e.target.className === 'user-drop') {
+      let $userList = document.getElementById('user-list');
+      $userList.classList.toggle('drop');
+    }
+  });
+  this.$target.addEventListener('click', (e) => {
+    const { userId } = e.target.dataset;
+    console.log(userId);
+    onUser(userId);
+  });
+
+  this.render = () => {
+    const userListTemplate = `${users
+      .map((user) => `<li data-user-id='${user._id}'>${user.name}</li>`)
+      .join('')}`;
+
+    this.$target.innerHTML = userListTemplate;
+  };
+}
diff --git a/src/js/core/getUserData.js b/src/js/core/getUserData.js
@@ -0,0 +1,15 @@
+const getUserData = async (userId) => {
+  const BASE_URL = 'https://js-todo-list-9ca3a.df.r.appspot.com';
+  try {
+    const res = await fetch(`${BASE_URL}/api/users/:userId`);
+    if (res.ok) {
+      console.log('유저만의데이터', res);
+      return await res.json();
+    } else {
+      return null;
+    }
+  } catch (e) {
+    throw new Error(`오류가 생겼습니다 ${e.message}`);
+  }
+};
+export default getUserData;
diff --git a/src/js/core/UserList.js → src/js/core/getUserList.js b/src/js/core/UserList.js → src/js/core/getUserList.js
@@ -3,7 +3,6 @@ const getUserList = async () => {
   try {
     const res = await fetch(`${BASE_URL}/api/users`);
     if (res.ok) {
-      // console.log('응답 josn', res.json());
       return await res.json();
     } else {
       return null;