Todo관련 작업중

client/src/components/Buttons/buttons.module.scss

@@ -15,6 +15,7 @@
     & .icon {
         color: crimson;
         font-size: 2.7em;
+        
     }
 }
 

client/src/components/Modal/TodoModal.js

+const TodoModal = () => {
+  return (
+    <>
+      <div className="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+        <div className="modal-dialog modal-dialog-centered">
+          <div className="modal-content" style={{ backgroundColor: "crimson" }}>
+            <div className="modal-header p-1" >
+              <h5 className="modal-title text-white" id="staticBackdropLabel">To-do</h5>
+              <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div className="modal-body" style={{ backgroundColor: "white" }}>
+              <input type="text" name="todoTitle"
+                className="form-control border-top-0 border-end-0 border-start-0"
+                style={{ boxShadow: "none", borderRadius: "0" }}
+                placeholder="제목" />
+              <label className="form-label m-2">날짜 </label>
+              <input type="date" value="2021-10-12" className="ms-4 mt-4" />
+            </div>
+            <div className="modal-footer p-1" style={{ backgroundColor: "white" }} >
+              <button type="button" className="btn btn-secondary btn-sm"
+                data-bs-dismiss="modal">취소</button>
+              <button type="button" className="btn btn-crimson btn-sm">확인</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default TodoModal;

client/src/pages/ToDoPage.js

+// import { Link } from "react-router-dom";
 import Menu from "../components/Menu/Menu.js";
 import HomeBtn from "../components/Buttons/HomeBtn.js";
-import styles from "../components/Buttons/buttons.module.scss";
+import styles from "../components/Form/form.module.scss";
+import TodoModal from "../components/Modal/TodoModal.js";
 
 const ToDoPage = () => {
     return (
         <>
             <Menu />
             <HomeBtn />
-            <h1>To-do</h1>
-            {/* modal */}
+            <h1 className="text-center">To-do</h1>
             <div>
-                <button type="button" className={`btn position-absolute ${styles.editBtn}`}
-                    data-bs-toggle="modal" data-bs-target="#staticBackdrop">
-                    <i className={`bi bi-plus-circle ${styles.icon}`}></i>
-                </button>
-                <div className="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
-                    <div className="modal-dialog modal-dialog-centered">
-                        <div className="modal-content" style={{ backgroundColor: "crimson" }}>
-                            <div className="modal-header p-1" >
-                                <h5 className="modal-title text-white" id="staticBackdropLabel">To-do</h5>
-                                <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                            </div>
-                            <div className="modal-body" style={{ backgroundColor: "white" }}>
-                                <input type="text" name="todoTitle"
-                                    className="form-control border-top-0 border-end-0 border-start-0"
-                                    style={{ boxShadow: "none", borderRadius: "0" }}
-                                    placeholder="제목" />
-                                <label className="form-label m-2">날짜 </label>
-                                <input type="date" value="2021-10-12" className="ms-4 mt-4" />
-                            </div>
-                            <div className="modal-footer p-1" style={{ backgroundColor: "white" }} >
-                                <button type="button" className="btn btn-secondary btn-sm"
-                                    data-bs-dismiss="modal">취소</button>
-                                <button type="button" className="btn btn-crimson btn-sm">확인</button>
-                            </div>
+                캘린더 자리
             </div>
+            <div className="d-flex justify-content-between mt-3">
+                <div className="d-flex flex-row">
+                    <input className={`form-check-input rounded-0  shadow-none mt-1 ${styles.checkBox}`} type="checkbox" />
+                    <p className={`form-check-label fs-5 ms-3 ${styles.title}`}>과제03 제출하기</p>
                 </div>
+                <div>
+                    <i class="bi bi-arrow-right pe-2 fs-5"></i>
+                    <i className="bi bi-pencil-square pe-2 fs-5" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><TodoModal /></i>
+                    <i className="bi bi-trash fs-5"></i>
                 </div>
             </div>
+            <button type="button" className={`btn position-absolute bottom-0 start-0 justify-content-end d-flex justify-content-end w-100 bg-white ${styles.editBtn}`} style={{ boxShadow: "none" }}
+                data-bs-toggle="modal" data-bs-target="#staticBackdrop">
+                <i className={`bi bi-plus-circle ${styles.icon}`}></i>
+                <TodoModal />
+            </button>
 
         </>
     )