MovieChart

client/src/components/MovieChart/MovieChart.js

+import { useEffect } from "react"
+import styles from "./moviechart.module.scss"
+
+const MovieChart = () => {
+    useEffect(() => {
+        let items = document.querySelectorAll('.carousel .carousel-item')
+        console.log("item", items)
+
+        items.forEach((el) => {
+            console.log("el",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
+            }
+        })
+    }, [])
+
+    return (
+            <div id="multi-carousel" className={`d-flex carousel slide align-items-center bg-dark ${styles.customHeight}`} data-bs-ride="carousel">
+                <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>
+                                <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click",e)}>예매하기</button>
+                            </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>
+                                <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click",e)}>예매하기</button>
+                            </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>
+                                <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click",e)}>예매하기</button>
+                            </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>
+                                <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click",e)}>예매하기</button>
+                            </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>
+                                <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click",e)}>예매하기</button>
+                            </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>
+                                <button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click",e)}>예매하기</button>
+                            </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>
+    )
+}
+
+export default MovieChart
\ No newline at end of file

client/src/components/MovieChart/index.js

+export { default } from './MovieChart'
\ No newline at end of file

client/src/components/MovieChart/moviechart.module.scss

+.cursor {
+    cursor: pointer;
+}
+
+.dNone {
+    display: none;
+}
+
+.dBlock {
+    display: block;
+}
+
+.customHeight {
+    height: 70vh;
+}
\ No newline at end of file

client/src/pages/HomePage.js

 import MainNav from "../components/Navs/MainNav";
+import MovieChart from "../components/MovieChart";
 import Footer from "../components/Footer";
 
 const HomePage = () => {
     return (
         <div>
             <MainNav />
+            <MovieChart />
             <Footer />
         </div>
     )

client/src/scss/custom.scss

 @import '~bootstrap/scss/bootstrap.scss';
-@import '~bootstrap-icons/font/bootstrap-icons'; 
\ No newline at end of file
+@import '~bootstrap-icons/font/bootstrap-icons'; 
+
+.carousel-inner .carousel-item.active,
+.carousel-inner .carousel-item-next,
+.carousel-inner .carousel-item-prev {
+    display: flex;
+    justify-content: center;
+}
+
+@media (max-width: 767px) {
+    .carousel-inner .carousel-item > div {
+        display: none;
+        // left: -50%;
+    }
+    .carousel-inner .carousel-item > div:first-child {
+        display: block;
+        // left: 50%;
+    }
+}
+
+/* medium and up screens */
+@media (min-width: 768px) {
+    
+    .carousel-inner .carousel-item-end.active,
+    .carousel-inner .carousel-item-next {
+      transform: translateX(25%);
+    }
+    
+    .carousel-inner .carousel-item-start.active, 
+    .carousel-inner .carousel-item-prev {
+      transform: translateX(-25%);
+    }
+}
+
+.carousel-inner .carousel-item-end,
+.carousel-inner .carousel-item-start { 
+  transform: translateX(0);
+}
\ No newline at end of file