From 0cc28175726c20d0fe55b7a49c43ed5552d56ffb Mon Sep 17 00:00:00 2001 From: wjdsbs Date: Mon, 10 Jun 2024 04:18:37 +0900 Subject: [PATCH 01/11] =?UTF-8?q?docs=20:=20README.md=20=EA=B8=B0=EB=8A=A5?= =?UTF-8?q?=20=EB=AA=A9=EB=A1=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3c0710d2..711694d4 100644 --- a/README.md +++ b/README.md @@ -1 +1,15 @@ -# react-todo-list-precourse \ No newline at end of file +# 미니 과제 - 할 일 목록 (React) + +카카오 테크 캠퍼스 2기 + +### [STEP1] 2회차 미니과제 - 할 일 목록 (React) + +- 하루 또는 한 주의 할 일 목록을 업데이트하는 할 일 목록을 구현한다. +- `React` 라이브러리를 사용하여 웹 앱으로 구현한다. + +## 기능 목록 + +- 인터페이스 구현 +- 할 일 추가 기능 +- 할 일 삭제 기능 +- 할 일 완료 상태 전환 기능 From 16ff57fcce8ae416d4f3e8b98401af0ee96ac3e9 Mon Sep 17 00:00:00 2001 From: wjdsbs Date: Mon, 10 Jun 2024 04:28:21 +0900 Subject: [PATCH 02/11] =?UTF-8?q?feat=20:=20App.jsx=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 6 +++--- src/App.jsx | 22 ++++++++++++++++++++++ src/main.js | 0 src/styles/App.css | 9 +++++++++ 4 files changed, 34 insertions(+), 3 deletions(-) create mode 100644 src/App.jsx delete mode 100644 src/main.js create mode 100644 src/styles/App.css diff --git a/index.html b/index.html index b021b5c8..2eb4781a 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,12 @@ - + - + Todos
- + diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 00000000..d3d4dea6 --- /dev/null +++ b/src/App.jsx @@ -0,0 +1,22 @@ +import React from "react"; +import "./styles/App.css"; +import ReactDOM from "react-dom/client"; + +function App() { + return ( + <> +
+

todos

+
+ + ); +} + +const root = ReactDOM.createRoot(document.getElementById("app")); +root.render( + + + +); + +export default App; diff --git a/src/main.js b/src/main.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/styles/App.css b/src/styles/App.css new file mode 100644 index 00000000..5a8c350b --- /dev/null +++ b/src/styles/App.css @@ -0,0 +1,9 @@ +body { + margin: 0px; + padding: 0px; + width: 100vw; + height: 100vh; + overflow: hidden; + background-color: whitesmoke; + box-sizing: border-box; +} From 019366ed67571834f12ac7c34287c39e94f6654b Mon Sep 17 00:00:00 2001 From: wjdsbs Date: Mon, 10 Jun 2024 04:34:22 +0900 Subject: [PATCH 03/11] =?UTF-8?q?feat=20:=20=EA=B8=B0=EB=B3=B8=20=EC=9D=B8?= =?UTF-8?q?=ED=84=B0=ED=8E=98=EC=9D=B4=EC=8A=A4=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 +++--- src/components/Header.jsx | 14 +++++++++++ src/components/TodoItem.jsx | 13 ++++++++++ src/components/TodoList.jsx | 12 +++++++++ src/styles/App.css | 49 +++++++++++++++++++++++++++++++++++++ 5 files changed, 92 insertions(+), 3 deletions(-) create mode 100644 src/components/Header.jsx create mode 100644 src/components/TodoItem.jsx create mode 100644 src/components/TodoList.jsx diff --git a/src/App.jsx b/src/App.jsx index d3d4dea6..3f026cd9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,13 +1,14 @@ import React from "react"; import "./styles/App.css"; import ReactDOM from "react-dom/client"; +import Header from "./components/Header"; +import TodoList from "./components/TodoList"; function App() { return ( <> -
-

todos

-
+
+ ); } diff --git a/src/components/Header.jsx b/src/components/Header.jsx new file mode 100644 index 00000000..d9275b25 --- /dev/null +++ b/src/components/Header.jsx @@ -0,0 +1,14 @@ +import React from "react"; + +function Header() { + return ( +
+

todos

+
+ +
+
+ ); +} + +export default Header; diff --git a/src/components/TodoItem.jsx b/src/components/TodoItem.jsx new file mode 100644 index 00000000..4d8a5524 --- /dev/null +++ b/src/components/TodoItem.jsx @@ -0,0 +1,13 @@ +import React from "react"; + +function TodoItem() { + return ( +
  • + + + +
    • + ); +} + +export default TodoItem; diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx new file mode 100644 index 00000000..a58c06b4 --- /dev/null +++ b/src/components/TodoList.jsx @@ -0,0 +1,12 @@ +import React from "react"; +import TodoItem from "./TodoItem"; + +function TodoList() { + return ( +
      + +
    + ); +} + +export default TodoList; diff --git a/src/styles/App.css b/src/styles/App.css index 5a8c350b..7b7bc292 100644 --- a/src/styles/App.css +++ b/src/styles/App.css @@ -7,3 +7,52 @@ body { background-color: whitesmoke; box-sizing: border-box; } + +/*HEADER*/ +.header { + text-align: center; +} + +.header h1 { + color: pink; + font-size: 60px; +} + +.header .todo-input { + width: 400px; + font-size: 20px; + height: 50px; +} + +/*TodoItem*/ +.todo-list { + list-style-type: none; + width: 406px; + padding: 0px; + font-size: 20px; + background-color: white; + margin: 0 auto; +} + +.todo-list .todo-item { + display: flex; + align-items: center; + height: 50px; + margin: 0 auto; + padding: 0 20px 0 20px; +} +.toggle { + accent-color: pink; +} + +.todo-item input[type="checkbox"] { + margin-right: 1rem; +} +.todo-item-label { + width: 300px; +} +.todo-item .delete { + margin-left: auto; + all: unset; + cursor: pointer; +} From aab46b779df0a8d45dffada84fa89607cb85b551 Mon Sep 17 00:00:00 2001 From: wjdsbs Date: Mon, 10 Jun 2024 04:55:50 +0900 Subject: [PATCH 04/11] =?UTF-8?q?feat=20:=20=ED=95=A0=20=EC=9D=BC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 12 +++++++++--- src/components/Header.jsx | 28 +++++++++++++++++++++++++--- src/components/TodoItem.jsx | 4 ++-- src/components/TodoList.jsx | 6 ++++-- 4 files changed, 40 insertions(+), 10 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 3f026cd9..9874fd16 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,14 +1,20 @@ -import React from "react"; +import React, { useState } from "react"; import "./styles/App.css"; import ReactDOM from "react-dom/client"; import Header from "./components/Header"; import TodoList from "./components/TodoList"; function App() { + const [todos, setTodos] = useState([]); + + const addTodo = (todo) => { + setTodos([...todos, { id: Date.now(), text: todo }]); + }; + return ( <> -
    - +
    + ); } diff --git a/src/components/Header.jsx b/src/components/Header.jsx index d9275b25..598ff621 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -1,11 +1,33 @@ -import React from "react"; +import React, { useState } from "react"; + +function Header({ addTodo }) { + const [newTodo, setNewTodo] = useState(""); + + const handleKeyDown = (e) => { + if (e.key === "Enter") { + handleAddTodo(); + } + }; + + const handleAddTodo = () => { + if (newTodo.trim() !== "") { + addTodo(newTodo); + setNewTodo(""); + } + }; -function Header() { return (

    todos

    - + setNewTodo(e.target.value)} + onKeyDown={handleKeyDown} + />
    ); diff --git a/src/components/TodoItem.jsx b/src/components/TodoItem.jsx index 4d8a5524..337ce969 100644 --- a/src/components/TodoItem.jsx +++ b/src/components/TodoItem.jsx @@ -1,10 +1,10 @@ import React from "react"; -function TodoItem() { +function TodoItem({ todo }) { return (
  • - +
    • ); diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx index a58c06b4..1e54f715 100644 --- a/src/components/TodoList.jsx +++ b/src/components/TodoList.jsx @@ -1,10 +1,12 @@ import React from "react"; import TodoItem from "./TodoItem"; -function TodoList() { +function TodoList({ todos }) { return (
      - + {todos.map((todo) => ( + + ))}
    ); } From 97a6a34ec4d41a32b935cd709a75eab4a548d94c Mon Sep 17 00:00:00 2001 From: wjdsbs Date: Mon, 10 Jun 2024 05:02:57 +0900 Subject: [PATCH 05/11] =?UTF-8?q?feat=20:=20=ED=95=A0=EC=9D=BC=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 6 +++++- src/components/TodoItem.jsx | 6 ++++-- src/components/TodoList.jsx | 4 ++-- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 9874fd16..d5f05f6b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -11,10 +11,14 @@ function App() { setTodos([...todos, { id: Date.now(), text: todo }]); }; + const delTodo = (id) => { + setTodos(todos.filter((todo) => todo.id !== id)); + }; + return ( <>
    - + ); } diff --git a/src/components/TodoItem.jsx b/src/components/TodoItem.jsx index 337ce969..d2a4ae55 100644 --- a/src/components/TodoItem.jsx +++ b/src/components/TodoItem.jsx @@ -1,11 +1,13 @@ import React from "react"; -function TodoItem({ todo }) { +function TodoItem({ todo, onDelete }) { return (
  • - +
    • ); } diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx index 1e54f715..3c0e1317 100644 --- a/src/components/TodoList.jsx +++ b/src/components/TodoList.jsx @@ -1,11 +1,11 @@ import React from "react"; import TodoItem from "./TodoItem"; -function TodoList({ todos }) { +function TodoList({ todos, delTodo }) { return (
      {todos.map((todo) => ( - + ))}
    ); From ad9b378ede51b2589953a2df5caee1d350fb4ff8 Mon Sep 17 00:00:00 2001 From: wjdsbs Date: Mon, 10 Jun 2024 05:14:52 +0900 Subject: [PATCH 06/11] =?UTF-8?q?feat=20:=20=ED=95=A0=20=EC=9D=BC=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C=20=EC=83=81=ED=83=9C=20=EC=A0=84=ED=99=98=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 16 ++++++++++++++-- src/components/TodoItem.jsx | 11 ++++++++--- src/components/TodoList.jsx | 9 +++++++-- 3 files changed, 29 insertions(+), 7 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index d5f05f6b..e1a4a346 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -8,17 +8,29 @@ function App() { const [todos, setTodos] = useState([]); const addTodo = (todo) => { - setTodos([...todos, { id: Date.now(), text: todo }]); + setTodos([...todos, { id: Date.now(), text: todo, completed: false }]); }; const delTodo = (id) => { setTodos(todos.filter((todo) => todo.id !== id)); }; + const toggleTodo = (id) => { + setTodos( + todos.map((todo) => { + if (todo.id === id) { + return { ...todo, completed: !todo.completed }; + } else { + return todo; + } + }) + ); + }; + return ( <>
    - + ); } diff --git a/src/components/TodoItem.jsx b/src/components/TodoItem.jsx index d2a4ae55..02849362 100644 --- a/src/components/TodoItem.jsx +++ b/src/components/TodoItem.jsx @@ -1,9 +1,14 @@ import React from "react"; -function TodoItem({ todo, onDelete }) { +function TodoItem({ todo, onDelete, onToggle }) { return ( -
  • - +
  • + onToggle(todo.id)} + >