BoxOffice.js 6.16 KB
Newer Older
Kim, Subin's avatar
Kim, Subin committed
1
import { useEffect } from "react"
2
import styles from "./box-office.module.scss"
Kim, Subin's avatar
Kim, Subin committed
3

4
const BoxOffice = () => {
Kim, Subin's avatar
Kim, Subin committed
5
6
7
8
9
    useEffect(() => {
        let items = document.querySelectorAll('.carousel .carousel-item')
        console.log("item", items)

        items.forEach((el) => {
Kim, Subin's avatar
Kim, Subin committed
10
            console.log("el", el)
Kim, Subin's avatar
Kim, Subin committed
11
12
13
14
15
16
17
18
19
20
21
22
23
24
            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
            }
        })
    }, [])

    return (
Jiwon Yoon's avatar
Jiwon Yoon committed
25
        <div className="container">
Jiwon Yoon's avatar
Jiwon Yoon committed
26
            <h2 className="fw-bold text-white text-center mt-5">Box Office</h2>
Kim, Subin's avatar
Kim, Subin committed
27
            <div id="multi-carousel" className={`d-flex carousel slide align-items-center ${styles.customHeight}`} data-bs-ride="carousel">
Kim, Subin's avatar
Kim, Subin committed
28
29
30
31
32
33
34
35
                <div className="carousel-inner">
                    <div className="carousel-item active">
                        <div className="col-md-3">
                            <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
36
                                <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
Kim, Subin's avatar
Kim, Subin committed
37
38
39
40
41
42
43
44
45
46
                            </div>
                        </div>
                    </div>
                    <div className="carousel-item">
                        <div className="col-md-3">
                            <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
47
                                <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
Kim, Subin's avatar
Kim, Subin committed
48
49
50
51
52
53
54
55
56
57
                            </div>
                        </div>
                    </div>
                    <div className="carousel-item">
                        <div className="col-md-3">
                            <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
58
                                <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
Kim, Subin's avatar
Kim, Subin committed
59
60
61
62
63
64
65
66
67
68
                            </div>
                        </div>
                    </div>
                    <div className="carousel-item">
                        <div className="col-md-3">
                            <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
69
                                <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
Kim, Subin's avatar
Kim, Subin committed
70
71
72
73
74
75
76
77
78
79
                            </div>
                        </div>
                    </div>
                    <div className="carousel-item">
                        <div className="col-md-3">
                            <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
80
                                <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
Kim, Subin's avatar
Kim, Subin committed
81
82
83
84
85
86
87
88
89
90
                            </div>
                        </div>
                    </div>
                    <div className="carousel-item">
                        <div className="col-md-3">
                            <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
91
                                <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click", e)}>예매하기</button>
Kim, Subin's avatar
Kim, Subin committed
92
93
94
95
96
97
98
99
100
101
102
103
104
                            </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
105
        </div>
Kim, Subin's avatar
Kim, Subin committed
106
107
108
    )
}

109
export default BoxOffice