From 9981567c302d5475503fc599c5e3c99d4ffd0105 Mon Sep 17 00:00:00 2001
From: 8parks <trxye.522@gmail.com>
Date: Sun, 21 Jul 2024 16:58:45 +0900
Subject: [PATCH] =?UTF-8?q?Todo=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C=20=EB=A7=8C=EB=93=A4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js | 35 ++++++++++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index b428f9a..4e3f162 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,8 @@
 import React, { useState } from "react";
+import styled from 'styled-components';
 
 function App() {
-  const [tasks, setTasks] = useState([]);
+  const [tasks, setTasks] = useState(["자기","놀기","먹기"]);
   const [input, setInput] = useState("");
 
   const handleAddTask = () => {
@@ -15,18 +16,42 @@ function App() {
     setInput(event.target.value);
   };
 
+  const handleDelete = (index) => {
+    // 놀기 index=2
+    const newTasks = tasks.filter((task,i) => i != index);
+    setTasks(newTasks);
+  };
+
   return (
     <div>
       <h1>ToDo List</h1>
       <input type="text" value={input} onChange={handleChange} />
       <button onClick={handleAddTask}>추가</button>
-      <div>
+       <div>
         {tasks.map((task, index) => (
-          <div key={index}>{task}</div>
-        ))}
-      </div>
+          <TaskBox>
+           <div key={index}>{task}</div>
+           <div>완료</div>
+           <DeleteText onClick={() => handleDelete(index)}>삭제</DeleteText>
+         </TaskBox>
+         ))}
+     </div>
+     ##################################
+     <div>완료된 일</div>
     </div>
   );
 }
 
 export default App;
+
+const TaskBox = styled.div`
+  width: 500px;
+  background-color: pink;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const DeleteText = styled.div`
+ color: red;
+ cursor: pointer;
+ `;
\ No newline at end of file