Skip to content

GitLab

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

movie데이터 뿌려주기

parent 3647626e
Show whitespace changes
Inline Side-by-side
.env.development
View file @ c3feb732
PG_DATABASE=butterDB PG_DATABASE=butterDB
PG_USER=butter PG_USER=butter
PG_PASSWORD=butter PG_PASSWORD=butter
TMDB_APP_KEY=1477348488076cafd4dcf973a314957d
\ No newline at end of file
.gitignore
View file @ c3feb732
/node_modules /node_modules
.env.development
\ No newline at end of file
client/.gitignore
View file @ c3feb732
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
.env.development.local .env.development.local
.env.test.local .env.test.local
.env.production.local .env.production.local
.env
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
......
client/src/components/BoxOffice/BoxOffice.js
View file @ c3feb732
import axios from "axios" import axios from "axios"
import baseUrl from '../../utils/baseUrl' import baseUrl from '../../utils/baseUrl'
import React, { useState,useEffect } from "react" import React, { useState, useEffect } from "react"
import styles from "./box-office.module.scss" import "./box-office.module.scss"
// import "./mystyle.css"
const BoxOffice = () => { const BoxOffice = () => {
const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState() const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState()
useEffect(() => { useEffect(() => {
getTMDB_TopRated() getTMDB_TopRated()
let items = document.querySelectorAll('.carousel .carousel-item') let items = document.querySelectorAll('.carousel-item')
console.log("item", items) console.log("item", items)
items.forEach((el) => { items.forEach((el) => {
const minPerSlide = 4 const minPerSlide = 4
...@@ -27,98 +29,125 @@ const BoxOffice = () => { ...@@ -27,98 +29,125 @@ const BoxOffice = () => {
try { try {
const response = await axios.get(`${baseUrl}/api/movie`) const response = await axios.get(`${baseUrl}/api/movie`)
console.log(response.data) console.log(response.data)
setTMDB_TopRated_Data(response.data)
} catch (error) { } catch (error) {
} }
} }
async function name() {
}
return ( return (
<div className="container text-center my-3">
<div className="container"> {console.log(TMDB_TopRated_Data)}
<h2 className="fw-bold text-white text-center mt-5">Box Office</h2> <div className="row my-auto justify-content-center">
<div id="multi-carousel" className={`d-flex carousel slide align-items-center ${styles.customHeight}`} data-bs-ride="carousel"> <div id="recipeCarousel" className="carousel slide" data-bs-ride="carousel" data-bs-interval="999999999">
<div className="carousel-inner row"> <div className={`carousel-inner`} role="listbox">
<div className="carousel-item active"> {TMDB_TopRated_Data?
<div className="col-sm-3"> TMDB_TopRated_Data.results.map((moviePoster,index)=>(
<div className="card bg-dark"> <div className={`carousel-item ${index===0?"active":""}`}>
<div className={`card-img ${styles.cursor} ${styles.showplot}`}>
<img src="//via.placeholder.com/500x400/31f?text=1" className="img-fluid" />
</div>
<div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 1</div>
<button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-sm-3">
<div className="card bg-dark">
<div className={`card-img ${styles.cursor} ${styles.showplot}`}>
<img src="//via.placeholder.com/500x400/e66?text=2" className="img-fluid" />
</div>
<div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 2</div>
<button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-sm-3">
<div className="card bg-dark">
<div className={`card-img ${styles.cursor} ${styles.showplot}`}>
<img src="//via.placeholder.com/500x400/7d2?text=3" className="img-fluid" />
</div>
<div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 3</div>
<button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-sm-3">
<div className="card bg-dark">
<div className={`card-img ${styles.cursor} ${styles.showplot}`}>
<img src="//via.placeholder.com/500x400?text=4" className="img-fluid" />
</div>
<div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 4</div>
<button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-sm-3">
<div className="card bg-dark">
<div className={`card-img ${styles.cursor} ${styles.showplot}`}>
<img src="//via.placeholder.com/500x400/aba?text=5" className="img-fluid" />
</div>
<div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 5</div>
<button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-sm-3"> <div className="col-sm-3">
<div className="card bg-dark"> <div className="card">
<div className={`card-img ${styles.cursor} ${styles.showplot}`}> <div className="card-img">
<img src="//via.placeholder.com/500x400/fc0?text=6" className="img-fluid" /> <img src={`https://image.tmdb.org/t/p/original${moviePoster.poster_path}`} className="img-fluid" />
</div> </div>
<div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 6</div>
<button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
</div> </div>
</div> </div>
</div> </div>
))
:(<div>영화를 불러올 수 없습니다:(</div>)}
</div> </div>
<button className="carousel-control-prev" type="button" data-bs-target="#multi-carousel" data-bs-slide="prev"> <a className="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button"
data-bs-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span> <span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="visually-hidden">Previous</span> </a>
</button> <a className="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button"
<button className="carousel-control-next" type="button" data-bs-target="#multi-carousel" data-bs-slide="next"> data-bs-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span> <span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="visually-hidden">Next</span> </a>
</button>
</div> </div>
</div> </div>
</div>
// <div className="container">
// <h2 className="fw-bold text-white text-center mt-5">Box Office</h2>
// <div id="multi-carousel" className={`d-flex carousel slide align-items-center ${styles.customHeight}`} data-bs-ride="carousel">
// <div className="carousel-inner row">
// <div className="carousel-item active">
// <div className="col-sm-3">
// <div className="card bg-dark">
// <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
// <img src="//via.placeholder.com/500x400/31f?text=1" className="img-fluid" />
// </div>
// <div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 1</div>
// <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
// </div>
// </div>
// </div>
// <div className="carousel-item">
// <div className="col-sm-3">
// <div className="card bg-dark">
// <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
// <img src="//via.placeholder.com/500x400/e66?text=2" className="img-fluid" />
// </div>
// <div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 2</div>
// <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
// </div>
// </div>
// </div>
// <div className="carousel-item">
// <div className="col-sm-3">
// <div className="card bg-dark">
// <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
// <img src="//via.placeholder.com/500x400/7d2?text=3" className="img-fluid" />
// </div>
// <div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 3</div>
// <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
// </div>
// </div>
// </div>
// <div className="carousel-item">
// <div className="col-sm-3">
// <div className="card bg-dark">
// <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
// <img src="//via.placeholder.com/500x400?text=4" className="img-fluid" />
// </div>
// <div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 4</div>
// <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
// </div>
// </div>
// </div>
// <div className="carousel-item">
// <div className="col-sm-3">
// <div className="card bg-dark">
// <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
// <img src="//via.placeholder.com/500x400/aba?text=5" className="img-fluid" />
// </div>
// <div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 5</div>
// <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
// </div>
// </div>
// </div>
// <div className="carousel-item">
// <div className="col-sm-3">
// <div className="card bg-dark">
// <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
// <img src="//via.placeholder.com/500x400/fc0?text=6" className="img-fluid" />
// </div>
// <div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 6</div>
// <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
// </div>
// </div>
// </div>
// </div>
// <button className="carousel-control-prev" type="button" data-bs-target="#multi-carousel" data-bs-slide="prev">
// <span className="carousel-control-prev-icon" aria-hidden="true"></span>
// <span className="visually-hidden">Previous</span>
// </button>
// <button className="carousel-control-next" type="button" data-bs-target="#multi-carousel" data-bs-slide="next">
// <span className="carousel-control-next-icon" aria-hidden="true"></span>
// <span className="visually-hidden">Next</span>
// </button>
// </div>
// </div>
) )
} }
......
client/src/components/BoxOffice/box-office.module.scss
View file @ c3feb732
...@@ -5,35 +5,36 @@ ...@@ -5,35 +5,36 @@
// .dNone { // .dNone {
// display: none; // display: none;
// } // }
\
// .dBlock { // .dBlock {
// display: block; // display: block;
// } */ // } */
@media (max-width: 767px) {
.carousel-inner .carousel-item > div { // @media (max-width: 767px) {
display: none; // .carousel-inner .carousel-item >div {
} // display: none;
.carousel-inner .carousel-item > div:first-child { // }
display: block; // .carousel-inner .carousel-item >div:first-child {
} // display: block;
} // }
// }
.carousel-inner .carousel-item.active, .carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next, .carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev { .carousel-inner .carousel-item-prev {
display: flex; display: flex;
} }
$breakpoint-tablet: 768px;
/* medium and up screens */ /* medium and up screens */
@media (min-width: 768px) { @media (min-width: $breakpoint-tablet) {
.carousel-inner .carousel-item-end.active, .carousel-inner .carousel-item-end .active,
.carousel-inner .carousel-item-next { .carousel-inner .carousel-item-next {
transform: translateX(25%); transform: translateX(25%);
} }
.carousel-inner .carousel-item-start.active, .carousel-inner .carousel-item-start .active,
.carousel-inner .carousel-item-prev { .carousel-inner .carousel-item-prev {
transform: translateX(-25%); transform: translateX(-25%);
} }
......
client/src/components/BoxOffice/mystyle.css 0 → 100644
View file @ c3feb732
@media (max-width: 767px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
@media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
client/src/components/MovieChart/MovieChart.js
View file @ c3feb732
import React from 'react' import React,{useState, useEffect} from 'react'
import axios from 'axios'
import baseUrl from '../../utils/baseUrl'
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import styles from "./movieChart.module.scss" import styles from "./movieChart.module.scss"
const MovieChart = () => { const MovieChart = () => {
const MovieChartList = [ const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState()
{ useEffect(() => {
id: 1, getTMDB_TopRated()
poster: "/images/movie_image_black.jpg", }, [])
title: "블랙위도우",
popularity: 50.98, async function getTMDB_TopRated() {
release_date: "2021-07-07", try {
runtime: 134, const response = await axios.get(`${baseUrl}/api/movie`)
overview: "어벤져스의 히어로 블랙 위도우, 나타샤 로마노프는 자신의 과거와 연결된 레드룸의 거대한 음모와 실체를 깨닫게 된다. 상대의 능력을 복제하는 빌런 태스크마스터와 새로운 위도우들의 위협에 맞서 목숨을 건 반격을 시작하는 나타샤는 스파이로 활약했던 자신의 과거 뿐 아니라, 어벤져스가 되기 전 함께했던 동료들을 마주해야만 하는데…" console.log(response.data)
}, setTMDB_TopRated_Data([...response.data.results])
{ } catch (error) {
id: 2,
poster: "/images/movie_image_limit.jpg", }
title: "발신제한",
popularity: 3.22,
release_date: "2021-06-23",
runtime: 94,
overview: ''
},
{
id: 3,
poster: "/images/movie_image_everyday.jpg",
title: "우리는 매일매일",
popularity: 2.83,
release_date: "2021-06-30",
runtime: 75,
overview: ''
},
{
id: 4,
poster: "/images/movie_image_cruella.jpg",
title: "크루엘라",
popularity: 1.72,
release_date: "2021-05-26",
runtime: 133,
overview: ''
} }
]
return ( return (
<div class="row row-cols-1 row-cols-md-4 g-4"> <div class="row row-cols-1 row-cols-md-4 g-4">
{MovieChartList.length > 0 {console.log(TMDB_TopRated_Data)}
{TMDB_TopRated_Data
? ?
MovieChartList.map(movie => ( TMDB_TopRated_Data.map(movie => (
<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: {
id: movie.id, ...movie
poster: movie.poster,
title: movie.title,
popularity: movie.popularity,
release_date: movie.release_date,
runtime: movie.runtime,
overview: movie.overview
} }
}} className={`${styles.layer}`} > }} className={`${styles.layer}`} >
<img src={movie.poster} 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>
</Link> </Link>
<div className="card-body text-light"> <div className="card-body text-light">
<marquee onmouseover="this.stop()" className={`h2 card-title text-center ${styles.title}`}>{movie.title}</marquee> <marquee onmouseover="this.stop()" className={`h2 card-title text-center ${styles.title}`}>{movie.title}</marquee>
<p className="card-text text-center">예매율: {movie.popularity}% | {movie.runtime}분</p> <p className="card-text text-center">예매율: {movie.ticket_sales}% | {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> <button className="btn btn-warning">예매하기</button>
......
client/src/pages/MoviePage.js
View file @ c3feb732
...@@ -19,7 +19,7 @@ const MoviePage = ({ location }) => { ...@@ -19,7 +19,7 @@ const MoviePage = ({ location }) => {
<div className="carousel-inner"> <div className="carousel-inner">
{movieInfo.stillCuts.length > 0 {movieInfo.stillCuts.length > 0
? movieInfo.stillCuts.map((image, index) => ( ? movieInfo.stillCuts.map((image, index) => (
<div className={`carousel-item ${index === 0 ? "active" : ""}`} data-bs-interval="1000"> <div className={`carousel-item ${index === 0 ? "active" : ""}`} >
<img src={image} className="d-block w-100" alt="스틸컷" /> <img src={image} className="d-block w-100" alt="스틸컷" />
</div> </div>
)) ))
......
server/controllers/movie.controller.js
View file @ c3feb732
import axios from 'axios' import axios from 'axios'
const comparePopularMovie = async (req, res) => { const comparePopularMovie = async (req, res) => {
const response = await axios.get('https://api.themoviedb.org/3/movie/popular?api_key=1477348488076cafd4dcf973a314957d&language=ko-KR') const response = await axios.get('https://api.themoviedb.org/3/movie/popular?api_key=1477348488076cafd4dcf973a314957d&language=ko-KR')
const movies = response.data const movies = response.data
console.log('movies', movies) // console.log('movies', movies)
try { try {
res.json(movies)
} 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