Skip to content

GitLab

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

ticketing-seat

parent 01ce1fdf
Hide whitespace changes
Inline Side-by-side
client/src/components/TicketingMovie/TicketingMovie.js
View file @ fa2af12b
...@@ -6,7 +6,6 @@ const TicketingMovie = (props) => { ...@@ -6,7 +6,6 @@ const TicketingMovie = (props) => {
const [movieList, setMovieList] = useState([]) const [movieList, setMovieList] = useState([])
useEffect(() => { useEffect(() => {
getMovieList() getMovieList()
}, []) }, [])
async function getMovieList() { async function getMovieList() {
...@@ -20,7 +19,7 @@ const TicketingMovie = (props) => { ...@@ -20,7 +19,7 @@ const TicketingMovie = (props) => {
function handleClick(event) { function handleClick(event) {
console.log(event.target.name) console.log(event.target.name)
props.setTicketInfo({ movieId: event.target.name }) props.setTicketInfo({...props.ticketInfo, movieId: event.target.name })
} }
return ( return (
......
client/src/components/Video.js 0 → 100644
View file @ fa2af12b
import { useEffect, useState } from 'react'
import movieApi from '../apis/movie.api.js'
const Video = (props) => {
const [videoUrls, setVideoUrls] = useState([])
useEffect(() => {
getVideos()
}, [])
async function getVideos() {
try {
const data = await movieApi.getVideosfromTM(props.movieId)
setVideoUrls(data)
} catch (error) {
console.log(error)
}
}
return (
<div>
{videoUrls.length > 0
? videoUrls.map(el => (
<div className="my-5">
<p>{el.name}</p>
<div class="ratio ratio-16x9">
<iframe src={`https://www.youtube.com/embed/${el.key}`} title="YouTube video" allowfullscreen></iframe>
</div>
</div>
))
: <div>예고편 정보가 존재하지 않습니다.</div>}
</div>
)
}
export default Video
\ No newline at end of file
client/src/pages/MovieListPage.js
View file @ fa2af12b
import React, { useState } from 'react' import { useState } from 'react'
import MovieChart from '../components/MovieChart/MovieChart' import MovieChart from '../components/MovieChart/MovieChart'
import MovieComming from '../components/MovieComming/MovieComming' import MovieComming from '../components/MovieComming/MovieComming'
const MovieListPage = () => { const MovieListPage = () => {
......
client/src/pages/MoviePage.js
View file @ fa2af12b
import React, { useState } from 'react'; import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import movieApi from '../apis/movie.api.js'
import Video from '../components/Video.js'
const MoviePage = ({ location }) => { const MoviePage = ({ location }) => {
const [movieInfo, setMovieInfo] = useState({ const [movieInfo, setMovieInfo] = useState({
...location.state, ...location.state,
stillCuts: ["/images/movie_image_black_stillcut1.jpg", "/images/movie_image_black_stillcut2.jpg", "/images/movie_image_black_stillcut3.jpg"], stillCuts: [],
production: "케이트 쇼트랜드", cast: "",
casts: ["Scarlett Johansson", "Florence Pugh", "David Harbour", "Rachel Weisz"], director: "",
genres: ["액션", "모험", "스릴러"], genres: [],
attendance: 585954 attendance: ""
}) })
const [state, setState] = useState(0) const [state, setState] = useState(0)
useEffect(() => {
getImagesAndCredits()
}, [])
async function getImagesAndCredits() {
try {
const images = await movieApi.getImagesfromTM(movieInfo.id)
const still = images.backdrops.map(el => el.file_path)
const credits = await movieApi.getCreditsfromTM(movieInfo.id)
const castsInfo = credits.cast.map(el => el.name)
const casts = castsInfo.reduce((acc, cur, idx) => {
if (idx !== 0) return acc + ', ' + cur
else return acc + cur
},"")
console.log(castsInfo)
const directorsInfo = await credits.crew.filter(element => element.job === "Director")
const directors = directorsInfo.reduce((acc, cur, idx) => {
if (idx !== 0) return acc + ', ' + cur.name
else return acc + cur.name
},"")
console.log("directorInfo=",directorsInfo)
setMovieInfo({
...movieInfo,
stillCuts: still,
cast: casts,
director: directors
})
} catch (error) {
console.log(error)
}
}
return ( return (
<div className="container" style={{ backgroundColor: "black" }}> <div className="container" style={{ backgroundColor: "black" }}>
{console.log(movieInfo)} {console.log(movieInfo)}
<div id="carouselExampleInterval" className="carousel slide py-4" data-bs-ride="carousel"> <div id="carouselExampleInterval" className="carousel slide py-4" data-bs-ride="carousel">
<div className="carousel-inner"> <div className="carousel-inner">
{movieInfo.stillCuts.length > 0 {movieInfo.stillCuts.length > 0
? movieInfo.stillCuts.map((image, index) => ( ? movieInfo.stillCuts.map((imageUrl, index) => (
<div className={`carousel-item ${index === 0 ? "active" : ""}`} > <div className={`carousel-item ${index === 0 ? "active" : ""}`} >
<img src={image} className="d-block w-100" alt="스틸컷" /> <img src={`https://image.tmdb.org/t/p/original${imageUrl}`} className="d-block w-100" alt="스틸컷" />
</div> </div>
)) ))
: <div className="carousel-item"> : <div className="carousel-item">
<img src="..." className="d-block w-100" alt="등록된 스틸컷이 없습니다." /> {console.log("스틸컷 불러오기 오류")}
<img src="/images/none.jpg" className="d-block w-100" alt="등록된 스틸컷이 없습니다." />
</div>} </div>}
</div> </div>
<button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev"> <button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
...@@ -37,26 +73,26 @@ const MoviePage = ({ location }) => { ...@@ -37,26 +73,26 @@ const MoviePage = ({ location }) => {
</button> </button>
</div> </div>
<div className="row justify-content-center py-5"> <div className="row justify-content-center py-5">
<div className="col-sm-3"> <div className="col-sm-3 mb-5">
<img className="img-thumbnail" src={movieInfo.poster} alt="영화포스터" /> <img className="img-thumbnail" src={`https://image.tmdb.org/t/p/original${movieInfo.poster_path}`} alt="영화포스터" />
</div> </div>
<div className="col-sm-6 p-4" style={{ color: "white" }}> <div className="col-sm-6 " style={{ color: "white" }}>
<h1 className="py-3">{movieInfo.title}</h1> <h1 className="pb-3">{movieInfo.title}</h1>
<p>예매율: {movieInfo.popularity}% 누적관객수: {movieInfo.attendance}명</p> <p>예매율: 0% 누적관객수: {movieInfo.attendance}명</p>
<p>감독: {movieInfo.production}</p> <p>감독: {movieInfo.director}</p>
<p>출연: {movieInfo.casts.map(e => e)}</p> <p>출연: {movieInfo.cast}</p>
<p>장르: {movieInfo.genres.map(e => e)}</p> <p>장르: {movieInfo.genres.map(e => e)}</p>
<p>개봉일:{movieInfo.release_date}</p> <p>개봉일:{movieInfo.release_date}</p>
<Link to={{ <div className="text-end">
<Link to={{
pathname: `/ticket`, pathname: `/ticket`,
state: { state: {
id: movieInfo.id, movieId: movieInfo.id,
poster: movieInfo.poster,
title: movieInfo.title,
} }
}}> }}>
<button className="btn btn-warning">예매하기</button> <button className="btn btn-warning">예매하기</button>
</Link> </Link>
</div>
</div> </div>
</div> </div>
<div className=""> <div className="">
...@@ -65,7 +101,7 @@ const MoviePage = ({ location }) => { ...@@ -65,7 +101,7 @@ const MoviePage = ({ location }) => {
<button className="nav-link active mx-auto" style={{ color: "white", borderColor: "black", backgroundColor: "black", borderBottom: state === 0 ? "3px solid" : "none", borderBottomColor: state === 0 ? "#FEDC00" : "black" }} id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true" onClick={() => setState(0)}>상세정보</button> <button className="nav-link active mx-auto" style={{ color: "white", borderColor: "black", backgroundColor: "black", borderBottom: state === 0 ? "3px solid" : "none", borderBottomColor: state === 0 ? "#FEDC00" : "black" }} id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true" onClick={() => setState(0)}>상세정보</button>
</li> </li>
<li className="nav-item" role="presentation"> <li className="nav-item" role="presentation">
<button className="nav-link mx-auto" style={{ color: "white", borderColor: "black", backgroundColor: "black", borderBottom: state === 1 ? "3px solid" : "none", borderBottomColor: state === 1 ? "#FEDC00" : "black" }} id="stillcut-tab" data-bs-toggle="tab" data-bs-target="#stillcut" type="button" role="tab" aria-controls="stillcut" aria-selected="false" onClick={() => setState(1)}>예고편/스틸컷</button> <button className="nav-link mx-auto" style={{ color: "white", borderColor: "black", backgroundColor: "black", borderBottom: state === 1 ? "3px solid" : "none", borderBottomColor: state === 1 ? "#FEDC00" : "black" }} id="stillcut-tab" data-bs-toggle="tab" data-bs-target="#stillcut" type="button" role="tab" aria-controls="stillcut" aria-selected="false" onClick={() => setState(1)}>예고편</button>
</li> </li>
<li className="nav-item" role="presentation"> <li className="nav-item" role="presentation">
<button className="nav-link mx-auto" style={{ color: "white", borderColor: "black", backgroundColor: "black", borderBottom: state === 2 ? "3px solid" : "none", borderBottomColor: state === 2 ? "#FEDC00" : "black" }} id="review-tab" data-bs-toggle="tab" data-bs-target="#review" type="button" role="tab" aria-controls="review" aria-selected="false" onClick={() => setState(2)}>관람평</button> <button className="nav-link mx-auto" style={{ color: "white", borderColor: "black", backgroundColor: "black", borderBottom: state === 2 ? "3px solid" : "none", borderBottomColor: state === 2 ? "#FEDC00" : "black" }} id="review-tab" data-bs-toggle="tab" data-bs-target="#review" type="button" role="tab" aria-controls="review" aria-selected="false" onClick={() => setState(2)}>관람평</button>
...@@ -77,7 +113,7 @@ const MoviePage = ({ location }) => { ...@@ -77,7 +113,7 @@ const MoviePage = ({ location }) => {
<div>{movieInfo.overview}</div> <div>{movieInfo.overview}</div>
</div> </div>
<div className="tab-pane fade" id="stillcut" role="tabpanel" aria-labelledby="stillcut-tab"> <div className="tab-pane fade" id="stillcut" role="tabpanel" aria-labelledby="stillcut-tab">
<div>예고편/스틸컷</div> <Video movieId={movieInfo.id} />
</div> </div>
<div className="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab"> <div className="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
<div>관람평</div> <div>관람평</div>
......
client/src/pages/TicketingPage.js
View file @ fa2af12b
...@@ -25,7 +25,6 @@ const TicketingPage = ({ location }) => { ...@@ -25,7 +25,6 @@ const TicketingPage = ({ location }) => {
async function getMovieInfo() { async function getMovieInfo() {
try { try {
const data = await movieApi.getMovieInfofromTM(ticketInfo.movieId) const data = await movieApi.getMovieInfofromTM(ticketInfo.movieId)
console.log(data)
setMovieInfo(data) setMovieInfo(data)
} catch (error) { } catch (error) {
console.log(error) console.log(error)
...@@ -35,7 +34,7 @@ const TicketingPage = ({ location }) => { ...@@ -35,7 +34,7 @@ const TicketingPage = ({ location }) => {
return ( return (
<div className="container" style={{ backgroundColor: "black" }}> <div className="container" style={{ backgroundColor: "black" }}>
<div> <div>
{console.log(location.state)} {console.log(ticketInfo)}
</div> </div>
<div className="row justify-content-center my-5"> <div className="row justify-content-center my-5">
<div className="col-sm-4 mb-4 "> <div className="col-sm-4 mb-4 ">
...@@ -73,8 +72,8 @@ const TicketingPage = ({ location }) => { ...@@ -73,8 +72,8 @@ const TicketingPage = ({ location }) => {
{movieInfo && ticketInfo.theater {movieInfo && ticketInfo.theater
? ?
<Link to={{ <Link to={{
pathname: `/seat`, pathname: `/ticket/seat`,
state: {} state: {...ticketInfo,...movieInfo}
}}> }}>
<img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" alt="예매하기" /> <img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" alt="예매하기" />
</Link> </Link>
......
client/src/pages/TicketingSeatPage.js 0 → 100644
View file @ fa2af12b
import { Link } from 'react-router-dom'
import { useState } from 'react'
import CountButton from '../components/CountButton'
import SeatTable from '../components/SeatTable/SeatTable'
const TicketingSeatPage = ({ location }) => {
const [ticketInfo, setTicketInfo] = useState({ ...location.state })
const [selectedSeats, setSelectedSeats] = useState([])
const [count, setCount] = useState({
adult: 0,
teenager: 0,
elderly: 0
})
const allSeat = { row: 6, col: 10 }
return (
<div className="container" style={{ color: "white" }}>
{console.log(ticketInfo)}
<div className="row justify-content-center my-5">
<div className="col-sm-4 mb-3 ">
<h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>좌석선택</h3>
</div>
</div>
<div className="row justify-content-center my-3">
<div className="col-sm-6 mb-4 text-center">
<ul className="mr-2" style={{ listStyle: 'none' }}>
<li>
<span className="">일반</span>
<CountButton name="adult" count={count} setCount={setCount} />
</li>
<li>
<span className="">청소년</span>
<CountButton name="teenager" count={count} setCount={setCount} />
</li>
<li>
<span className="">경로우대</span>
<CountButton name="elderly" count={count} setCount={setCount} />
</li>
</ul>
</div>
<div className="col-sm-6 mb-4 p-2 text-center" style={{ backgroundColor: '#252525' }}>
<div>{ticketInfo.theater} | 3관</div>
<div>{ticketInfo.title}</div>
<div>2021/07/21 10:00 ~ 11:30</div>
</div>
</div>
<div className="row justify-content-center border p-5 ">
<div className="col-sm-8">
<SeatTable count={count} setSelectedSeats={setSelectedSeats} selectedSeats={selectedSeats} allSeat={allSeat} />
</div>
<div className="col-sm-4 mt-5">
<p>선택됨</p>
<p>선택불가</p>
</div>
</div>
<div className="row p-3 my-5" style={{ backgroundColor: "#252525" }}>
<div className="col-sm-3 border-end text-center">
{ticketInfo
? <img style={{ maxHeight: "10rem" }} src={`https://image.tmdb.org/t/p/original${ticketInfo.poster_path}`} alt="영화포스터" />
: <div className="mb-2" style={{ color: "white" }}>영화선택</div>}
</div>
<div className="col-sm-6 border-end" style={{ color: "white" }}>
<div className="mb-2 text-center">극장선택</div>
{ticketInfo
? <ul>
<li>영화: {ticketInfo.title}</li>
<li>극장: {ticketInfo.theater}</li>
<li>일시: 2021/07/21 10:00 </li>
<li>상영관: 3관</li>
<li>좌석: {selectedSeats}</li>
</ul>
: <div></div>}
</div>
<div className="col-sm-3 text-center">
<div className="mb-2" style={{ color: "white" }}>결제하기</div>
{ticketInfo
?
<Link to={{
pathname: `/payment`,
state: { }
}}>
<img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" alt="예매하기" />
</Link>
:
<img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" alt="예매하기" />
}
</div>
</div>
</div>
)
}
export default TicketingSeatPage
\ No newline at end of file
server/controllers/movie.controller.js
View file @ fa2af12b
...@@ -4,14 +4,15 @@ const { Op } = sequelize ...@@ -4,14 +4,15 @@ const { Op } = sequelize
import { Movie } from '../db/index.js' import { Movie } from '../db/index.js'
const getMovieByCategory = async (req, res, next, category) => { const getMovieByCategory = async (req, res, next, category) => {
const responsePopular = await axios.get(`https://api.themoviedb.org/3/movie/${category}?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR&page=1`)
const TMDBmovies = responsePopular.data.results
const TMDBmovieIds = []
TMDBmovies.forEach(element => {
TMDBmovieIds.push(element.id)
});
console.log(TMDBmovieIds)
try { try {
const responsePopular = await axios.get(`https://api.themoviedb.org/3/movie/${category}?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR`)
const TMDBmovies = responsePopular.data.results
console.log(TMDBmovies)
const TMDBmovieIds = []
TMDBmovies.forEach(element => {
TMDBmovieIds.push(element.id)
});
// console.log(TMDBmovieIds)
const responseAfterCompare = await Movie.findAll({ const responseAfterCompare = await Movie.findAll({
where: { where: {
movieId: { movieId: {
...@@ -23,7 +24,7 @@ const getMovieByCategory = async (req, res, next, category) => { ...@@ -23,7 +24,7 @@ const getMovieByCategory = async (req, res, next, category) => {
responseAfterCompare.forEach(el => { responseAfterCompare.forEach(el => {
movieIds.push(el.movieId) movieIds.push(el.movieId)
}) })
console.log('movieIds=', movieIds) // console.log('movieIds=', movieIds)
req.movieIds = movieIds req.movieIds = movieIds
next() next()
} catch (error) { } catch (error) {
......
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