7회차 과제 - 김주희

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;

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
+export default TodoList;

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
+
+export default TodoListItem;