MoviePage.js 6.8 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
10
11
12
13
        stillCuts: [],
        cast: "",
        director: "",
        genres: [],
        attendance: ""
Jiwon Yoon's avatar
Jiwon Yoon committed
14
15
16
    })
    const [state, setState] = useState(0)

Jiwon Yoon's avatar
Jiwon Yoon committed
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
    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)
            const casts = castsInfo.reduce((acc, cur, idx) => {
                if (idx !== 0) return acc + ', ' + cur
                else return acc + cur
            },"")
            console.log(castsInfo)
            const directorsInfo = await credits.crew.filter(element => element.job === "Director")
            const directors = directorsInfo.reduce((acc, cur, idx) => {
                if (idx !== 0) return acc + ', ' + cur.name
                else return acc + cur.name
            },"")

            console.log("directorInfo=",directorsInfo)
            setMovieInfo({
                ...movieInfo,
                stillCuts: still,
                cast: casts,
                director: directors
            })
        } catch (error) {
            console.log(error)
        }
    }

50
    return (
Jiwon Yoon's avatar
Jiwon Yoon committed
51
52
53
54
55
        <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
56
                        ? movieInfo.stillCuts.map((imageUrl, index) => (
Jiwon Yoon's avatar
Jiwon Yoon committed
57
                            <div className={`carousel-item ${index === 0 ? "active" : ""}`} >
Jiwon Yoon's avatar
Jiwon Yoon committed
58
                                <img src={`https://image.tmdb.org/t/p/original${imageUrl}`} className="d-block w-100" alt="스틸컷" />
Jiwon Yoon's avatar
Jiwon Yoon committed
59
60
61
                            </div>
                        ))
                        : <div className="carousel-item">
Jiwon Yoon's avatar
Jiwon Yoon committed
62
63
                            {console.log("스틸컷 불러오기 오류")}
                            <img src="/images/none.jpg" className="d-block w-100" alt="등록된 스틸컷이 없습니다." />
Jiwon Yoon's avatar
Jiwon Yoon committed
64
65
66
67
68
69
70
71
72
73
74
75
                        </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
76
77
                <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
78
                </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
79
80
81
82
83
                <div className="col-sm-6 " style={{ color: "white" }}>
                    <h1 className="pb-3">{movieInfo.title}</h1>
                    <p>예매율: 0% 누적관객수: {movieInfo.attendance}</p>
                    <p>감독: {movieInfo.director}</p>
                    <p>출연: {movieInfo.cast}</p>
Jiwon Yoon's avatar
Jiwon Yoon committed
84
85
                    <p>장르: {movieInfo.genres.map(e => e)}</p>
                    <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
113
114
115
                    </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">
                    <div>{movieInfo.overview}</div>
                </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
119
120
121
                </div>
                <div className="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
                    <div>관람평</div>
                </div>
            </div>
122
        </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
123

124
125
126
127
    )
}

export default MoviePage