Menu 우선 완성

client/src/components/Menu/Menu.js

+import { Link } from "react-router-dom";
 import styles from "./menu.module.scss";
 
 const Menu = () => {
@@ -7,7 +8,39 @@ const Menu = () => {
                 <i className="bi bi-list fs-4"></i>
             </button>
             <div className={`collapse collapse-horizontal position-absolute top-0 start-0 h-100 ${styles.content}`} id="menuContent">
-                <button type="button" className={`btn-close btn-close-white btn-lg position-absolute ${styles.close}`} data-bs-toggle="collapse" data-bs-target="#menuContent" aria-controls="menuContent" aria-expanded="true" aria-label="menu"></button>
+                <div style={{ transition: ".15s ease" }}>
+                    <button type="button" className={`btn-close btn-close btn-lg position-absolute ${styles.close}`} data-bs-toggle="collapse" data-bs-target="#menuContent" aria-controls="menuContent" aria-expanded="true" aria-label="menu"></button>
+                    <div className="d-flex flex-column align-items-center my-5">
+                        <h1 className="my-3">김수빈 님</h1>
+                        <h2 className="my-2">목표 95% 달성!</h2>
+                    </div>
+                    <div className="d-flex flex-column justify-content-between py-4 ps-3" style={{ backgroundColor: "crimson" }}>
+                        <div className="user-select-none w-75">
+                            <h2>To-do</h2>
+                            <div className="d-flex mt-2">
+                                <p className={`form-check-label border-bottom border-dark border-2 fs-5 pb-1 me-3 ${styles.title}`}>sdasdsasdasdsadsadsadsadsadsadsadaddad</p>
+                                <input className={`form-check-input rounded-0 border-dark shadow-none mt-1 ${styles.checkBox}`} type="checkbox" id="inlineCheckbox1" value="" aria-label="checkbox" />
+                            </div>
+                            <div className="d-flex">
+                                <p className={`form-check-label border-bottom border-dark border-2 fs-5 pb-1 me-3 ${styles.title}`}>sdasdsadad</p>
+                                <input className={`form-check-input rounded-0 border-dark shadow-none mt-1 ${styles.checkBox}`} type="checkbox" id="inlineCheckbox1" value="" aria-label="checkbox" />
+                            </div>
+                            <div className="d-flex">
+                                <p className={`form-check-label border-bottom border-dark border-2 fs-5 pb-1 me-3 ${styles.title}`}>sdasdsadad</p>
+                                <input className={`form-check-input rounded-0 border-dark shadow-none mt-1 ${styles.checkBox}`} type="checkbox" id="inlineCheckbox1" value="" aria-label="checkbox" />
+                            </div>
+                            <Link className="d-flex justify-content-center text-dark text-decoration-none" to="/todo">
+                                <i className="bi bi-plus-lg me-2"></i>
+                                <p className="mb-0">더보기</p>
+                            </Link>
+                        </div>
+                        <div className="d-flex flex-column">
+                            <Link className="text-dark text-decoration-none" to="/schedule"><i className="bi bi-check"></i>일정</Link>
+                            <Link className="text-dark text-decoration-none" to="/studyplan"><i className="bi bi-check"></i>학업별 계획</Link>
+                        </div>
+                        <p className={`position-absolute bottom-0 text-dark ${styles.logout}`}>로그아웃</p>
+                    </div>
+                </div>
             </div>
         </>
     )

client/src/components/Menu/menu.module.scss

 .content {
-    background-color: #343a40;
+    background-color: #fff;
     z-index: 1;
+    overflow: hidden;
 
     & .close {
         top: 10px;
         right: 10px;
     }
+
+    & .title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 86%;
+    }
+
+    & .checkBox {
+        width: 1.5em;
+        height: 1.5em;
+        background-color: crimson;
+
+        &:checked {
+            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+        }
+    }
+
+    & .logout {
+        right: 10px;
+        cursor: pointer;
+    }
 }
\ No newline at end of file