TicketingPage.js 4.09 KB
Newer Older
Jiwon Yoon's avatar
Jiwon Yoon committed
1
2
3
4
5
6
import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import movieApi from '../apis/movie.api.js'
import TicketingMovie from "../components/TicketingMovie/TicketingMovie.js"
import TicketingTheater from "../components/TicketingTheater/TicketingTheater.js"
import TicketingTimeTable from "../components/TicketingTimeTable/TicketingTimeTable.js"
Jiwon Yoon's avatar
Jiwon Yoon committed
7

Jiwon Yoon's avatar
Jiwon Yoon committed
8
9
10
11
const TicketingPage = ({ location }) => {
    const [ticketInfo, setTicketInfo] = useState({
        ...location.state,
        theater:"",
Jiwon Yoon's avatar
Jiwon Yoon committed
12
13
        selectedCinemaNum: 3,
        time: "2021/07/21 10:00"
Jiwon Yoon's avatar
Jiwon Yoon committed
14
    })
Jiwon Yoon's avatar
Jiwon Yoon committed
15
    const [theaterInfo, setTheaterInfo] = useState({
Jiwon Yoon's avatar
Jiwon Yoon committed
16
17
        theater: ["Butter Studio 조치원"],
        cinemaNum: [1, 2, 3, 4]
Jiwon Yoon's avatar
Jiwon Yoon committed
18
    })
Jiwon Yoon's avatar
Jiwon Yoon committed
19
20
21
22
23
    const [movieInfo, setMovieInfo] = useState()

    useEffect(() => {
        getMovieInfo()
    }, [ticketInfo])
Jiwon Yoon's avatar
Jiwon Yoon committed
24

Jiwon Yoon's avatar
Jiwon Yoon committed
25
26
27
28
29
30
31
32
    async function getMovieInfo() {
        try {
            const data = await movieApi.getMovieInfofromTM(ticketInfo.movieId)
            setMovieInfo(data)
        } catch (error) {
            console.log(error)
        }
    }
Jiwon Yoon's avatar
Jiwon Yoon committed
33

Jiwon Yoon's avatar
Jiwon Yoon committed
34
    return (
Jiwon Yoon's avatar
Jiwon Yoon committed
35
        <div className="container" style={{ backgroundColor: "black" }}>
Jiwon Yoon's avatar
Jiwon Yoon committed
36
            <div>
Jiwon Yoon's avatar
Jiwon Yoon committed
37
                {console.log(ticketInfo)}
Jiwon Yoon's avatar
Jiwon Yoon committed
38
            </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
39
            <div className="row justify-content-center my-5">
Jiwon Yoon's avatar
Jiwon Yoon committed
40
41
42
                <div className="col-sm-4 mb-4 ">
                    <h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>영화</h3>
                    <TicketingMovie ticketInfo={ticketInfo} setTicketInfo={setTicketInfo} />
Jiwon Yoon's avatar
Jiwon Yoon committed
43
                </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
44
45
46
                <div className="col-sm-3 mb-4 ">
                    <h3 className="py-2 mb-3 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>극장</h3>
                    <TicketingTheater theaterInfo={theaterInfo} ticketInfo={ticketInfo} setTicketInfo={setTicketInfo} />
Jiwon Yoon's avatar
Jiwon Yoon committed
47
                </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
48
49
50
                <div className="col-sm-5 mb-4 ">
                    <h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>시간표</h3>
                    <TicketingTimeTable ticketInfo={ticketInfo} theaterInfo={theaterInfo} />
Jiwon Yoon's avatar
Jiwon Yoon committed
51
52
                </div>
            </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
53
54
55
56
57
58
59
60
61
62
63
64
            <div className="row p-3" style={{ backgroundColor: "#252525"}}>
                <div className="col-sm-3 border-end text-center">
                    {movieInfo
                        ? <img style={{ maxHeight: "10rem" }} src={`https://image.tmdb.org/t/p/original${movieInfo.poster_path}`} alt="영화포스터" />
                        : <div className="mb-2" style={{ color: "white" }}>영화선택</div>}
                </div>
                <div className="col-sm-6 border-end" style={{ color: "white" }}>
                    <div className="mb-2  text-center">극장선택</div>
                    {movieInfo && ticketInfo.theater
                        ? <ul>
                            <li>영화: {movieInfo.title}</li>
                            <li>극장: {ticketInfo.theater}</li>
Jiwon Yoon's avatar
Jiwon Yoon committed
65
66
                            <li>일시: {ticketInfo.time}</li>
                            <li>상영관: {ticketInfo.selectedCinemaNum}</li>
Jiwon Yoon's avatar
Jiwon Yoon committed
67
68
69
70
71
72
73
74
                        </ul>
                        : <div></div>}
                </div>
                <div className="col-sm-3 text-center">
                    <div className="mb-2" style={{ color: "white" }}>좌석선택</div>
                    {movieInfo && ticketInfo.theater
                        ?
                        <Link to={{
Jiwon Yoon's avatar
Jiwon Yoon committed
75
76
                            pathname: `/ticket/seat`,
                            state: {...ticketInfo,...movieInfo}
Jiwon Yoon's avatar
Jiwon Yoon committed
77
78
79
80
81
                        }}>
                            <img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" alt="예매하기" />
                        </Link>
                        :
                        <img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" alt="예매하기" />
Jiwon Yoon's avatar
Jiwon Yoon committed
82

Jiwon Yoon's avatar
Jiwon Yoon committed
83
84
85
                    }
                </div>
            </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
86
87
88
89
90
        </div>
    )
}

export default TicketingPage