7회차 과제 - 구준혁

.gitignore

@@ -21,3 +21,8 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+/public
+package-lock.json
+package.json
+README.md

src/App.js

@@ -1,58 +1,73 @@
-import styled from "styled-components";
-import TodoList from "./TodoList";
-import { useState } from "react";
+import styled from 'styled-components';
+import TodoList from './TodoList';
+import { useState } from 'react';
 
 const fake = [
   {
-    id : 1,
-    body : "우유 사기"
+    id: 1,
+    body: '우유 사기',
+    complete: false,
   },
   {
-    id : 2,
-    body : "공부하기"
+    id: 2,
+    body: '공부하기',
+    complete: false,
   },
   {
-    id : 3,
-    body : "집가고싶다"
-  }
-]
+    id: 3,
+    body: '집가고싶다',
+    complete: false,
+  },
+];
 
 function App() {
-
-  const [todoList, setTodoList] = useState(fake)
-  const [inputString, setInputString] = useState("")
-
-
+  const [todoList, setTodoList] = useState(fake);
+  const [inputString, setInputString] = useState('');
 
   const appendTodo = (event) => {
-    event.preventDefault()
-    const new_Todo = [...todoList, {id: Date.now(), body: inputString}];
+    event.preventDefault();
+    const new_Todo = [...todoList, { id: Date.now(), body: inputString, complete: false }];
     setTodoList(new_Todo);
-    setInputString('')
-  }
+    setInputString('');
+  };
 
   const handleInput = (event) => {
-    setInputString(event.target.value)
-  }
+    setInputString(event.target.value);
+  };
 
   const handleDelete = (id) => {
     const new_Todo = todoList.filter((el) => {
       if (el.id === id) {
-        return false
+        return false;
       } else {
-        return true
+        return true;
       }
-    })
-    setTodoList(new_Todo)
-  }
+    });
+    setTodoList(new_Todo);
+  };
 
+  const handleComplete = (id) => {
+    const new_Todo = todoList.map((el) => {
+      if (el.id === id) {
+        if (el.complete === false) {
+          el.complete = true;
+        } else {
+          el.complete = false;
+        }
+        return el;
+      } else {
+        return el;
+      }
+    });
+    setTodoList(new_Todo);
+  };
 
   return (
     <Container>
       <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 +76,7 @@ const Container = styled.div`
   width: 70%;
   height: 100vh;
   margin: auto;
-`
+`;
 
 const TodoInput = styled.input`
   width: 100%;
@@ -70,9 +85,6 @@ 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

@@ -1,25 +1,33 @@
-import React from 'react'
-import styled from 'styled-components'
-import TodoListItem from './TodoListItem'
+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}
+              complete={el.complete}
+            ></TodoListItem>
+          );
       })}
     </Box>
-  )
-}
+  );
+};
 
 const Box = styled.div`
   margin-top: 50px;
   background: #eeeeee;
   padding: 50px 20px;
   box-sizing: border-box;
   border-radius: 15px;
+`;
 
-`
-
-export default TodoList
+export default TodoList;

src/TodoListItem.jsx

@@ -1,17 +1,29 @@
-import React from 'react'
-import styled from 'styled-components'
-
-const TodoListItem = ({id, body, handleDelete}) => {
-
-
+import React from 'react';
+import styled from 'styled-components';
 
+const TodoListItem = ({ id, body, complete, handleDelete, handleComplete }) => {
   return (
     <Box>
-      <p>{body}</p>
-      <button onClick={() => {handleDelete(id)}}>삭제</button>
+      {complete === false ? <p>{body}</p> : <IsCompleted>{body}</IsCompleted>}
+      <ButtonBox>
+        <button
+          onClick={() => {
+            handleDelete(id);
+          }}
+        >
+          삭제
+        </button>
+        <button
+          onClick={() => {
+            handleComplete(id);
+          }}
+        >
+          완료
+        </button>
+      </ButtonBox>
     </Box>
-  )
-}
+  );
+};
 
 const Box = styled.div`
   background-color: white;
@@ -22,6 +34,15 @@ const Box = styled.div`
   border-radius: 5px;
   display: flex;
   justify-content: space-between;
-`
+`;
+const ButtonBox = styled.div`
+  display: flex;
+  gap: 10px;
+`;
+
+const IsCompleted = styled.p`
+  color: gray;
+  text-decoration: line-through;
+`;
 
-export default TodoListItem
+export default TodoListItem;