줄바꿈 및 공백 처리

client/src/components/Schedule/ScheduleItem.js

@@ -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>

client/src/components/Schedule/schedule.module.scss

@@ -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 {