Commit ddddae5b authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

collection 포스터랑 비디오영상

parent e81c36c5
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">
......
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>
</>
)
......
......@@ -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={{
......
......@@ -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>
}
</>
)
......
......@@ -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>
}
</>
)
......
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 />
</>
)
......
......@@ -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
?
<>
......
......@@ -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({
......
......@@ -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" })
......
......@@ -10,7 +10,7 @@ dotenv.config({
});
sequelize
.sync({ force: false })
.sync({ force: false})
.then(async () => {
await Promise.all(
Object.keys(ROLE_NAME).map((name) => {
......
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