MovieComing.js 2.88 KB
Newer Older
Jiwon Yoon's avatar
Jiwon Yoon committed
1
2
3
4
import { useState, useEffect } from 'react'
import movieApi from "../apis/movie.api.js"
// import MovieCard from "./MovieCard/index.js"
import { Link } from 'react-router-dom'
5
import styles from './MovieCard/movie-card.module.scss'
Jiwon Yoon's avatar
Jiwon Yoon committed
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import catchErrors from '../utils/catchErrors.js'

const MovieComing = () => {
    const [TMDB_UpComing_Data, setTMDB_UpComing_Data] = useState([])
    const [error, setError] = useState("")
    const category = "upcoming"

    useEffect(() => {
        getTMDB_UpComing()
    }, [])

    async function getTMDB_UpComing() {
        try {
            setError("")
20
            const response = await movieApi.getListByCategoryfromDB(category)
Jiwon Yoon's avatar
Jiwon Yoon committed
21
            setTMDB_UpComing_Data([...response])
22
            console.log(response)
Jiwon Yoon's avatar
Jiwon Yoon committed
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
        } catch (error) {
            catchErrors(error, setError)
        }
    }

    return (
        <>
            {TMDB_UpComing_Data.length !== 0 ?
                <div className="row row-cols-1 row-cols-md-4 g-4">
                    {/* <MovieCard list={TMDB_UpComing_Data} /> */}
                    {TMDB_UpComing_Data.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">
45
46
                                {movie.adult ? <image src="/images/19.png" /> : <></>}
                                <div className={`h4 card-title text-center ${styles.title}`}>{movie.title}</div>
Jiwon Yoon's avatar
Jiwon Yoon committed
47
48
49
50
51
52
53
54
55
56
57
58
                                <p className={`card-text text-center ${styles.txt}`}>예매율: {movie.ticket_sales}0% | {movie.runtime}</p>
                                <p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
                            </div>
                            <Link to={{
                                pathname: `/ticket`,
                                state: { movieId: movie.id, }
                            }} className="text-center">
                                <button className="btn btn-warning">예매하기</button>
                            </Link>
                        </div>
                    ))}
                </div>
59
                : <h2 className="text-white text-center p-5">영화정보를 로딩중입니다!</h2>
Jiwon Yoon's avatar
Jiwon Yoon committed
60
61
62
63
64
65
            }
        </>
    )
}

export default MovieComing