Skip to content

GitLab

Commit 40ce555b authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

무비차트 DB연동 성공

parent c7bb7d9a
Hide whitespace changes
Inline Side-by-side
.gitignore
View file @ 40ce555b
/node_modules
.env.development
\ No newline at end of file
.env.development
.env.development.local
.env.local
\ No newline at end of file
client/src/components/BoxOffice/BoxOffice.js
View file @ 40ce555b
......@@ -37,12 +37,12 @@ const BoxOffice = () => {
return (
<div className="container text-center my-3">
{console.log(TMDB_TopRated_Data)}
{console.log(typeof(TMDB_TopRated_Data))}
<div className="row my-auto justify-content-center">
<div id="recipeCarousel" className="carousel slide" data-bs-ride="carousel" data-bs-interval="999999999">
<div className={`carousel-inner`} role="listbox">
{TMDB_TopRated_Data?
TMDB_TopRated_Data.results.map((moviePoster,index)=>(
TMDB_TopRated_Data.map((moviePoster,index)=>(
<div className={`carousel-item ${index===0?"active":""}`}>
<div className="col-sm-3">
<div className="card">
......
client/src/components/MovieChart/MovieChart.js
View file @ 40ce555b
......@@ -14,7 +14,7 @@ const MovieChart = () => {
try {
const response = await axios.get(`${baseUrl}/api/movie`)
console.log(response.data)
setTMDB_TopRated_Data([...response.data.results])
setTMDB_TopRated_Data([...response.data])
} catch (error) {
}
......@@ -37,7 +37,7 @@ const MovieChart = () => {
</Link>
<div className="card-body text-light">
<marquee onmouseover="this.stop()" className={`h2 card-title text-center ${styles.title}`}>{movie.title}</marquee>
<p className="card-text text-center">예매율: {movie.ticket_sales}% | {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>
</div>
<button className="btn btn-warning">예매하기</button>
......
client/src/components/MovieComming/MovieComming.js
View file @ 40ce555b
import React,{useState, useEffect} from 'react'
import axios from 'axios'
import baseUrl from '../../utils/baseUrl'
import { Link } from 'react-router-dom';
import styles from "./movieComming.module.scss"
const MovieComming = () => {
const MovieCommingList = [
{
"src": "/images/movie_image_black.jpg",
"title": "블랙위도우",
"popularity": 50.98,
"release_date": "2021-07-07",
"runtime": 134
},
{
"src": "/images/movie_image_limit.jpg",
"title": "발신제한",
"popularity": 3.22,
"release_date": "2021-06-23",
"runtime": 94
},
{
"src": "/images/movie_image_everyday.jpg",
"title": "우리는 매일매일",
"popularity": 2.83,
"release_date": "2021-06-30",
"runtime": 75
},
{
"src": "/images/movie_image_cruella.jpg",
"title": "크루엘라",
"popularity": 1.72,
"release_date": "2021-05-26",
"runtime": 133
const [TMDB_UpComming_Data, setTMDB_UpComming_Data] = useState()
useEffect(() => {
getTMDB_UpComming()
}, [])
async function getTMDB_UpComming() {
try {
const response = await axios.get(`${baseUrl}/api/movie/upcomming`)
console.log(response.data)
setTMDB_UpComming_Data([...response.data])
} catch (error) {
}
]
}
return (
<div class="row row-cols-1 row-cols-md-4 g-4">
{MovieCommingList.length > 0
{TMDB_UpComming_Data
?
MovieCommingList.map(movie => (
TMDB_UpComming_Data.map(movie => (
<div className="card h-100" style={{ backgroundColor: "black" }}>
<img src={movie.src} className={`card-img-top rounded ${styles.poster}`} alt="Movie Poster" />
<Link to={{
pathname: `/movie/${movie.id}`,
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>
</Link>
<div className="card-body text-light">
<h5 className="card-title text-center">{movie.title}</h5>
<p className="card-text text-center">예매율: {movie.popularity}% | {movie.runtime}분</p>
<marquee onmouseover="this.stop()" className={`h2 card-title text-center ${styles.title}`}>{movie.title}</marquee>
<p className="card-text text-center">{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>
......
client/src/components/MovieComming/movieComming.module.scss
View file @ 40ce555b
.poster{
opacity: 1;
.layer{
position: relative;
}
// .poster{
// opacity: 1;
// &:hover{
// opacity: 0.3;
// }
// }
.description{
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
opacity: 0;
background-color:rgba(0, 0, 0, 0.6);
text-align: center;
color:white;
//ellipsis
text-overflow: ellipsis;
white-space: pre-line;
display: -webkit-box;
-webkit-line-clamp: 9;
-webkit-box-orient: vertical;
overflow: hidden;
&:hover{
opacity: 0.3;
opacity: 1;
}
}
\ No newline at end of file
server/controllers/movie.controller.js
View file @ 40ce555b
import axios from 'axios'
import sequelize from 'sequelize';
const { Op } = sequelize
import { Movie } from '../db/index.js'
const comparePopularMovie = async (req, res) => {
const response = await axios.get('https://api.themoviedb.org/3/movie/popular?api_key=1477348488076cafd4dcf973a314957d&language=ko-KR')
const movies = response.data
// console.log('movies', movies)
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)
});
console.log(movieIds)
try {
res.json(movies)
const responseAfterCompare = await Movie.findAll({
where: {
movieId: {
[Op.or]: movieIds
}
}
})
const popularMovieIds = []
responseAfterCompare.forEach(el => {
popularMovieIds.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`)
return movie.data
})
)
res.json(m)
} catch (error) {
console.log(error)
}
}
export default { comparePopularMovie }
\ No newline at end of file
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)
try {
const responseAfterCompare = await Movie.findAll({
where: {
movieId: {
[Op.or]: movieIds
}
}
})
const popularMovieIds = []
responseAfterCompare.forEach(el => {
popularMovieIds.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`)
return movie.data
})
)
res.json(m)
} catch (error) {
console.log(error)
}
}
export default { comparePopularMovie, upcommingMovie }
\ No newline at end of file
server/index.js
View file @ 40ce555b
......@@ -9,7 +9,7 @@ dotenv.config({
});
sequelize
.sync({ force: true })
.sync({ force: false })
.then(async () => {
// await Promise.all(
// Object.keys(ROLE_NAME).map((name) => {
......
server/models/movie.model.js
View file @ 40ce555b
......@@ -12,7 +12,17 @@ const MovieModel = (sequelize) => {
autoIncrement: true,
},
movieId: {
type: DataTypes.INTEGER
type: DataTypes.INTEGER,
unique: true
},
ticket_sales:{
type: DataTypes.FLOAT,
default:0.0
},
vote_average: {
type: DataTypes.FLOAT,
default:0.0
}
},
{
......
server/routes/movie.route.js
View file @ 40ce555b
......@@ -8,6 +8,8 @@ router
.post(movieCtrl.comparePopularMovie)
.get(movieCtrl.comparePopularMovie)
router
.route("/upcomming")
.get(movieCtrl.upcommingMovie)
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