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

ScheduleItem UI 완성

parent 1b35caf7
import { useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import catchErrors from "../../utils/catchErrors.js";
import styles from "./schedule.module.scss"; import styles from "./schedule.module.scss";
const ScheduleItem = () => { const ScheduleItem = () => {
const [error, setError] = useState("")
async function delSchedule () {
try {
setError("")
alert("해당 일정을 성공적으로 삭제하였습니다.")
window.location.reload()
} catch (error) {
catchErrors(error, setError)
}
}
return ( return (
<div className="accordion-item border-bottom-0"> <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"> <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"> <h5 className={`accordion-header ${styles.title}`} id="flush-headingOne">
Accordion Item #1sadsadsadasdsadsadasasadsad Accordion Item #1sadsadsadasdsadsadasasadsad
</h5> </h5>
<p className="text-secondary mb-0">sadsadsdsadsadsaf</p> <p className={`text-secondary mb-0 ${styles.time}`}>sadsadsdsadsadsaf</p>
<p className={`mb-0 ${styles.period}`}>2021.01.151 ~ 2021.09.35</p>
</button> </button>
<div id="flush-collapseOne" className="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#scheduleList"> <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={`accordion-body text-break px-0 pt-2 ${styles.textBox}`}>
...@@ -21,7 +36,7 @@ const ScheduleItem = () => { ...@@ -21,7 +36,7 @@ const ScheduleItem = () => {
dlkasjflsajflasjflsakfjlsajflalsafjsask<br />fjlakdjflajflaksjlksajdlksajdslkafjlsakflksjflasjflksjslakjflsakjflsajflsakjlasjflksajlfsja dlkasjflsajflasjflsakfjlsajflalsafjsask<br />fjlakdjflajflaksjlksajdlksajdslkafjlsakflksjflasjflksjslakjflsakjflsajflsakjlasjflksajlfsja
<div className="d-flex justify-content-end mt-2"> <div className="d-flex justify-content-end mt-2">
<Link className="btn btn-white btn-sm border-dark" to="/schedule/edit">수정</Link> <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> <button type="button" className="btn btn-crimson btn-sm ms-2" onClick={delSchedule}>삭제</button>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -9,10 +9,12 @@ ...@@ -9,10 +9,12 @@
border-bottom: 1px solid #000000; border-bottom: 1px solid #000000;
white-space: normal; white-space: normal;
& p { & .period {
&::after { display: block;
content: "adsadsadsa"; }
}
& .time {
display: none;
} }
} }
...@@ -22,6 +24,14 @@ ...@@ -22,6 +24,14 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
& .period {
display: none;
}
& .time {
display: block;
}
} }
&::after { &::after {
......
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