TimeTable 예매시 연결

client/src/apis/timetable.api.js

 import axios from "axios";
 import { baseUrl } from "../utils/baseUrl.js";
 
-const getAll = async (selectDate) => {
-  const { data } = await axios.get(`${baseUrl}/api/timetable?when=${selectDate}`)
+const getAll = async (selectDate, movieId) => {
+  const { data } = await axios.get(`${baseUrl}/api/timetable?when=${selectDate}&movieId=${movieId}`)
   return data
 }
 

client/src/components/Admin/TimeTable.js

@@ -5,19 +5,23 @@ import timetableApi from "../../apis/timetable.api.js";
 import catchErrors from "../../utils/catchErrors.js";
 import styles from "./admin.module.scss";
 
-const TimeTable = () => {
+const TimeTable = ({ ticketInfo = { movieId: 0 }, setTicketInfo }) => {
     const [selectDate, setSelectDate] = useState(moment().format('YYYY-MM-DD'))
     const [timeList, setTimeList] = useState([])
     const [error, setError] = useState("")
 
     useEffect(() => {
-        getTimeTable(selectDate)
+        getTimeTable(selectDate, ticketInfo.movieId)
     }, [selectDate])
 
-    async function getTimeTable() {
+    useEffect(() => {
+        getTimeTable(selectDate, ticketInfo.movieId)
+    }, [ticketInfo.movieId])
+
+    async function getTimeTable(selectDate, movieId) {
         try {
             setError("")
-            const res = await timetableApi.getAll(selectDate)
+            const res = await timetableApi.getAll(selectDate, movieId)
             setTimeList(res)
         } catch (error) {
             catchErrors(error, setError)
@@ -35,24 +39,50 @@ const TimeTable = () => {
         }
     }
 
+    function handleClick(time) {
+        const date = new Date(time.start_time)
+        let hours = date.getHours()
+        let mins = date.getMinutes()
+
+        if (hours <= 9) hours = '0' + hours
+        if (mins <= 9) mins = '0' + mins
+
+        setTicketInfo({
+            ...ticketInfo,
+            timetableId: time.id,
+            time: time.date.split('T')[0] + " " + hours + ":" + mins,
+            selectedTheater: time.theater.theaterName
+        })
+    }
+
     return (
-        <div className="col-12 col-lg-6 ms-lg-1 mb-5">
+        <>
             <HorizontalCalender selectDate={selectDate} setSelectDate={setSelectDate} />
             {timeList.length !== 0 ?
                 timeList.map(el => <div className="mt-4">
-                    <h5 className="mb-0">{el.theaterName} 관 / <p className="d-inline fs-6 mb-0">{el.theatertype.theaterTypeName}</p></h5>
-                    {el.timetable.map(time => <div className="d-inline-flex flex-column m-2">
-                        <div className="d-flex justify-content-end">
-                            <button type="button" className={`btn btn-dark btn-sm shadow-none ${styles.customBtn}`} onClick={() => deleteTime(time.id)}>X</button>
-                        </div>
-                        <div className="card">
-                            <div className="card-body py-1">{moment(time.start_time).format('HH:mm')} ~ {moment(time.end_time).format('HH:mm')}</div>
-                            <div className="card-footer text-center py-1">{time.title}</div>
+                    <h5 className="mb-0">{el.theaterName} 관 / <p className="d-inline fs-6 mb-0">{el.theaterTypeName}</p></h5>
+                    {el.timetable.map(time => {
+                        console.log("timetable==",time)
+                        if (ticketInfo)
+                            return <div className="d-inline-flex m-2">
+                                <div className={`card text-dark ${styles.cursor}`} onClick={() => handleClick(time)}>
+                                    <div className="card-body py-1">{moment(time.start_time).format('HH:mm')} ~ {moment(time.end_time).format('HH:mm')}</div>
+                                    <div className="card-footer text-center py-1">{time.theater.rows * time.theater.columns - time.reservations} / {time.theater.rows * time.theater.columns}</div>
+                                </div>
+                            </div>
+                        else return <div className="d-inline-flex flex-column m-2">
+                            <div className="d-flex justify-content-end">
+                                <button type="button" className={`btn btn-dark btn-sm shadow-none ${styles.customBtn}`} onClick={() => deleteTime(time.id)}>X</button>
+                            </div>
+                            <div className="card">
+                                <div className="card-body py-1">{moment(time.start_time).format('HH:mm')} ~ {moment(time.end_time).format('HH:mm')}</div>
+                                <div className="card-footer text-center py-1">{time.title}</div>
+                            </div>
                         </div>
-                    </div>)}
+                    })}
                 </div>)
                 : <p className="text-center mt-5 mb-0">서버에 저장되어 있는 상영시간표가 존재하지 않습니다.<br />아래의 양식을 작성해 새로운 상영시간표를 등록해주세요.</p>}
-        </div>
+        </>
     )
 }
 

client/src/components/Admin/TimeTableEdit.js

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

client/src/components/TicketingTimeTable/TicketingTimeTable.js

-const TicketingTimeTable = ({ ticketInfo }) => {
+import TimeTable from "../Admin/TimeTable";
+
+const TicketingTimeTable = ({ ticketInfo, setTicketInfo }) => {
 
     return (
-        <div className="text-center" style={{ color: "white" }}>
+        <div style={{ color: "white" }}>
             {ticketInfo.movieId && ticketInfo.cinema
-                ? <div>{ticketInfo.movieId} {ticketInfo.cinema}</div>
-                : <div>영화와 극장을 모두 선택해주세요.</div>}
+                ? <TimeTable ticketInfo={ticketInfo} setTicketInfo={setTicketInfo} />
+                : <div className="text-center">영화와 극장을 모두 선택해주세요.</div>}
         </div>
     )
 }

client/src/pages/TicketingPage.js

@@ -12,8 +12,8 @@ const TicketingPage = ({ location }) => {
     const [ticketInfo, setTicketInfo] = useState({
         ...location.state,
         cinema: "",
-        selectedTheater: 1,
-        time: "2021/07/21 10:00"
+        selectedTheater: "",
+        time: ""
     })
     const [cinemaInfo, setCinemaInfo] = useState({})
     const [movieInfo, setMovieInfo] = useState()
@@ -23,10 +23,6 @@ const TicketingPage = ({ location }) => {
         getCinemaInfo()
     }, [])
 
-    useEffect(() => {
-        getCinemaInfo()
-    }, [])
-
     useEffect(() => {
         getMovieInfo()
     }, [ticketInfo])
@@ -70,7 +66,7 @@ const TicketingPage = ({ location }) => {
                 </div>
                 <div className="col-sm-5 mb-4 ">
                     <h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>시간표</h3>
-                    <TicketingTimeTable ticketInfo={ticketInfo} cinemaInfo={cinemaInfo} />
+                    <TicketingTimeTable ticketInfo={ticketInfo} setTicketInfo={setTicketInfo} />
                 </div>
             </div>
             <div className="row p-3" style={{ backgroundColor: "#252525" }}>
@@ -86,7 +82,7 @@ const TicketingPage = ({ location }) => {
                             <li>영화: {movieInfo.title}</li>
                             <li>극장: {ticketInfo.cinema}</li>
                             <li>일시: {ticketInfo.time}</li>
-                            <li>상영관: {ticketInfo.selectedTheater}</li>
+                            <li>상영관: {(ticketInfo.selectedTheater !== "") ? ticketInfo.selectedTheater + " 관" : ""}</li>
                         </ul>
                         : <div></div>}
                 </div>

server/controllers/timetable.controller.js

-import { TimeTable, Theater, TheaterType } from "../db/index.js";
-import moment from 'moment';
+import { TimeTable, Theater, TheaterType, Reservation } from "../db/index.js";
 import sequelize from 'sequelize'
 const { Op } = sequelize
 
 const getAll = async (req, res) => {
     try {
-        const { when } = req.query
+        const { when, movieId } = req.query
         const selectDate = new Date(when)
+        let findAll = null
         const theaterArr = []
-        const findAll = await TimeTable.findAll({ where: { date: selectDate }, attributes: { exclude: ['createdAt', 'updatedAt'] }, order: [["theater", "ASC"], ["start_time", "ASC"]] })
-        findAll.forEach(element => {
-            if (!theaterArr.includes(element.theater)) theaterArr.push(element.theater)
+        findAll = movieId ? await TimeTable.findAll({ where: { date: selectDate, movieId: movieId }, attributes: { exclude: ['createdAt', 'updatedAt'] }, order: [["theaterId", "ASC"], ["start_time", "ASC"]], include: [Theater] })
+            : await TimeTable.findAll({ where: { date: selectDate }, attributes: { exclude: ['createdAt', 'updatedAt'] }, order: [["theaterId", "ASC"], ["start_time", "ASC"]], include: [Theater] })
+        findAll.forEach(async (element) => {
+            if (!theaterArr.includes(element.theaterId)) theaterArr.push(element.theaterId)
+            if (movieId) {
+                const { count } = await Reservation.findAndCountAll({ where: { movieId: movieId, timetableId: element.id } })
+                element.dataValues.reservations = count
+            }
         })
         const findTheater = await Theater.findAll({ where: { id: theaterArr }, attributes: { exclude: ['createdAt', 'updatedAt'] }, include: [TheaterType], order: [['theaterName']] })
         findTheater.forEach(el => {
+            el.dataValues.theaterTypeName = el.dataValues.theatertype.dataValues.theaterTypeName
             const arr = findAll.filter(timetable => {
-                if (el.id === timetable.theater) return timetable.dataValues
+                if (el.id === timetable.theaterId) return timetable.dataValues
             })
             el.dataValues.timetable = arr
         })
@@ -35,7 +41,7 @@ const submit = async (req, res) => {
                 const isTimeTable = await TimeTable.findAll({
                     where: {
                         [Op.and]: [
-                            { theater: theater.theater },
+                            { theaterId: theater.theater },
                             {
                                 [Op.or]: [
                                     { [Op.and]: [{ start_time: { [Op.gt]: startTime } }, { end_time: { [Op.lte]: endTime } }] },
@@ -62,7 +68,7 @@ const submit = async (req, res) => {
                     if ('06:00' <= theater.start && theater.start < '10:00') partTime = "morning"
                     else if ('00:00' <= theater.start < '06:00') partTime = "night"
                     else partTime = "day"
-                    await TimeTable.create({ theater: theater.theater, movieId, title, release_date, date: curDate, start_time: getTime(theater.start), end_time: getTime(theater.start, runtime), partTime: partTime, week: (day === 0 || day === 6) ? "weekend" : "weekdays" })
+                    await TimeTable.create({ theaterId: theater.theater, movieId, title, release_date, date: curDate, start_time: getTime(theater.start), end_time: getTime(theater.start, runtime), partTime: partTime, week: (day === 0 || day === 6) ? "weekend" : "weekdays" })
                 })
             )
             curDate.setDate(curDate.getDate() + 1)

server/db/index.js

@@ -50,6 +50,8 @@ Theater.belongsTo(TheaterType, { onDelete: 'CASCADE' });
 
 TicketFee.belongsTo(TheaterType, { onDelete: 'CASCADE' });
 
+TimeTable.belongsTo(Theater);
+
 Reservation.belongsTo(Theater);
 Reservation.belongsTo(TimeTable);
 

server/models/timetable.model.js

@@ -11,9 +11,6 @@ const TimeTableModel = (sequelize) => {
                 primaryKey: true,
                 autoIncrement: true,
             },
-            theater: {
-                type: DataTypes.INTEGER,
-            },
             movieId: {
                 type: DataTypes.INTEGER,
             },