Commit 921e4255 authored by Kim, Subin's avatar Kim, Subin
Browse files

줄바꿈 및 공백 처리

parent 95f33c32
......@@ -6,7 +6,7 @@ import styles from "./schedule.module.scss";
const ScheduleItem = () => {
const [error, setError] = useState("")
async function delSchedule () {
async function delSchedule() {
try {
setError("")
alert("해당 일정을 성공적으로 삭제하였습니다.")
......@@ -20,21 +20,21 @@ const ScheduleItem = () => {
<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
Accordion0 Item#1 sadsadsadasdsadsadasa sadsadsadasdsadsada
</h5>
<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}`}>
<div className={`accordion-body 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">
dlkasjflsajflasjflsakfjlsajflalsafjsask<br />fjlakdjflajflaksj lksajdlksajs dslkafjlsakflksjflasjflksjslakjflsakjflsajflsakjlasjflksajlfsja
<div className="d-flex justify-content-end mt-3">
<Link className="btn btn-white btn-sm border-dark" to="/schedule/edit">수정</Link>
<button type="button" className="btn btn-crimson btn-sm ms-2" onClick={delSchedule}>삭제</button>
</div>
......
......@@ -3,6 +3,10 @@
}
.activeBtn {
& .title {
width: inherit;
}
&:focus {
border-color: black;
}
......@@ -11,7 +15,11 @@
&:not(.collapsed) {
color: black;
border-bottom: 1px solid #000000;
white-space: normal;
& .title {
white-space: normal;
word-break: break-all;
}
& .period {
display: block;
......@@ -25,9 +33,11 @@
// 숨겨졌을 때
&[class~="collapsed"] {
border-bottom: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
& .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
& .period {
display: none;
......@@ -44,7 +54,8 @@
}
.textBox {
white-space: pre-line;
white-space: pre-wrap;
word-break: break-all;
}
.header {
......
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