From 6e0dc874269b45de8275fe59a868e7eea4bee061 Mon Sep 17 00:00:00 2001 From: JongYun Jeong <95991290+BellYun@users.noreply.github.com> Date: Thu, 23 May 2024 13:59:24 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat=20:=20Form=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 15 ++++++++++++++- src/components/Form.js | 25 +++++++++++++++++++++++-- src/components/Item.js | 6 ++++++ 3 files changed, 43 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index ae5ce50..c6d9300 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,19 @@ +import { useState } from 'react'; import Form from './components/Form'; import Item from './components/Item'; function App() { + const [todoList, setTodoList] = useState([]); + + const addTodo = newTodo => { + const newTodoList = [...todoList, newTodo]; + setTodoList(newTodoList); + }; + return (

Todo List

-
+ @@ -14,3 +22,8 @@ function App() { } export default App; + +// TODO: Todo App을 구현합니다. +// TODO: [] 할 일이 없으면 "할 일 없음"이 화면에 보여집니다. +// TODO: [] 에서 입력한 할 일을 로 보여줍니다. +// TODO: [] 최근에 추가한 할 일이 위에 보여집니다. diff --git a/src/components/Form.js b/src/components/Form.js index cb405e1..fece11f 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -1,10 +1,29 @@ import PropTypes from 'prop-types'; +import { useState } from 'react'; function Form({ onAddTodo }) { + const [inputValue, setInputValue] = useState(''); + + const OnAdd = newTodo => { + onAddTodo(newTodo); + }; + + const handleInputValueChange = e => { + setInputValue(e.target.value); + }; + + const handleClickAddButton = () => { + if (inputValue !== '') { + OnAdd(inputValue); + } + }; + return (
- - + +
); } @@ -18,3 +37,5 @@ Form.propTypes = { }; export default Form; + +// TODO: input에 입력한 값이 없다면 추가 버튼을 눌러도 onAdd 함수가 호출되지 않습니다 diff --git a/src/components/Item.js b/src/components/Item.js index a4bd48e..cfc12cb 100644 --- a/src/components/Item.js +++ b/src/components/Item.js @@ -30,3 +30,9 @@ Item.propTypes = { }; export default Item; + +// TODO: 할 일을 보여줍니다. +// TODO: 체크 버튼을 누르면 onCompleteTodo 함수가 호출됩니다. +// TODO: onCompleteTodo 함수는 할 일의 id와 check 상태를 인자로 받습니다. +// TODO: 삭제 버튼을 누르면 onDeleteTodo 함수가 호출됩니다. +// TODO: onDeleteTodo 함수는 할 일의 id를 인자로 받습니다. From 49550cb1366044d91ba6aab3b23c3b7fc9d66d37 Mon Sep 17 00:00:00 2001 From: JongYun Jeong <95991290+BellYun@users.noreply.github.com> Date: Thu, 23 May 2024 14:00:35 +0900 Subject: [PATCH 2/5] =?UTF-8?q?fix=20:=20Todo=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=ED=9B=84=20input=EA=B0=92=20''=EC=9C=BC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Form.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Form.js b/src/components/Form.js index fece11f..7d8a37d 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -6,6 +6,7 @@ function Form({ onAddTodo }) { const OnAdd = newTodo => { onAddTodo(newTodo); + setInputValue(''); }; const handleInputValueChange = e => { @@ -37,5 +38,3 @@ Form.propTypes = { }; export default Form; - -// TODO: input에 입력한 값이 없다면 추가 버튼을 눌러도 onAdd 함수가 호출되지 않습니다 From 183d698870d23d802b388cf61ece06fdf51a5a0c Mon Sep 17 00:00:00 2001 From: JongYun Jeong <95991290+BellYun@users.noreply.github.com> Date: Thu, 23 May 2024 15:10:47 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat=20:=20Item=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 37 +++++++++++++++++++++++++++++++++++-- src/components/Form.js | 2 +- src/components/Item.js | 16 ++++++++-------- 3 files changed, 44 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index c6d9300..b0d2c54 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,5 @@ import { useState } from 'react'; +import { v4 as uuidv4 } from 'uuid'; import Form from './components/Form'; import Item from './components/Item'; @@ -6,7 +7,28 @@ function App() { const [todoList, setTodoList] = useState([]); const addTodo = newTodo => { - const newTodoList = [...todoList, newTodo]; + const uuid = uuidv4(); + const newTodoForm = { + id: uuid, + todo: newTodo, + isCompleted: false, + }; + const newTodoList = [newTodoForm, ...todoList]; + setTodoList(newTodoList); + }; + + const deleteTodo = id => { + const newTodoList = todoList.filter(todo => { + if (todo.id === id) return false; + return true; + }); + setTodoList(newTodoList); + }; + + const completeTodo = (id, isCompleted) => { + const newTodoList = todoList.map(todo => + todo.id === id ? { ...todo, isCompleted: !isCompleted } : todo, + ); setTodoList(newTodoList); }; @@ -15,7 +37,18 @@ function App() {

Todo List

    - + {todoList?.map(todo => { + return ( + + ); + })}
); diff --git a/src/components/Form.js b/src/components/Form.js index 7d8a37d..ef13f7a 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -22,7 +22,7 @@ function Form({ onAddTodo }) { return (
-
diff --git a/src/components/Item.js b/src/components/Item.js index cfc12cb..5fa162c 100644 --- a/src/components/Item.js +++ b/src/components/Item.js @@ -3,10 +3,16 @@ import PropTypes from 'prop-types'; function Item({ id, todo, isCompleted, onDeleteTodo, onCompleteTodo }) { return (
  • - + onCompleteTodo(id, isCompleted)} + type="checkbox" + />

    {todo}

    - +
    • ); @@ -30,9 +36,3 @@ Item.propTypes = { }; export default Item; - -// TODO: 할 일을 보여줍니다. -// TODO: 체크 버튼을 누르면 onCompleteTodo 함수가 호출됩니다. -// TODO: onCompleteTodo 함수는 할 일의 id와 check 상태를 인자로 받습니다. -// TODO: 삭제 버튼을 누르면 onDeleteTodo 함수가 호출됩니다. -// TODO: onDeleteTodo 함수는 할 일의 id를 인자로 받습니다. From 31992b3375351c41cb880adf70f957804895d811 Mon Sep 17 00:00:00 2001 From: JongYun Jeong <95991290+BellYun@users.noreply.github.com> Date: Thu, 23 May 2024 15:32:55 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat=20:=20Form=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 38 +++++++++++++++++++------------------- src/components/Form.js | 7 ++++++- 2 files changed, 25 insertions(+), 20 deletions(-) diff --git a/src/App.js b/src/App.js index b0d2c54..f57f504 100644 --- a/src/App.js +++ b/src/App.js @@ -7,9 +7,8 @@ function App() { const [todoList, setTodoList] = useState([]); const addTodo = newTodo => { - const uuid = uuidv4(); const newTodoForm = { - id: uuid, + id: uuidv4(), todo: newTodo, isCompleted: false, }; @@ -36,27 +35,28 @@ function App() {

    Todo List

    - + {todoList.length === 0 ? ( +
    할 일이 없습니다.
    + ) : ( + + )}
    ); } export default App; -// TODO: Todo App을 구현합니다. // TODO: [] 할 일이 없으면 "할 일 없음"이 화면에 보여집니다. -// TODO: [] 에서 입력한 할 일을 로 보여줍니다. -// TODO: [] 최근에 추가한 할 일이 위에 보여집니다. diff --git a/src/components/Form.js b/src/components/Form.js index ef13f7a..91e1ad8 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -21,7 +21,12 @@ function Form({ onAddTodo }) { return (
    - + From 7d7e6b656e8d6fd1bcb216a91de117e794d8b88f Mon Sep 17 00:00:00 2001 From: JongYun Jeong <95991290+BellYun@users.noreply.github.com> Date: Thu, 23 May 2024 15:37:51 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat=20:=20input=20Enter=20=EC=9D=B4?= =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Form.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/Form.js b/src/components/Form.js index 91e1ad8..d9007e1 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import { useState } from 'react'; function Form({ onAddTodo }) { + const ENTER = 'Enter'; const [inputValue, setInputValue] = useState(''); const OnAdd = newTodo => { @@ -19,12 +20,23 @@ function Form({ onAddTodo }) { } }; + const handleKeyPressEnter = event => { + const debounce = setTimeout(() => { + if (event.key === ENTER) { + event.preventDefault(); + handleClickAddButton(); + } + }, 10); + return () => clearTimeout(debounce); + }; + return (