TicketEditForm UI 완성

client/src/components/Admin/TicketEditForm.js

@@ -16,7 +16,7 @@ const INIT_TICKETFEE = {
     defaultPrice: 5000
 }
 
-const TicketEditForm = ({ editFee }) => {
+const TicketEditForm = ({ editFee, formRef }) => {
     const [ticketFee, setTicketFee] = useState(INIT_TICKETFEE)
     const [error, setError] = useState("")
 
@@ -42,56 +42,56 @@ const TicketEditForm = ({ editFee }) => {
     }
 
     return (
-        <form onSubmit={handleSubmit}>
-            <div className="d-flex mb-3">
-                <label for="theaterType" className="col-form-label">상영관 종류</label>
-                <div className="">
+        <form ref={formRef} onSubmit={handleSubmit}>
+            <div className="d-flex row row-cols-2 mb-2 mb-md-3 gx-0 gy-2 gy-md-0">
+                <label for="theaterType" className="col-md-auto col-form-label text-center text-md-start">상영관 종류</label>
+                <div className="col-md-4 col-lg-3 mx-md-2">
                     <input className={`form-control ${styles.shadowNone}`} type="text" id="theaterType" name="theaterType" value={ticketFee.theaterType} onChange={handleChange} />
                 </div>
-                <label for="defaultPrice" className="col-form-label">기본 가격</label>
-                <div className="">
+                <label for="defaultPrice" className="col-md-auto col-form-label text-center text-md-start">기본 가격</label>
+                <div className="col-md-3 col-lg-2 mx-md-2">
                     <input className={`form-control ${styles.shadowNone}`} type="number" id="defaultPrice" name="defaultPrice" value={ticketFee.defaultPrice} onChange={handleChange} />
                 </div>
             </div>
-            <div className="d-flex mb-3">
-                <label for="weekdays" className="col-form-label">주중</label>
-                <div className="">
+            <div className="d-flex row row-cols-2 mb-2 mb-md-3 gx-0 gy-2 gy-md-0">
+                <label for="weekdays" className="col-md-1 col-form-label text-center text-md-start">주중</label>
+                <div className="col-md-3 col-lg-2">
                     <input className={`form-control ${styles.shadowNone}`} type="number" id="weekdays" name="weekdays" value={ticketFee.weekdays} onChange={handleChange} />
                 </div>
-                <label for="weekend" className="col-form-label">주말</label>
-                <div className="">
+                <label for="weekend" className="col-md-1 col-form-label text-center">주말</label>
+                <div className="col-md-3 col-lg-2">
                     <input className={`form-control ${styles.shadowNone}`} type="number" id="weekend" name="weekend" value={ticketFee.weekend} onChange={handleChange} />
                 </div>
             </div>
-            <div className="d-flex mb-3">
-                <label for="morning" className="col-form-label">조조</label>
-                <div className="">
+            <div className="d-flex row row-cols-2 mb-2 mb-md-3 gx-0 gy-2 gy-md-0">
+                <label for="morning" className="col-md-1 col-form-label text-center text-md-start">조조</label>
+                <div className="col-md-3 col-lg-2">
                     <input className={`form-control ${styles.shadowNone}`} type="number" id="morning" name="morning" value={ticketFee.morning} onChange={handleChange} />
                 </div>
-                <label for="day" className="col-form-label">일반</label>
-                <div className="">
+                <label for="day" className="col-md-1 col-form-label text-center">일반</label>
+                <div className="col-md-3 col-lg-2">
                     <input className={`form-control ${styles.shadowNone}`} type="number" id="day" name="day" value={ticketFee.day} onChange={handleChange} />
                 </div>
-                <label for="night" className="col-form-label">심야</label>
-                <div className="">
+                <label for="night" className="col-md-1 col-form-label text-center">심야</label>
+                <div className="col-md-3 col-lg-2">
                     <input className={`form-control ${styles.shadowNone}`} type="number" id="night" name="night" value={ticketFee.night} onChange={handleChange} />
                 </div>
             </div>
-            <div className="d-flex mb-3">
-                <label for="youth" className="col-form-label">청소년</label>
-                <div className="">
+            <div className="d-flex row row-cols-2 flex-wrap flex-lg-nowrap mb-2 mb-md-3 gx-0 gy-2 gy-md-0">
+                <label for="youth" className="col-md-1 col-form-label text-center text-md-start">청소년</label>
+                <div className="col-md-3 col-lg-2">
                     <input className={`form-control ${styles.shadowNone}`} type="number" id="youth" name="youth" value={ticketFee.youth} onChange={handleChange} />
                 </div>
-                <label for="adult" className="col-form-label">일반</label>
-                <div className="">
+                <label for="adult" className="col-md-1 col-form-label text-center">일반</label>
+                <div className="col-md-3 col-lg-2">
                     <input className={`form-control ${styles.shadowNone}`} type="number" id="adult" name="adult" value={ticketFee.adult} onChange={handleChange} />
                 </div>
-                <label for="senior" className="col-form-label">경로</label>
-                <div className="">
+                <label for="senior" className="col-md-1 col-form-label text-center">경로</label>
+                <div className="col-md-3 col-lg-2">
                     <input className={`form-control ${styles.shadowNone}`} type="number" id="senior" name="senior" value={ticketFee.senior} onChange={handleChange} />
                 </div>
-                <div>
-                    <button type="submit" className={`btn btn-dark ${styles.customBtn}`}>추가</button>
+                <div className="col-12 col-md-2 col-lg-1 ms-lg-auto mt-md-2 mt-lg-0">
+                    <button type="submit" className={`btn btn-dark w-100 ${styles.customBtn}`}>추가</button>
                 </div>
             </div>
         </form>