From 562d4a23df8b28bab48ab3a197dc09c14c81633d Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Sat, 1 Jun 2024 21:51:49 +0900 Subject: [PATCH 01/23] =?UTF-8?q?[Add]=20readme,=20component=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 | 11 ++++++++++- src/component/Header.jsx | 0 src/component/List.jsx | 0 src/component/Maker.jsx | 0 4 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 src/component/Header.jsx create mode 100644 src/component/List.jsx create mode 100644 src/component/Maker.jsx diff --git a/README.md b/README.md index 3c0710d2..21022f2e 100644 --- a/README.md +++ b/README.md @@ -1 +1,10 @@ -# react-todo-list-precourse \ No newline at end of file +# react-todo-list-precourse + +기본 기능 구현 목록 +1. 기본적인 ui, component 구성 +2. 값 가져오기 -> 엔터로 값을 가져오도록 +3. 가져온 값을 나타내기 +4. 수정하기 +5. 삭제하기 +6.완료 체크박스 +7.완료된것 따로 모아 보기 \ No newline at end of file diff --git a/src/component/Header.jsx b/src/component/Header.jsx new file mode 100644 index 00000000..e69de29b diff --git a/src/component/List.jsx b/src/component/List.jsx new file mode 100644 index 00000000..e69de29b diff --git a/src/component/Maker.jsx b/src/component/Maker.jsx new file mode 100644 index 00000000..e69de29b From 11dff7f578cb14e96dc4d01ae8af6f3096ed51d6 Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Sat, 1 Jun 2024 22:38:41 +0900 Subject: [PATCH 02/23] =?UTF-8?q?[Add]=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=B6=84=EB=A6=AC,=20=EA=B8=B0=EB=B3=B8css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.css | 7 +++++++ App.jsx | 14 ++++++++++++++ index.html | 4 ++-- src/component/Header.jsx | 7 +++++++ src/component/List.jsx | 5 +++++ src/{main.js => component/Maker.css} | 0 src/component/Maker.jsx | 8 ++++++++ src/main.jsx | 6 ++++++ tsconfig.json | 2 +- 9 files changed, 50 insertions(+), 3 deletions(-) create mode 100644 App.css create mode 100644 App.jsx rename src/{main.js => component/Maker.css} (100%) create mode 100644 src/main.jsx diff --git a/App.css b/App.css new file mode 100644 index 00000000..7f626df1 --- /dev/null +++ b/App.css @@ -0,0 +1,7 @@ +.App { + width: 200px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 20px; +} \ No newline at end of file diff --git a/App.jsx b/App.jsx new file mode 100644 index 00000000..dac7b334 --- /dev/null +++ b/App.jsx @@ -0,0 +1,14 @@ +import "./App.css" +import Header from "./src/component/Header" +import List from "./src/component/List" +import Maker from "./src/component/Maker" +function App(){ + return ( +
+
+ + +
+ ) +} +export default App; \ No newline at end of file diff --git a/index.html b/index.html index b021b5c8..47b21b75 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ -
- +
+ diff --git a/src/component/Header.jsx b/src/component/Header.jsx index e69de29b..d1d6954d 100644 --- a/src/component/Header.jsx +++ b/src/component/Header.jsx @@ -0,0 +1,7 @@ +const Header = () => { + return
+

ToDo-List 🤯

+
+}; + +export default Header; \ No newline at end of file diff --git a/src/component/List.jsx b/src/component/List.jsx index e69de29b..6d847e65 100644 --- a/src/component/List.jsx +++ b/src/component/List.jsx @@ -0,0 +1,5 @@ +const List = () => { + return
List
+}; + +export default List; \ No newline at end of file diff --git a/src/main.js b/src/component/Maker.css similarity index 100% rename from src/main.js rename to src/component/Maker.css diff --git a/src/component/Maker.jsx b/src/component/Maker.jsx index e69de29b..5ba6fc5b 100644 --- a/src/component/Maker.jsx +++ b/src/component/Maker.jsx @@ -0,0 +1,8 @@ +const Maker = () => { + return
+ + +
+}; + +export default Maker; \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx new file mode 100644 index 00000000..1a7e8454 --- /dev/null +++ b/src/main.jsx @@ -0,0 +1,6 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "../App"; + +const root = ReactDOM.createRoot(document.getElementById("App")); +root.render(); diff --git a/tsconfig.json b/tsconfig.json index b04fab30..cd7f826a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,6 +21,6 @@ "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, - "include": ["src"], + "include": ["src", "App.jsx"], "references": [{ "path": "./tsconfig.node.json" }] } From c6e49dbd73efb23360965f55e1165c2c0e0e99c8 Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Sat, 1 Jun 2024 22:44:57 +0900 Subject: [PATCH 03/23] [Add] input style --- App.css | 4 ++-- src/component/Maker.css | 7 +++++++ src/component/Maker.jsx | 1 + 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/App.css b/App.css index 7f626df1..49906280 100644 --- a/App.css +++ b/App.css @@ -1,6 +1,6 @@ .App { - width: 200px; - margin: 0 auto; + width: 500px; + margin:0 auto; display: flex; flex-direction: column; gap: 20px; diff --git a/src/component/Maker.css b/src/component/Maker.css index e69de29b..5bca263d 100644 --- a/src/component/Maker.css +++ b/src/component/Maker.css @@ -0,0 +1,7 @@ +.Maker input{ + display: flex; + flex :1; + padding : 20px; + border: 1px solid lightblue; + border-radius: 3px; +} \ No newline at end of file diff --git a/src/component/Maker.jsx b/src/component/Maker.jsx index 5ba6fc5b..42e05a69 100644 --- a/src/component/Maker.jsx +++ b/src/component/Maker.jsx @@ -1,3 +1,4 @@ +import "./Maker.css" const Maker = () => { return
From 87d54d96b2302c7c5c27748e086d5dd1588eb823 Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Sat, 1 Jun 2024 23:17:22 +0900 Subject: [PATCH 04/23] [Add] list style --- src/component/List.css | 10 ++++++++++ src/component/List.jsx | 13 ++++++++++++- src/component/Maker.css | 3 ++- src/component/TodoThing.css | 17 +++++++++++++++++ src/component/TodoThing.jsx | 12 ++++++++++++ 5 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 src/component/List.css create mode 100644 src/component/TodoThing.css create mode 100644 src/component/TodoThing.jsx diff --git a/src/component/List.css b/src/component/List.css new file mode 100644 index 00000000..3fc9c46a --- /dev/null +++ b/src/component/List.css @@ -0,0 +1,10 @@ +.List{ + width: 100%; + padding-bottom: 20px; +} +.TodoThingsList{ + display: flex; + flex-direction: column; + gap: 10px; + +} \ No newline at end of file diff --git a/src/component/List.jsx b/src/component/List.jsx index 6d847e65..f170c35f 100644 --- a/src/component/List.jsx +++ b/src/component/List.jsx @@ -1,5 +1,16 @@ +import TodoThing from "./TodoThing"; +import "./List.css" const List = () => { - return
List
+ return
+

List

+
+ + + +
+ + +
}; export default List; \ No newline at end of file diff --git a/src/component/Maker.css b/src/component/Maker.css index 5bca263d..d6395c62 100644 --- a/src/component/Maker.css +++ b/src/component/Maker.css @@ -1,7 +1,8 @@ .Maker input{ display: flex; - flex :1; + width: 100%; padding : 20px; border: 1px solid lightblue; border-radius: 3px; + outline: none; } \ No newline at end of file diff --git a/src/component/TodoThing.css b/src/component/TodoThing.css new file mode 100644 index 00000000..bd3c5ea9 --- /dev/null +++ b/src/component/TodoThing.css @@ -0,0 +1,17 @@ +.TodoThing{ + display: flex; + align-items: center; + gap: 20px; + padding-bottom: 20px; + border: 1px solid lightblue; + border-radius: 5px; + +} + +.TodoThing input{ + width: 30px; +} + +.TodoThing .item{ + flex: 1; +} \ No newline at end of file diff --git a/src/component/TodoThing.jsx b/src/component/TodoThing.jsx new file mode 100644 index 00000000..cfe2e49b --- /dev/null +++ b/src/component/TodoThing.jsx @@ -0,0 +1,12 @@ + +import "./TodoThing.css" +const TodoThing = () => { + return ( +
+ +
item
+ +
+ ) +} +export default TodoThing \ No newline at end of file From b913f9fd1f5684752fcf569b6ad99328dbe6bf89 Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Sat, 1 Jun 2024 23:40:13 +0900 Subject: [PATCH 05/23] =?UTF-8?q?[Add]=EC=9D=BC=EA=B8=B0=20list,thing=20?= =?UTF-8?q?=EB=AA=A8=EB=8D=B8=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.jsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/App.jsx b/App.jsx index dac7b334..5d025643 100644 --- a/App.jsx +++ b/App.jsx @@ -1,8 +1,22 @@ +import React, {useState} from "react" import "./App.css" import Header from "./src/component/Header" import List from "./src/component/List" import Maker from "./src/component/Maker" function App(){ + const tododata = [ + {id :0, + isDone : false, + content : "asdf"}, + {id :1, + isDone : false, + content : "asdfasdf"}, + {id :2, + isDone : false, + content : "asdfasdfasdf"} + + ] + const [TodoList, setTodoList] = useState(tododata) return (
From b6dd92656a487b566b7509064e1d304f1da3a62f Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Sun, 2 Jun 2024 00:53:08 +0900 Subject: [PATCH 06/23] =?UTF-8?q?[Add]=20=EB=B0=9B=EC=95=84=EC=98=A8=20?= =?UTF-8?q?=EA=B0=92=20=ED=91=9C=EC=B6=9C=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.jsx | 29 ++++++++++++++--------------- src/component/List.css | 2 +- src/component/List.jsx | 13 +++++++------ src/component/Maker.jsx | 30 ++++++++++++++++++++++++++---- src/component/TodoThing.jsx | 8 ++++---- 5 files changed, 52 insertions(+), 30 deletions(-) diff --git a/App.jsx b/App.jsx index 5d025643..020ddd1e 100644 --- a/App.jsx +++ b/App.jsx @@ -4,24 +4,23 @@ import Header from "./src/component/Header" import List from "./src/component/List" import Maker from "./src/component/Maker" function App(){ - const tododata = [ - {id :0, - isDone : false, - content : "asdf"}, - {id :1, - isDone : false, - content : "asdfasdf"}, - {id :2, - isDone : false, - content : "asdfasdfasdf"} - - ] - const [TodoList, setTodoList] = useState(tododata) + + + + const [TodoList, setTodoList] = useState([]) + const pushthing = (content)=> { + const newTodo = { + id:TodoList.length, + isDone : false, + content : content + }; + setTodoList([...TodoList, newTodo]) + } return (
- - + +
) } diff --git a/src/component/List.css b/src/component/List.css index 3fc9c46a..7c492048 100644 --- a/src/component/List.css +++ b/src/component/List.css @@ -7,4 +7,4 @@ flex-direction: column; gap: 10px; -} \ No newline at end of file +} \ No newline at end of file diff --git a/src/component/List.jsx b/src/component/List.jsx index f170c35f..13053eb5 100644 --- a/src/component/List.jsx +++ b/src/component/List.jsx @@ -1,13 +1,14 @@ +import React from "react"; import TodoThing from "./TodoThing"; import "./List.css" -const List = () => { +const List = ({TodoList}) => { return

List

-
- - - -
+
+ {TodoList.map((todo) => ( + + ))} +
diff --git a/src/component/Maker.jsx b/src/component/Maker.jsx index 42e05a69..499f5a1a 100644 --- a/src/component/Maker.jsx +++ b/src/component/Maker.jsx @@ -1,9 +1,31 @@ +import React, {useState} from "react"; import "./Maker.css" -const Maker = () => { - return
- -
+ +const Maker = ({pushthing}) => { + + const [inputvalue, setinputvalue] = useState('') + + const handlechange = (e) => { + setinputvalue(e.target.value); + } + const handleSubmit = (e) => { + e.preventDefault(); + pushthing(inputvalue); + setinputvalue("") + } + + return ( +
+ + +
+ ); }; export default Maker; \ No newline at end of file diff --git a/src/component/TodoThing.jsx b/src/component/TodoThing.jsx index cfe2e49b..361306c9 100644 --- a/src/component/TodoThing.jsx +++ b/src/component/TodoThing.jsx @@ -1,10 +1,10 @@ - +import React from "react" import "./TodoThing.css" -const TodoThing = () => { +const TodoThing = ({todo}) => { return (
- -
item
+ +
{todo.content}
) From 96c97040507f165654dc735eba5b79c7e72440e0 Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Sun, 2 Jun 2024 01:33:44 +0900 Subject: [PATCH 07/23] =?UTF-8?q?[Add]=20readme=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 21022f2e..e1ce5ade 100644 --- a/README.md +++ b/README.md @@ -7,4 +7,5 @@ 4. 수정하기 5. 삭제하기 6.완료 체크박스 -7.완료된것 따로 모아 보기 \ No newline at end of file +7.완료된것 따로 모아 보기 +8. + 날씨, 날짜 \ No newline at end of file From 8d5e47a0f463eb5c567d3f482af52c3befc68013 Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Sun, 2 Jun 2024 01:56:55 +0900 Subject: [PATCH 08/23] =?UTF-8?q?[Add]=20=EB=B9=88=20=EC=B9=B8=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=EC=8B=9C=20=EA=B2=BD=EA=B3=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/Maker.jsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/component/Maker.jsx b/src/component/Maker.jsx index 499f5a1a..83773766 100644 --- a/src/component/Maker.jsx +++ b/src/component/Maker.jsx @@ -7,13 +7,18 @@ const Maker = ({pushthing}) => { const [inputvalue, setinputvalue] = useState('') const handlechange = (e) => { + setinputvalue(e.target.value); } const handleSubmit = (e) => { - e.preventDefault(); + e.preventDefault(); + if (inputvalue === "") { + alert("할 일을 입력하세요📝"); + } else { pushthing(inputvalue); - setinputvalue("") - } + setinputvalue(""); + } + }; return (
@@ -23,7 +28,7 @@ const Maker = ({pushthing}) => { onChange={handlechange} placeholder="할 일을 입력하세요" /> - +
); }; From 04cf1183a8df54e7cca6a060ebb28fcd8039cfe6 Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Sun, 2 Jun 2024 02:53:39 +0900 Subject: [PATCH 09/23] =?UTF-8?q?[Add]=20=EC=82=AD=EC=A0=9C=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 --- App.jsx | 8 ++++++-- src/component/List.jsx | 4 ++-- src/component/TodoThing.jsx | 10 +++++++--- 3 files changed, 15 insertions(+), 7 deletions(-) diff --git a/App.jsx b/App.jsx index 020ddd1e..3fbdb8ab 100644 --- a/App.jsx +++ b/App.jsx @@ -1,4 +1,4 @@ -import React, {useState} from "react" +import React, {useCallback, useState} from "react" import "./App.css" import Header from "./src/component/Header" import List from "./src/component/List" @@ -8,6 +8,10 @@ function App(){ const [TodoList, setTodoList] = useState([]) + const onRemove = (id) => { + setTodoList(TodoList.filter((todo) => todo.id !== id)) + } + const pushthing = (content)=> { const newTodo = { id:TodoList.length, @@ -20,7 +24,7 @@ function App(){
- +
) } diff --git a/src/component/List.jsx b/src/component/List.jsx index 13053eb5..75e033a0 100644 --- a/src/component/List.jsx +++ b/src/component/List.jsx @@ -1,12 +1,12 @@ import React from "react"; import TodoThing from "./TodoThing"; import "./List.css" -const List = ({TodoList}) => { +const List = ({TodoList, onRemove}) => { return

List

{TodoList.map((todo) => ( - + ))}
diff --git a/src/component/TodoThing.jsx b/src/component/TodoThing.jsx index 361306c9..ac486080 100644 --- a/src/component/TodoThing.jsx +++ b/src/component/TodoThing.jsx @@ -1,11 +1,15 @@ -import React from "react" +import React, { useCallback } from "react" import "./TodoThing.css" -const TodoThing = ({todo}) => { +const TodoThing = ({todo, onRemove}) => { +const removeHandler = () => { + onRemove(todo.id) +} + return (
{todo.content}
- +
) } From bc1691af5755986458fc56b4267874891122f1f7 Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Sun, 2 Jun 2024 02:56:26 +0900 Subject: [PATCH 10/23] =?UTF-8?q?[Fix]=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 | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index e1ce5ade..73d4485b 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,11 @@ # react-todo-list-precourse 기본 기능 구현 목록 -1. 기본적인 ui, component 구성 -2. 값 가져오기 -> 엔터로 값을 가져오도록 -3. 가져온 값을 나타내기 +1. 기본적인 ui, component 구성 - 완료 +2. 값 가져오기 -> 엔터로 값을 가져오도록 - 완료 +3. 가져온 값을 나타내기 - 완료 4. 수정하기 -5. 삭제하기 -6.완료 체크박스 +5. 삭제하기 - 완료 +6.완료 체크박스 - 체크박스만 완료 7.완료된것 따로 모아 보기 8. + 날씨, 날짜 \ No newline at end of file From bbb7ca40e4abadeceb34486b262353f7b358ee5e Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Sun, 2 Jun 2024 02:57:22 +0900 Subject: [PATCH 11/23] [FIX] readme --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 73d4485b..a2cdf634 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,6 @@ 3. 가져온 값을 나타내기 - 완료 4. 수정하기 5. 삭제하기 - 완료 -6.완료 체크박스 - 체크박스만 완료 -7.완료된것 따로 모아 보기 -8. + 날씨, 날짜 \ No newline at end of file +6. 완료 체크박스 - 체크박스만 구현 +7. 완료 체크박스 누른것들만 보이기 +8. + 날짜와 날씨 \ No newline at end of file From cac59c2f412fc0d4033e393ac37da5b9c266951b Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Sun, 2 Jun 2024 04:24:36 +0900 Subject: [PATCH 12/23] =?UTF-8?q?[Add]=20=EC=99=84=EB=A3=8C=ED=95=9C=20?= =?UTF-8?q?=ED=95=AD=EB=AA=A9=20=EB=94=B0=EB=A1=9C=20=EB=B3=B4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.jsx | 21 ++++++++++++++++++++- src/component/List.jsx | 5 +++-- src/component/TodoThing.jsx | 12 +++++++++--- 3 files changed, 32 insertions(+), 6 deletions(-) diff --git a/App.jsx b/App.jsx index 3fbdb8ab..ca01ffed 100644 --- a/App.jsx +++ b/App.jsx @@ -8,10 +8,26 @@ function App(){ const [TodoList, setTodoList] = useState([]) + const [checkTodoList, setCheckTodoList] = useState([]) + const [showChecked, setShowChecked] = useState(false) + const onRemove = (id) => { setTodoList(TodoList.filter((todo) => todo.id !== id)) } + const checkpush = (id, content) => { + const newcheck = { + id : id, + isDone : true, + content : content + + } + setCheckTodoList([...checkTodoList, newcheck]) + } + const toggleCheckedList = () => { + setShowChecked(!showChecked); // 버튼 클릭 이벤트 핸들링 함수 + }; + const pushthing = (content)=> { const newTodo = { id:TodoList.length, @@ -24,7 +40,10 @@ function App(){
- + +
) } diff --git a/src/component/List.jsx b/src/component/List.jsx index 75e033a0..5aa36ad0 100644 --- a/src/component/List.jsx +++ b/src/component/List.jsx @@ -1,12 +1,13 @@ import React from "react"; import TodoThing from "./TodoThing"; import "./List.css" -const List = ({TodoList, onRemove}) => { + +const List = ({TodoList, onRemove, checkpush}) => { return

List

{TodoList.map((todo) => ( - + ))}
diff --git a/src/component/TodoThing.jsx b/src/component/TodoThing.jsx index ac486080..d86b7449 100644 --- a/src/component/TodoThing.jsx +++ b/src/component/TodoThing.jsx @@ -1,13 +1,19 @@ -import React, { useCallback } from "react" +import React, { useCallback, useState } from "react" import "./TodoThing.css" -const TodoThing = ({todo, onRemove}) => { +const TodoThing = ({todo, onRemove, checkpush}) => { +const [isChecked, setIsChecked] = useState(false); const removeHandler = () => { onRemove(todo.id) } +const checkHandler = () => { + checkpush(todo.id, todo.content) + setIsChecked(!isChecked) +} + return (
- +
{todo.content}
From 8338876eeb02abcd33dc56023f7aad919bf09e79 Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Sun, 2 Jun 2024 04:46:40 +0900 Subject: [PATCH 13/23] =?UTF-8?q?[Fix]=20css=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.css | 7 +++++++ App.jsx | 2 +- src/component/List.css | 6 +++++- src/component/List.jsx | 2 +- src/component/Maker.css | 4 ++++ src/component/TodoThing.css | 4 ++++ src/component/TodoThing.jsx | 2 +- 7 files changed, 23 insertions(+), 4 deletions(-) diff --git a/App.css b/App.css index 49906280..eaea2a49 100644 --- a/App.css +++ b/App.css @@ -4,4 +4,11 @@ display: flex; flex-direction: column; gap: 20px; +} + +.checkbtn{ + width: 120px; + height: 40px; + border-radius: 5px; + border: 10px; } \ No newline at end of file diff --git a/App.jsx b/App.jsx index ca01ffed..d2e956f9 100644 --- a/App.jsx +++ b/App.jsx @@ -40,7 +40,7 @@ function App(){
- diff --git a/src/component/List.css b/src/component/List.css index 7c492048..4d8ce6bc 100644 --- a/src/component/List.css +++ b/src/component/List.css @@ -1,10 +1,14 @@ .List{ + display: flex; + flex-direction: column; width: 100%; + gap: 20px; padding-bottom: 20px; } -.TodoThingsList{ +.List-wrapper{ display: flex; flex-direction: column; gap: 10px; + } \ No newline at end of file diff --git a/src/component/List.jsx b/src/component/List.jsx index 5aa36ad0..a0f4003f 100644 --- a/src/component/List.jsx +++ b/src/component/List.jsx @@ -5,7 +5,7 @@ import "./List.css" const List = ({TodoList, onRemove, checkpush}) => { return

List

-
+
{TodoList.map((todo) => ( ))} diff --git a/src/component/Maker.css b/src/component/Maker.css index d6395c62..4fbce99b 100644 --- a/src/component/Maker.css +++ b/src/component/Maker.css @@ -1,3 +1,7 @@ +.Maker{ + display: flex; +} + .Maker input{ display: flex; width: 100%; diff --git a/src/component/TodoThing.css b/src/component/TodoThing.css index bd3c5ea9..d4b3977b 100644 --- a/src/component/TodoThing.css +++ b/src/component/TodoThing.css @@ -14,4 +14,8 @@ .TodoThing .item{ flex: 1; +} +.deletebtn{ + border: 1px; + border-radius: 50px; } \ No newline at end of file diff --git a/src/component/TodoThing.jsx b/src/component/TodoThing.jsx index d86b7449..41c2b842 100644 --- a/src/component/TodoThing.jsx +++ b/src/component/TodoThing.jsx @@ -15,7 +15,7 @@ const checkHandler = () => {
{todo.content}
- +
) } From 0f0ce9104b6505b54165377a0f4a91d145fdb1b9 Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Sun, 2 Jun 2024 05:10:45 +0900 Subject: [PATCH 14/23] =?UTF-8?q?[Fix]=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 | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a2cdf634..baacbf8d 100644 --- a/README.md +++ b/README.md @@ -7,5 +7,13 @@ 4. 수정하기 5. 삭제하기 - 완료 6. 완료 체크박스 - 체크박스만 구현 -7. 완료 체크박스 누른것들만 보이기 -8. + 날짜와 날씨 \ No newline at end of file +7. 완료 체크박스 누른것들만 보이기 구현 +8. + 날짜와 날씨 x + +미구현 요소 +1. 날짜,날씨 +2. 완료 못한것들만 보이기 +3. 완료 체크박스 누르면 밑줄 표시 +4. 깔끔한 css + +선 제출후 피드백 받기위해 많이 부족하지만 제출합니다! From b3c65e460a840c09e5bf9d884ee8f66556e640b7 Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Fri, 7 Jun 2024 16:31:16 +0900 Subject: [PATCH 15/23] =?UTF-8?q?[FIX=20NAME]=20maker=20->=20todo=20maker?= =?UTF-8?q?=20=EC=88=98=EC=A0=95=20,=2015=EC=A4=84=EB=A1=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/Maker.css | 4 ++-- src/component/Maker.jsx | 24 +++++++----------------- 2 files changed, 9 insertions(+), 19 deletions(-) diff --git a/src/component/Maker.css b/src/component/Maker.css index 4fbce99b..3f5fb46e 100644 --- a/src/component/Maker.css +++ b/src/component/Maker.css @@ -1,8 +1,8 @@ -.Maker{ +.Todomaker{ display: flex; } -.Maker input{ +.Todomaker input{ display: flex; width: 100%; padding : 20px; diff --git a/src/component/Maker.jsx b/src/component/Maker.jsx index 83773766..b91e2d02 100644 --- a/src/component/Maker.jsx +++ b/src/component/Maker.jsx @@ -2,35 +2,25 @@ import React, {useState} from "react"; import "./Maker.css" -const Maker = ({pushthing}) => { +const Todomaker = ({pushthing}) => { const [inputvalue, setinputvalue] = useState('') - const handlechange = (e) => { - - setinputvalue(e.target.value); - } + const handlechange = (e) => setinputvalue(e.target.value); const handleSubmit = (e) => { e.preventDefault(); - if (inputvalue === "") { - alert("할 일을 입력하세요📝"); - } else { + if (inputvalue === "") alert("할 일을 입력하세요📝"); + else { pushthing(inputvalue); setinputvalue(""); } }; return ( -
- - + +
); }; -export default Maker; \ No newline at end of file +export default Todomaker; \ No newline at end of file From 847489675889a99efd4227f14fb8c8154d5971a2 Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Fri, 7 Jun 2024 16:48:15 +0900 Subject: [PATCH 16/23] =?UTF-8?q?Todomaker=20=EC=97=85=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/Maker.css | 5 +++++ src/component/TodoThing.jsx | 1 + src/component/{Maker.jsx => Todomaker.jsx} | 0 3 files changed, 6 insertions(+) rename src/component/{Maker.jsx => Todomaker.jsx} (100%) diff --git a/src/component/Maker.css b/src/component/Maker.css index 3f5fb46e..e7148100 100644 --- a/src/component/Maker.css +++ b/src/component/Maker.css @@ -9,4 +9,9 @@ border: 1px solid lightblue; border-radius: 3px; outline: none; +} + +.deletebtn{ + position: absolute; + left : 800px; } \ No newline at end of file diff --git a/src/component/TodoThing.jsx b/src/component/TodoThing.jsx index 41c2b842..7ddd8725 100644 --- a/src/component/TodoThing.jsx +++ b/src/component/TodoThing.jsx @@ -13,6 +13,7 @@ const checkHandler = () => { return (
+
{todo.content}
diff --git a/src/component/Maker.jsx b/src/component/Todomaker.jsx similarity index 100% rename from src/component/Maker.jsx rename to src/component/Todomaker.jsx From 2aee5e0930352a4982cf3079005a0ead80643363 Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Fri, 7 Jun 2024 16:49:34 +0900 Subject: [PATCH 17/23] =?UTF-8?q?[FIX=20NAME}Todomaker=20=EC=9D=B4?= =?UTF-8?q?=EB=A6=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/App.jsx b/App.jsx index d2e956f9..4ec7608c 100644 --- a/App.jsx +++ b/App.jsx @@ -2,7 +2,7 @@ import React, {useCallback, useState} from "react" import "./App.css" import Header from "./src/component/Header" import List from "./src/component/List" -import Maker from "./src/component/Maker" +import Todomaker from "./src/component/Todomaker" function App(){ @@ -39,7 +39,7 @@ function App(){ return (
- + From 946da5b491cc93f92c9b99fbe280cce7c66b84e9 Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Fri, 7 Jun 2024 17:08:58 +0900 Subject: [PATCH 18/23] =?UTF-8?q?[Add=20label]=20todothing=20label?= =?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/component/Maker.css | 4 ---- src/component/TodoThing.css | 2 ++ src/component/TodoThing.jsx | 15 ++++++++++----- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/component/Maker.css b/src/component/Maker.css index e7148100..a0e85595 100644 --- a/src/component/Maker.css +++ b/src/component/Maker.css @@ -11,7 +11,3 @@ outline: none; } -.deletebtn{ - position: absolute; - left : 800px; -} \ No newline at end of file diff --git a/src/component/TodoThing.css b/src/component/TodoThing.css index d4b3977b..8daf5dc8 100644 --- a/src/component/TodoThing.css +++ b/src/component/TodoThing.css @@ -5,6 +5,7 @@ padding-bottom: 20px; border: 1px solid lightblue; border-radius: 5px; + justify-content: space-between; } @@ -18,4 +19,5 @@ .deletebtn{ border: 1px; border-radius: 50px; + } \ No newline at end of file diff --git a/src/component/TodoThing.jsx b/src/component/TodoThing.jsx index 7ddd8725..347b0dde 100644 --- a/src/component/TodoThing.jsx +++ b/src/component/TodoThing.jsx @@ -1,11 +1,15 @@ -import React, { useCallback, useState } from "react" +import React, { useEffect, useState } from "react" import "./TodoThing.css" const TodoThing = ({todo, onRemove, checkpush}) => { -const [isChecked, setIsChecked] = useState(false); +const [isChecked, setIsChecked] = useState(todo.isdone); const removeHandler = () => { onRemove(todo.id) } +useEffect(() => { + setIsChecked(todo.isdone) +},[todo.isdone]) + const checkHandler = () => { checkpush(todo.id, todo.content) setIsChecked(!isChecked) @@ -13,10 +17,11 @@ const checkHandler = () => { return (
- + +
) } From 810a4d9d3b9e869565fd35267d984435792b4fe6 Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Fri, 7 Jun 2024 17:14:54 +0900 Subject: [PATCH 19/23] =?UTF-8?q?[FIX=20name,=20css]push=20thin=20->=20add?= =?UTF-8?q?NewTodo=20=EB=A1=9C=20=EC=9D=B4=EB=A6=84=EC=88=98=EC=A0=95,=20t?= =?UTF-8?q?odothing=20css=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.jsx | 4 ++-- src/component/TodoThing.css | 11 ++++++++--- src/component/Todomaker.jsx | 4 ++-- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/App.jsx b/App.jsx index 4ec7608c..a5b8d2ff 100644 --- a/App.jsx +++ b/App.jsx @@ -28,7 +28,7 @@ function App(){ setShowChecked(!showChecked); // 버튼 클릭 이벤트 핸들링 함수 }; - const pushthing = (content)=> { + const addNewTodo = (content)=> { const newTodo = { id:TodoList.length, isDone : false, @@ -39,7 +39,7 @@ function App(){ return (
- + diff --git a/src/component/TodoThing.css b/src/component/TodoThing.css index 8daf5dc8..1fc0a0de 100644 --- a/src/component/TodoThing.css +++ b/src/component/TodoThing.css @@ -5,13 +5,16 @@ padding-bottom: 20px; border: 1px solid lightblue; border-radius: 5px; - justify-content: space-between; - + justify-content: space-between; } .TodoThing input{ + cursor: pointer; width: 30px; } +.TodoThing .item{ + cursor : pointer; +} .TodoThing .item{ flex: 1; @@ -19,5 +22,7 @@ .deletebtn{ border: 1px; border-radius: 50px; - + background: transparent; + border: none; + cursor: pointer; } \ No newline at end of file diff --git a/src/component/Todomaker.jsx b/src/component/Todomaker.jsx index b91e2d02..081e3255 100644 --- a/src/component/Todomaker.jsx +++ b/src/component/Todomaker.jsx @@ -2,7 +2,7 @@ import React, {useState} from "react"; import "./Maker.css" -const Todomaker = ({pushthing}) => { +const Todomaker = ({addNewTodo}) => { const [inputvalue, setinputvalue] = useState('') @@ -11,7 +11,7 @@ const Todomaker = ({pushthing}) => { e.preventDefault(); if (inputvalue === "") alert("할 일을 입력하세요📝"); else { - pushthing(inputvalue); + addNewTodo(inputvalue); setinputvalue(""); } }; From ed95a0afe96e64af5eab39c7998a1a2754a5e42f Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Sun, 9 Jun 2024 22:19:49 +0900 Subject: [PATCH 20/23] =?UTF-8?q?rename=20/=20=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.jsx | 4 ++-- src/component/List.jsx | 4 ++-- src/component/TodoThing.jsx | 4 ++-- src/component/{Maker.css => Todomaker.css} | 0 src/component/Todomaker.jsx | 6 +++--- 5 files changed, 9 insertions(+), 9 deletions(-) rename src/component/{Maker.css => Todomaker.css} (100%) diff --git a/App.jsx b/App.jsx index a5b8d2ff..0f3a4a81 100644 --- a/App.jsx +++ b/App.jsx @@ -15,7 +15,7 @@ function App(){ setTodoList(TodoList.filter((todo) => todo.id !== id)) } - const checkpush = (id, content) => { + const checkPush = (id, content) => { const newcheck = { id : id, isDone : true, @@ -43,7 +43,7 @@ function App(){ - +
) } diff --git a/src/component/List.jsx b/src/component/List.jsx index a0f4003f..7adb327b 100644 --- a/src/component/List.jsx +++ b/src/component/List.jsx @@ -2,12 +2,12 @@ import React from "react"; import TodoThing from "./TodoThing"; import "./List.css" -const List = ({TodoList, onRemove, checkpush}) => { +const List = ({TodoList, onRemove, checkPush}) => { return

List

{TodoList.map((todo) => ( - + ))}
diff --git a/src/component/TodoThing.jsx b/src/component/TodoThing.jsx index 347b0dde..544d1fc2 100644 --- a/src/component/TodoThing.jsx +++ b/src/component/TodoThing.jsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react" import "./TodoThing.css" -const TodoThing = ({todo, onRemove, checkpush}) => { +const TodoThing = ({todo, onRemove, checkPush}) => { const [isChecked, setIsChecked] = useState(todo.isdone); const removeHandler = () => { onRemove(todo.id) @@ -11,7 +11,7 @@ useEffect(() => { },[todo.isdone]) const checkHandler = () => { - checkpush(todo.id, todo.content) + checkPush(todo.id, todo.content) setIsChecked(!isChecked) } diff --git a/src/component/Maker.css b/src/component/Todomaker.css similarity index 100% rename from src/component/Maker.css rename to src/component/Todomaker.css diff --git a/src/component/Todomaker.jsx b/src/component/Todomaker.jsx index 081e3255..bda32f77 100644 --- a/src/component/Todomaker.jsx +++ b/src/component/Todomaker.jsx @@ -1,12 +1,12 @@ import React, {useState} from "react"; -import "./Maker.css" +import "./Todomaker.css" const Todomaker = ({addNewTodo}) => { const [inputvalue, setinputvalue] = useState('') - const handlechange = (e) => setinputvalue(e.target.value); + const handleChange = (e) => setinputvalue(e.target.value); const handleSubmit = (e) => { e.preventDefault(); if (inputvalue === "") alert("할 일을 입력하세요📝"); @@ -18,7 +18,7 @@ const Todomaker = ({addNewTodo}) => { return (
- +
); }; From a37828feb14979ba24df3450615639c00b3b4d00 Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Sun, 9 Jun 2024 22:24:24 +0900 Subject: [PATCH 21/23] =?UTF-8?q?fix=20-=20=EC=B2=B4=ED=81=AC=ED=9B=84=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=ED=95=B4=EB=8F=84=20=EC=99=84=EB=A3=8C?= =?UTF-8?q?=EB=90=9C=20=ED=95=AD=EB=AA=A9=EC=9D=84=20=EB=88=84=EB=A5=B4?= =?UTF-8?q?=EB=A9=B4=20=EB=8B=A4=EC=8B=9C=20=EB=B3=B4=EC=9D=B4=EB=8A=94=20?= =?UTF-8?q?=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/App.jsx b/App.jsx index 0f3a4a81..56e4a79d 100644 --- a/App.jsx +++ b/App.jsx @@ -13,6 +13,7 @@ function App(){ const onRemove = (id) => { setTodoList(TodoList.filter((todo) => todo.id !== id)) + setCheckTodoList(checkTodoList.filter((todo) => todo.id !== id)); } const checkPush = (id, content) => { From b9ff6f8b75c705b4da6ee1ff9e5aabd043a05636 Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Sun, 9 Jun 2024 22:29:01 +0900 Subject: [PATCH 22/23] =?UTF-8?q?fix=20-=20app.jsx=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EB=B0=94=EB=A1=9C=20=EC=8B=9C=EC=9E=91=ED=95=98=EA=B2=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.jsx | 7 +++++++ index.html | 2 +- src/main.jsx | 6 ------ 3 files changed, 8 insertions(+), 7 deletions(-) delete mode 100644 src/main.jsx diff --git a/App.jsx b/App.jsx index 56e4a79d..4d84a64f 100644 --- a/App.jsx +++ b/App.jsx @@ -3,6 +3,7 @@ import "./App.css" import Header from "./src/component/Header" import List from "./src/component/List" import Todomaker from "./src/component/Todomaker" +import ReactDOM from "react-dom/client"; function App(){ @@ -47,5 +48,11 @@ function App(){
) + + + + } +const root = ReactDOM.createRoot(document.getElementById("App")); +root.render(); export default App; \ No newline at end of file diff --git a/index.html b/index.html index 47b21b75..fe6d01b0 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,6 @@
- + diff --git a/src/main.jsx b/src/main.jsx deleted file mode 100644 index 1a7e8454..00000000 --- a/src/main.jsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import App from "../App"; - -const root = ReactDOM.createRoot(document.getElementById("App")); -root.render(); From 6fbfcc6fa53e794bb5816ea22519af7f6b7e2489 Mon Sep 17 00:00:00 2001 From: jihoon7171 Date: Sun, 9 Jun 2024 22:31:50 +0900 Subject: [PATCH 23/23] =?UTF-8?q?fix=20readme=20=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, 2 deletions(-) diff --git a/README.md b/README.md index baacbf8d..e9fac8d0 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,6 @@ 5. 삭제하기 - 완료 6. 완료 체크박스 - 체크박스만 구현 7. 완료 체크박스 누른것들만 보이기 구현 -8. + 날짜와 날씨 x 미구현 요소 1. 날짜,날씨 @@ -16,4 +15,3 @@ 3. 완료 체크박스 누르면 밑줄 표시 4. 깔끔한 css -선 제출후 피드백 받기위해 많이 부족하지만 제출합니다!