Commit bbd589f3 authored by Kim, Subin's avatar Kim, Subin
Browse files

ScheduleModal-admin UI 완성

parent 8739cd7d
import { Link } from "react-router-dom";
const AdminScheduleItem = ({}) => {
return (
<div className="d-flex mb-5">
<i className="bi bi-check-lg fs-4 col"></i>
<div className="col-10">
<div className="d-flex justify-content-between">
<h3>sadsad</h3>
<div className="fs-5">
<Link><i className="bi bi-pencil-square text-dark me-1"></i></Link>
<i className="bi bi-trash"></i>
</div>
</div>
<p className="text-start text-secondary">2020~353543135</p>
<div className="text-start" style={{ whiteSpace: "pre-line" }}>sadsd</div>
</div>
</div>
)
}
export default AdminScheduleItem
\ No newline at end of file
import Item from "../AdminScheduleItem.js";
import styles from "./modal.module.scss";
const ScheduleModal = () => { const ScheduleModal = () => {
return ( return (
<div className="modal" id="scheduleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="scheduleModalLabel" aria-hidden="true"> <div className="modal" id="scheduleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="scheduleModalLabel" aria-hidden="true">
<div className="modal-dialog modal-dialog-centered modal-dialog-scrollable"> <div className="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div className="modal-content"> <div className="modal-content">
<div className="modal-header"> <div className={`modal-header ${styles.header}`}>
<h5 className="modal-title" id="scheduleModalLabel">Modal title</h5> <h5 className="modal-title mx-auto" id="scheduleModalLabel">Modal title</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" className={`btn-close btn-close-white ms-0 ${styles.closeBtn}`} data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div className="modal-body"> <div className={`modal-body text-dark ${styles.body}`}>
... <Item />
<p>선택한 날짜에 일정이 없습니다.</p>
</div> </div>
</div> </div>
</div> </div>
......
.header {
background-color: crimson;
& .closeBtn {
font-size: 1.2em;
}
}
.body {
height: 350px
}
\ No newline at end of file
import Menu from "../components/Menu/Menu.js"; import Menu from "../components/Menu/Menu.js";
import HomeBtn from "../components/Buttons/HomeBtn.js"; import HomeBtn from "../components/Buttons/HomeBtn.js";
import EditBtn from "../components/Buttons/EditBtn.js"; import EditBtn from "../components/Buttons/EditBtn.js";
import ScheduleModal from "../components/ScheduleModal.js"; import ScheduleModal from "../components/Modal/ScheduleModal.js";
const SchedulePage = () => { const SchedulePage = () => {
return ( return (
...@@ -9,7 +9,6 @@ const SchedulePage = () => { ...@@ -9,7 +9,6 @@ const SchedulePage = () => {
<Menu /> <Menu />
<HomeBtn /> <HomeBtn />
<button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scheduleModal"> <button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scheduleModal">
Launch demo modal
<ScheduleModal /> <ScheduleModal />
</button> </button>
<EditBtn pathname="schedule/edit" /> <EditBtn pathname="schedule/edit" />
......
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