Schedule accordion 수정 중

client/src/components/Schedule/ScheduleItem.js

+import { Link } from "react-router-dom";
+import styles from "./schedule.module.scss";
+
+const ScheduleItem = () => {
+    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>
+            </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="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">
+                        <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>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ScheduleItem
\ No newline at end of file

client/src/components/Schedule/ScheduleList.js

+import Item from "./ScheduleItem.js";
+
+const ScheduleList = () => {
+    return (
+        <div className="accordion accordion-flush" id="scheduleList">
+            <Item />
+        </div>
+    )
+}
+
+export default ScheduleList
\ No newline at end of file

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

+.activeBtn {
+    &:focus {
+        border-color: black;
+    }
+
+    // 펼쳐졌을 때
+    &:not(.collapsed) {
+        color: black;
+        border-bottom: 1px solid #000000;
+        white-space: normal;
+
+        & p {
+            &::after {
+                content: "adsadsadsa";
+            }
+        }
+    }
+
+    // 숨겨졌을 때
+    &[class~="collapsed"] {
+        border-bottom: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &::after {
+        display: none;
+    }
+}
+
+.textBox {
+    white-space: pre-line;
+}
\ No newline at end of file

client/src/pages/SchedulePage.js

@@ -2,6 +2,7 @@ import Menu from "../components/Menu/Menu.js";
 import HomeBtn from "../components/Buttons/HomeBtn.js";
 import EditBtn from "../components/Buttons/EditBtn.js";
 import ScheduleModal from "../components/Modal/ScheduleModal.js";
+import ScheduleList from "../components//Schedule/ScheduleList.js";
 
 const SchedulePage = () => {
     return (
@@ -11,6 +12,7 @@ const SchedulePage = () => {
             <button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scheduleModal">
                 <ScheduleModal />
             </button>
+            <ScheduleList />
             <EditBtn pathname="schedule/edit" />
         </>
     )