BoxOffice.js 6.57 KB
Newer Older
Jiwon Yoon's avatar
Jiwon Yoon committed
1
2
3
import axios from "axios"
import baseUrl from '../../utils/baseUrl'
import React, { useState,useEffect } from "react"
4
import styles from "./box-office.module.scss"
Kim, Subin's avatar
Kim, Subin committed
5

6
const BoxOffice = () => {
Jiwon Yoon's avatar
Jiwon Yoon committed
7
    const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState()
Kim, Subin's avatar
Kim, Subin committed
8
    useEffect(() => {
Jiwon Yoon's avatar
Jiwon Yoon committed
9
        getTMDB_TopRated()
Kim, Subin's avatar
Kim, Subin committed
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
        let items = document.querySelectorAll('.carousel .carousel-item')
        console.log("item", items)
        items.forEach((el) => {
            const minPerSlide = 4
            let next = el.nextElementSibling
            for (let i = 1; i < minPerSlide; i++) {
                if (!next) {
                    next = items[0]
                }
                let cloneChild = next.cloneNode(true)
                el.appendChild(cloneChild.children[0])
                next = next.nextElementSibling
            }
        })
    }, [])

Jiwon Yoon's avatar
Jiwon Yoon committed
26
27
28
29
30
31
32
33
34
35
36
37
38
    async function getTMDB_TopRated() {
        try {
            const response = await axios.get(`${baseUrl}/api/movie`)
            console.log(response.data)
        } catch (error) {
            
        }
    }

    async function name() {
        
    }

Kim, Subin's avatar
Kim, Subin committed
39
    return (
Jiwon Yoon's avatar
Jiwon Yoon committed
40
        
Jiwon Yoon's avatar
Jiwon Yoon committed
41
        <div className="container">
Jiwon Yoon's avatar
Jiwon Yoon committed
42
            <h2 className="fw-bold text-white text-center mt-5">Box Office</h2>
Kim, Subin's avatar
Kim, Subin committed
43
            <div id="multi-carousel" className={`d-flex carousel slide align-items-center ${styles.customHeight}`} data-bs-ride="carousel">
Jiwon Yoon's avatar
Jiwon Yoon committed
44
                <div className="carousel-inner row">
Kim, Subin's avatar
Kim, Subin committed
45
                    <div className="carousel-item active">
Jiwon Yoon's avatar
Jiwon Yoon committed
46
                        <div className="col-sm-3">
Kim, Subin's avatar
Kim, Subin committed
47
48
49
50
51
                            <div className="card bg-dark">
                                <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
                                    <img src="//via.placeholder.com/500x400/31f?text=1" className="img-fluid" />
                                </div>
                                <div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 1</div>
Kim, Subin's avatar
Kim, Subin committed
52
                                <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
Kim, Subin's avatar
Kim, Subin committed
53
54
55
56
                            </div>
                        </div>
                    </div>
                    <div className="carousel-item">
Jiwon Yoon's avatar
Jiwon Yoon committed
57
                        <div className="col-sm-3">
Kim, Subin's avatar
Kim, Subin committed
58
59
60
61
62
                            <div className="card bg-dark">
                                <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
                                    <img src="//via.placeholder.com/500x400/e66?text=2" className="img-fluid" />
                                </div>
                                <div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 2</div>
Kim, Subin's avatar
Kim, Subin committed
63
                                <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
Kim, Subin's avatar
Kim, Subin committed
64
65
66
67
                            </div>
                        </div>
                    </div>
                    <div className="carousel-item">
Jiwon Yoon's avatar
Jiwon Yoon committed
68
                        <div className="col-sm-3">
Kim, Subin's avatar
Kim, Subin committed
69
70
71
72
73
                            <div className="card bg-dark">
                                <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
                                    <img src="//via.placeholder.com/500x400/7d2?text=3" className="img-fluid" />
                                </div>
                                <div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 3</div>
Kim, Subin's avatar
Kim, Subin committed
74
                                <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
Kim, Subin's avatar
Kim, Subin committed
75
76
77
78
                            </div>
                        </div>
                    </div>
                    <div className="carousel-item">
Jiwon Yoon's avatar
Jiwon Yoon committed
79
                        <div className="col-sm-3">
Kim, Subin's avatar
Kim, Subin committed
80
81
82
83
84
                            <div className="card bg-dark">
                                <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
                                    <img src="//via.placeholder.com/500x400?text=4" className="img-fluid" />
                                </div>
                                <div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 4</div>
Kim, Subin's avatar
Kim, Subin committed
85
                                <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
Kim, Subin's avatar
Kim, Subin committed
86
87
88
89
                            </div>
                        </div>
                    </div>
                    <div className="carousel-item">
Jiwon Yoon's avatar
Jiwon Yoon committed
90
                        <div className="col-sm-3">
Kim, Subin's avatar
Kim, Subin committed
91
92
93
94
95
                            <div className="card bg-dark">
                                <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
                                    <img src="//via.placeholder.com/500x400/aba?text=5" className="img-fluid" />
                                </div>
                                <div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 5</div>
Kim, Subin's avatar
Kim, Subin committed
96
                                <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
Kim, Subin's avatar
Kim, Subin committed
97
98
99
100
                            </div>
                        </div>
                    </div>
                    <div className="carousel-item">
Jiwon Yoon's avatar
Jiwon Yoon committed
101
                        <div className="col-sm-3">
Kim, Subin's avatar
Kim, Subin committed
102
103
104
105
106
                            <div className="card bg-dark">
                                <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
                                    <img src="//via.placeholder.com/500x400/fc0?text=6" className="img-fluid" />
                                </div>
                                <div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 6</div>
Kim, Subin's avatar
Kim, Subin committed
107
                                <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
Kim, Subin's avatar
Kim, Subin committed
108
109
110
111
112
113
114
115
116
117
118
119
120
                            </div>
                        </div>
                    </div>
                </div>
                <button className="carousel-control-prev" type="button" data-bs-target="#multi-carousel" 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="#multi-carousel" data-bs-slide="next">
                    <span className="carousel-control-next-icon" aria-hidden="true"></span>
                    <span className="visually-hidden">Next</span>
                </button>
            </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
121
        </div>
Kim, Subin's avatar
Kim, Subin committed
122
123
124
    )
}

125
export default BoxOffice