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_USER=butter
PG_PASSWORD=butter
TMDB_APP_KEY=1477348488076cafd4dcf973a314957d
\ No newline at end of file
.gitignore
View file @ c3feb732
/node_modules
.env.development
\ No newline at end of file
client/.gitignore
View file @ c3feb732
......@@ -17,6 +17,7 @@
.env.development.local
.env.test.local
.env.production.local
.env
npm-debug.log*
yarn-debug.log*
......
client/src/components/BoxOffice/BoxOffice.js
View file @ c3feb732
import axios from "axios"
import baseUrl from '../../utils/baseUrl'
import React, { useState,useEffect } from "react"
import styles from "./box-office.module.scss"
import React, { useState, useEffect } from "react"
import "./box-office.module.scss"
// import "./mystyle.css"
const BoxOffice = () => {
const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState()
useEffect(() => {
getTMDB_TopRated()
let items = document.querySelectorAll('.carousel .carousel-item')
let items = document.querySelectorAll('.carousel-item')
console.log("item", items)
items.forEach((el) => {
const minPerSlide = 4
......@@ -27,98 +29,125 @@ const BoxOffice = () => {
try {
const response = await axios.get(`${baseUrl}/api/movie`)
console.log(response.data)
setTMDB_TopRated_Data(response.data)
} catch (error) {
}
}
async function name() {
}
return (
<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="container text-center my-3">
{console.log(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)=>(
<div className={`carousel-item ${index===0?"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/fc0?text=6" className="img-fluid" />
<div className="card">
<div className="card-img">
<img src={`https://image.tmdb.org/t/p/original${moviePoster.poster_path}`} 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>영화를 불러올 수 없습니다:(</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="visually-hidden">Previous</span>
</button>
<button className="carousel-control-next" type="button" data-bs-target="#multi-carousel" data-bs-slide="next">
</a>
<a className="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button"
data-bs-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="visually-hidden">Next</span>
</button>
</a>
</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 @@
// .dNone {
// display: none;
// }
\
// .dBlock {
// display: block;
// } */
@media (max-width: 767px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
// @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;
}
$breakpoint-tablet: 768px;
/* 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 {
transform: translateX(25%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-start .active,
.carousel-inner .carousel-item-prev {
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 styles from "./movieChart.module.scss"
const MovieChart = () => {
const MovieChartList = [
{
id: 1,
poster: "/images/movie_image_black.jpg",
title: "블랙위도우",
popularity: 50.98,
release_date: "2021-07-07",
runtime: 134,
overview: "어벤져스의 히어로 블랙 위도우, 나타샤 로마노프는 자신의 과거와 연결된 레드룸의 거대한 음모와 실체를 깨닫게 된다. 상대의 능력을 복제하는 빌런 태스크마스터와 새로운 위도우들의 위협에 맞서 목숨을 건 반격을 시작하는 나타샤는 스파이로 활약했던 자신의 과거 뿐 아니라, 어벤져스가 되기 전 함께했던 동료들을 마주해야만 하는데…"
},
{
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: ''
const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState()
useEffect(() => {
getTMDB_TopRated()
}, [])
async function getTMDB_TopRated() {
try {
const response = await axios.get(`${baseUrl}/api/movie`)
console.log(response.data)
setTMDB_TopRated_Data([...response.data.results])
} catch (error) {
}
}
]
return (
<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" }}>
<Link to={{
pathname: `/movie/${movie.id}`,
state: {
id: movie.id,
poster: movie.poster,
title: movie.title,
popularity: movie.popularity,
release_date: movie.release_date,
runtime: movie.runtime,
overview: movie.overview
...movie
}
}} 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>
</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.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>
</div>
<button className="btn btn-warning">예매하기</button>
......
client/src/pages/MoviePage.js
View file @ c3feb732
......@@ -19,7 +19,7 @@ const MoviePage = ({ location }) => {
<div className="carousel-inner">
{movieInfo.stillCuts.length > 0
? 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="스틸컷" />
</div>
))
......
server/controllers/movie.controller.js
View file @ c3feb732
import axios from 'axios'
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)
// console.log('movies', movies)
try {
res.json(movies)
} 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