Commit 13c2b712 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

Todo 컴포넌트 분리 및 세부사항 수정

parent 5f9f71fb
import styles from "./modal.module.scss";
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 fade" id="todomodal" 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 px-2 py-1" >
......@@ -10,7 +12,7 @@ const TodoModal = () => {
</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 shadow-none rounded-0"
className={`form-control border-top-0 border-end-0 border-start-0 shadow-none rounded-0 ${styles.textInput}`}
placeholder="제목" />
<label className="form-label m-2">날짜 </label>
<input type="date" value="2021-10-12" className="ms-4 mt-4" />
......
......@@ -8,4 +8,13 @@
.body {
height: 350px
}
.textInput {
border: none;
border-bottom: 1px solid #000;
&:focus {
border-color: crimson;
}
}
\ No newline at end of file
import TodoModal from "../components/Modal/TodoModal.js";
import TodoPostModal from "../components/Modal/TodoPostModal.js";
import styles from "../components/Form/form.module.scss";
const TodoList = () => {
return (
<div className="d-flex mt-3">
<div className="d-flex align-items-center" style={{width:"75%"}}>
<input className={`form-check-input rounded-0 shadow-none mt-0 ${styles.checkBox}`} type="checkbox" />
<label className="form-check-label fs-5 ms-3 pe-2 text-nowrap" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>과제03 제출하기sadsa</label>
</div>
<div className="d-flex justify-content-between" style={{ cursor: "pointer", width:"25%" }}>
<i class="bi bi-arrow-right fs-5" data-bs-toggle="modal" data-bs-target="#postmodal"><TodoPostModal /></i>
<i className="bi bi-pencil-square fs-5" data-bs-toggle="modal" data-bs-target="#todomodal"></i>
<TodoModal />
<i className="bi bi-trash fs-5"></i>
</div>
</div>
)
}
export default TodoList;
\ No newline at end of file
import Menu from "../components/Menu/Menu.js";
import HomeBtn from "../components/Buttons/HomeBtn.js";
import TodoModal from "../components/Modal/TodoModal.js";
import TodoPostModal from "../components/Modal/TodoPostModal.js";
import Footer from "../components/Footer.js";
import styles from "../components/Form/form.module.scss";
import TodoList from "../components/TodoList.js";
const ToDoPage = () => {
return (
......@@ -14,18 +12,7 @@ const ToDoPage = () => {
<div>
캘린더 자리
</div>
<div className="d-flex justify-content-between mt-3">
<div className="d-flex align-items-center">
<input className={`form-check-input rounded-0 shadow-none mt-0 ${styles.checkBox}`} type="checkbox" />
<label className={`form-check-label fs-5 ms-3 ${styles.title}`}>과제03 제출하기sadsa</label>
</div>
<div style={{ cursor: "pointer" }}>
<i class="bi bi-arrow-right pe-2 fs-5" data-bs-toggle="modal" data-bs-target="#postmodal"><TodoPostModal /></i>
<i className="bi bi-pencil-square pe-2 fs-5" data-bs-toggle="modal" data-bs-target="#staticBackdrop"></i>
<TodoModal />
<i className="bi bi-trash fs-5"></i>
</div>
</div>
<TodoList />
<Footer />
</>
)
......
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