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

줄바꿈 및 공백 처리

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