From ccc2ef69c90e5fa806a6bd40c49a5eb3de24fa46 Mon Sep 17 00:00:00 2001 From: daeun0726 Date: Fri, 31 May 2024 16:51:19 +0900 Subject: [PATCH 01/13] docs: update README.md --- README.md | 52 +++++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 4 ++-- src/App.jsx | 11 +++++++++++ src/main.js | 0 src/main.jsx | 5 +++++ 5 files changed, 69 insertions(+), 3 deletions(-) create mode 100644 src/App.jsx delete mode 100644 src/main.js create mode 100644 src/main.jsx diff --git a/README.md b/README.md index 3c0710d2..43e4f708 100644 --- a/README.md +++ b/README.md @@ -1 +1,51 @@ -# react-todo-list-precourse \ No newline at end of file +# ๐Ÿ–ฅ๏ธ react-todo-list-precourse +์นด์นด์˜ค ํ…Œํฌ ์บ ํผ์Šค 2๊ธฐ 2ํšŒ์ฐจ ๋ฏธ๋‹ˆ๊ณผ์ œ - ํ•  ์ผ ๋ชฉ๋ก + +
+ +## โš™๏ธ ๊ตฌํ˜„ํ•  ๊ธฐ๋Šฅ ๋ชฉ๋ก + +### UI ๊ตฌ์„ฑ + +
+ + +### ์ผ์ • ์ž…๋ ฅ ๊ธฐ๋Šฅ + +#### 1) Enter ํ‚ค๋‚˜ ์ถ”๊ฐ€ ๋ฒ„ํŠผ์„ ์‚ฌ์šฉํ•˜์—ฌ ํ•  ์ผ ์ถ”๊ฐ€ + +#### 2) ์•„๋ฌด๊ฒƒ๋„ ์ž…๋ ฅํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ์—๋Š” ํ•  ์ผ์„ ์ถ”๊ฐ€ ๋ถˆ๊ฐ€ + +
+ +### ํ•  ์ผ ์‚ญ์ œ + +#### 1) "X" ๋ฒ„ํŠผ ํด๋ฆญํ•˜์—ฌ ์‚ญ์ œ + +
+ +### ํ•  ์ผ ์ƒํƒœ ์ „ํ™˜ + +#### 1) ์™„๋ฃŒ, ๋ฏธ์™„๋ฃŒ ์ƒํƒœ ์ „ํ™˜ + +
+ +### ๋ชฉ๋ก ๊ด€๋ฆฌ + +#### 1) ๋ฏธ์™„๋ฃŒ ์ผ์ •, ์™„๋ฃŒ ์ผ์ •, ๋ชจ๋“  ์ผ์ • ํ•„ํ„ฐ๋ง + +#### 2) ๋ฏธ์™„๋ฃŒ ํ•  ์ผ ์ด ๊ฐœ์ˆ˜ ํ™•์ธ ๊ฐ€๋Šฅ + +#### 3) ๋ชจ๋“  ์™„๋ฃŒ ์ผ์ • ํ•œ ๋ฒˆ์— ์‚ญ์ œ ๊ฐ€๋Šฅ + + + + + + + +
+ + +## ๐Ÿ“Œ ๊ณผ์ œ ์ง„ํ–‰ ์†Œ๊ฐ + diff --git a/index.html b/index.html index b021b5c8..82b6987d 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ -
- +
+ diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 00000000..8c7b077b --- /dev/null +++ b/src/App.jsx @@ -0,0 +1,11 @@ +import React from 'react'; + +function App() { + return ( +
+

Hello

+
+ ); +} + +export default App; diff --git a/src/main.js b/src/main.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/main.jsx b/src/main.jsx new file mode 100644 index 00000000..1b04e697 --- /dev/null +++ b/src/main.jsx @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.jsx'; + +ReactDOM.createRoot(document.getElementById("root")).render(); \ No newline at end of file From a1a103dcdc5c3df408b51a040d3c2c0e15e05805 Mon Sep 17 00:00:00 2001 From: daeun0726 Date: Sun, 9 Jun 2024 02:53:02 +0900 Subject: [PATCH 02/13] =?UTF-8?q?docs:=20README.md=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 34 +++++++++++----------------------- 1 file changed, 11 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 43e4f708..f872d1f0 100644 --- a/README.md +++ b/README.md @@ -9,43 +9,31 @@
- ### ์ผ์ • ์ž…๋ ฅ ๊ธฐ๋Šฅ -#### 1) Enter ํ‚ค๋‚˜ ์ถ”๊ฐ€ ๋ฒ„ํŠผ์„ ์‚ฌ์šฉํ•˜์—ฌ ํ•  ์ผ ์ถ”๊ฐ€ - -#### 2) ์•„๋ฌด๊ฒƒ๋„ ์ž…๋ ฅํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ์—๋Š” ํ•  ์ผ์„ ์ถ”๊ฐ€ ๋ถˆ๊ฐ€ +- [ ] Enter ํ‚ค๋‚˜ ์ถ”๊ฐ€ ๋ฒ„ํŠผ์„ ์‚ฌ์šฉํ•˜์—ฌ ํ•  ์ผ ์ถ”๊ฐ€ +- [ ] ์•„๋ฌด๊ฒƒ๋„ ์ž…๋ ฅํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ์—๋Š” ํ•  ์ผ์„ ์ถ”๊ฐ€ ๋ถˆ๊ฐ€
-### ํ•  ์ผ ์‚ญ์ œ - -#### 1) "X" ๋ฒ„ํŠผ ํด๋ฆญํ•˜์—ฌ ์‚ญ์ œ +### ๋ชฉ๋ก ๊ด€๋ฆฌ +- [ ] ํ• ์ผ ๋ชฉ๋ก ๋ Œ๋”๋ง
### ํ•  ์ผ ์ƒํƒœ ์ „ํ™˜ +- [ ] ์™„๋ฃŒ, ๋ฏธ์™„๋ฃŒ ์ƒํƒœ ์ „ํ™˜ -#### 1) ์™„๋ฃŒ, ๋ฏธ์™„๋ฃŒ ์ƒํƒœ ์ „ํ™˜
-### ๋ชฉ๋ก ๊ด€๋ฆฌ - -#### 1) ๋ฏธ์™„๋ฃŒ ์ผ์ •, ์™„๋ฃŒ ์ผ์ •, ๋ชจ๋“  ์ผ์ • ํ•„ํ„ฐ๋ง - -#### 2) ๋ฏธ์™„๋ฃŒ ํ•  ์ผ ์ด ๊ฐœ์ˆ˜ ํ™•์ธ ๊ฐ€๋Šฅ - -#### 3) ๋ชจ๋“  ์™„๋ฃŒ ์ผ์ • ํ•œ ๋ฒˆ์— ์‚ญ์ œ ๊ฐ€๋Šฅ - - - - - - +### ํ•  ์ผ ์‚ญ์ œ +- [ ] "X" ๋ฒ„ํŠผ ํด๋ฆญํ•˜์—ฌ ์‚ญ์ œ
- -## ๐Ÿ“Œ ๊ณผ์ œ ์ง„ํ–‰ ์†Œ๊ฐ +### ์ถ”๊ฐ€ ๊ธฐ๋Šฅ +- [ ] ๋ฏธ์™„๋ฃŒ ์ผ์ •, ์™„๋ฃŒ ์ผ์ •, ๋ชจ๋“  ์ผ์ • ํ•„ํ„ฐ๋ง +- [ ] ๋ฏธ์™„๋ฃŒ ํ•  ์ผ ์ด ๊ฐœ์ˆ˜ ํ™•์ธ ๊ฐ€๋Šฅ +- [ ] ๋ชจ๋“  ์™„๋ฃŒ ์ผ์ • ํ•œ ๋ฒˆ์— ์‚ญ์ œ ๊ฐ€๋Šฅ From f75f9a408cc365d09f9c2c27073061f070df7f23 Mon Sep 17 00:00:00 2001 From: daeun0726 Date: Sun, 9 Jun 2024 04:19:39 +0900 Subject: [PATCH 03/13] =?UTF-8?q?feat=20:=20UI=20=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 ---- src/App.jsx | 5 ++--- src/components/TodoInput.jsx | 10 ++++++++++ src/components/TodoList.jsx | 10 ++++++++++ src/components/TodoOption.jsx | 10 ++++++++++ src/components/TodoTemplate.jsx | 18 ++++++++++++++++++ 6 files changed, 50 insertions(+), 7 deletions(-) create mode 100644 src/components/TodoInput.jsx create mode 100644 src/components/TodoList.jsx create mode 100644 src/components/TodoOption.jsx create mode 100644 src/components/TodoTemplate.jsx diff --git a/README.md b/README.md index f872d1f0..31f008d2 100644 --- a/README.md +++ b/README.md @@ -13,10 +13,6 @@ - [ ] Enter ํ‚ค๋‚˜ ์ถ”๊ฐ€ ๋ฒ„ํŠผ์„ ์‚ฌ์šฉํ•˜์—ฌ ํ•  ์ผ ์ถ”๊ฐ€ - [ ] ์•„๋ฌด๊ฒƒ๋„ ์ž…๋ ฅํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ์—๋Š” ํ•  ์ผ์„ ์ถ”๊ฐ€ ๋ถˆ๊ฐ€ - -
- -### ๋ชฉ๋ก ๊ด€๋ฆฌ - [ ] ํ• ์ผ ๋ชฉ๋ก ๋ Œ๋”๋ง
diff --git a/src/App.jsx b/src/App.jsx index 8c7b077b..7a82f24d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,9 @@ import React from 'react'; +import TodoTemplate from './components/TodoTemplate'; function App() { return ( -
-

Hello

-
+ ); } diff --git a/src/components/TodoInput.jsx b/src/components/TodoInput.jsx new file mode 100644 index 00000000..2bad8b34 --- /dev/null +++ b/src/components/TodoInput.jsx @@ -0,0 +1,10 @@ +import React from 'react'; + +function TodoInput() { + + return( +
์ž…๋ ฅ๊ฐ’ ์ถ”๊ฐ€ ์นธ
+ ); +} + +export default TodoInput; \ No newline at end of file diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx new file mode 100644 index 00000000..de6ef4c6 --- /dev/null +++ b/src/components/TodoList.jsx @@ -0,0 +1,10 @@ +import React from 'react'; + +function TodoList() { + + return( +
ํˆฌ๋‘ ๋ชฉ๋ก
+ ); +} + +export default TodoList; \ No newline at end of file diff --git a/src/components/TodoOption.jsx b/src/components/TodoOption.jsx new file mode 100644 index 00000000..4a911b9b --- /dev/null +++ b/src/components/TodoOption.jsx @@ -0,0 +1,10 @@ +import React from 'react'; + +function TodoOption() { + + return( +
์˜ต์…˜ ์„ ํƒ์นธ
+ ); +} + +export default TodoOption; \ No newline at end of file diff --git a/src/components/TodoTemplate.jsx b/src/components/TodoTemplate.jsx new file mode 100644 index 00000000..6e528bfa --- /dev/null +++ b/src/components/TodoTemplate.jsx @@ -0,0 +1,18 @@ +import React from 'react'; +import TodoInput from './TodoInput'; +import TodoList from './TodoList'; +import TodoOption from './TodoOption'; + +function TodoTemplate() { + + return( +
+
TO DO
+ + + +
+ ); +} + +export default TodoTemplate; \ No newline at end of file From 4ed93a1d0b59d77e0dfa16e88233368ca6464f62 Mon Sep 17 00:00:00 2001 From: daeun0726 Date: Sun, 9 Jun 2024 04:55:27 +0900 Subject: [PATCH 04/13] =?UTF-8?q?feat=20:=20=EC=9E=85=EB=A0=A5=20=EA=B8=B0?= =?UTF-8?q?=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 --- README.md | 2 +- src/App.jsx | 4 ++-- src/components/TodoInput.jsx | 21 +++++++++++++++++++-- src/components/TodoList.jsx | 2 +- src/components/TodoOption.jsx | 2 +- src/components/TodoTemplate.jsx | 10 +++++----- src/main.jsx | 6 +++--- 7 files changed, 32 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 31f008d2..80eba46f 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ ### ์ผ์ • ์ž…๋ ฅ ๊ธฐ๋Šฅ -- [ ] Enter ํ‚ค๋‚˜ ์ถ”๊ฐ€ ๋ฒ„ํŠผ์„ ์‚ฌ์šฉํ•˜์—ฌ ํ•  ์ผ ์ถ”๊ฐ€ +- [x] Enter ํ‚ค๋‚˜ ์ถ”๊ฐ€ ๋ฒ„ํŠผ์„ ์‚ฌ์šฉํ•˜์—ฌ ํ•  ์ผ ์ถ”๊ฐ€ - [ ] ์•„๋ฌด๊ฒƒ๋„ ์ž…๋ ฅํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ์—๋Š” ํ•  ์ผ์„ ์ถ”๊ฐ€ ๋ถˆ๊ฐ€ - [ ] ํ• ์ผ ๋ชฉ๋ก ๋ Œ๋”๋ง diff --git a/src/App.jsx b/src/App.jsx index 7a82f24d..115712e8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,5 @@ -import React from 'react'; -import TodoTemplate from './components/TodoTemplate'; +import React from "react"; +import TodoTemplate from "./components/TodoTemplate"; function App() { return ( diff --git a/src/components/TodoInput.jsx b/src/components/TodoInput.jsx index 2bad8b34..e76f7bb1 100644 --- a/src/components/TodoInput.jsx +++ b/src/components/TodoInput.jsx @@ -1,9 +1,26 @@ -import React from 'react'; +import React, { useState } from "react"; function TodoInput() { + const [inputValue, setInputValue] = useState(""); + + const handleInputChange = (event) => { + setInputValue(event.target.value); + }; + + const handleKeyDown = (event) => { + if (event.key === "Enter") { + console.log(inputValue); + setInputValue(""); + } + }; return( -
์ž…๋ ฅ๊ฐ’ ์ถ”๊ฐ€ ์นธ
+ ); } diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx index de6ef4c6..bebc3003 100644 --- a/src/components/TodoList.jsx +++ b/src/components/TodoList.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React from "react"; function TodoList() { diff --git a/src/components/TodoOption.jsx b/src/components/TodoOption.jsx index 4a911b9b..235b8a9e 100644 --- a/src/components/TodoOption.jsx +++ b/src/components/TodoOption.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React from "react"; function TodoOption() { diff --git a/src/components/TodoTemplate.jsx b/src/components/TodoTemplate.jsx index 6e528bfa..bb482a82 100644 --- a/src/components/TodoTemplate.jsx +++ b/src/components/TodoTemplate.jsx @@ -1,12 +1,12 @@ -import React from 'react'; -import TodoInput from './TodoInput'; -import TodoList from './TodoList'; -import TodoOption from './TodoOption'; +import React from "react"; +import TodoInput from "./TodoInput"; +import TodoList from "./TodoList"; +import TodoOption from "./TodoOption"; function TodoTemplate() { return( -
+
TO DO
diff --git a/src/main.jsx b/src/main.jsx index 1b04e697..d05dc2f3 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,5 +1,5 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.jsx'; +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./App.jsx"; ReactDOM.createRoot(document.getElementById("root")).render(); \ No newline at end of file From da389795556842d682be3b3e89a12ea6610473d9 Mon Sep 17 00:00:00 2001 From: daeun0726 Date: Sun, 9 Jun 2024 05:06:18 +0900 Subject: [PATCH 05/13] =?UTF-8?q?feat=20:=20=EA=B3=B5=EB=B0=B1=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=20=EB=B0=A9=EC=A7=80=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- src/components/TodoInput.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 80eba46f..5b614066 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ ### ์ผ์ • ์ž…๋ ฅ ๊ธฐ๋Šฅ - [x] Enter ํ‚ค๋‚˜ ์ถ”๊ฐ€ ๋ฒ„ํŠผ์„ ์‚ฌ์šฉํ•˜์—ฌ ํ•  ์ผ ์ถ”๊ฐ€ -- [ ] ์•„๋ฌด๊ฒƒ๋„ ์ž…๋ ฅํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ์—๋Š” ํ•  ์ผ์„ ์ถ”๊ฐ€ ๋ถˆ๊ฐ€ +- [x] ์•„๋ฌด๊ฒƒ๋„ ์ž…๋ ฅํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ์—๋Š” ํ•  ์ผ์„ ์ถ”๊ฐ€ ๋ถˆ๊ฐ€ - [ ] ํ• ์ผ ๋ชฉ๋ก ๋ Œ๋”๋ง
diff --git a/src/components/TodoInput.jsx b/src/components/TodoInput.jsx index e76f7bb1..2924fae4 100644 --- a/src/components/TodoInput.jsx +++ b/src/components/TodoInput.jsx @@ -8,7 +8,7 @@ function TodoInput() { }; const handleKeyDown = (event) => { - if (event.key === "Enter") { + if (event.key === "Enter" && inputValue.trim() !== "" ) { console.log(inputValue); setInputValue(""); } From f0b6a4b39d28ff4401ad01818b138f347b412d87 Mon Sep 17 00:00:00 2001 From: daeun0726 Date: Sun, 9 Jun 2024 21:05:01 +0900 Subject: [PATCH 06/13] =?UTF-8?q?feat=20:=20todo=20=EC=A0=84=EC=97=AD=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=EA=B4=80=EB=A6=AC=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TodoInput.jsx | 6 ++++-- src/components/TodoList.jsx | 1 + src/components/TodoTemplate.jsx | 5 +++-- src/context/TodosContext.jsx | 21 +++++++++++++++++++++ 4 files changed, 29 insertions(+), 4 deletions(-) create mode 100644 src/context/TodosContext.jsx diff --git a/src/components/TodoInput.jsx b/src/components/TodoInput.jsx index 2924fae4..cc66a6b6 100644 --- a/src/components/TodoInput.jsx +++ b/src/components/TodoInput.jsx @@ -1,7 +1,9 @@ -import React, { useState } from "react"; +import React, { useState, useContext } from "react"; +import { TodoContext } from "../context/TodosContext"; function TodoInput() { const [inputValue, setInputValue] = useState(""); + const { addTodo } = useContext(TodoContext); const handleInputChange = (event) => { setInputValue(event.target.value); @@ -9,7 +11,7 @@ function TodoInput() { const handleKeyDown = (event) => { if (event.key === "Enter" && inputValue.trim() !== "" ) { - console.log(inputValue); + addTodo(inputValue.trim()); setInputValue(""); } }; diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx index bebc3003..d30ed1d6 100644 --- a/src/components/TodoList.jsx +++ b/src/components/TodoList.jsx @@ -1,4 +1,5 @@ import React from "react"; +import { TodoContext } from "../context/TodosContext"; function TodoList() { diff --git a/src/components/TodoTemplate.jsx b/src/components/TodoTemplate.jsx index bb482a82..4bdbd15e 100644 --- a/src/components/TodoTemplate.jsx +++ b/src/components/TodoTemplate.jsx @@ -1,4 +1,5 @@ import React from "react"; +import { TodoProvider } from "../context/TodosContext"; import TodoInput from "./TodoInput"; import TodoList from "./TodoList"; import TodoOption from "./TodoOption"; @@ -6,12 +7,12 @@ import TodoOption from "./TodoOption"; function TodoTemplate() { return( -
+
TO DO
-
+ ); } diff --git a/src/context/TodosContext.jsx b/src/context/TodosContext.jsx new file mode 100644 index 00000000..f6e9c4e6 --- /dev/null +++ b/src/context/TodosContext.jsx @@ -0,0 +1,21 @@ +import React, { createContext, useContext, useState } from "react"; + +const TodoContext = createContext(); + +const TodoProvider = ({ children }) => { + const [todos, setTodos] = useState([]); + + const addTodo = (todo) => { + setTodos([...todos, todo]); + console.log(todos); + }; + + return ( + + {children} + + ); +}; + + +export { TodoContext, TodoProvider }; From 793bb3b50e7f0cc8b9a6453b10580a83ef877449 Mon Sep 17 00:00:00 2001 From: daeun0726 Date: Sun, 9 Jun 2024 21:16:08 +0900 Subject: [PATCH 07/13] =?UTF-8?q?feat=20:=20TodoList=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=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 --- README.md | 11 +++++------ src/components/TodoList.jsx | 9 +++++++-- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 5b614066..8ad28867 100644 --- a/README.md +++ b/README.md @@ -13,18 +13,17 @@ - [x] Enter ํ‚ค๋‚˜ ์ถ”๊ฐ€ ๋ฒ„ํŠผ์„ ์‚ฌ์šฉํ•˜์—ฌ ํ•  ์ผ ์ถ”๊ฐ€ - [x] ์•„๋ฌด๊ฒƒ๋„ ์ž…๋ ฅํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ์—๋Š” ํ•  ์ผ์„ ์ถ”๊ฐ€ ๋ถˆ๊ฐ€ -- [ ] ํ• ์ผ ๋ชฉ๋ก ๋ Œ๋”๋ง +- [x] ํ• ์ผ ๋ชฉ๋ก ๋ Œ๋”๋ง
-### ํ•  ์ผ ์ƒํƒœ ์ „ํ™˜ -- [ ] ์™„๋ฃŒ, ๋ฏธ์™„๋ฃŒ ์ƒํƒœ ์ „ํ™˜ - +### ํ•  ์ผ ์‚ญ์ œ +- [ ] "X" ๋ฒ„ํŠผ ํด๋ฆญํ•˜์—ฌ ์‚ญ์ œ
-### ํ•  ์ผ ์‚ญ์ œ -- [ ] "X" ๋ฒ„ํŠผ ํด๋ฆญํ•˜์—ฌ ์‚ญ์ œ +### ํ•  ์ผ ์ƒํƒœ ์ „ํ™˜ +- [ ] ์™„๋ฃŒ, ๋ฏธ์™„๋ฃŒ ์ƒํƒœ ์ „ํ™˜
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx index d30ed1d6..9836ba97 100644 --- a/src/components/TodoList.jsx +++ b/src/components/TodoList.jsx @@ -1,10 +1,15 @@ -import React from "react"; +import React, { useContext } from "react"; import { TodoContext } from "../context/TodosContext"; function TodoList() { + const {todos} = useContext(TodoContext); return( -
ํˆฌ๋‘ ๋ชฉ๋ก
+
+ {todos.map((todo, index) => ( +
{todo}
+ ))} +
); } From 3818187803d81eae1dcb67ba479a468ea738b318 Mon Sep 17 00:00:00 2001 From: daeun0726 Date: Sun, 9 Jun 2024 21:36:53 +0900 Subject: [PATCH 08/13] =?UTF-8?q?feat=20:=20todo=20=EC=82=AD=EC=A0=9C=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- src/components/TodoList.jsx | 7 +++++-- src/components/TodoOption.jsx | 2 +- src/context/TodosContext.jsx | 7 ++++++- 4 files changed, 13 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 8ad28867..abf5cadf 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@
### ํ•  ์ผ ์‚ญ์ œ -- [ ] "X" ๋ฒ„ํŠผ ํด๋ฆญํ•˜์—ฌ ์‚ญ์ œ +- [x] "X" ๋ฒ„ํŠผ ํด๋ฆญํ•˜์—ฌ ์‚ญ์ œ
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx index 9836ba97..4186f278 100644 --- a/src/components/TodoList.jsx +++ b/src/components/TodoList.jsx @@ -2,12 +2,15 @@ import React, { useContext } from "react"; import { TodoContext } from "../context/TodosContext"; function TodoList() { - const {todos} = useContext(TodoContext); + const {todos, removeTodo} = useContext(TodoContext); return(
{todos.map((todo, index) => ( -
{todo}
+
+ {todo} + +
))}
); diff --git a/src/components/TodoOption.jsx b/src/components/TodoOption.jsx index 235b8a9e..85b96d79 100644 --- a/src/components/TodoOption.jsx +++ b/src/components/TodoOption.jsx @@ -3,7 +3,7 @@ import React from "react"; function TodoOption() { return( -
์˜ต์…˜ ์„ ํƒ์นธ
+
); } diff --git a/src/context/TodosContext.jsx b/src/context/TodosContext.jsx index f6e9c4e6..4fc8bb23 100644 --- a/src/context/TodosContext.jsx +++ b/src/context/TodosContext.jsx @@ -10,8 +10,13 @@ const TodoProvider = ({ children }) => { console.log(todos); }; + const removeTodo = (index) => { + setTodos(todos.filter((_, i) => i !== index)); + console.log(todos); + }; + return ( - + {children} ); From 02fd75d9e38ae154cb616b70016d28e98b0bfebe Mon Sep 17 00:00:00 2001 From: daeun0726 Date: Sun, 9 Jun 2024 22:38:30 +0900 Subject: [PATCH 09/13] =?UTF-8?q?feat=20:=20=EC=99=84=EB=A3=8C=20=EC=97=AC?= =?UTF-8?q?=EB=B6=80=20=ED=86=A0=EA=B8=80=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- src/components/TodoItem.jsx | 13 +++++++++++++ src/components/TodoList.jsx | 14 +++++++++----- src/context/TodosContext.jsx | 18 +++++++++++++----- 4 files changed, 36 insertions(+), 11 deletions(-) create mode 100644 src/components/TodoItem.jsx diff --git a/README.md b/README.md index abf5cadf..88de2bcf 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@
### ํ•  ์ผ ์ƒํƒœ ์ „ํ™˜ -- [ ] ์™„๋ฃŒ, ๋ฏธ์™„๋ฃŒ ์ƒํƒœ ์ „ํ™˜ +- [x] ์™„๋ฃŒ, ๋ฏธ์™„๋ฃŒ ์ƒํƒœ ์ „ํ™˜
diff --git a/src/components/TodoItem.jsx b/src/components/TodoItem.jsx new file mode 100644 index 00000000..3a9656e4 --- /dev/null +++ b/src/components/TodoItem.jsx @@ -0,0 +1,13 @@ +import React from "react"; + +function TodoItem({ todo, index, removeTodo, toggleTodo }) { + return ( +
+ toggleTodo(index)}>O + {todo.text} + +
+ ); +} + +export default TodoItem; diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx index 4186f278..5171be73 100644 --- a/src/components/TodoList.jsx +++ b/src/components/TodoList.jsx @@ -1,16 +1,20 @@ import React, { useContext } from "react"; import { TodoContext } from "../context/TodosContext"; +import TodoItem from "./TodoItem"; function TodoList() { - const {todos, removeTodo} = useContext(TodoContext); + const { todos, removeTodo, toggleTodo } = useContext(TodoContext); return(
{todos.map((todo, index) => ( -
- {todo} - -
+ ))}
); diff --git a/src/context/TodosContext.jsx b/src/context/TodosContext.jsx index 4fc8bb23..dbdd8cbd 100644 --- a/src/context/TodosContext.jsx +++ b/src/context/TodosContext.jsx @@ -6,17 +6,25 @@ const TodoProvider = ({ children }) => { const [todos, setTodos] = useState([]); const addTodo = (todo) => { - setTodos([...todos, todo]); - console.log(todos); + const newTodo = { text: todo, done: false }; + setTodos([...todos, newTodo]); }; const removeTodo = (index) => { - setTodos(todos.filter((_, i) => i !== index)); - console.log(todos); + setTodos(todos.filter((todo, i) => i !== index)); + }; + + + const toggleTodo = (index) => { + setTodos( + todos.map((todo, i) => + i === index ? { ...todo, done: !todo.done } : todo + ) + ); }; return ( - + {children} ); From 81f48b2d40ac003c0569ffd7d2eef656c5005bdf Mon Sep 17 00:00:00 2001 From: daeun0726 Date: Mon, 10 Jun 2024 00:57:10 +0900 Subject: [PATCH 10/13] =?UTF-8?q?feat=20:=20=EC=9D=BC=EC=A0=95=20=ED=95=84?= =?UTF-8?q?=ED=84=B0=EB=A7=81=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 --- README.md | 2 +- src/components/TodoList.jsx | 28 ++++++++++++++++++++-------- src/components/TodoOption.jsx | 22 +++++++++++++++++----- src/components/TodoTemplate.jsx | 11 +++++++---- src/context/FilterContext.jsx | 16 ++++++++++++++++ src/context/TodosContext.jsx | 2 -- 6 files changed, 61 insertions(+), 20 deletions(-) create mode 100644 src/context/FilterContext.jsx diff --git a/README.md b/README.md index 88de2bcf..ac2d48d0 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@
### ์ถ”๊ฐ€ ๊ธฐ๋Šฅ -- [ ] ๋ฏธ์™„๋ฃŒ ์ผ์ •, ์™„๋ฃŒ ์ผ์ •, ๋ชจ๋“  ์ผ์ • ํ•„ํ„ฐ๋ง +- [x] ๋ฏธ์™„๋ฃŒ ์ผ์ •, ์™„๋ฃŒ ์ผ์ •, ๋ชจ๋“  ์ผ์ • ํ•„ํ„ฐ๋ง - [ ] ๋ฏธ์™„๋ฃŒ ํ•  ์ผ ์ด ๊ฐœ์ˆ˜ ํ™•์ธ ๊ฐ€๋Šฅ - [ ] ๋ชจ๋“  ์™„๋ฃŒ ์ผ์ • ํ•œ ๋ฒˆ์— ์‚ญ์ œ ๊ฐ€๋Šฅ diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx index 5171be73..e7ff881a 100644 --- a/src/components/TodoList.jsx +++ b/src/components/TodoList.jsx @@ -1,21 +1,33 @@ import React, { useContext } from "react"; +import { FilterContext } from "../context/FilterContext"; import { TodoContext } from "../context/TodosContext"; import TodoItem from "./TodoItem"; function TodoList() { const { todos, removeTodo, toggleTodo } = useContext(TodoContext); + const { filter } = useContext(FilterContext); + + const filterTodos = todos.filter((todo) => { + if (filter === "completed") { + return todo.done; + } else if (filter === "uncompleted") { + return !todo.done; + } else { + return true; + } + }); return(
- {todos.map((todo, index) => ( + {filterTodos.map((todo, index) => ( - ))} + key={index} + todo={todo} + index={index} + removeTodo={removeTodo} + toggleTodo={toggleTodo} + /> + ))}
); } diff --git a/src/components/TodoOption.jsx b/src/components/TodoOption.jsx index 85b96d79..f8e86863 100644 --- a/src/components/TodoOption.jsx +++ b/src/components/TodoOption.jsx @@ -1,10 +1,22 @@ -import React from "react"; +import React, { useContext } from "react"; +import { FilterContext } from "../context/FilterContext"; function TodoOption() { + const { filter, setFilter } = useContext(FilterContext); - return( -
- ); + const handleFilterChange = (e) => { + setFilter(e.target.value); + }; + + return ( +
+ +
+ ); } -export default TodoOption; \ No newline at end of file +export default TodoOption; diff --git a/src/components/TodoTemplate.jsx b/src/components/TodoTemplate.jsx index 4bdbd15e..f42ae6a6 100644 --- a/src/components/TodoTemplate.jsx +++ b/src/components/TodoTemplate.jsx @@ -1,4 +1,5 @@ import React from "react"; +import { FilterProvider } from "../context/FilterContext"; import { TodoProvider } from "../context/TodosContext"; import TodoInput from "./TodoInput"; import TodoList from "./TodoList"; @@ -8,10 +9,12 @@ function TodoTemplate() { return( -
TO DO
- - - + +
TO DO
+ + + + ); } diff --git a/src/context/FilterContext.jsx b/src/context/FilterContext.jsx new file mode 100644 index 00000000..9b8795f2 --- /dev/null +++ b/src/context/FilterContext.jsx @@ -0,0 +1,16 @@ +import React, { createContext, useContext, useState } from "react"; + +const FilterContext = createContext(); + +const FilterProvider = ({ children }) => { + const [filter, setFilter] = useState("all"); + + return ( + + {children} + + ); +}; + + +export { FilterContext, FilterProvider }; diff --git a/src/context/TodosContext.jsx b/src/context/TodosContext.jsx index dbdd8cbd..056b794e 100644 --- a/src/context/TodosContext.jsx +++ b/src/context/TodosContext.jsx @@ -14,7 +14,6 @@ const TodoProvider = ({ children }) => { setTodos(todos.filter((todo, i) => i !== index)); }; - const toggleTodo = (index) => { setTodos( todos.map((todo, i) => @@ -30,5 +29,4 @@ const TodoProvider = ({ children }) => { ); }; - export { TodoContext, TodoProvider }; From 2fbb442d6e396aab05e525c96ce1ddc3034fa5bc Mon Sep 17 00:00:00 2001 From: daeun0726 Date: Mon, 10 Jun 2024 01:25:22 +0900 Subject: [PATCH 11/13] =?UTF-8?q?feat=20:=20=EB=AF=B8=EC=99=84=EB=A3=8C=20?= =?UTF-8?q?=EA=B0=9C=EC=88=98=20=ED=99=95=EC=9D=B8=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- src/components/TodoList.jsx | 4 ++-- src/components/TodoOption.jsx | 21 ++++++++++++++++----- src/context/FilterContext.jsx | 2 +- 4 files changed, 20 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index ac2d48d0..bc460580 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,6 @@ ### ์ถ”๊ฐ€ ๊ธฐ๋Šฅ - [x] ๋ฏธ์™„๋ฃŒ ์ผ์ •, ์™„๋ฃŒ ์ผ์ •, ๋ชจ๋“  ์ผ์ • ํ•„ํ„ฐ๋ง -- [ ] ๋ฏธ์™„๋ฃŒ ํ•  ์ผ ์ด ๊ฐœ์ˆ˜ ํ™•์ธ ๊ฐ€๋Šฅ +- [x] ๋ฏธ์™„๋ฃŒ ํ•  ์ผ ์ด ๊ฐœ์ˆ˜ ํ™•์ธ ๊ฐ€๋Šฅ - [ ] ๋ชจ๋“  ์™„๋ฃŒ ์ผ์ • ํ•œ ๋ฒˆ์— ์‚ญ์ œ ๊ฐ€๋Šฅ diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx index e7ff881a..0afe4782 100644 --- a/src/components/TodoList.jsx +++ b/src/components/TodoList.jsx @@ -8,9 +8,9 @@ function TodoList() { const { filter } = useContext(FilterContext); const filterTodos = todos.filter((todo) => { - if (filter === "completed") { + if (filter === "Active") { return todo.done; - } else if (filter === "uncompleted") { + } else if (filter === "Completed") { return !todo.done; } else { return true; diff --git a/src/components/TodoOption.jsx b/src/components/TodoOption.jsx index f8e86863..d3670d2d 100644 --- a/src/components/TodoOption.jsx +++ b/src/components/TodoOption.jsx @@ -1,20 +1,31 @@ import React, { useContext } from "react"; import { FilterContext } from "../context/FilterContext"; +import { TodoContext } from "../context/TodosContext"; function TodoOption() { const { filter, setFilter } = useContext(FilterContext); + const { todos } = useContext(TodoContext); const handleFilterChange = (e) => { setFilter(e.target.value); }; + const activeTodos = todos.filter((todo) =>!todo.done).length; + return (
- + {todos.length > 0 ? ( +
+
{activeTodos} items left!
+ +
+ ) : ( + <> + )}
); } diff --git a/src/context/FilterContext.jsx b/src/context/FilterContext.jsx index 9b8795f2..fa4de4e1 100644 --- a/src/context/FilterContext.jsx +++ b/src/context/FilterContext.jsx @@ -3,7 +3,7 @@ import React, { createContext, useContext, useState } from "react"; const FilterContext = createContext(); const FilterProvider = ({ children }) => { - const [filter, setFilter] = useState("all"); + const [filter, setFilter] = useState("All"); return ( From f2b149c7a635cc69375c03933afa51a0b30030d3 Mon Sep 17 00:00:00 2001 From: daeun0726 Date: Mon, 10 Jun 2024 01:33:23 +0900 Subject: [PATCH 12/13] =?UTF-8?q?feat=20:=20=EC=99=84=EB=A3=8C=20=EC=9D=BC?= =?UTF-8?q?=EC=A0=95=20=EC=9D=BC=EA=B4=84=20=EC=82=AD=EC=A0=9C=20=EA=B8=B0?= =?UTF-8?q?=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 --- README.md | 2 +- src/components/TodoOption.jsx | 3 ++- src/context/TodosContext.jsx | 6 +++++- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index bc460580..e6ef7180 100644 --- a/README.md +++ b/README.md @@ -30,5 +30,5 @@ ### ์ถ”๊ฐ€ ๊ธฐ๋Šฅ - [x] ๋ฏธ์™„๋ฃŒ ์ผ์ •, ์™„๋ฃŒ ์ผ์ •, ๋ชจ๋“  ์ผ์ • ํ•„ํ„ฐ๋ง - [x] ๋ฏธ์™„๋ฃŒ ํ•  ์ผ ์ด ๊ฐœ์ˆ˜ ํ™•์ธ ๊ฐ€๋Šฅ -- [ ] ๋ชจ๋“  ์™„๋ฃŒ ์ผ์ • ํ•œ ๋ฒˆ์— ์‚ญ์ œ ๊ฐ€๋Šฅ +- [x] ๋ชจ๋“  ์™„๋ฃŒ ์ผ์ • ํ•œ ๋ฒˆ์— ์‚ญ์ œ ๊ฐ€๋Šฅ diff --git a/src/components/TodoOption.jsx b/src/components/TodoOption.jsx index d3670d2d..3153eab4 100644 --- a/src/components/TodoOption.jsx +++ b/src/components/TodoOption.jsx @@ -4,7 +4,7 @@ import { TodoContext } from "../context/TodosContext"; function TodoOption() { const { filter, setFilter } = useContext(FilterContext); - const { todos } = useContext(TodoContext); + const { todos, removeAllTodo } = useContext(TodoContext); const handleFilterChange = (e) => { setFilter(e.target.value); @@ -22,6 +22,7 @@ function TodoOption() { +
Clear completed
) : ( <> diff --git a/src/context/TodosContext.jsx b/src/context/TodosContext.jsx index 056b794e..7da85d36 100644 --- a/src/context/TodosContext.jsx +++ b/src/context/TodosContext.jsx @@ -14,6 +14,10 @@ const TodoProvider = ({ children }) => { setTodos(todos.filter((todo, i) => i !== index)); }; + const removeAllTodo = () => { + setTodos(todos.filter(todo => !todo.done)); + }; + const toggleTodo = (index) => { setTodos( todos.map((todo, i) => @@ -23,7 +27,7 @@ const TodoProvider = ({ children }) => { }; return ( - + {children} ); From ba2cb601faca58218f65ae78a7d4d80eb4a7819c Mon Sep 17 00:00:00 2001 From: daeun0726 Date: Mon, 10 Jun 2024 03:43:46 +0900 Subject: [PATCH 13/13] =?UTF-8?q?style=20:=20css=20=ED=8C=8C=EC=9D=BC=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 --- src/App.jsx | 8 +++++++- src/components/TodoInput.jsx | 2 ++ src/components/TodoItem.jsx | 7 ++++--- src/components/TodoList.jsx | 11 ++++++----- src/components/TodoOption.jsx | 7 ++++--- src/components/TodoTemplate.jsx | 17 +++++++---------- src/main.css | 7 +++++++ src/main.jsx | 1 + src/styles/TodoInput.css | 7 +++++++ src/styles/TodoItem.css | 30 ++++++++++++++++++++++++++++++ src/styles/TodoList.css | 7 +++++++ src/styles/TodoOption.css | 25 +++++++++++++++++++++++++ src/styles/TodoTemplate.css | 20 ++++++++++++++++++++ 13 files changed, 127 insertions(+), 22 deletions(-) create mode 100644 src/main.css create mode 100644 src/styles/TodoInput.css create mode 100644 src/styles/TodoItem.css create mode 100644 src/styles/TodoList.css create mode 100644 src/styles/TodoOption.css create mode 100644 src/styles/TodoTemplate.css diff --git a/src/App.jsx b/src/App.jsx index 115712e8..a1967ec5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,15 @@ import React from "react"; +import { FilterProvider } from "./context/FilterContext"; +import { TodoProvider } from "./context/TodosContext"; import TodoTemplate from "./components/TodoTemplate"; function App() { return ( - + + + + + ); } diff --git a/src/components/TodoInput.jsx b/src/components/TodoInput.jsx index cc66a6b6..69c85979 100644 --- a/src/components/TodoInput.jsx +++ b/src/components/TodoInput.jsx @@ -1,5 +1,6 @@ import React, { useState, useContext } from "react"; import { TodoContext } from "../context/TodosContext"; +import "../styles/TodoInput.css"; function TodoInput() { const [inputValue, setInputValue] = useState(""); @@ -18,6 +19,7 @@ function TodoInput() { return( - toggleTodo(index)}>O +
+ toggleTodo(index)}/> {todo.text} - +
removeTodo(index)}>X
); } diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx index 0afe4782..29edd2c3 100644 --- a/src/components/TodoList.jsx +++ b/src/components/TodoList.jsx @@ -2,6 +2,7 @@ import React, { useContext } from "react"; import { FilterContext } from "../context/FilterContext"; import { TodoContext } from "../context/TodosContext"; import TodoItem from "./TodoItem"; +import "../styles/TodoList.css"; function TodoList() { const { todos, removeTodo, toggleTodo } = useContext(TodoContext); @@ -9,16 +10,16 @@ function TodoList() { const filterTodos = todos.filter((todo) => { if (filter === "Active") { - return todo.done; - } else if (filter === "Completed") { return !todo.done; + } else if (filter === "Completed") { + return todo.done; } else { return true; } }); return( -
+
{filterTodos.map((todo, index) => ( - ))} + /> + ))}
); } diff --git a/src/components/TodoOption.jsx b/src/components/TodoOption.jsx index 3153eab4..be786671 100644 --- a/src/components/TodoOption.jsx +++ b/src/components/TodoOption.jsx @@ -1,6 +1,7 @@ import React, { useContext } from "react"; import { FilterContext } from "../context/FilterContext"; import { TodoContext } from "../context/TodosContext"; +import "../styles/TodoOption.css"; function TodoOption() { const { filter, setFilter } = useContext(FilterContext); @@ -13,16 +14,16 @@ function TodoOption() { const activeTodos = todos.filter((todo) =>!todo.done).length; return ( -
+
{todos.length > 0 ? ( -
+
{activeTodos} items left!
-
Clear completed
+
Clear completed
) : ( <> diff --git a/src/components/TodoTemplate.jsx b/src/components/TodoTemplate.jsx index f42ae6a6..68440e90 100644 --- a/src/components/TodoTemplate.jsx +++ b/src/components/TodoTemplate.jsx @@ -1,21 +1,18 @@ import React from "react"; -import { FilterProvider } from "../context/FilterContext"; -import { TodoProvider } from "../context/TodosContext"; import TodoInput from "./TodoInput"; import TodoList from "./TodoList"; import TodoOption from "./TodoOption"; +import "../styles/TodoTemplate.css"; function TodoTemplate() { return( - - -
TO DO
- - - - - +
+
TO DO
+ + + +
); } diff --git a/src/main.css b/src/main.css new file mode 100644 index 00000000..2e3ec449 --- /dev/null +++ b/src/main.css @@ -0,0 +1,7 @@ +body{ + height: 100%; + background-color: #000; + font-family: sans-serif; + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index d05dc2f3..5037d53f 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,5 +1,6 @@ import React from "react"; import ReactDOM from "react-dom"; import App from "./App.jsx"; +import "./main.css"; ReactDOM.createRoot(document.getElementById("root")).render(); \ No newline at end of file diff --git a/src/styles/TodoInput.css b/src/styles/TodoInput.css new file mode 100644 index 00000000..36ad31e5 --- /dev/null +++ b/src/styles/TodoInput.css @@ -0,0 +1,7 @@ +.todo-input{ + height: 60px; + width: 500px; + border: 2px solid #000; + margin: 10px; + font-size: 30px; +} \ No newline at end of file diff --git a/src/styles/TodoItem.css b/src/styles/TodoItem.css new file mode 100644 index 00000000..484d9232 --- /dev/null +++ b/src/styles/TodoItem.css @@ -0,0 +1,30 @@ +.todo { + position: relative; + display: flex; + justify-content: flex-start; + align-items: center; + height: 30px; + margin: 5px 0; + padding-bottom: 5px; + padding-left: 5px; + font-size: 30px; + font-weight: 500; + border-bottom: 0.5px solid grey; +} + +.todo > *:nth-child(1) { + margin-right: 10px; +} + +.todo > *:nth-child(2) { + position: absolute; + right: 8px; + border: none; + color: gray; + font-size: 15px; + border: 400; +} + +.todo > *:nth-child(2):hover { + color: #000; +} \ No newline at end of file diff --git a/src/styles/TodoList.css b/src/styles/TodoList.css new file mode 100644 index 00000000..c0973b20 --- /dev/null +++ b/src/styles/TodoList.css @@ -0,0 +1,7 @@ +.todo-list{ + display: flex; + flex-direction: column; + width: 500px; + height: 250px; + overflow-y: auto; +} \ No newline at end of file diff --git a/src/styles/TodoOption.css b/src/styles/TodoOption.css new file mode 100644 index 00000000..d26cb999 --- /dev/null +++ b/src/styles/TodoOption.css @@ -0,0 +1,25 @@ +.footer { + position: absolute; + display: flex; + justify-content: flex-end; + align-items: center; + bottom: 0; + height: 70px; + width: 700px; + font-size: 20px; + font-weight: 600; +} + +.option-menu { + display: flex; + flex-direction: row; + margin-right: 20px; +} + +.option-menu > *:nth-child(2) { + margin: 0 20px; +} + +.removeall{ + cursor: pointer; +} \ No newline at end of file diff --git a/src/styles/TodoTemplate.css b/src/styles/TodoTemplate.css new file mode 100644 index 00000000..c42bdb41 --- /dev/null +++ b/src/styles/TodoTemplate.css @@ -0,0 +1,20 @@ +.container{ + position: absolute; + display: flex; + flex-direction: column; + align-items: center; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 500px; + width: 700px; + background-color: #fff; + border-radius: 10px; +} + +.title { + font-size: 40px; + font-weight: 600; + margin: 10px; + text-align: center; +} \ No newline at end of file