next-step · jihoon7171 · Jun 1, 2024 · Jun 1, 2024 · Jun 1, 2024 · Jun 1, 2024
diff --git a/App.css 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;
+}
diff --git a/App.jsx 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 (
+     <div className="App">
+   <Header/>
+   <Todomaker addNewTodo = {addNewTodo}/>
+   <button className="checkbtn" onClick={toggleCheckedList}>
+    {showChecked ? "모든 항목 보기" : "완료한 항목 보기"}
+   </button>
+   <List TodoList = {showChecked ? checkTodoList : TodoList} onRemove={onRemove} checkPush = {checkPush}/>
+    </div>
+    )
+
+
+
+
+}
+const root = ReactDOM.createRoot(document.getElementById("App"));
+root.render(<App />);
+export default App;
diff --git a/README.md b/README.md
@@ -1 +1,17 @@
-# react-todo-list-precourse
+# 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
@@ -6,7 +6,7 @@
     <title></title>
   </head>
   <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <div id="App"></div>
+    <script type="module" src="/App.jsx"></script>
   </body>
 </html>
diff --git a/src/component/Header.jsx b/src/component/Header.jsx
@@ -0,0 +1,7 @@
+const Header = () => {
+    return <div>
+        <h3>ToDo-List 🤯</h3>
+        </div>
+};
+
+export default Header;
diff --git a/src/component/List.css 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;
+
+
+} 
diff --git a/src/component/List.jsx 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 <div className="List">
+        <h3>List</h3>
+        <div className="List-wrapper">
+      {TodoList.map((todo) => (
+        <TodoThing key={todo.id} todo={todo} onRemove={onRemove} checkPush = {checkPush}/>
+      ))}
+    </div>
+
+
+    </div>
+};
+
+export default List;
diff --git a/src/component/TodoThing.css 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;
+}
diff --git a/src/component/TodoThing.jsx 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 (
+        <div className="TodoThing">
+        <label>
+        <input type="checkbox" checked={isChecked} onChange={checkHandler} ></input>
+        <span className="item">{todo.content}</span>
+        </label>
+       <button className="deletebtn"onClick={removeHandler}>삭제</button>
+        </div>
+    )
+}
+export default TodoThing
diff --git a/src/component/Todomaker.css 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
@@ -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 (
+        <form className="Todomaker" onSubmit={handleSubmit}>
+          <input type="text" value={inputvalue}  onChange={handleChange} placeholder="할 일을 입력하세요" />
+        </form>
+      );
+};
+
+export default Todomaker;
diff --git a/src/main.js b/src/main.js
diff --git 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" }]
 }