Commit 2225a330 authored by Kim, Subin's avatar Kim, Subin
Browse files

UI 완성

parent ced462de
const TimeTable = () => {
return (
<div className="col-6">
<div className="col-12 col-lg-6">
</div>
)
}
......
......@@ -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>
</>
)
......
......@@ -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,24 +158,26 @@ const TimeTableEditForm = () => {
})
: <option value="0" disabled>서버에 등록된 영화가 없습니다.</option>}
</select>
<div className="col-md-6 mb-3">
<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-6 mb-3">
<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">
{showTimes.list.length !== 0 ?
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 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>
<div>
<button type="button" className={`btn btn-dark ${styles.customBtn}`} onClick={addData}>추가</button>
<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>
)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment