diff --git a/App.css b/App.css new file mode 100644 index 00000000..eaea2a49 --- /dev/null +++ b/App.css @@ -0,0 +1,14 @@ +.App { + width: 500px; + margin:0 auto; + 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 new file mode 100644 index 00000000..4d84a64f --- /dev/null +++ b/App.jsx @@ -0,0 +1,58 @@ +import React, {useCallback, useState} from "react" +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(){ + + + + const [TodoList, setTodoList] = useState([]) + const [checkTodoList, setCheckTodoList] = useState([]) + const [showChecked, setShowChecked] = useState(false) + + const onRemove = (id) => { + setTodoList(TodoList.filter((todo) => todo.id !== id)) + setCheckTodoList(checkTodoList.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 addNewTodo = (content)=> { + const newTodo = { + id:TodoList.length, + isDone : false, + content : content + }; + setTodoList([...TodoList, newTodo]) + } + return ( +
+
+ + + +
+ ) + + + + +} +const root = ReactDOM.createRoot(document.getElementById("App")); +root.render(); +export default App; \ No newline at end of file diff --git a/README.md b/README.md index 3c0710d2..e9fac8d0 100644 --- a/README.md +++ b/README.md @@ -1 +1,17 @@ -# react-todo-list-precourse \ No newline at end of file +# react-todo-list-precourse + +기본 기능 구현 목록 +1. 기본적인 ui, component 구성 - 완료 +2. 값 가져오기 -> 엔터로 값을 가져오도록 - 완료 +3. 가져온 값을 나타내기 - 완료 +4. 수정하기 +5. 삭제하기 - 완료 +6. 완료 체크박스 - 체크박스만 구현 +7. 완료 체크박스 누른것들만 보이기 구현 + +미구현 요소 +1. 날짜,날씨 +2. 완료 못한것들만 보이기 +3. 완료 체크박스 누르면 밑줄 표시 +4. 깔끔한 css + diff --git a/index.html b/index.html index b021b5c8..fe6d01b0 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ -
- +
+ diff --git a/src/component/Header.jsx b/src/component/Header.jsx new file mode 100644 index 00000000..d1d6954d --- /dev/null +++ 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.css b/src/component/List.css new file mode 100644 index 00000000..4d8ce6bc --- /dev/null +++ b/src/component/List.css @@ -0,0 +1,14 @@ +.List{ + display: flex; + flex-direction: column; + width: 100%; + gap: 20px; + padding-bottom: 20px; +} +.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 new file mode 100644 index 00000000..7adb327b --- /dev/null +++ b/src/component/List.jsx @@ -0,0 +1,18 @@ +import React from "react"; +import TodoThing from "./TodoThing"; +import "./List.css" + +const List = ({TodoList, onRemove, checkPush}) => { + return
+

List

+
+ {TodoList.map((todo) => ( + + ))} +
+ + +
+}; + +export default List; \ No newline at end of file diff --git a/src/component/TodoThing.css b/src/component/TodoThing.css new file mode 100644 index 00000000..1fc0a0de --- /dev/null +++ b/src/component/TodoThing.css @@ -0,0 +1,28 @@ +.TodoThing{ + display: flex; + align-items: center; + gap: 20px; + padding-bottom: 20px; + border: 1px solid lightblue; + border-radius: 5px; + justify-content: space-between; +} + +.TodoThing input{ + cursor: pointer; + width: 30px; +} +.TodoThing .item{ + cursor : pointer; +} + +.TodoThing .item{ + flex: 1; +} +.deletebtn{ + border: 1px; + border-radius: 50px; + background: transparent; + border: none; + cursor: pointer; +} \ No newline at end of file diff --git a/src/component/TodoThing.jsx b/src/component/TodoThing.jsx new file mode 100644 index 00000000..544d1fc2 --- /dev/null +++ b/src/component/TodoThing.jsx @@ -0,0 +1,28 @@ +import React, { useEffect, useState } from "react" +import "./TodoThing.css" +const TodoThing = ({todo, onRemove, checkPush}) => { +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) +} + + return ( +
+ + +
+ ) +} +export default TodoThing \ No newline at end of file diff --git a/src/component/Todomaker.css b/src/component/Todomaker.css new file mode 100644 index 00000000..a0e85595 --- /dev/null +++ b/src/component/Todomaker.css @@ -0,0 +1,13 @@ +.Todomaker{ + display: flex; +} + +.Todomaker input{ + display: flex; + width: 100%; + padding : 20px; + border: 1px solid lightblue; + border-radius: 3px; + outline: none; +} + diff --git a/src/component/Todomaker.jsx b/src/component/Todomaker.jsx new file mode 100644 index 00000000..bda32f77 --- /dev/null +++ b/src/component/Todomaker.jsx @@ -0,0 +1,26 @@ +import React, {useState} from "react"; +import "./Todomaker.css" + + +const Todomaker = ({addNewTodo}) => { + + const [inputvalue, setinputvalue] = useState('') + + const handleChange = (e) => setinputvalue(e.target.value); + const handleSubmit = (e) => { + e.preventDefault(); + if (inputvalue === "") alert("할 일을 입력하세요📝"); + else { + addNewTodo(inputvalue); + setinputvalue(""); + } + }; + + return ( +
+ +
+ ); +}; + +export default Todomaker; \ No newline at end of file diff --git a/src/main.js b/src/main.js deleted file mode 100644 index e69de29b..00000000 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" }] }