UI 완성

client/src/components/Admin/TimeTable.js

 const TimeTable = () => {
     return (
-        <div className="col-6">
+        <div className="col-12 col-lg-6">
         </div>
     )
 }

client/src/components/Admin/TimeTableEdit.js

@@ -5,9 +5,9 @@ const TimeTableEdit = () => {
     return (
         <>
             <h2 className="border-bottom border-2 text-center pb-2 me-2">현재 상영시간표 정보</h2>
-            <div className="d-flex">
-                <TimeTableEditForm />
+            <div className="d-flex flex-column flex-lg-row-reverse">
                 <TimeTable />
+                <TimeTableEditForm />
             </div>
         </>
     )

client/src/components/Admin/TimeTableEditForm.js

@@ -141,11 +141,12 @@ const TimeTableEditForm = () => {
             window.location.reload()
         } catch (error) {
             catchErrors(error, setError)
+            setShowTimes({ list: [] })
         }
     }
 
     return (
-        <form className="col-6" onSubmit={handleSubmit}>
+        <form className="col-12 col-lg-6" onSubmit={handleSubmit}>
             <select className={`form-select mb-3 ${styles.shadowNone} ${styles.selectInput}`} id="movieId" name="movieId" value={selectId} onChange={handleChange} aria-label="select movie" defaultValue="0">
                 {movieList.length !== 0 ?
                     movieList.map((movie, index) => {
@@ -157,13 +158,15 @@ const TimeTableEditForm = () => {
                     })
                     : <option value="0" disabled>서버에 등록된 영화가 없습니다.</option>}
             </select>
-            <div className="col-md-6 mb-3">
-                <label htmlFor="release_date" className="form-label">상영시작일</label>
-                <input type="text" className={`form-control ${styles.shadowNone}`} id="release_date" name="release_date" value={selectMovie?.release_date || ''} disabled />
-            </div>
-            <div className="col-md-6 mb-3">
-                <label htmlFor="end_date" className="form-label">상영종료일</label>
-                <input type="date" className={`form-control ${styles.shadowNone}`} id="end_date" name="end_date" value={info.end_date} min={selectMovie.release_date} onChange={handleChange} />
+            <div className="d-flex justify-content-between">
+                <div className="col-md-5 mb-3">
+                    <label htmlFor="release_date" className="form-label">상영시작일</label>
+                    <input type="text" className={`form-control ${styles.shadowNone}`} id="release_date" name="release_date" value={selectMovie?.release_date || ''} disabled />
+                </div>
+                <div className="col-md-5 mb-3">
+                    <label htmlFor="end_date" className="form-label">상영종료일</label>
+                    <input type="date" className={`form-control ${styles.shadowNone}`} id="end_date" name="end_date" value={info.end_date} min={selectMovie.release_date} onChange={handleChange} />
+                </div>
             </div>
             <p>시간대 설정</p>
             <ul className="list-group list-group-flush">
@@ -171,10 +174,10 @@ const TimeTableEditForm = () => {
                     showTimes.list.map((timeInfo, index) => <li className="list-group-item d-flex justify-content-between align-items-center">
                         {timeInfo.theaterName}&nbsp;&nbsp;&nbsp;{timeInfo.start} ~ {timeInfo.end}
                         <button type="button" className="btn btn-danger" onClick={() => delData(index)}>삭제</button>
-                    </li>) : <li className="list-group-item text-center">추가된 시간대가 없습니다. 폼을 작성해 시간대를 추가해 주세요.</li>}
+                    </li>) : <li className="list-group-item text-center">추가된 시간대가 없습니다. 아래 양식을 작성해 시간대를 추가해 주세요.</li>}
             </ul>
-            <div>
-                <div>
+            <div className="d-sm-flex flex-lg-column">
+                <div className="col-sm-5 col-lg-12">
                     <select className={`form-select mb-3 ${styles.shadowNone} ${styles.selectInput}`} id="theater" name="theater" value={selectInfo.theater} onChange={handleChange} aria-label="select theater" defaultValue="0">
                         {theaterList.length !== 0 ?
                             theaterList.map((theater, index) => {
@@ -187,16 +190,18 @@ const TimeTableEditForm = () => {
                             : <option value="0" disabled>서버에 등록된 상영관이 없습니다.</option>}
                     </select>
                 </div>
-                <div>
-                    <input type="time" id="start" name="start" value={selectInfo.start} onChange={handleChange} disabled={!selectId || !selectInfo.theater} />
-                    <p>{(selectId && selectInfo.start !== "") ? "~ " + selectInfo.end : ""}</p>
-                </div>
-                <div>
-                    <button type="button" className={`btn btn-dark ${styles.customBtn}`} onClick={addData}>추가</button>
+                <div className="d-flex justify-content-between col-sm-7 col-lg-auto mb-3">
+                    <div className="d-flex col-auto">
+                        <div className="col-auto ms-sm-2 ms-lg-0">
+                            <input type="time" className={`form-control ${styles.shadowNone}`} id="start" name="start" value={selectInfo.start} onChange={handleChange} disabled={!selectId || !selectInfo.theater} />
+                        </div>
+                        <p className="align-self-center ms-2 mb-0">{(selectId && selectInfo.start !== "") ? "~ " + selectInfo.end : ""}</p>
+                    </div>
+                    <button type="button" className={`btn btn-dark col-auto ${styles.customBtn}`} onClick={addData}>추가</button>
                 </div>
             </div>
-            <div>
-                <button type="submit" className={`btn btn-dark ${styles.customBtn}`}>등록</button>
+            <div className="d-grid gap-2">
+                <button type="submit" className={`btn btn-dark ${styles.customBtn}`} disabled={showTimes.list.length === 0 ? true : false}>등록</button>
             </div>
         </form>
     )