ScheduleItem UI 완성

client/src/components/Schedule/ScheduleItem.js

+import { useState } from "react";
 import { Link } from "react-router-dom";
+import catchErrors from "../../utils/catchErrors.js";
 import styles from "./schedule.module.scss";
 
 const ScheduleItem = () => {
+    const [error, setError] = useState("")
+
+    async function delSchedule () {
+        try {
+            setError("")
+            alert("해당 일정을 성공적으로 삭제하였습니다.")
+            window.location.reload()
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
     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>
+                <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}`}>
@@ -21,7 +36,7 @@ const ScheduleItem = () => {
                     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>
+                        <button type="button" className="btn btn-crimson btn-sm ms-2" onClick={delSchedule}>삭제</button>
                     </div>
                 </div>
             </div>

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

@@ -9,10 +9,12 @@
         border-bottom: 1px solid #000000;
         white-space: normal;
 
-        & p {
-            &::after {
-                content: "adsadsadsa";
-            }
+        & .period {
+            display: block;
+        }
+
+        & .time {
+            display: none;
         }
     }
 
@@ -22,6 +24,14 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+
+        & .period {
+            display: none;
+        }
+
+        & .time {
+            display: block;
+        }
     }
 
     &::after {