complete

sooje0ng · Jan 31, 2022 · 5fd4fe9 · 5fd4fe9
1 parent 9c5c174
commit 5fd4fe9
Show file tree

Hide file tree

Showing 5 changed files with 267 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
     "react": "^17.0.2",
+    "react-cookie": "^4.1.1",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-scripts": "5.0.0",

diff --git a/src/components/Todolist.js b/src/components/Todolist.js
@@ -4,15 +4,13 @@ import { IoIosAddCircleOutline } from "react-icons/io";
 import { BiTrash } from "react-icons/bi";
 import { BsPencilSquare } from "react-icons/bs";
 import { BsCheck2 } from "react-icons/bs";
+import { FcCheckmark } from "react-icons/fc";
 
 function Todolist() {
     //1. 예쁘게 꾸미기
     //2. 삭제
     //3. 수정
     //4. 완료한 일정 체크
-    //5. 브라우저를 종요했다가 들어와도 유지되기.
-    //6. 기간 내 완료하지 못한 일정 dim처리
-    //7. 덜끝낸 일정 세모표시
 
     const [text, setText] = useState("");
     const [todolist, setTodolist] = useState([]);
@@ -34,7 +32,10 @@ function Todolist() {
         for (let i = 0; i < todolist.length; i++) {
             newTodolist[i] = todolist[i];
         }
-        newTodolist[count] = text;
+        newTodolist[count] = {
+            todo: text,
+            complete: false,
+        };
         setCount(count + 1);
         setTodolist(newTodolist);
         setText("");
@@ -72,7 +73,10 @@ function Todolist() {
         const newTodolist = [];
         for (let i = 0; i < todolist.length; i++) {
             if (i === index) {
-                newTodolist[i] = editText;
+                newTodolist[i] = {
+                    todo: editText,
+                    complete: todolist[i].complete,
+                };
                 continue;
             }
             newTodolist[i] = todolist[i];
@@ -82,6 +86,20 @@ function Todolist() {
         setEditText("");
     };
 
+    const completeTodo = (index) => {
+        const newTodolist = [];
+        for (let i = 0; i < todolist.length; i++) {
+            if (i === index) {
+                newTodolist[i] = {
+                    todo: todolist[i].todo,
+                    complete: !todolist[i].complete,
+                };
+                continue;
+            }
+            newTodolist[i] = todolist[i];
+        }
+        setTodolist(newTodolist);
+    };
     return (
         <div className="Todolist">
             <div className="Header">
@@ -102,11 +120,28 @@ function Todolist() {
                         {index === editIndex ? (
                             <input
                                 className="editInput"
-                                defaultValue={value}
                                 onKeyUp={(input) => editValue(input, index)}
+                                defaultValue={value.todo}
                             />
                         ) : (
-                            value
+                            <div className="todoInner">
+                                <FcCheckmark
+                                    onClick={() => completeTodo(index)}
+                                    style={{ marginRight: 10 }}
+                                />
+                                <p
+                                    style={
+                                        value.complete
+                                            ? {
+                                                  textDecorationLine:
+                                                      "line-through",
+                                              }
+                                            : {}
+                                    }
+                                >
+                                    {value.todo}
+                                </p>
+                            </div>
                         )}
                         <div className="icons">
                             {index === editIndex ? (

diff --git a/src/styles/Todolist.scss b/src/styles/Todolist.scss
@@ -36,6 +36,14 @@
             justify-content: space-between;
             align-items: center;
 
+            .todoInner {
+                display: flex;
+                align-items: center;
+                p {
+                    margin: 0;
+                }
+            }
+
             .icons {
                 width: 10%;
                 display: flex;