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 catchErrors from "../../utils/catchErrors.js";
import styles from "./schedule.module.scss";
const ScheduleItem = () => {
const [error, setError] = useState("")
async function delSchedule () {
try {
setError("")
alert("해당 일정을 성공적으로 삭제하였습니다.")
window.location.reload()
} catch (error) {
catchErrors(error, setError)
}
}
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>
<p className={`text-secondary mb-0 ${styles.time}`}>sadsadsdsadsadsaf</p>
<p className={`mb-0 ${styles.period}`}>2021.01.151 ~ 2021.09.35</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}`}>
......@@ -21,7 +36,7 @@ const ScheduleItem = () => {
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>
<button type="button" className="btn btn-crimson btn-sm ms-2" onClick={delSchedule}>삭제</button>
</div>
</div>
</div>
......
......@@ -9,10 +9,12 @@
border-bottom: 1px solid #000000;
white-space: normal;
& p {
&::after {
content: "adsadsadsa";
& .period {
display: block;
}
& .time {
display: none;
}
}
......@@ -22,6 +24,14 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
& .period {
display: none;
}
& .time {
display: block;
}
}
&::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