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
584f0d49
Commit
584f0d49
authored
Jul 19, 2021
by
Kim, Subin
Browse files
MovieCard component 생성
parent
7d3fd5c0
Changes
3
Hide whitespace changes
Inline
Side-by-side
client/src/components/MovieCard/MovieCard.js
0 → 100644
View file @
584f0d49
import
{
useState
,
useEffect
}
from
"
react
"
import
{
Link
}
from
'
react-router-dom
'
import
styles
from
'
./movie-card.module.scss
'
const
MovieCard
=
({
list
})
=>
{
const
[
movieList
,
setMovieList
]
=
useState
(
list
)
useEffect
(()
=>
{
setMovieList
(
list
)
},
[
list
])
return
(
<>
{
movieList
.
map
(
movie
=>
(
<
div
className
=
"
card h-100
"
style
=
{{
backgroundColor
:
"
black
"
}}
>
<
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
"
>
<
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
>
<
/div
>
))}
<
/
>
)
}
export
default
MovieCard
\ No newline at end of file
client/src/components/MovieCard/index.js
0 → 100644
View file @
584f0d49
export
{
default
}
from
"
./MovieCard.js
"
\ No newline at end of file
client/src/components/MovieCard/movie-card.module.scss
0 → 100644
View file @
584f0d49
.layer
{
position
:
relative
;
}
.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
:
1
;
}
}
\ No newline at end of file
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