collection 포스터랑 비디오영상

client/src/components/BoxOffice/BoxOffice.js

 import { useState, useEffect } from "react"
-import movieApi from '../../apis/movie.api.js'
 
-const BoxOffice = () => {
-    const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState([])
-    useEffect(() => {
-        getTMDB_TopRated()
-    }, [])
-
-    async function getTMDB_TopRated() {
-        const category = "popular"
-        try {
-            const data = await movieApi.getListByCategoryfromDB(category)
-            console.log(data)
-            setTMDB_TopRated_Data([...data])
-        } catch (error) {
-            console.log(error)
-        }
-    }
+const BoxOffice = ({TMDB_TopRated_Data}) => {
 
     return (
         <div className="container text-center my-3">

client/src/components/Collection.js

-const Collection = () => {
+import { useEffect, useState } from 'react'
+import movieApi from '../apis/movie.api.js'
+import catchErrors from '../utils/catchErrors.js'
+
+const Collection = ({ TMDB_TopRated_Data }) => {
+    const [videoUrls, setVideoUrls] = useState([])
+    const [error, setError] = useState("")
+
+    useEffect(() => {
+        if (TMDB_TopRated_Data.length > 0) {
+            console.log("야이쒸===", TMDB_TopRated_Data)
+            getVideos()
+        }
+    }, [TMDB_TopRated_Data])
+
+    async function getVideos() {
+        try {
+            const data = await movieApi.getVideosfromTM(TMDB_TopRated_Data[0].id)
+            setVideoUrls(data)
+        } catch (error) {
+            // catchErrors(error, setError)
+            console.log(error)
+        }
+    }
     return (
         <>
             <h2 className="fw-bold text-white text-center my-5">Movie Collection</h2>
-            <div className="d-flex container justify-content-between" style={{ marginBottom: "8em" }}>
-                <div className="col-md-8 col-12 bg-white" style={{ height: "20em" }}></div>
-                <img className="col-md-3 bg-white" style={{ height: "20em" }} />
+            <div className="row justify-content-sm-center" style={{ marginBottom: "8rem" }}>
+                <div className="col-md-8">
+                    {videoUrls.length > 0
+                        ?
+                        <div className="">
+                            <div className="ratio ratio-16x9">
+                                <iframe src={`https://www.youtube.com/embed/${videoUrls[0].key}`} title="YouTube video" allowfullscreen></iframe>
+                            </div>
+                        </div>
+
+                        : <div className="text-center">예고편 정보가 존재하지 않습니다.</div>}
+                </div>
+                {TMDB_TopRated_Data.length > 0
+                    ?
+                    <img src={`https://image.tmdb.org/t/p/original${TMDB_TopRated_Data[0].poster_path}`} className="col-md-3 bg-black" />
+                    :
+                    <div className="col-md-3"></div>
+                }
             </div>
         </>
     )

client/src/components/MovieCard/MovieCard.js

@@ -25,7 +25,7 @@ const MovieCard = ({ list }) => {
                     <div className="card-body text-light">
                         {movie.adult? <image src="/images/19.png" /> :<></>}
                         <div className={`h4 card-title text-center ${styles.title}`}>{movie.title}</div>
-                        <p className={`card-text text-center ${styles.txt}`}>예매율: {Math.round((movie.ticket_sales/movie.totalReservationRate.totalReservationRate)*100)}% | {movie.runtime}분</p>
+                        <p className={`card-text text-center ${styles.txt}`}>예매율: {Math.round((movie.ticket_sales/(movie.totalReservationRate.totalReservationRate||1))*100)}% | {movie.runtime}분</p>
                         <p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
                     </div>
                     <Link to={{

client/src/components/MovieChart.js

@@ -30,7 +30,7 @@ const MovieChart = () => {
                 <div className="row row-cols-1 row-cols-md-4 g-4">
                     <MovieCard list={TMDB_TopRated_Data} />
                 </div>
-                : <h2 className="text-white text-center p-5">영화정보를 로딩중입니다!</h2>
+                : <h2 className="text-white text-center p-5"> </h2>
             }
         </>
     )

client/src/components/MovieComing.js

@@ -56,7 +56,7 @@ const MovieComing = () => {
                         </div>
                     ))}
                 </div>
-                : <h2 className="text-white text-center p-5">영화정보를 로딩중입니다!</h2>
+                : <h2 className="text-white text-center p-5"> </h2>
             }
         </>
     )

client/src/pages/HomePage.js

-
+import { useState, useEffect } from "react"
 import BoxOffice from "../components/BoxOffice";
 import Collection from "../components/Collection";
 import Footer from "../components/Footer";
+import movieApi from '../apis/movie.api'
+import catchErrors from '../utils/catchErrors.js'
 
 const HomePage = () => {
+    const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState([])
+    const [error, setError] = useState("")
+    const category = "popular"
+
+    useEffect(() => {
+        getTMDB_TopRated()
+    }, [])
+
+    async function getTMDB_TopRated() {
+        try {
+            setError("")
+            const data = await movieApi.getListByCategoryfromDB(category)
+            console.log("sdad==", data)
+            data.sort(function (a, b) {
+                return b.popularity - a.popularity
+            })
+            setTMDB_TopRated_Data([...data])
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
     return (
         <>
-            <BoxOffice />
-            <Collection />
+            <BoxOffice TMDB_TopRated_Data={TMDB_TopRated_Data}  />
+            <Collection  TMDB_TopRated_Data={TMDB_TopRated_Data} />
             <Footer />
         </>
     )

client/src/pages/MoviePage.js

@@ -68,7 +68,7 @@ const MoviePage = ({ location }) => {
                 </div>
                 <div className="col-sm-6" style={{ color: "white" }}>
                     <h1 className="pb-3">{movieInfo.title}</h1>
-                    <p>예매율:{Math.round((movieInfo.ticket_sales / movieInfo.totalReservationRate.totalReservationRate) * 100)}% 누적관객수: {movieInfo.ticket_sales}명</p>
+                    <p>예매율:{Math.round((movieInfo.ticket_sales / (movieInfo.totalReservationRate.totalReservationRate||1)) * 100)}% 누적관객수: {movieInfo.ticket_sales}명</p>
                     {movieInfo.director || movieInfo.cast
                         ?
                         <>

server/controllers/email.controller.js

@@ -4,7 +4,7 @@ const SendMail = async (req, res) => {
   // const { email, title, cinema, theater, time, name, nickname } = req.body.userData
   const { email, name, nickname } = req.body.userData
   const {title, cinema, time, theater} = req.body
-  const selectedSeats = req.body.reservationData.map(el => String.fromCharCode(el.row + 65) + el.col)
+  const selectedSeats = req.body.reservationData.map(el => String.fromCharCode(el.row + 64) + el.col)
   const sendMail = async (email, title, cinema, theater, time, name, selectedSeats, nickname) => {
     // 메일을 전달해줄 객체
     const transporter = nodemailer.createTransport({

server/controllers/timetable.controller.js

@@ -62,7 +62,7 @@ const submit = async (req, res) => {
             await Promise.all(
                 theater.map(async (theater) => {
                     let partTime = ""
-                    if ('06:00' <= theater.start < '10:00') partTime = "morning"
+                    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" })

server/index.js

@@ -10,7 +10,7 @@ dotenv.config({
 });
 
 sequelize
-    .sync({ force: false })
+    .sync({ force:  false})
     .then(async () => {
         await Promise.all(
             Object.keys(ROLE_NAME).map((name) => {