MoviePage.js 7.04 KB
Newer Older
Jiwon Yoon's avatar
Jiwon Yoon committed
1
import { useState, useEffect } from 'react';
Jiwon Yoon's avatar
Jiwon Yoon committed
2
import { Link } from 'react-router-dom';
Jiwon Yoon's avatar
Jiwon Yoon committed
3
4
import movieApi from '../apis/movie.api.js'
import Video from '../components/Video.js'
Jiwon Yoon's avatar
Jiwon Yoon committed
5
6
7
8

const MoviePage = ({ location }) => {
    const [movieInfo, setMovieInfo] = useState({
        ...location.state,
Jiwon Yoon's avatar
Jiwon Yoon committed
9
        stillCuts: [],
Jiwon Yoon's avatar
Jiwon Yoon committed
10
11
12
        cast: [],
        director: [],
        // attendance: ""
Jiwon Yoon's avatar
Jiwon Yoon committed
13
14
15
    })
    const [state, setState] = useState(0)

Jiwon Yoon's avatar
Jiwon Yoon committed
16
17
18
19
20
21
22
23
24
25
26
    useEffect(() => {
        getImagesAndCredits()
    }, [])

    async function getImagesAndCredits() {
        try {
            const images = await movieApi.getImagesfromTM(movieInfo.id)
            const still = images.backdrops.map(el => el.file_path)
            const credits = await movieApi.getCreditsfromTM(movieInfo.id)
            const castsInfo = credits.cast.map(el => el.name)
            console.log(castsInfo)
Jiwon Yoon's avatar
Jiwon Yoon committed
27
            const directorsInfo = await credits.crew.filter(element => element.job === "Director").map(el=>el.name)
Jiwon Yoon's avatar
Jiwon Yoon committed
28
            console.log("directorInfo=", directorsInfo)
Jiwon Yoon's avatar
Jiwon Yoon committed
29
30
31
            setMovieInfo({
                ...movieInfo,
                stillCuts: still,
Jiwon Yoon's avatar
Jiwon Yoon committed
32
33
                cast: castsInfo,
                director: directorsInfo
Jiwon Yoon's avatar
Jiwon Yoon committed
34
35
36
37
38
39
            })
        } catch (error) {
            console.log(error)
        }
    }

40
    return (
Jiwon Yoon's avatar
Jiwon Yoon committed
41
42
43
44
45
        <div className="container" style={{ backgroundColor: "black" }}>
            {console.log(movieInfo)}
            <div id="carouselExampleInterval" className="carousel slide py-4" data-bs-ride="carousel">
                <div className="carousel-inner">
                    {movieInfo.stillCuts.length > 0
Jiwon Yoon's avatar
Jiwon Yoon committed
46
                        ? movieInfo.stillCuts.map((imageUrl, index) => (
Jiwon Yoon's avatar
Jiwon Yoon committed
47
                            <div className={`carousel-item ${index === 0 ? "active" : ""}`} >
Jiwon Yoon's avatar
Jiwon Yoon committed
48
                                <img src={`https://image.tmdb.org/t/p/original${imageUrl}`} className="d-block w-100" alt="스틸컷" />
Jiwon Yoon's avatar
Jiwon Yoon committed
49
50
51
                            </div>
                        ))
                        : <div className="carousel-item">
Jiwon Yoon's avatar
Jiwon Yoon committed
52
53
                            {console.log("스틸컷 불러오기 오류")}
                            <img src="/images/none.jpg" className="d-block w-100" alt="등록된 스틸컷이 없습니다." />
Jiwon Yoon's avatar
Jiwon Yoon committed
54
55
56
57
58
59
60
61
62
63
64
65
                        </div>}
                </div>
                <button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" 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="#carouselExampleInterval" data-bs-slide="next">
                    <span className="carousel-control-next-icon" aria-hidden="true"></span>
                    <span className="visually-hidden">Next</span>
                </button>
            </div>
            <div className="row justify-content-center py-5">
Jiwon Yoon's avatar
Jiwon Yoon committed
66
67
                <div className="col-sm-3 mb-5">
                    <img className="img-thumbnail" src={`https://image.tmdb.org/t/p/original${movieInfo.poster_path}`} alt="영화포스터" />
Jiwon Yoon's avatar
Jiwon Yoon committed
68
                </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
69
                <div className="col-sm-6" style={{ color: "white" }}>
Jiwon Yoon's avatar
Jiwon Yoon committed
70
                    <h1 className="pb-3">{movieInfo.title}</h1>
71
                    <p>예매율:{Math.round((movieInfo.ticket_sales / (movieInfo.totalReservationRate.totalReservationRate||1)) * 100)}% 누적관객수: {movieInfo.ticket_sales}</p>
Jiwon Yoon's avatar
Jiwon Yoon committed
72
73
74
75
76
77
78
79
80
                    {movieInfo.director || movieInfo.cast
                        ?
                        <>
                            <p>감독: {movieInfo.director.map(el => el)+' '}</p>
                            <p>출연: {movieInfo.cast.slice(0, 5).map(el => el)+' '}</p>
                        </>
                        :
                        <></>
                    }
Jiwon Yoon's avatar
Jiwon Yoon committed
81
82
83
84
                    <p>장르: {movieInfo.genres.reduce((acc, cur, idx) => {
                        if (idx !== 0) return acc + ', ' + cur.name
                        else return acc + cur.name
                    }, "")}</p>
Jiwon Yoon's avatar
Jiwon Yoon committed
85
                    <p>개봉일:{movieInfo.release_date}</p>
Jiwon Yoon's avatar
Jiwon Yoon committed
86
87
                    <div className="text-end">
                        <Link to={{
Jiwon Yoon's avatar
Jiwon Yoon committed
88
89
                            pathname: `/ticket`,
                            state: {
Jiwon Yoon's avatar
Jiwon Yoon committed
90
                                movieId: movieInfo.id,
Jiwon Yoon's avatar
Jiwon Yoon committed
91
92
                            }
                        }}>
Jiwon Yoon's avatar
Jiwon Yoon committed
93
94
95
                            <button className="btn btn-warning">예매하기</button>
                        </Link>
                    </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
96
97
98
                </div>
            </div>
            <div className="">
Jiwon Yoon's avatar
Jiwon Yoon committed
99
                <ul className="nav nav-tabs justify-content-center mt-4 border-0" id="myTab" role="tablist">
Jiwon Yoon's avatar
Jiwon Yoon committed
100
101
102
103
                    <li className="nav-item" role="presentation">
                        <button className="nav-link active mx-auto" style={{ color: "white", borderColor: "black", backgroundColor: "black", borderBottom: state === 0 ? "3px solid" : "none", borderBottomColor: state === 0 ? "#FEDC00" : "black" }} id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true" onClick={() => setState(0)}>상세정보</button>
                    </li>
                    <li className="nav-item" role="presentation">
Jiwon Yoon's avatar
Jiwon Yoon committed
104
                        <button className="nav-link mx-auto" style={{ color: "white", borderColor: "black", backgroundColor: "black", borderBottom: state === 1 ? "3px solid" : "none", borderBottomColor: state === 1 ? "#FEDC00" : "black" }} id="stillcut-tab" data-bs-toggle="tab" data-bs-target="#stillcut" type="button" role="tab" aria-controls="stillcut" aria-selected="false" onClick={() => setState(1)}>예고편</button>
Jiwon Yoon's avatar
Jiwon Yoon committed
105
106
107
108
109
110
111
112
                    </li>
                    <li className="nav-item" role="presentation">
                        <button className="nav-link mx-auto" style={{ color: "white", borderColor: "black", backgroundColor: "black", borderBottom: state === 2 ? "3px solid" : "none", borderBottomColor: state === 2 ? "#FEDC00" : "black" }} id="review-tab" data-bs-toggle="tab" data-bs-target="#review" type="button" role="tab" aria-controls="review" aria-selected="false" onClick={() => setState(2)}>관람평</button>
                    </li>
                </ul>
            </div>
            <div className="tab-content text-center" id="myTabContent" style={{ color: "white" }}>
                <div className="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
113
                    <div className="mt-5 pb-5 px-5">{movieInfo.overview}</div>
Jiwon Yoon's avatar
Jiwon Yoon committed
114
115
                </div>
                <div className="tab-pane fade" id="stillcut" role="tabpanel" aria-labelledby="stillcut-tab">
Jiwon Yoon's avatar
Jiwon Yoon committed
116
                    <Video movieId={movieInfo.id} />
Jiwon Yoon's avatar
Jiwon Yoon committed
117
118
                </div>
                <div className="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
119
                    <div className="mt-5 pb-5 px-5">관람평</div>
Jiwon Yoon's avatar
Jiwon Yoon committed
120
121
                </div>
            </div>
122
        </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
123

124
125
126
127
    )
}

export default MoviePage