From 166c343396870aa41cc8650047fc1b748e519514 Mon Sep 17 00:00:00 2001 From: YIMSEBIN <82010185+YIMSEBIN@users.noreply.github.com> Date: Sat, 8 Jun 2024 21:20:25 +0900 Subject: [PATCH 01/12] Update README.md --- README.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3c0710d2..69b217dd 100644 --- a/README.md +++ b/README.md @@ -1 +1,12 @@ -# react-todo-list-precourse \ No newline at end of file +# react-todo-list-precourse +## ๐Ÿšง ๊ธฐ๋Šฅ ๋ชฉ๋ก +### ํ•„์ˆ˜ ์š”๊ตฌ ์‚ฌํ•ญ +[ ] ํ•  ์ผ ์ถ”๊ฐ€ +[ ] ํ•  ์ผ ์‚ญ์ œ +[ ] ํ•  ์ผ ๋ชฉ๋ก ๋ณด๊ธฐ +[ ] ํ•  ์ผ ์™„๋ฃŒ ์ƒํƒœ ์ „ํ™˜ + +### ์„ ํƒ ์š”๊ตฌ ์‚ฌํ•ญ +[ ] 'ํ˜„์žฌ ์ง„ํ–‰ ์ค‘ / ์™„๋ฃŒ / ๋ชจ๋‘' ์„ธ ๊ฐ€์ง€ ํ•„ํ„ฐ๋ง +[ ] ํ•ด์•ผ ํ•  ์ผ์˜ ์ด ๊ฐœ์ˆ˜ ํ™•์ธ +[ ] ์ƒˆ๋กœ๊ณ ์นจ์‹œ ์ž‘์„ฑ ์ค‘์ธ ๋ฐ์ดํ„ฐ ์œ ์ง€ From 963ac3677cea9fab8c3673455f904a93e252ca92 Mon Sep 17 00:00:00 2001 From: YIMSEBIN <82010185+YIMSEBIN@users.noreply.github.com> Date: Sat, 8 Jun 2024 21:20:52 +0900 Subject: [PATCH 02/12] Update README.md --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 69b217dd..6bb7aab6 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,12 @@ # react-todo-list-precourse ## ๐Ÿšง ๊ธฐ๋Šฅ ๋ชฉ๋ก ### ํ•„์ˆ˜ ์š”๊ตฌ ์‚ฌํ•ญ -[ ] ํ•  ์ผ ์ถ”๊ฐ€ -[ ] ํ•  ์ผ ์‚ญ์ œ -[ ] ํ•  ์ผ ๋ชฉ๋ก ๋ณด๊ธฐ -[ ] ํ•  ์ผ ์™„๋ฃŒ ์ƒํƒœ ์ „ํ™˜ +- [ ] ํ•  ์ผ ์ถ”๊ฐ€ +- [ ] ํ•  ์ผ ์‚ญ์ œ +- [ ] ํ•  ์ผ ๋ชฉ๋ก ๋ณด๊ธฐ +- [ ] ํ•  ์ผ ์™„๋ฃŒ ์ƒํƒœ ์ „ํ™˜ ### ์„ ํƒ ์š”๊ตฌ ์‚ฌํ•ญ -[ ] 'ํ˜„์žฌ ์ง„ํ–‰ ์ค‘ / ์™„๋ฃŒ / ๋ชจ๋‘' ์„ธ ๊ฐ€์ง€ ํ•„ํ„ฐ๋ง -[ ] ํ•ด์•ผ ํ•  ์ผ์˜ ์ด ๊ฐœ์ˆ˜ ํ™•์ธ -[ ] ์ƒˆ๋กœ๊ณ ์นจ์‹œ ์ž‘์„ฑ ์ค‘์ธ ๋ฐ์ดํ„ฐ ์œ ์ง€ +- [ ] 'ํ˜„์žฌ ์ง„ํ–‰ ์ค‘ / ์™„๋ฃŒ / ๋ชจ๋‘' ์„ธ ๊ฐ€์ง€ ํ•„ํ„ฐ๋ง +- [ ] ํ•ด์•ผ ํ•  ์ผ์˜ ์ด ๊ฐœ์ˆ˜ ํ™•์ธ +- [ ] ์ƒˆ๋กœ๊ณ ์นจ์‹œ ์ž‘์„ฑ ์ค‘์ธ ๋ฐ์ดํ„ฐ ์œ ์ง€ From 7b78f31e75cd36fef18b27ac0cf042e085a67a22 Mon Sep 17 00:00:00 2001 From: YIMSEBIN <82010185+YIMSEBIN@users.noreply.github.com> Date: Sat, 8 Jun 2024 21:22:02 +0900 Subject: [PATCH 03/12] Update README.md --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 6bb7aab6..8235253d 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,7 @@ # react-todo-list-precourse +## ๐Ÿช ํ”„๋กœ์ ํŠธ ๊ฐœ์š” +2024 ์นด์นด์˜ค ํ…Œํฌ ์บ ํผ์Šค 2๊ธฐ FE 2์ฐจ ๋ฏธ๋‹ˆ๊ณผ์ œ - ํ•  ์ผ ๋ชฉ๋ก + ## ๐Ÿšง ๊ธฐ๋Šฅ ๋ชฉ๋ก ### ํ•„์ˆ˜ ์š”๊ตฌ ์‚ฌํ•ญ - [ ] ํ•  ์ผ ์ถ”๊ฐ€ From 68d73b4f6a1d085eda6c5c9ece022d69b7827a64 Mon Sep 17 00:00:00 2001 From: YIMSEBIN Date: Sat, 8 Jun 2024 21:24:15 +0900 Subject: [PATCH 04/12] =?UTF-8?q?feat:=20App.jsx=20=EB=B0=8F=20main.jsx=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ํ”„๋กœ์ ํŠธ์˜ ์‹œ์ž‘์ ์„ App.jsx๋กœ ๊ณ ์ • --- index.html | 2 +- src/main.jsx | 11 +++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 src/main.jsx diff --git a/index.html b/index.html index b021b5c8..a0af4558 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,6 @@
- + diff --git a/src/main.jsx b/src/main.jsx new file mode 100644 index 00000000..8463ecaa --- /dev/null +++ b/src/main.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; +import './App.css'; + +ReactDOM.render( + + + , + document.getElementById('app') +); From d96e4cd476d88d79d5c72299aae3a28ed11356aa Mon Sep 17 00:00:00 2001 From: YIMSEBIN Date: Sat, 8 Jun 2024 21:54:51 +0900 Subject: [PATCH 05/12] =?UTF-8?q?feat:=20=ED=95=A0=20=EC=9D=BC=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=20=EC=B6=94=EA=B0=80=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 23 +++++++++++++++++++++++ src/TodoForm.jsx | 25 +++++++++++++++++++++++++ src/TodoList.jsx | 16 ++++++++++++++++ 3 files changed, 64 insertions(+) create mode 100644 src/App.jsx create mode 100644 src/TodoForm.jsx create mode 100644 src/TodoList.jsx diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 00000000..34a5f3bd --- /dev/null +++ b/src/App.jsx @@ -0,0 +1,23 @@ +import React, { useState } from 'react'; +import TodoList from './TodoList'; +import TodoForm from './TodoForm'; + +const App = () => { + const [todos, setTodos] = useState([]); + + const addTodo = (text) => { + if (text === '') return; + const newTodo = { text: text, id: Date.now() }; + setTodos([...todos, newTodo]); + }; + + return ( +
+

TODO

+ + +
+ ); +}; + +export default App; diff --git a/src/TodoForm.jsx b/src/TodoForm.jsx new file mode 100644 index 00000000..acc6eb19 --- /dev/null +++ b/src/TodoForm.jsx @@ -0,0 +1,25 @@ +import React, { useState } from 'react'; + +const TodoForm = ({ addTodo }) => { + const [text, setText] = useState(''); + + const addSubmit = (e) => { + e.preventDefault(); + addTodo(text); + setText(''); + }; + + return ( +
+ setText(e.target.value)} + placeholder="ํ•  ์ผ์„ ์ž…๋ ฅํ•˜์„ธ์š”." + /> + +
+ ); +}; + +export default TodoForm; diff --git a/src/TodoList.jsx b/src/TodoList.jsx new file mode 100644 index 00000000..0a04cf15 --- /dev/null +++ b/src/TodoList.jsx @@ -0,0 +1,16 @@ +import React from 'react'; + +const TodoList = ({ todos }) => { + return ( + + ); +}; + +export default TodoList; From 9ab589bf3c36e07b84f20c64d2cb0ce8ffd2b093 Mon Sep 17 00:00:00 2001 From: YIMSEBIN <82010185+YIMSEBIN@users.noreply.github.com> Date: Sat, 8 Jun 2024 21:56:29 +0900 Subject: [PATCH 06/12] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8235253d..b1e2e697 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ ## ๐Ÿšง ๊ธฐ๋Šฅ ๋ชฉ๋ก ### ํ•„์ˆ˜ ์š”๊ตฌ ์‚ฌํ•ญ -- [ ] ํ•  ์ผ ์ถ”๊ฐ€ +- [X] ํ•  ์ผ ์ถ”๊ฐ€ - [ ] ํ•  ์ผ ์‚ญ์ œ - [ ] ํ•  ์ผ ๋ชฉ๋ก ๋ณด๊ธฐ - [ ] ํ•  ์ผ ์™„๋ฃŒ ์ƒํƒœ ์ „ํ™˜ From 3cbc406d1cdd0e339685d253c3969be3e34fbf2d Mon Sep 17 00:00:00 2001 From: YIMSEBIN <82010185+YIMSEBIN@users.noreply.github.com> Date: Sat, 8 Jun 2024 21:56:47 +0900 Subject: [PATCH 07/12] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b1e2e697..947ea536 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ ### ํ•„์ˆ˜ ์š”๊ตฌ ์‚ฌํ•ญ - [X] ํ•  ์ผ ์ถ”๊ฐ€ - [ ] ํ•  ์ผ ์‚ญ์ œ -- [ ] ํ•  ์ผ ๋ชฉ๋ก ๋ณด๊ธฐ +- [X] ํ•  ์ผ ๋ชฉ๋ก ๋ณด๊ธฐ - [ ] ํ•  ์ผ ์™„๋ฃŒ ์ƒํƒœ ์ „ํ™˜ ### ์„ ํƒ ์š”๊ตฌ ์‚ฌํ•ญ From 7fe9ba3a04578632254e424b7f78aae87c0de0f4 Mon Sep 17 00:00:00 2001 From: YIMSEBIN Date: Sun, 9 Jun 2024 01:07:04 +0900 Subject: [PATCH 08/12] =?UTF-8?q?feat:=20=ED=95=A0=20=EC=9D=BC=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 8 +++++++- src/TodoList.jsx | 3 ++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 34a5f3bd..ed26f0b4 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -11,11 +11,17 @@ const App = () => { setTodos([...todos, newTodo]); }; + const deleteTodo = (todoId) => { + setTodos(todos.filter(todo => todo.id !== todoId )); + }; + return (

TODO

- +
); }; diff --git a/src/TodoList.jsx b/src/TodoList.jsx index 0a04cf15..9bb20f5e 100644 --- a/src/TodoList.jsx +++ b/src/TodoList.jsx @@ -1,12 +1,13 @@ import React from 'react'; -const TodoList = ({ todos }) => { +const TodoList = ({ todos, deleteTodo }) => { return (
    {todos.map(todo => ( // todo.id => Data ๊ฐ์ฒด์ด๋ฏ€๋กœ ๊ฑฐ์˜ unique. => ๋ Œ๋”๋ง ์ตœ์ ํ™”
  • {todo.text} +
    • ))}
From 04523afe1599be5ee3e39f06689ab7d9a92417a5 Mon Sep 17 00:00:00 2001 From: YIMSEBIN Date: Sun, 9 Jun 2024 01:08:44 +0900 Subject: [PATCH 09/12] =?UTF-8?q?docs:=20README=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 947ea536..b6ff600a 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ ## ๐Ÿšง ๊ธฐ๋Šฅ ๋ชฉ๋ก ### ํ•„์ˆ˜ ์š”๊ตฌ ์‚ฌํ•ญ - [X] ํ•  ์ผ ์ถ”๊ฐ€ -- [ ] ํ•  ์ผ ์‚ญ์ œ +- [X] ํ•  ์ผ ์‚ญ์ œ - [X] ํ•  ์ผ ๋ชฉ๋ก ๋ณด๊ธฐ - [ ] ํ•  ์ผ ์™„๋ฃŒ ์ƒํƒœ ์ „ํ™˜ From a16fab575726930bafd9fd69601690c1ea6fb1ad Mon Sep 17 00:00:00 2001 From: YIMSEBIN Date: Sun, 9 Jun 2024 01:24:47 +0900 Subject: [PATCH 10/12] =?UTF-8?q?feat:=20=ED=95=A0=20=EC=9D=BC=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C=20=EC=83=81=ED=83=9C=20=EC=A0=84=ED=99=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 22 ++++++++++++++++++++-- src/TodoFilter.jsx | 14 ++++++++++++++ src/TodoList.jsx | 7 ++++--- 3 files changed, 38 insertions(+), 5 deletions(-) create mode 100644 src/TodoFilter.jsx diff --git a/src/App.jsx b/src/App.jsx index ed26f0b4..ac9f789e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,11 @@ import React, { useState } from 'react'; import TodoList from './TodoList'; import TodoForm from './TodoForm'; +import TodoFilter from './TodoFilter'; const App = () => { const [todos, setTodos] = useState([]); + const [filter, setFilter] = useState('all'); const addTodo = (text) => { if (text === '') return; @@ -14,13 +16,29 @@ const App = () => { const deleteTodo = (todoId) => { setTodos(todos.filter(todo => todo.id !== todoId )); }; + + const filteredTodos = todos.filter(todo => { + if (filter === 'all') return true; + if (filter === 'completed') return todo.completed; + if (filter === 'active') return !todo.completed; + return true; + }); + + const toggleTodo = (id) => { + setTodos( + todos.map(todo => + todo.id === id ? { ...todo, completed: !todo.completed } : todo + ) + ); + }; return (

TODO

-
); diff --git a/src/TodoFilter.jsx b/src/TodoFilter.jsx new file mode 100644 index 00000000..b67ea085 --- /dev/null +++ b/src/TodoFilter.jsx @@ -0,0 +1,14 @@ +// src/TodoFilter.js +import React from 'react'; + +const TodoFilter = ({ setFilter }) => { + return ( +
+ + + +
+ ); +}; + +export default TodoFilter; diff --git a/src/TodoList.jsx b/src/TodoList.jsx index 9bb20f5e..4ff1c165 100644 --- a/src/TodoList.jsx +++ b/src/TodoList.jsx @@ -1,12 +1,13 @@ import React from 'react'; -const TodoList = ({ todos, deleteTodo }) => { +const TodoList = ({ todos, deleteTodo, toggleTodo }) => { return (
    {todos.map(todo => ( // todo.id => Data ๊ฐ์ฒด์ด๋ฏ€๋กœ ๊ฑฐ์˜ unique. => ๋ Œ๋”๋ง ์ตœ์ ํ™” -
  • - {todo.text} +
  • +
    toggleTodo(todo.id)} style={{ backgroundColor: todo.complete ? 'black' : 'white'}} >
    + toggleTodo(todo.id)}>{todo.text}
    • ))} From 5ce9d442f5095f1ef5546b2afa8191dd28e24ef3 Mon Sep 17 00:00:00 2001 From: YIMSEBIN Date: Sun, 9 Jun 2024 01:25:10 +0900 Subject: [PATCH 11/12] =?UTF-8?q?docs:=20README=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b6ff600a..89e65911 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ - [X] ํ•  ์ผ ์ถ”๊ฐ€ - [X] ํ•  ์ผ ์‚ญ์ œ - [X] ํ•  ์ผ ๋ชฉ๋ก ๋ณด๊ธฐ -- [ ] ํ•  ์ผ ์™„๋ฃŒ ์ƒํƒœ ์ „ํ™˜ +- [X] ํ•  ์ผ ์™„๋ฃŒ ์ƒํƒœ ์ „ํ™˜ ### ์„ ํƒ ์š”๊ตฌ ์‚ฌํ•ญ - [ ] 'ํ˜„์žฌ ์ง„ํ–‰ ์ค‘ / ์™„๋ฃŒ / ๋ชจ๋‘' ์„ธ ๊ฐ€์ง€ ํ•„ํ„ฐ๋ง From a151274feb9a4145f69dff845c8483cf6d2173bf Mon Sep 17 00:00:00 2001 From: YIMSEBIN Date: Sun, 9 Jun 2024 22:38:03 +0900 Subject: [PATCH 12/12] =?UTF-8?q?design:=20css=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 41 +++++++++++++++++++++++++++++++++++++++++ src/App.jsx | 1 + 2 files changed, 42 insertions(+) create mode 100644 src/App.css diff --git a/src/App.css b/src/App.css new file mode 100644 index 00000000..590109a2 --- /dev/null +++ b/src/App.css @@ -0,0 +1,41 @@ +.App { + text-align: center; + max-width: 600px; + margin: auto; +} + +form { + margin-bottom: 20px; +} + +input { + padding: 10px; + font-size: 16px; + width: 70%; + margin-right: 10px; +} + +button { + padding: 10px 15px; + font-size: 16px; + cursor: pointer; +} + +ul { + list-style: none; + padding: 0; +} + +li { + padding: 10px; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid #ccc; +} + +li span { + cursor: pointer; + flex-grow: 1; + text-align: left; +} diff --git a/src/App.jsx b/src/App.jsx index ac9f789e..b71947db 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import TodoList from './TodoList'; import TodoForm from './TodoForm'; import TodoFilter from './TodoFilter'; +import './App.css'; const App = () => { const [todos, setTodos] = useState([]);