From 2a1e6640deb0078ba7b03655bd336b5ac0cac66d Mon Sep 17 00:00:00 2001 From: HyeonChae1104 <211063@jnu.ac.kr> Date: Sun, 9 Jun 2024 18:23:49 +0900 Subject: [PATCH 01/18] =?UTF-8?q?Docs:=20=EA=B5=AC=ED=98=84=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3c0710d2..bc6ac07a 100644 --- a/README.md +++ b/README.md @@ -1 +1,16 @@ -# react-todo-list-precourse \ No newline at end of file +# react-todo-list-precourse + +하루 또는 한 주의 목록을 업데이트하는 할 일 목록을 구현한다. + +### 할 일 추가/삭제 +- 추가할 때 사용자는 Enter나 '추가'버튼을 사용하여 할 일을 목록에 추가할 수 있어야 한다. +- 사용자가 아무것도 입력하지 않은 경우, 할 일을 추가할 수 없다. +- 할 일의 목록을 볼 수 있다. +- 할 일의 완료 상태를 전환할 수 있다. + +### 선택 요구 사항 +- 현재 진행 중인 할 일, 완료된 할 일, 모든 할 일을 필터링할 수 있다. +- 해야할 일의 총 개수를 확인할 수 있다. +- 새로고침을 하여도 이전에 작성한 데이터는 유지되어야 한다. + +### UI는 자유롭게 만드는 것이 가능하다. \ No newline at end of file From 213b69c33b4467df5ff323510d4a4f51677c68a6 Mon Sep 17 00:00:00 2001 From: HyeonChae1104 <211063@jnu.ac.kr> Date: Mon, 10 Jun 2024 01:04:06 +0900 Subject: [PATCH 02/18] =?UTF-8?q?feat:=20=EA=B8=B0=EB=B3=B8=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=EC=B4=88=EA=B8=B0=20=EC=83=81=ED=83=9C?= =?UTF-8?q?=20=EA=B4=80=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/App.jsx diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 00000000..1a58d10c --- /dev/null +++ b/src/App.jsx @@ -0,0 +1,19 @@ +import React, { useState, useEffect } from 'react'; +import TodoList from '../components/TodoList'; +import './App.css'; + +function App() { + const [todos, setTodos] = useState([]); + const [filter, setFilter] = useState('all'); + + useEffect(() => { + const savedTodos = JSON.parse(localStorage.getItem('todos')); + if (savedTodos) { + setTodos(savedTodos); + } + }, []); + + useEffect(() => { + localStorage.setItem('todos', JSON.stringify(todos)); + }, [todos]); +} From ecc94829352ad30403b337d928d439f49ce4ed11 Mon Sep 17 00:00:00 2001 From: HyeonChae1104 <211063@jnu.ac.kr> Date: Mon, 10 Jun 2024 01:07:05 +0900 Subject: [PATCH 03/18] =?UTF-8?q?feat:=20=ED=95=A0=20=EC=9D=BC=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/App.jsx b/src/App.jsx index 1a58d10c..968a24ff 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,6 @@ import React, { useState, useEffect } from 'react'; import TodoList from '../components/TodoList'; +import AddTodo from '../components/AddTodo'; import './App.css'; function App() { @@ -16,4 +17,8 @@ function App() { useEffect(() => { localStorage.setItem('todos', JSON.stringify(todos)); }, [todos]); + + const addTodo = (text) => { + setTodos([...todos, { text, completed: false }]); + }; } From 2c56649b444d92e0726045222c473863acb0447f Mon Sep 17 00:00:00 2001 From: HyeonChae1104 <211063@jnu.ac.kr> Date: Mon, 10 Jun 2024 01:07:57 +0900 Subject: [PATCH 04/18] =?UTF-8?q?feat:=20=ED=95=A0=20=EC=9D=BC=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/App.jsx b/src/App.jsx index 968a24ff..286d9b9b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -21,4 +21,11 @@ function App() { const addTodo = (text) => { setTodos([...todos, { text, completed: false }]); }; + + const deleteTodo = (index) => { + const newTodos = [...todos]; + newTodos.splice(index, 1); + setTodos(newTodos); + }; + } From cde2843d83ce0e73156972d1556eba377b81bf31 Mon Sep 17 00:00:00 2001 From: HyeonChae1104 <211063@jnu.ac.kr> Date: Mon, 10 Jun 2024 01:08:45 +0900 Subject: [PATCH 05/18] =?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=ED=86=A0=EA=B8=80=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/App.jsx b/src/App.jsx index 286d9b9b..de7b3d0f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -28,4 +28,11 @@ function App() { setTodos(newTodos); }; + const toggleComplete = (index) => { + const newTodos = [...todos]; + newTodos[index].completed = !newTodos[index].completed; + setTodos(newTodos); + }; + + } From bd1ccac33f2d0a6ec475e890fee5f4289d88b8f6 Mon Sep 17 00:00:00 2001 From: HyeonChae1104 <211063@jnu.ac.kr> Date: Mon, 10 Jun 2024 01:10:15 +0900 Subject: [PATCH 06/18] =?UTF-8?q?feat:=20=ED=95=84=ED=84=B0=EB=A7=81=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/App.jsx b/src/App.jsx index de7b3d0f..ae98358f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; import TodoList from '../components/TodoList'; import AddTodo from '../components/AddTodo'; +import TodoFilter from '../components/TodoFilter'; import './App.css'; function App() { @@ -34,5 +35,10 @@ function App() { setTodos(newTodos); }; - + const filteredTodos = todos.filter(todo => { + if (filter === 'all') return true; + if (filter === 'active') return !todo.completed; + if (filter === 'completed') return todo.completed; + return true; + }); } From 3889e8b057241e965c03dcb89df921e397fa72a2 Mon Sep 17 00:00:00 2001 From: HyeonChae1104 <211063@jnu.ac.kr> Date: Mon, 10 Jun 2024 01:12:26 +0900 Subject: [PATCH 07/18] =?UTF-8?q?feat:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/App.jsx b/src/App.jsx index ae98358f..9c57fded 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -41,4 +41,15 @@ function App() { if (filter === 'completed') return todo.completed; return true; }); + +return ( +
+

Todo List

+ + + +
+ ); } + +export default App; \ No newline at end of file From a3e51367eaaa135eafb45e6859d0acd4b092059a Mon Sep 17 00:00:00 2001 From: HyeonChae1104 <211063@jnu.ac.kr> Date: Mon, 10 Jun 2024 01:16:55 +0900 Subject: [PATCH 08/18] =?UTF-8?q?feat:=20AddTodo=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/AddTodo.jsx | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 components/AddTodo.jsx diff --git a/components/AddTodo.jsx b/components/AddTodo.jsx new file mode 100644 index 00000000..3528c37f --- /dev/null +++ b/components/AddTodo.jsx @@ -0,0 +1,25 @@ +import React, { useState } from 'react'; + +function AddTodo({ addTodo }) { + const [value, setValue] = useState(''); + + const handleSubmit = (e) => { + e.preventDefault(); + if (!value) return; + addTodo(value); + setValue(''); + }; + + return ( +
+ setValue(e.target.value)} + /> + +
+ ); +} + +export default AddTodo; From b260a97fd596dbf91634746d78912649f9a929a1 Mon Sep 17 00:00:00 2001 From: HyeonChae1104 <211063@jnu.ac.kr> Date: Mon, 10 Jun 2024 01:18:09 +0900 Subject: [PATCH 09/18] =?UTF-8?q?feat:=20TodoFilter=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/TodoFilter.jsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 components/TodoFilter.jsx diff --git a/components/TodoFilter.jsx b/components/TodoFilter.jsx new file mode 100644 index 00000000..5b444aad --- /dev/null +++ b/components/TodoFilter.jsx @@ -0,0 +1,13 @@ +import React from 'react'; + +function TodoFilter({ filter, setFilter }) { + return ( +
+ + + +
+ ); +} + +export default TodoFilter; From 2092b4d39b4a93ff932182acbf286d8fb8676daa Mon Sep 17 00:00:00 2001 From: HyeonChae1104 <211063@jnu.ac.kr> Date: Mon, 10 Jun 2024 01:18:37 +0900 Subject: [PATCH 10/18] =?UTF-8?q?feat:=20TodoList=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/TodoList.jsx | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 components/TodoList.jsx diff --git a/components/TodoList.jsx b/components/TodoList.jsx new file mode 100644 index 00000000..d5cbdc43 --- /dev/null +++ b/components/TodoList.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import TodoItem from './TodoItem.jsx'; + +function TodoList({ todos, deleteTodo, toggleComplete }) { + return ( +
+ {todos.map((todo, index) => ( + + ))} +
+ ); +} + +export default TodoList; From abd6c89ebca210f151ab3f8ddac9a5b0a54229ff Mon Sep 17 00:00:00 2001 From: HyeonChae1104 <211063@jnu.ac.kr> Date: Mon, 10 Jun 2024 01:21:20 +0900 Subject: [PATCH 11/18] =?UTF-8?q?feat:=20=EA=B0=9C=EB=B3=84=20=ED=95=A0=20?= =?UTF-8?q?=EC=9D=BC=20=ED=95=AD=EB=AA=A9=EC=9D=84=20=ED=91=9C=EC=8B=9C?= =?UTF-8?q?=ED=95=98=EA=B3=A0=20=EA=B4=80=EB=A6=AC=ED=95=98=EB=8A=94=20Tod?= =?UTF-8?q?oItem=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/TodoItem.jsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 components/TodoItem.jsx diff --git a/components/TodoItem.jsx b/components/TodoItem.jsx new file mode 100644 index 00000000..bfd5e126 --- /dev/null +++ b/components/TodoItem.jsx @@ -0,0 +1,13 @@ +import React from 'react'; + +function TodoItem({ todo, index, deleteTodo, toggleComplete }) { + return ( +
+ {todo.text} + + +
+ ); +} + +export default TodoItem; From dfe27fb6761b579a28aebec3859d09173e64cf99 Mon Sep 17 00:00:00 2001 From: HyeonChae1104 <211063@jnu.ac.kr> Date: Mon, 10 Jun 2024 01:23:39 +0900 Subject: [PATCH 12/18] =?UTF-8?q?chore:=20React=20=EC=95=A0=ED=94=8C?= =?UTF-8?q?=EB=A6=AC=EC=BC=80=EC=9D=B4=EC=85=98=EC=9D=98=20=EC=A7=84?= =?UTF-8?q?=EC=9E=85=EC=A0=90=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.jsx | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/main.jsx diff --git a/src/main.jsx b/src/main.jsx new file mode 100644 index 00000000..498a00c6 --- /dev/null +++ b/src/main.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App.jsx'; +import './index.css'; + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( + + + +); From 5c1cf79b194f557f6b00f97318d648e607c32a96 Mon Sep 17 00:00:00 2001 From: HyeonChae1104 <211063@jnu.ac.kr> Date: Mon, 10 Jun 2024 01:27:45 +0900 Subject: [PATCH 13/18] =?UTF-8?q?chore:=20title=20=EB=82=B4=EC=9A=A9?= =?UTF-8?q?=EA=B3=BC=20id=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index b021b5c8..3008ae8b 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,10 @@ - + Todo List -
- +
+ From e15d708491666083d2d2f1f3793e74461c8033a2 Mon Sep 17 00:00:00 2001 From: HyeonChae1104 <211063@jnu.ac.kr> Date: Mon, 10 Jun 2024 01:46:37 +0900 Subject: [PATCH 14/18] =?UTF-8?q?fix:=20=ED=95=A0=20=EC=9D=BC=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=ED=9B=84=20=EC=9E=85=EB=A0=A5=20=ED=95=84=EB=93=9C?= =?UTF-8?q?=20=EC=B4=88=EA=B8=B0=ED=99=94=20=EB=B0=8F=20=EB=AA=A9=EB=A1=9D?= =?UTF-8?q?=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=20=EB=AC=B8=EC=A0=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/TodoItem.jsx | 7 ++++--- components/TodoList.jsx | 2 +- src/App.jsx | 16 ++++++++-------- 3 files changed, 13 insertions(+), 12 deletions(-) diff --git a/components/TodoItem.jsx b/components/TodoItem.jsx index bfd5e126..415aeeed 100644 --- a/components/TodoItem.jsx +++ b/components/TodoItem.jsx @@ -2,9 +2,10 @@ import React from 'react'; function TodoItem({ todo, index, deleteTodo, toggleComplete }) { return ( -
- {todo.text} - +
+ toggleComplete(index)} style={{ cursor: 'pointer' }}> + {todo.text} +
); diff --git a/components/TodoList.jsx b/components/TodoList.jsx index d5cbdc43..ff1833f5 100644 --- a/components/TodoList.jsx +++ b/components/TodoList.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import TodoItem from './TodoItem.jsx'; +import TodoItem from './TodoItem'; function TodoList({ todos, deleteTodo, toggleComplete }) { return ( diff --git a/src/App.jsx b/src/App.jsx index 9c57fded..3d4b99bd 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -42,14 +42,14 @@ function App() { return true; }); -return ( -
-

Todo List

- - - -
+ return ( +
+

Todo List

+ + + +
); } -export default App; \ No newline at end of file +export default App; From 8e1c68af5280d9d8e3f922223971b5b706ee7bd4 Mon Sep 17 00:00:00 2001 From: HyeonChae1104 <211063@jnu.ac.kr> Date: Mon, 10 Jun 2024 01:57:39 +0900 Subject: [PATCH 15/18] =?UTF-8?q?feat:=20=EC=9E=85=EB=A0=A5=20=ED=95=84?= =?UTF-8?q?=EB=93=9C=EC=99=80=20Add=20Todo=20=EB=B2=84=ED=8A=BC=EC=9D=84?= =?UTF-8?q?=20=EB=8F=99=EC=9D=BC=ED=95=9C=20=EC=A4=84=EC=97=90=20=EB=B0=B0?= =?UTF-8?q?=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/AddTodo.jsx | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/components/AddTodo.jsx b/components/AddTodo.jsx index 3528c37f..b45a1149 100644 --- a/components/AddTodo.jsx +++ b/components/AddTodo.jsx @@ -5,19 +5,22 @@ function AddTodo({ addTodo }) { const handleSubmit = (e) => { e.preventDefault(); - if (!value) return; - addTodo(value); - setValue(''); + if (!value.trim()) return; // 공백 입력 방지 + addTodo(value.trim()); // 공백 제거한 값 전달 + setValue(''); // 입력 필드 초기화 }; return (
- setValue(e.target.value)} - /> - +
+ setValue(e.target.value)} + placeholder="What needs to be done?" + /> + +
); } From 92033f2aaf88334acf03934287e793e47966f172 Mon Sep 17 00:00:00 2001 From: HyeonChae1104 <211063@jnu.ac.kr> Date: Mon, 10 Jun 2024 02:01:06 +0900 Subject: [PATCH 16/18] =?UTF-8?q?style:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=EC=9D=84=20?= =?UTF-8?q?=EC=9C=84=ED=95=9C=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 | 98 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 src/App.css diff --git a/src/App.css b/src/App.css new file mode 100644 index 00000000..3244d27d --- /dev/null +++ b/src/App.css @@ -0,0 +1,98 @@ +.App { + text-align: center; + background-color: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + width: 400px; + margin: 40px auto; + font-family: Arial, sans-serif; +} + +.input-container { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 20px; +} + +input[type="text"] { + flex: 1; + padding: 10px; + font-size: 16px; + border: 1px solid #ddd; + border-radius: 4px 0 0 4px; +} + +button { + background-color: #5cb85c; + color: white; + border: none; + padding: 10px; + font-size: 16px; + border-radius: 0 4px 4px 0; + cursor: pointer; + transition: background-color 0.3s; +} + +button:hover { + background-color: #4cae4c; +} + +.todo-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 0; + border-bottom: 1px solid #ededed; + font-size: 16px; +} + +.todo-item.completed { + text-decoration: line-through; + color: #d9d9d9; +} + +.todo-buttons { + display: flex; + gap: 10px; +} + +.filters { + display: flex; + justify-content: center; + margin-top: 20px; +} + +.filters button { + margin: 0 5px; + padding: 5px 10px; + border: 1px solid #e6e6e6; + background: none; + font-size: 14px; + cursor: pointer; + border-radius: 4px; + transition: background-color 0.3s, color 0.3s; +} + +.filters button:hover { + background-color: #f0f0f0; +} + +.filters button.selected { + border-color: rgba(175, 47, 47, 0.2); + color: #5cb85c; +} + +.clear-completed { + background: none; + border: none; + color: #777; + cursor: pointer; + font-size: 14px; + margin-top: 20px; +} + +.clear-completed:hover { + text-decoration: underline; +} From c5dd00b31709ffbfc703bc1e6aa23bb2eafbea21 Mon Sep 17 00:00:00 2001 From: HyeonChae1104 <211063@jnu.ac.kr> Date: Mon, 10 Jun 2024 02:01:43 +0900 Subject: [PATCH 17/18] =?UTF-8?q?style:=20=EC=A0=84=EC=97=AD=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EB=B0=8F=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EC=84=A4=EC=A0=95=EC=9D=84=20=EC=9C=84=ED=95=9C=20?= =?UTF-8?q?css=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.css | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 src/index.css diff --git a/src/index.css b/src/index.css new file mode 100644 index 00000000..546d573d --- /dev/null +++ b/src/index.css @@ -0,0 +1,29 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; + background-color: #f5f5f5; + color: #4d4d4d; +} + +#root { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} + +input[type="text"]::placeholder { + color: #d9d9d9; + font-style: italic; +} + +input[type="text"]:focus { + outline: none; + border-color: #5cb85c; +} + +input[type="text"]:focus::placeholder { + color: transparent; +} From 4ed2295c2147f190ea79d701101fe3f59c43d659 Mon Sep 17 00:00:00 2001 From: HyeonChae1104 <211063@jnu.ac.kr> Date: Mon, 10 Jun 2024 02:02:54 +0900 Subject: [PATCH 18/18] =?UTF-8?q?feat:=20complete=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=EA=B3=BC=20delete=20=EB=B2=84=ED=8A=BC=20=EC=A0=95=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/TodoItem.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/components/TodoItem.jsx b/components/TodoItem.jsx index 415aeeed..b19b75ff 100644 --- a/components/TodoItem.jsx +++ b/components/TodoItem.jsx @@ -6,7 +6,12 @@ function TodoItem({ todo, index, deleteTodo, toggleComplete }) { toggleComplete(index)} style={{ cursor: 'pointer' }}> {todo.text} - +
+ + +
); }