Commit 584f0d49 authored by Kim, Subin's avatar Kim, Subin
Browse files

MovieCard component 생성

parent 7d3fd5c0
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
export { default } from "./MovieCard.js"
\ No newline at end of file
.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
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