From 360338a1627cb10f64f477ac912420de4731a528 Mon Sep 17 00:00:00 2001 From: ink-0 <71919983+ink-0@users.noreply.github.com> Date: Mon, 19 Jul 2021 18:34:59 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[week2]=20UserList=20UI=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20]=20-ink-0/js-todo-list-step1/#17?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 25 +++++++++++-------- index.js | 1 + src/css/style.css | 40 ++++++++++++++++++++++++++++++ src/js/TodoApp.js | 17 +++++++++---- src/js/components/user/UserList.js | 36 +++++++++++++++++++++++++++ 5 files changed, 103 insertions(+), 16 deletions(-) create mode 100644 src/js/components/user/UserList.js diff --git a/index.html b/index.html index 7dd958b4..6b98146c 100644 --- a/index.html +++ b/index.html @@ -13,17 +13,20 @@ -
-

- TODOS -

-
- -
+
+
+

+ TODOS +

+
+ +
+
+
diff --git a/index.js b/index.js index c9b12107..83408680 100644 --- a/index.js +++ b/index.js @@ -1,3 +1,4 @@ +import UserList from './src/js/components/user/UserList.js'; import TodoLocalStore from './src/js/core/TodoLocalStore.js'; import userList from './src/js/core/UserList.js'; import TodoApp from './src/js/TodoApp.js'; diff --git a/src/css/style.css b/src/css/style.css index 58655d96..ef5c5bb4 100644 --- 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,39 @@ 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; +} + +.drop { + display: none; +} diff --git a/src/js/TodoApp.js b/src/js/TodoApp.js index b1347b00..9d40904f 100644 --- a/src/js/TodoApp.js +++ b/src/js/TodoApp.js @@ -1,12 +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'; import getUserList from './core/UserList.js'; +import UserList from './components/user/UserList.js'; export default function TodoApp($app) { - const initialDtate = { + // localStorage.clear(); + const initialData = { todoes: [ { idx: 0, @@ -22,9 +23,10 @@ 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) => { @@ -32,6 +34,7 @@ export default function TodoApp($app) { todoList.setState(nextState); todoInput.setState(nextState); todoFilter.setState(nextState); + userList.setState(nextState); }; const todoInput = new TodoInput({ @@ -53,6 +56,9 @@ export default function TodoApp($app) { onFilter: (filterType) => filterTodo(filterType), }); + const userList = new UserList({ + initialState: this.state, + }); const addTodo = (addContent) => { const { todoes } = this.state; const nextIdx = Math.max(0, ...todoes.map((todo) => todo.idx)) + 1; @@ -157,11 +163,12 @@ 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 new file mode 100644 index 00000000..62ef173e --- /dev/null +++ b/src/js/components/user/UserList.js @@ -0,0 +1,36 @@ +export default function UserList({ initialState }) { + 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.render = () => { + const userListTemplate = `${users + .map((user) => `
  • ${user.name}
    • `) + .join('')}`; + + this.$target.innerHTML = userListTemplate; + }; +} From 90a6d0ca7ba24f56b4a51eec3c3a54a20f73c8bf Mon Sep 17 00:00:00 2001 From: ink-0 <71919983+ink-0@users.noreply.github.com> Date: Mon, 19 Jul 2021 19:24:08 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[week2]=20UUserList=20=EC=9D=98=20user?= =?UTF-8?q?=EC=97=90=20=ED=81=B4=EB=A6=AD=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?= =?UTF-8?q?=EA=B1=B0=EB=8A=94=EC=A4=91=20]=20-ink-0/js-todo-list-step1/#17?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.js | 4 ---- src/css/style.css | 5 +++++ src/js/TodoApp.js | 10 ++++++++-- src/js/components/user/UserList.js | 9 +++++++-- src/js/core/getUserData.js | 15 +++++++++++++++ src/js/core/{UserList.js => getUserList.js} | 1 - 6 files changed, 35 insertions(+), 9 deletions(-) create mode 100644 src/js/core/getUserData.js rename src/js/core/{UserList.js => getUserList.js} (88%) diff --git a/index.js b/index.js index 83408680..fbb77074 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,2 @@ -import UserList from './src/js/components/user/UserList.js'; -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 index ef5c5bb4..c7ac568d 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -366,6 +366,11 @@ html .clear-completed:active { outline: 1px solid #c9c9c9; padding: 3px; + cursor: pointer; +} +.user-list li:hover { + color: white; + background-color: #c1c1c1; } .drop { diff --git a/src/js/TodoApp.js b/src/js/TodoApp.js index 9d40904f..b1f33729 100644 --- a/src/js/TodoApp.js +++ b/src/js/TodoApp.js @@ -2,8 +2,9 @@ import TodoFilter from './components/TodoFilter.js'; import TodoInput from './components/TodoInput.js'; import TodoList from './components/TodoList.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) { // localStorage.clear(); @@ -58,7 +59,13 @@ export default function TodoApp($app) { 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; @@ -164,7 +171,6 @@ export default function TodoApp($app) { const init = async () => { const userData = await getUserList(); - this.state['users'] = userData; this.setState({ ...this.state, diff --git a/src/js/components/user/UserList.js b/src/js/components/user/UserList.js index 62ef173e..130052e8 100644 --- a/src/js/components/user/UserList.js +++ b/src/js/components/user/UserList.js @@ -1,4 +1,4 @@ -export default function UserList({ initialState }) { +export default function UserList({ initialState, onUser }) { this.state = initialState; this.$targetBtn = document.createElement('input'); @@ -25,10 +25,15 @@ export default function UserList({ initialState }) { $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) => `
  • ${user.name}
    • `) + .map((user) => `
  • ${user.name}
    • `) .join('')}`; this.$target.innerHTML = userListTemplate; diff --git a/src/js/core/getUserData.js b/src/js/core/getUserData.js new file mode 100644 index 00000000..6aeb2bbc --- /dev/null +++ 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 b/src/js/core/getUserList.js similarity index 88% rename from src/js/core/UserList.js rename to src/js/core/getUserList.js index a889c5c8..4c7f600c 100644 --- a/src/js/core/UserList.js +++ b/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;