Commit ba096590 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

Todo관련 작업중

parent b12f36aa
......@@ -15,6 +15,7 @@
& .icon {
color: crimson;
font-size: 2.7em;
}
}
......
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;
// 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>
</>
)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment