Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
butter-studio
Commits
c3feb732
Commit
c3feb732
authored
Jul 14, 2021
by
Jiwon Yoon
Browse files
movie데이터 뿌려주기
parent
3647626e
Changes
9
Hide whitespace changes
Inline
Side-by-side
.env.development
View file @
c3feb732
PG_DATABASE=butterDB
PG_USER=butter
PG_PASSWORD=butter
\ No newline at end of file
PG_PASSWORD=butter
TMDB_APP_KEY=1477348488076cafd4dcf973a314957d
\ No newline at end of file
.gitignore
View file @
c3feb732
/node_modules
\ No newline at end of file
/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
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
"
>
<
div
className
=
"
card-img
"
>
<
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
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>
)
}
<
/div
>
<
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
>
<
/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
>
<
/a
>
<
/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
>
// <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
)
{
}
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment