Skip to content

GitLab

Commit 711c9c42 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

0719ticketing

parent c71167c9
Hide whitespace changes
Inline Side-by-side
client/src/apis/movie.api.js
View file @ 711c9c42
import axios from "axios"; import axios from "axios";
import { baseUrl, TMDBUrl } from "../utils/baseUrl"; import {baseUrl,TMDBUrl} from "../utils/baseUrl.js";
const getUpcomingfromTM = async () => { const getUpcomingfromTM = async () => {
const { data } = await axios.get(`${TMDBUrl}/upcoming?api_key=${process.env.REACT_APP_TMDB_API_KEY}&language=ko-KR`) const { data } = await axios.get(`${TMDBUrl}/upcoming?api_key=${process.env.REACT_APP_TMDB_API_KEY}&language=ko-KR`)
......
client/src/components/BoxOffice/BoxOffice.js
View file @ 711c9c42
import axios from "axios" import axios from "axios"
<<<<<<< HEAD import {baseUrl} from '../../utils/baseUrl.js'
import baseUrl from '../../utils/baseUrl'
import React, { useState, useEffect } from "react" import React, { useState, useEffect } from "react"
import "./box-office.module.scss" // import styles from "./box-office.module.scss"
// import "./mystyle.css"
=======
import { baseUrl } from '../../utils/baseUrl'
import React, { useState, useEffect } from "react"
import styles from "./box-office.module.scss"
>>>>>>> kimpen
const BoxOffice = () => { const BoxOffice = () => {
const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState() const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState()
......
client/src/components/MovieChart/MovieChart.js
View file @ 711c9c42
import React,{useState, useEffect} from 'react' import React, { useState, useEffect } from 'react'
import axios from 'axios' import axios from 'axios'
import baseUrl from '../../utils/baseUrl' import {baseUrl} from '../../utils/baseUrl.js'
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import styles from "./movieChart.module.scss" import styles from "./movieChart.module.scss"
...@@ -11,8 +11,9 @@ const MovieChart = () => { ...@@ -11,8 +11,9 @@ const MovieChart = () => {
}, []) }, [])
async function getTMDB_TopRated() { async function getTMDB_TopRated() {
const category = "popular"
try { try {
const response = await axios.get(`${baseUrl}/api/movie`) const response = await axios.get(`${baseUrl}/api/movie/showmovie/${category}`)
console.log(response.data) console.log(response.data)
setTMDB_TopRated_Data([...response.data]) setTMDB_TopRated_Data([...response.data])
} catch (error) { } catch (error) {
...@@ -28,9 +29,7 @@ const MovieChart = () => { ...@@ -28,9 +29,7 @@ const MovieChart = () => {
<div className="card h-100" style={{ backgroundColor: "black" }}> <div className="card h-100" style={{ backgroundColor: "black" }}>
<Link to={{ <Link to={{
pathname: `/movie/${movie.id}`, pathname: `/movie/${movie.id}`,
state: { state: {...movie}
...movie
}
}} className={`${styles.layer}`} > }} className={`${styles.layer}`} >
<img src={`https://image.tmdb.org/t/p/original${movie.poster_path}`} className={`card-img-top rounded ${styles.poster}`} alt="Movie Poster" /> <img src={`https://image.tmdb.org/t/p/original${movie.poster_path}`} className={`card-img-top rounded ${styles.poster}`} alt="Movie Poster" />
<div className={`${styles.description}`}>{movie.overview}</div> <div className={`${styles.description}`}>{movie.overview}</div>
...@@ -40,7 +39,12 @@ const MovieChart = () => { ...@@ -40,7 +39,12 @@ const MovieChart = () => {
<p className="card-text text-center">예매율: {movie.ticket_sales}0% | {movie.runtime}분</p> <p className="card-text text-center">예매율: {movie.ticket_sales}0% | {movie.runtime}분</p>
<p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p> <p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
</div> </div>
<button className="btn btn-warning">예매하기</button> <Link to={{
pathname:`/ticket`,
state: {movieId:movie.id}
}}>
<button className="btn btn-warning">예매하기</button>
</Link>
</div> </div>
)) ))
: <div>영화정보를 로딩할 수 없습니다.</div> : <div>영화정보를 로딩할 수 없습니다.</div>
......
client/src/components/MovieComming/MovieComming.js
View file @ 711c9c42
...@@ -12,7 +12,7 @@ const MovieComming = () => { ...@@ -12,7 +12,7 @@ const MovieComming = () => {
async function getTMDB_UpComming() { async function getTMDB_UpComming() {
try { try {
const response = await axios.get(`${baseUrl}/api/movie/upcomming`) const response = await axios.get(`/api/movie/showmovie/upcomming`)
console.log(response.data) console.log(response.data)
setTMDB_UpComming_Data([...response.data]) setTMDB_UpComming_Data([...response.data])
} catch (error) { } catch (error) {
......
client/src/components/TicketingMovie/TicketingMovie.js
View file @ 711c9c42
import React,{useState} from 'react' import React, { useState, useEffect } from 'react'
import axios from 'axios'
import styles from "./ticketingMovie.module.scss" import styles from "./ticketingMovie.module.scss"
const TicketingMovie = () => { const TicketingMovie = (props) => {
const [movieList, setMovieList] = useState([])
const [state, setState] = useState(0) const [state, setState] = useState(0)
useEffect(() => {
getMovieList()
}, [])
async function getMovieList() {
try {
const response = await axios.get(`/api/movie/movielist`)
console.log(response.data)
setMovieList(response.data)
} catch (error) {
}
}
return ( return (
<div> <div className={``} >
<ul className="d-grid gap-2">
{movieList.length > 0
? movieList.map(movie => (
<li>
<button className={`${styles.btn}`} onClick={() => { props.setMovieInfo({ movieId: movie.id }) }}>
{movie.title}
</button>
</li>
))
: <div>영화정보를 불러올 수 없습니다.</div>}
</ul>
</div> </div>
) )
} }
......
client/src/components/TicketingMovie/ticketingMovie.module.scss
View file @ 711c9c42
.navBtn{ .btn {
color: "white"; background:black;
background-color: "black"; color:white;
border-color:"#FEDC00"; border:0;
border-top: "0"; &:focus{
border-left: "0"; background: white;
border-right: "0"; color: black;
border-bottom: "3px solid"; }
} }
.navBtnFocus{
color: "white";
background-color: "black";
border-color:"#FEDC00";
border-bottom: "0";
}
\ No newline at end of file
client/src/components/TicketingTheater.js deleted 100644 → 0
View file @ c71167c9
const TicketingTheater = () => {
return (
<>
</>
)
}
export default TicketingTheater
\ No newline at end of file
client/src/components/TicketingTheater/TicketingTheater.js 0 → 100644
View file @ 711c9c42
import React from 'react'
import styles from "./ticketingTheater.module.scss"
const TicketingTheater = (props) => {
return (
<div className={``} >
<div className="d-grid gap-2">
{props.theaterInfo.cinemaNum.length > 0
? props.theaterInfo.cinemaNum.map(num => (
<button className={`${styles.btn}`} onClick={()=>props.setTheaterInfo({...props.theaterInfo,selectedCinemaNum:num})}>{num}</button>
))
: <div>영화정보를 불러올 수 없습니다.</div>}
</div>
</div>
)
}
export default TicketingTheater
\ No newline at end of file
client/src/components/TicketingTheater/index.js 0 → 100644
View file @ 711c9c42
export { default } from './TicketingTheater'
\ No newline at end of file
client/src/components/TicketingTheater/ticketingTheater.module.scss 0 → 100644
View file @ 711c9c42
.btn {
background:black;
color:white;
border:0;
&:focus{
background: white;
color: black;
}
}
\ No newline at end of file
client/src/pages/TicketingPage.js
View file @ 711c9c42
import React from 'react' import React, { useState } from 'react'
import TicketingMovie from "../components/TicketingMovie/TicketingMovie" import TicketingMovie from "../components/TicketingMovie/TicketingMovie"
import TicketingTheater from "../components/TicketingTheater" import TicketingTheater from "../components/TicketingTheater/TicketingTheater"
import TicketingTimeTable from "../components/TicketingTimeTable" import TicketingTimeTable from "../components/TicketingTimeTable"
const TicketingPage = () => { const TicketingPage = (location) => {
// const [movieInfo, setMovieInfo] = useState(location)
const [movieInfo, setMovieInfo] = useState({ movieId: "497698" })
const [theaterInfo, setTheaterInfo] = useState({
theater: "Butter 조치원",
cinemaNum: [1, 2, 3, 4],
selectedCinemaNum:0
})
return ( return (
<div style={{ backgroundColor: "black" }}> <div className="container" style={{ backgroundColor: "black" }}>
<div className="row justify-content-center my-5"> <div className="row justify-content-center my-5">
<div className="col-sm-4"> <div className="col-sm-4">
<h2 className="py-2 text-white text-center" style={{borderTop:"3px solid #FEDC00", borderBottom:"3px solid #FEDC00"}}>영화</h2> <h2 className="py-2 text-white text-center" style={{ border: "3px solid #FEDC00", borderBottom: "3px solid #FEDC00" }}>영화</h2>
<TicketingMovie /> <TicketingMovie movieInfo={movieInfo} setMovieInfo={setMovieInfo} />
</div> </div>
<div className="col-sm-4"> <div className="col-sm-4">
<h2>극장</h2> <h2 className="py-2 text-white text-center" style={{ border: "3px solid #FEDC00", borderBottom: "3px solid #FEDC00" }}>극장</h2>
<TicketingTheater /> <TicketingTheater theaterInfo={theaterInfo} setTheaterInfo={setTheaterInfo} />
</div> </div>
<div className="col-sm-4"> <div className="col-sm-4">
<h2>시간표</h2> <h2 className="py-2 text-white text-center" style={{ border: "3px solid #FEDC00", borderBottom: "3px solid #FEDC00" }}>시간표</h2>
<TicketingTimeTable /> <TicketingTimeTable movieInfo={movieInfo} theaterInfo={theaterInfo} />
</div> </div>
</div> </div>
......
server/controllers/movie.controller.js
View file @ 711c9c42
...@@ -3,87 +3,85 @@ import sequelize from 'sequelize'; ...@@ -3,87 +3,85 @@ import sequelize from 'sequelize';
const { Op } = sequelize const { Op } = sequelize
import { Movie } from '../db/index.js' import { Movie } from '../db/index.js'
const comparePopularMovie = async (req, res) => { const getMovieByCategory = async (req, res, next, category) => {
const responsePopular = await axios.get(`https://api.themoviedb.org/3/movie/popular?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR`) 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 movies = responsePopular.data.results const TMDBmovies = responsePopular.data.results
const movieIds = [] const TMDBmovieIds = []
movies.forEach(element => { TMDBmovies.forEach(element => {
movieIds.push(element.id) TMDBmovieIds.push(element.id)
}); });
console.log(movieIds) console.log(TMDBmovieIds)
try { try {
const responseAfterCompare = await Movie.findAll({ const responseAfterCompare = await Movie.findAll({
where: { where: {
movieId: { movieId: {
[Op.or]: movieIds [Op.or]: TMDBmovieIds
} }
} }
}) })
const popularMovieIds = [] const movieIds = []
responseAfterCompare.forEach(el => { responseAfterCompare.forEach(el => {
popularMovieIds.push(el.movieId) movieIds.push(el.movieId)
}) })
console.log('popularMovieIds=', popularMovieIds) console.log('movieIds=', movieIds)
const m = await Promise.all( req.movieIds = movieIds
popularMovieIds.map(async(el) => { next()
const movie = await axios.get(`https://api.themoviedb.org/3/movie/${el}?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR`) } catch (error) {
console.log(error)
}
}
const getMovieById = async (req, res) => {
try {
const movieIds = req.movieIds
console.log(movieIds)
const elements = await Promise.all(
movieIds.map(async (movieId) => {
const movie = await axios.get(`https://api.themoviedb.org/3/movie/${movieId}?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR`)
return movie.data return movie.data
}) })
) )
res.json(m) console.log(elements)
res.json(elements)
} catch (error) { } catch (error) {
console.log(error)
} }
} }
const upcommingMovie = async (req, res) => { const getMovieList = async(req,res)=>{
const responsePopular = await axios.get(`https://api.themoviedb.org/3/movie/upcoming?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR&page=1`)
const movies = responsePopular.data.results
const movieIds = []
movies.forEach(element => {
movieIds.push(element.id)
});
console.log(movieIds)
try { try {
const responseAfterCompare = await Movie.findAll({ const movieList = await Movie.findAll()
where: { // console.log(movieList)
movieId: { const movieIds=[]
[Op.or]: movieIds movieList.forEach(el => {
} movieIds.push(el.movieId)
}
})
const popularMovieIds = []
responseAfterCompare.forEach(el => {
popularMovieIds.push(el.movieId)
}) })
console.log('popularMovieIds=', popularMovieIds) const elements = await Promise.all(
const m = await Promise.all( movieIds.map(async (movieId) => {
popularMovieIds.map(async(el) => { const movie = await axios.get(`https://api.themoviedb.org/3/movie/${movieId}?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR`)
const movie = await axios.get(`https://api.themoviedb.org/3/movie/${el}?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR`)
return movie.data return movie.data
}) })
) )
res.json(m) console.log(elements)
res.json(elements)
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
} }
<<<<<<< HEAD
export default { comparePopularMovie, upcommingMovie }
=======
const create = async (req, res) => { const create = async (req, res) => {
try { try {
const { movieId } = req.params const { movieId } = req.params
const newMovie = await Movie.create({ movieId: movieId }); const newMovie = await Movie.create({ movieId: movieId });
return res.json(newMovie); res.json(newMovie);
} catch (error) { } catch (error) {
return res.status(500).send(error.message || "영화 등록 중 에러 발생"); res.status(500).send(error.message || "영화 등록 중 에러 발생");
} }
} }
export default { export default {
comparePopularMovie, getMovieByCategory,
getMovieById,
getMovieList,
create, create,
} }
>>>>>>> kimpen
server/routes/movie.route.js
View file @ 711c9c42
...@@ -5,11 +5,18 @@ const router = express.Router(); ...@@ -5,11 +5,18 @@ const router = express.Router();
router router
.route("/") .route("/")
.post(movieCtrl.comparePopularMovie) // .post(movieCtrl.comparePopularMovie)
.get(movieCtrl.comparePopularMovie)
router.route('/showmovie/:category')
.get(movieCtrl.getMovieById)
router.route('/movielist')
.get(movieCtrl.getMovieList)
router router
.route("/:movieId") .route("/:movieId")
.post(movieCtrl.create) .post(movieCtrl.create)
router.param('category', movieCtrl.getMovieByCategory)
export default router; export default router;
\ No newline at end of file
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