ToDoPage.js

import Menu from "../components/Menu/Menu.js";
import HomeBtn from "../components/Buttons/HomeBtn.js";
import styles from "../components/Buttons/buttons.module.scss";

const ToDoPage = () => {
    return (
        <>
            <Menu />
            <HomeBtn />
            <h1>To-do</h1>
            {/* modal */}
            <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>
                </div>
            </div>

        </>
    )
}

export default ToDoPage