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

Schedule accordion 수정 중

parent 898f2334
import { Link } from "react-router-dom";
import styles from "./schedule.module.scss";
const ScheduleItem = () => {
return (
<div className="accordion-item border-bottom-0">
<button className={`d-flex flex-column align-items-start accordion-button collapsed bg-white shadow-none px-0 ${styles.activeBtn}`} type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
<h5 className={`accordion-header ${styles.title}`} id="flush-headingOne">
Accordion Item #1sadsadsadasdsadsadasasadsad
</h5>
<p className="text-secondary mb-0">sadsadsdsadsadsaf</p>
</button>
<div id="flush-collapseOne" className="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#scheduleList">
<div className={`accordion-body text-break px-0 pt-2 ${styles.textBox}`}>
<div className="d-flex align-items-start">
<i className="col bi bi-geo-alt fs-5"></i>
<div className="col-11">
sadsadsadsa
</div>
</div>
dlkasjflsajflasjflsakfjlsajflalsafjsask<br />fjlakdjflajflaksjlksajdlksajdslkafjlsakflksjflasjflksjslakjflsakjflsajflsakjlasjflksajlfsja
<div className="d-flex justify-content-end mt-2">
<Link className="btn btn-white btn-sm border-dark" to="/schedule/edit">수정</Link>
<button type="button" className="btn btn-crimson btn-sm ms-2">삭제</button>
</div>
</div>
</div>
</div>
)
}
export default ScheduleItem
\ No newline at end of file
import Item from "./ScheduleItem.js";
const ScheduleList = () => {
return (
<div className="accordion accordion-flush" id="scheduleList">
<Item />
</div>
)
}
export default ScheduleList
\ No newline at end of file
.activeBtn {
&:focus {
border-color: black;
}
// 펼쳐졌을 때
&:not(.collapsed) {
color: black;
border-bottom: 1px solid #000000;
white-space: normal;
& p {
&::after {
content: "adsadsadsa";
}
}
}
// 숨겨졌을 때
&[class~="collapsed"] {
border-bottom: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&::after {
display: none;
}
}
.textBox {
white-space: pre-line;
}
\ No newline at end of file
...@@ -2,6 +2,7 @@ import Menu from "../components/Menu/Menu.js"; ...@@ -2,6 +2,7 @@ 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/Modal/ScheduleModal.js"; import ScheduleModal from "../components/Modal/ScheduleModal.js";
import ScheduleList from "../components//Schedule/ScheduleList.js";
const SchedulePage = () => { const SchedulePage = () => {
return ( return (
...@@ -11,6 +12,7 @@ const SchedulePage = () => { ...@@ -11,6 +12,7 @@ const SchedulePage = () => {
<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">
<ScheduleModal /> <ScheduleModal />
</button> </button>
<ScheduleList />
<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