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 { baseUrl, TMDBUrl } from "../utils/baseUrl";
import {baseUrl,TMDBUrl} from "../utils/baseUrl.js";
const getUpcomingfromTM = async () => {
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"
<<<<<<< HEAD
import baseUrl from '../../utils/baseUrl'
import {baseUrl} from '../../utils/baseUrl.js'
import React, { useState, useEffect } from "react"
import "./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
// import styles from "./box-office.module.scss"
const BoxOffice = () => {
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 baseUrl from '../../utils/baseUrl'
import {baseUrl} from '../../utils/baseUrl.js'
import { Link } from 'react-router-dom';
import styles from "./movieChart.module.scss"
......@@ -11,8 +11,9 @@ const MovieChart = () => {
}, [])
async function getTMDB_TopRated() {
const category = "popular"
try {
const response = await axios.get(`${baseUrl}/api/movie`)
const response = await axios.get(`${baseUrl}/api/movie/showmovie/${category}`)
console.log(response.data)
setTMDB_TopRated_Data([...response.data])
} catch (error) {
......@@ -28,9 +29,7 @@ const MovieChart = () => {
<div className="card h-100" style={{ backgroundColor: "black" }}>
<Link to={{
pathname: `/movie/${movie.id}`,
state: {
...movie
}
state: {...movie}
}} 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" />
<div className={`${styles.description}`}>{movie.overview}</div>
......@@ -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"><small className="text-muted">{movie.release_date} 개봉</small></p>
</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>
......
client/src/components/MovieComming/MovieComming.js
View file @ 711c9c42
......@@ -12,7 +12,7 @@ const MovieComming = () => {
async function getTMDB_UpComming() {
try {
const response = await axios.get(`${baseUrl}/api/movie/upcomming`)
const response = await axios.get(`/api/movie/showmovie/upcomming`)
console.log(response.data)
setTMDB_UpComming_Data([...response.data])
} 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"
const TicketingMovie = () => {
const TicketingMovie = (props) => {
const [movieList, setMovieList] = useState([])
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 (
<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>
)
}
......
client/src/components/TicketingMovie/ticketingMovie.module.scss
View file @ 711c9c42
.navBtn{
color: "white";
background-color: "black";
border-color:"#FEDC00";
border-top: "0";
border-left: "0";
border-right: "0";
border-bottom: "3px solid";
.btn {
background:black;
color:white;
border:0;
&:focus{
background: white;
color: black;
}
}
.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 TicketingTheater from "../components/TicketingTheater"
import TicketingTheater from "../components/TicketingTheater/TicketingTheater"
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 (
<div style={{ backgroundColor: "black" }}>
<div className="container" style={{ backgroundColor: "black" }}>
<div className="row justify-content-center my-5">
<div className="col-sm-4">
<h2 className="py-2 text-white text-center" style={{borderTop:"3px solid #FEDC00", borderBottom:"3px solid #FEDC00"}}>영화</h2>
<TicketingMovie />
<h2 className="py-2 text-white text-center" style={{ border: "3px solid #FEDC00", borderBottom: "3px solid #FEDC00" }}>영화</h2>
<TicketingMovie movieInfo={movieInfo} setMovieInfo={setMovieInfo} />
</div>
<div className="col-sm-4">
<h2>극장</h2>
<TicketingTheater />
<h2 className="py-2 text-white text-center" style={{ border: "3px solid #FEDC00", borderBottom: "3px solid #FEDC00" }}>극장</h2>
<TicketingTheater theaterInfo={theaterInfo} setTheaterInfo={setTheaterInfo} />
</div>
<div className="col-sm-4">
<h2>시간표</h2>
<TicketingTimeTable />
<h2 className="py-2 text-white text-center" style={{ border: "3px solid #FEDC00", borderBottom: "3px solid #FEDC00" }}>시간표</h2>
<TicketingTimeTable movieInfo={movieInfo} theaterInfo={theaterInfo} />
</div>
</div>
......
server/controllers/movie.controller.js
View file @ 711c9c42
......@@ -3,87 +3,85 @@ import sequelize from 'sequelize';
const { Op } = sequelize
import { Movie } from '../db/index.js'
const comparePopularMovie = async (req, res) => {
const responsePopular = await axios.get(`https://api.themoviedb.org/3/movie/popular?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR`)
const movies = responsePopular.data.results
const movieIds = []
movies.forEach(element => {
movieIds.push(element.id)
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(movieIds)
console.log(TMDBmovieIds)
try {
const responseAfterCompare = await Movie.findAll({
where: {
movieId: {
[Op.or]: movieIds
[Op.or]: TMDBmovieIds
}
}
})
const popularMovieIds = []
const movieIds = []
responseAfterCompare.forEach(el => {
popularMovieIds.push(el.movieId)
movieIds.push(el.movieId)
})
console.log('popularMovieIds=', popularMovieIds)
const m = await Promise.all(
popularMovieIds.map(async(el) => {
const movie = await axios.get(`https://api.themoviedb.org/3/movie/${el}?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR`)
console.log('movieIds=', movieIds)
req.movieIds = movieIds
next()
} 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
})
)
res.json(m)
)
console.log(elements)
res.json(elements)
} catch (error) {
console.log(error)
}
}
const upcommingMovie = 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)
const getMovieList = async(req,res)=>{
try {
const responseAfterCompare = await Movie.findAll({
where: {
movieId: {
[Op.or]: movieIds
}
}
})
const popularMovieIds = []
responseAfterCompare.forEach(el => {
popularMovieIds.push(el.movieId)
const movieList = await Movie.findAll()
// console.log(movieList)
const movieIds=[]
movieList.forEach(el => {
movieIds.push(el.movieId)
})
console.log('popularMovieIds=', popularMovieIds)
const m = await Promise.all(
popularMovieIds.map(async(el) => {
const movie = await axios.get(`https://api.themoviedb.org/3/movie/${el}?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR`)
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
})
)
res.json(m)
)
console.log(elements)
res.json(elements)
} catch (error) {
console.log(error)
}
}
<<<<<<< HEAD
export default { comparePopularMovie, upcommingMovie }
=======
const create = async (req, res) => {
try {
const { movieId } = req.params
const newMovie = await Movie.create({ movieId: movieId });
return res.json(newMovie);
res.json(newMovie);
} catch (error) {
return res.status(500).send(error.message || "영화 등록 중 에러 발생");
res.status(500).send(error.message || "영화 등록 중 에러 발생");
}
}
export default {
comparePopularMovie,
getMovieByCategory,
getMovieById,
getMovieList,
create,
}
>>>>>>> kimpen
server/routes/movie.route.js
View file @ 711c9c42
......@@ -5,11 +5,18 @@ const router = express.Router();
router
.route("/")
.post(movieCtrl.comparePopularMovie)
.get(movieCtrl.comparePopularMovie)
// .post(movieCtrl.comparePopularMovie)
router.route('/showmovie/:category')
.get(movieCtrl.getMovieById)
router.route('/movielist')
.get(movieCtrl.getMovieList)
router
.route("/:movieId")
.post(movieCtrl.create)
router.param('category', movieCtrl.getMovieByCategory)
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