From 921e4255dc4daede1a25770b419e106f930732a4 Mon Sep 17 00:00:00 2001
From: ksbin1025 <ksbin1025@naver.com>
Date: Thu, 28 Oct 2021 15:00:27 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A4=84=EB=B0=94=EA=BF=88=20=EB=B0=8F=20?=
 =?UTF-8?q?=EA=B3=B5=EB=B0=B1=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Schedule/ScheduleItem.js   | 10 ++++-----
 .../components/Schedule/schedule.module.scss  | 21 ++++++++++++++-----
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Schedule/ScheduleItem.js b/client/src/components/Schedule/ScheduleItem.js
index 52313b8..6a16507 100644
--- a/client/src/components/Schedule/ScheduleItem.js
+++ b/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>
diff --git a/client/src/components/Schedule/schedule.module.scss b/client/src/components/Schedule/schedule.module.scss
index 0db5e89..7a8067d 100644
--- a/client/src/components/Schedule/schedule.module.scss
+++ b/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 {
-- 
GitLab