ScheduleForm UI 완성

client/src/components/Form/ScheduleForm.js

-import { useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import BtnGroup from "../Buttons/BtnGroup.js";
+import catchErrors from "../../utils/catchErrors.js";
 import styles from "./form.module.scss";
 
 const ScheduleForm = () => {
+    const [schedule, setSchedule] = useState({})
+    const [error, setError] = useState("")
+
+    useEffect(() => {
+    }, [])
+
+    async function handleSubmit(e) {
+        e.preventDefault()
+        try {
+            setError("")
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    } 
 
     return (
-        <form className="pt-5">
+        <form className="pt-5" onSubmit={handleSubmit}>
             <input className={`form-control form-control-lg shadow-none px-1 mb-5 ${styles.textInput}`} type="text" placeholder="제목" aria-label="title" autoFocus />
             <div className="d-flex mb-4">
-                <label className="col-3 col-form-label">시작</label>
+                <label className="col col-form-label align-self-center py-0">시작</label>
                 <div className="col-5">
                     <input className={`form-control shadow-none ${styles.dateInput}`} type="date" aria-label="startDate" />
                 </div>
-                <div className="col-4">
+                <div className="col-5">
                     <input className={`form-control shadow-none ${styles.dateInput}`} type="time" aria-label="startTime" />
                 </div>
             </div>
             <div className="d-flex mb-3">
-                <label className="col-3 col-form-label">종료</label>
+                <label className="col col-form-label align-self-center py-0">종료</label>
                 <div className="col-5">
                     <input className={`form-control shadow-none ${styles.dateInput}`} type="date" aria-label="endDate" />
                 </div>
-                <div className="col-4">
+                <div className="col-5">
                     <input className={`form-control shadow-none ${styles.dateInput}`} type="time" aria-label="endTime" />
                 </div>
             </div>

client/src/components/Form/form.module.scss

@@ -23,6 +23,8 @@
 }
 
 .dateInput {
+    font-size: 0.75rem;
+
     &:focus {
         border-color: crimson;
     }