client - TimeTableEdit 컴포넌트 완성 (css 미완)

client/src/components/Admin/TimeTableEditForm.js

 import { useState, useEffect } from "react";
 import movieApi from "../../apis/movie.api.js";
 import theaterApi from "../../apis/theater.api.js";
+import timetableApi from "../../apis/timetable.api.js";
 import catchErrors from "../../utils/catchErrors.js";
 import styles from "./admin.module.scss";
 
-const INIT_MOVIE = {
-    movieId: 0,
-    title: "",
-    release_date: "",
-    end_date: "",
-    theater: [],
-    times: []
+const INIT_INFO = {
+    theater: 0,
+    start: "",
+    end: ""
 }
 
 const TimeTableEditForm = () => {
@@ -18,9 +16,9 @@ const TimeTableEditForm = () => {
     const [theaterList, setTheaterList] = useState([])
     const [selectId, setSelectId] = useState(0)
     const [selectMovie, setSelectMovie] = useState({})
-    const [selectInfo, setSelectInfo] = useState({ theater: 0, start: "", end: "" })
+    const [info, setInfo] = useState({ end_date: "" })
+    const [selectInfo, setSelectInfo] = useState(INIT_INFO)
     const [showTimes, setShowTimes] = useState({ list: [] })
-    const [sendInfo, setSendInfo] = useState(INIT_MOVIE)
     const [error, setError] = useState("")
 
     useEffect(() => {
@@ -28,6 +26,11 @@ const TimeTableEditForm = () => {
         getTheater()
     }, [])
 
+    useEffect(() => {
+        setSelectInfo({ ...selectInfo, ...INIT_INFO })
+        setShowTimes({ list: [] })
+    }, [selectId])
+
     async function getMoviesfromDB() {
         try {
             setError("")
@@ -48,17 +51,23 @@ const TimeTableEditForm = () => {
         }
     }
 
+    function getDate(string) {
+        const arr = string.split(':')
+        const date = new Date(0, 0, 0, Number(arr[0]), Number(arr[1]))
+        return date
+    }
+
     function addRunTime(start, runTime) {
         const startArr = start.split(':')
         const add = Number(startArr[1]) + runTime
 
         let hours = Number(startArr[0]) + Math.floor(add / 60)
-        if (hours <= 9) hours = '0' + hours
-        if (hours / 24 > 0) hours = '0' + hours % 24
+        if (Math.floor(hours / 24) > 0) hours = '0' + hours % 24
         else if (hours <= 9) hours = '0' + hours
 
         let mins = add % 60
         if (mins <= 9) mins = '0' + mins
+
         setSelectInfo({ ...selectInfo, "start": start, "end": hours + ':' + mins })
     }
 
@@ -66,6 +75,9 @@ const TimeTableEditForm = () => {
         const { list } = showTimes
         const isSelect = Object.values(selectInfo).every((el) => Boolean(el))
         if (isSelect) {
+            const isTime = list.find(el => el.theaterTypeId === selectInfo.theater && (getDate(el.start) <= getDate(selectInfo.end) && getDate(el.end) >= getDate(selectInfo.start)))
+            if (isTime) alert('이미 추가한 상영시간대입니다. 다른 시간대를 골라주시기 바랍니다.')
+            else {
                 const theater = theaterList.find(theater => theater.theatertypeId === selectInfo.theater)
                 if (theater) {
                     const myTime = {
@@ -76,13 +88,14 @@ const TimeTableEditForm = () => {
                     }
                     setShowTimes({ list: list.concat(myTime) })
                 } else alert('선택한 상영관을 찾지 못했습니다. 다시 시도하길 바랍니다.')
+            }
         } else alert('추가할 데이터의 갯수가 부족합니다. 모든 항목을 입력해주시길 바랍니다.')
-        setSelectInfo({ ...selectInfo, theater: 0, start: "", end: "" })
+        setSelectInfo({ ...selectInfo, ...INIT_INFO })
     }
 
     function delData(index) {
         let { list } = showTimes
-        list = list.splice(index, 1)
+        list.splice(index, 1)
         setShowTimes({ list: list })
     }
 
@@ -94,9 +107,9 @@ const TimeTableEditForm = () => {
                 setSelectId(value)
                 const res = await movieApi.getMovieInfofromTM(value)
                 setSelectMovie({ ...res })
-                setSendInfo({ ...sendInfo, movieId: value, title: res.title, release_date: res.release_date, end_date: "" })
+                setInfo({ ...info, end_date: "" })
             } else if (name === "end_date") {
-                setSendInfo({ ...sendInfo, [name]: value })
+                setInfo({ ...info, [name]: value })
             } else if (name === "theater") {
                 setSelectInfo({ ...selectInfo, [name]: Number(value) })
             } else if (name === "start") {
@@ -105,13 +118,25 @@ const TimeTableEditForm = () => {
         } catch (error) {
             catchErrors(error, setError)
         }
-
     }
 
     async function handleSubmit(e) {
         e.preventDefault()
+        const timeArr = []
         try {
             setError("")
+            showTimes.list.map(time => {
+                timeArr.push({ theater: time.theaterTypeId, start: time.start, end: time.end })
+            })
+            const sendData = {
+                movieId: selectMovie.id,
+                title: selectMovie.title,
+                release_date: selectMovie.release_date,
+                runtime: selectMovie.runtime,
+                theater: timeArr,
+                date: info.end_date
+            }
+            await timetableApi.submit(sendData)
             alert("해당 상영시간표 정보 등록이 성공적으로 완료되었습니다.")
             window.location.reload()
         } catch (error) {
@@ -121,7 +146,6 @@ const TimeTableEditForm = () => {
 
     return (
         <form onSubmit={handleSubmit}>
-            {console.log("select==", showTimes)}
             <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) => {
@@ -139,7 +163,7 @@ const TimeTableEditForm = () => {
             </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={sendInfo.end_date} min={sendInfo.release_date} onChange={handleChange} />
+                <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>
             <p>시간대 설정</p>
             <ul className="list-group list-group-flush">