From aa2d9185a7b2a3ef72e02bf085581d6adacdf113 Mon Sep 17 00:00:00 2001
From: dev-joohee <dev.joohee0916@gmail.com>
Date: Tue, 14 May 2024 17:29:34 +0900
Subject: [PATCH] =?UTF-8?q?7=ED=9A=8C=EC=B0=A8=EA=B3=BC=EC=A0=9C=20?=
 =?UTF-8?q?=EA=B9=80=EC=A3=BC=ED=9D=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js           | 20 ++++++++++++++++----
 src/TodoList.jsx     |  7 ++++---
 src/TodoListItem.jsx | 15 +++++++++------
 3 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/App.js b/src/App.js
index f109a34..592a643 100644
--- a/src/App.js
+++ b/src/App.js
@@ -26,7 +26,7 @@ function App() {
 
   const appendTodo = (event) => {
     event.preventDefault()
-    const new_Todo = [...todoList, {id: Date.now(), body: inputString}];
+    const new_Todo = [...todoList, {id: Date.now(), body: inputString, completed:false}];
     setTodoList(new_Todo);
     setInputString('')
   }
@@ -35,6 +35,18 @@ function App() {
     setInputString(event.target.value)
   }
 
+  const handleComplete = (id) => {
+    const new_Todo = todoList.map((el)=>{
+      if (el.id===id) {
+        return {...el, completed: true, style: {color: 'gray', textDecoration: 'line-through'}};
+      }
+      {
+        return el;
+      }
+    })
+    setTodoList(new_Todo)
+  }
+
   const handleDelete = (id) => {
     const new_Todo = todoList.filter((el) => {
       if (el.id === id) {
@@ -52,7 +64,7 @@ function App() {
       <form onSubmit={appendTodo}>
         <TodoInput onChange={handleInput} value={inputString}></TodoInput>
       </form>
-      <TodoList todoList={todoList} handleDelete={handleDelete}></TodoList>
+      <TodoList todoList={todoList} handleDelete={handleDelete} handleComplete={handleComplete}></TodoList>
     </Container>
   );
 }
@@ -61,7 +73,7 @@ const Container = styled.div`
   width: 70%;
   height: 100vh;
   margin: auto;
-`
+`;
 
 const TodoInput = styled.input`
   width: 100%;
@@ -70,7 +82,7 @@ const TodoInput = styled.input`
   border-radius: 10px;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   box-sizing: border-box;
-`
+`;
 
 
 export default App;
diff --git a/src/TodoList.jsx b/src/TodoList.jsx
index 58fd1c2..ae067dc 100644
--- a/src/TodoList.jsx
+++ b/src/TodoList.jsx
@@ -2,12 +2,13 @@ import React from 'react'
 import styled from 'styled-components'
 import TodoListItem from './TodoListItem'
 
-const TodoList = ({todoList, handleDelete}) => {
+
+const TodoList = ({todoList, handleDelete, handleComplete}) => {
   return (
     <Box>
       <h1>할 일 목록</h1>
       {todoList.map((el) => {
-        return <TodoListItem handleDelete={handleDelete} key={el.id} id={el.id} body={el.body}></TodoListItem>
+        return <TodoListItem handleDelete={handleDelete} handleComplete={handleComplete} key={el.id} id={el.id} body={el.body} style={el.style}></TodoListItem>
       })}
     </Box>
   )
@@ -22,4 +23,4 @@ const Box = styled.div`
 
 `
 
-export default TodoList
\ No newline at end of file
+export default TodoList;
\ No newline at end of file
diff --git a/src/TodoListItem.jsx b/src/TodoListItem.jsx
index fc94916..01cacb6 100644
--- a/src/TodoListItem.jsx
+++ b/src/TodoListItem.jsx
@@ -1,17 +1,19 @@
 import React from 'react'
 import styled from 'styled-components'
 
-const TodoListItem = ({id, body, handleDelete}) => {
+const TodoListItem = ({id, body, style, handleDelete, handleComplete}) => {
 
 
 
   return (
     <Box>
-      <p>{body}</p>
+      <p style={style}>{body}</p>
+      
       <button onClick={() => {handleDelete(id)}}>삭제</button>
+      <button className='complete-btn' onClick={() => {handleComplete(id)}}>완료</button>
     </Box>
-  )
-}
+  );
+};
 
 const Box = styled.div`
   background-color: white;
@@ -22,6 +24,7 @@ const Box = styled.div`
   border-radius: 5px;
   display: flex;
   justify-content: space-between;
-`
+`;
 
-export default TodoListItem
\ No newline at end of file
+
+export default TodoListItem;
\ No newline at end of file