영화페이지

client/src/App.js

@@ -10,8 +10,10 @@ import MoviePage from "./pages/MoviePage";
 import TheaterPage from "./pages/TheaterPage";
 import MyPage from "./pages/MyPage";
 import AdminPage from "./pages/AdminPage/AdminPage";
+import TicketingPage from "./pages/TicketingPage";
 
 function App() {
+  
   return (
     <div className="" style={{ backgroundColor: "black" }}>
       <SubNav />
@@ -24,6 +26,7 @@ function App() {
           <Route path="/signup" component={SignupPage} />
           <Route path="/movielist" component={MovieListPage} />
           <Route path="/movie/:movieId" component={MoviePage}/>
+          <Route path="/ticket" component={TicketingPage}/>
           <Route path="/admin" component={AdminPage}/>
         </Switch>
       </Router>

client/src/components/BoxOffice/BoxOffice.js

@@ -25,9 +25,9 @@ const BoxOffice = () => {
         <div className="container">
             <h2 className="fw-bold text-white text-center mt-5">Box Office</h2>
             <div id="multi-carousel" className={`d-flex carousel slide align-items-center ${styles.customHeight}`} data-bs-ride="carousel">
-                <div className="carousel-inner">
+                <div className="carousel-inner row">
                     <div className="carousel-item active">
-                        <div className="col-md-3">
+                        <div className="col-sm-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" />
@@ -38,7 +38,7 @@ const BoxOffice = () => {
                         </div>
                     </div>
                     <div className="carousel-item">
-                        <div className="col-md-3">
+                        <div className="col-sm-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" />
@@ -49,7 +49,7 @@ const BoxOffice = () => {
                         </div>
                     </div>
                     <div className="carousel-item">
-                        <div className="col-md-3">
+                        <div className="col-sm-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" />
@@ -60,7 +60,7 @@ const BoxOffice = () => {
                         </div>
                     </div>
                     <div className="carousel-item">
-                        <div className="col-md-3">
+                        <div className="col-sm-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" />
@@ -71,7 +71,7 @@ const BoxOffice = () => {
                         </div>
                     </div>
                     <div className="carousel-item">
-                        <div className="col-md-3">
+                        <div className="col-sm-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" />
@@ -82,7 +82,7 @@ const BoxOffice = () => {
                         </div>
                     </div>
                     <div className="carousel-item">
-                        <div className="col-md-3">
+                        <div className="col-sm-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" />

client/src/components/BoxOffice/box-office.module.scss

-.cursor {
-    cursor: pointer;
-}
+/* // .cursor {
+//     cursor: pointer;
+// }
+
+// .dNone {
+//     display: none;
+// }
+
+// .dBlock {
+//     display: block;
+// } */
 
-.dNone {
+@media (max-width: 767px) {
+    .carousel-inner .carousel-item > div {
         display: none;
+    }
+    .carousel-inner .carousel-item > div:first-child {
+        display: block;
+    }
 }
 
-.dBlock {
-    display: block;
+.carousel-inner .carousel-item.active,
+.carousel-inner .carousel-item-next,
+.carousel-inner .carousel-item-prev {
+    display: flex;
+}
+
+/* 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%);
+    }
 }
 
-.customHeight {
-    height: 70vh;
+.carousel-inner .carousel-item-end,
+.carousel-inner .carousel-item-start { 
+  transform: translateX(0);
 }

client/src/components/MovieChart/MovieChart.js

-import React, { useState, useEffect } from 'react'
+import React from 'react'
+import { Link } from 'react-router-dom';
 import styles from "./movieChart.module.scss"
+
 const MovieChart = () => {
     const MovieChartList = [
         {
-            "id":1,
-            "src": "/images/movie_image_black.jpg",
-            "title": "블랙위도우",
-            "popularity": 50.98,
-            "release_date": "2021-07-07",
-            "runtime": 134
+            id: 1,
+            poster: "/images/movie_image_black.jpg",
+            title: "블랙위도우",
+            popularity: 50.98,
+            release_date: "2021-07-07",
+            runtime: 134,
+            overview: "어벤져스의 히어로 블랙 위도우, 나타샤 로마노프는 자신의 과거와 연결된 레드룸의 거대한 음모와 실체를 깨닫게 된다. 상대의 능력을 복제하는 빌런 태스크마스터와 새로운 위도우들의 위협에 맞서 목숨을 건 반격을 시작하는 나타샤는 스파이로 활약했던 자신의 과거 뿐 아니라, 어벤져스가 되기 전 함께했던 동료들을 마주해야만 하는데…"
         },
         {
-            "id":2,
-            "src": "/images/movie_image_limit.jpg",
-            "title": "발신제한",
-            "popularity": 3.22,
-            "release_date": "2021-06-23",
-            "runtime": 94
+            id: 2,
+            poster: "/images/movie_image_limit.jpg",
+            title: "발신제한",
+            popularity: 3.22,
+            release_date: "2021-06-23",
+            runtime: 94,
+            overview: ''
         },
         {
-            "id":3,
-            "src": "/images/movie_image_everyday.jpg",
-            "title": "우리는 매일매일",
-            "popularity": 2.83,
-            "release_date": "2021-06-30",
-            "runtime": 75
+            id: 3,
+            poster: "/images/movie_image_everyday.jpg",
+            title: "우리는 매일매일",
+            popularity: 2.83,
+            release_date: "2021-06-30",
+            runtime: 75,
+            overview: ''
         },
         {
-            "id":4,
-            "src": "/images/movie_image_cruella.jpg",
-            "title": "크루엘라",
-            "popularity": 1.72,
-            "release_date": "2021-05-26",
-            "runtime": 133
+            id: 4,
+            poster: "/images/movie_image_cruella.jpg",
+            title: "크루엘라",
+            popularity: 1.72,
+            release_date: "2021-05-26",
+            runtime: 133,
+            overview: ''
         }
     ]
     return (
@@ -41,13 +47,23 @@ const MovieChart = () => {
                 ?
                 MovieChartList.map(movie => (
                     <div className="card h-100" style={{ backgroundColor: "black" }}>
-                        <a href={`/movie/${movie.id}`}>
-                            <img src={movie.src} className={`card-img-top rounded ${styles.poster}`} alt="Movie Poster" />
-                            {/* <div className={`${styles.darkness}`}></div> */}
-                            {/* <div className={`${styles.description}`}>상세설명asdasd</div> */}
-                        </a>
+                        <Link to={{
+                            pathname: `/movie/${movie.id}`,
+                            state: {
+                                id: movie.id,
+                                poster: movie.poster,
+                                title: movie.title,
+                                popularity: movie.popularity,
+                                release_date: movie.release_date,
+                                runtime: movie.runtime,
+                                overview: movie.overview
+                            }
+                        }} className={`${styles.layer}`} >
+                            <img src={movie.poster} className={`card-img-top rounded ${styles.poster}`} alt="Movie Poster" />
+                            <div className={`${styles.description}`}>{movie.overview}</div>
+                        </Link>
                         <div className="card-body text-light">
-                            <h5 className="card-title text-center">{movie.title}</h5>
+                            <marquee onmouseover="this.stop()" className={`h2 card-title text-center ${styles.title}`}>{movie.title}</marquee>
                             <p className="card-text text-center">예매율: {movie.popularity}% | {movie.runtime}분</p>
                             <p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
                         </div>

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

-.poster{
-    opacity: 1;
-    &:hover{
-        opacity: 0.3;
-    }
+.layer{
+    position: relative;
 }
-// .description{
-//     transition: .5s ease;
-//     opacity: 0;
-//     position: absolute;
-//     top: 50%;
-//     left: 50%;
-//     transform: translate(-50%, -50%);
-//     -ms-transform: translate(-50%, -50%);
-//     text-align: center;
-//     color:white;
-//     &:hover{
+// .poster{
 //     opacity: 1;
+//     &:hover{
+//         opacity: 0.3;
 //     }
 // }
+.description{
+    position: absolute;
+    top: 0%;
+    left: 0%;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    background-color:rgba(0, 0, 0, 0.6);
+    text-align: center;
+    color:white;
+    //ellipsis
+    text-overflow: ellipsis;
+    white-space: pre-line;
+    display: -webkit-box;
+    -webkit-line-clamp: 9;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    &:hover{
+        opacity: 1;
+    }
+}
+.title{
+    
+}
\ No newline at end of file

client/src/components/Navs/MainNav.js

@@ -4,7 +4,7 @@ const MainNav = () => {
     return (
         <nav class="nav justify-content-evenly border border-start-0 border-end-0 border-white border-2 py-1">
             <a class="nav-link text-white" href="/movielist">영화</a>
-            <a class="nav-link text-white" href="#">빠른예매</a>
+            <a class="nav-link text-white" href="/ticket">빠른예매</a>
             <a class="nav-link text-white" href="#">극장</a>
             <Search type="home" />
         </nav>

client/src/components/TicketingMovie/TicketingMovie.js

+import React,{useState} from 'react'
+import styles from "./ticketingMovie.module.scss"
+
+const TicketingMovie = () => {
+    const [state, setState] = useState(0)
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default TicketingMovie
\ No newline at end of file

client/src/components/TicketingMovie/index.js

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

client/src/components/TicketingMovie/ticketingMovie.module.scss

+.navBtn{
+    color: "white";
+    background-color: "black"; 
+    border-color:"#FEDC00";
+    border-top: "0";
+    border-left: "0";
+    border-right: "0";
+    border-bottom: "3px solid";
+}
+
+.navBtnFocus{
+    color: "white";
+    background-color: "black"; 
+    border-color:"#FEDC00";
+    border-bottom: "0";
+}
\ No newline at end of file

client/src/components/TicketingTheater.js

+const TicketingTheater = () => {
+    return (
+        <>
+
+        </>
+    )
+}
+
+export default TicketingTheater
\ No newline at end of file

client/src/components/TicketingTimeTable.js

+const TicketingTimeTable = () => {
+    return (
+        <>
+
+        </>
+    )
+}
+
+export default TicketingTimeTable
\ No newline at end of file

client/src/pages/MovieListPage.js

-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import MovieChart from '../components/MovieChart/MovieChart'
 import MovieComming from '../components/MovieComming/MovieComming'
 const MovieListPage = () => {

client/src/pages/MoviePage.js

-const MoviePage = () => {
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
 
-    return (
-        <div>
+const MoviePage = ({ location }) => {
+    const [movieInfo, setMovieInfo] = useState({
+        ...location.state,
+        stillCuts: ["/images/movie_image_black_stillcut1.jpg", "/images/movie_image_black_stillcut2.jpg", "/images/movie_image_black_stillcut3.jpg"],
+        production: "케이트 쇼트랜드",
+        casts: ["Scarlett Johansson", "Florence Pugh", "David Harbour", "Rachel Weisz"],
+        genres: ["액션", "모험", "스릴러"],
+        attendance: 585954
+    })
+    const [state, setState] = useState(0)
 
+    return (
+        <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
+                        ? movieInfo.stillCuts.map((image, index) => (
+                            <div className={`carousel-item ${index === 0 ? "active" : ""}`} data-bs-interval="1000">
+                                <img src={image} className="d-block w-100" alt="스틸컷" />
+                            </div>
+                        ))
+                        : <div className="carousel-item">
+                            <img src="..." className="d-block w-100" alt="등록된 스틸컷이 없습니다." />
+                        </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">
+                <div className="col-sm-3">
+                    <img className="img-thumbnail" src={movieInfo.poster} alt="영화포스터" />
+                </div>
+                <div className="col-sm-6 p-4" style={{ color: "white" }}>
+                    <h1 className="py-3">{movieInfo.title}</h1>
+                    <p>예매율: {movieInfo.popularity}% 누적관객수: {movieInfo.attendance}명</p>
+                    <p>감독: {movieInfo.production}</p>
+                    <p>출연: {movieInfo.casts.map(e => e)}</p>
+                    <p>장르: {movieInfo.genres.map(e => e)}</p>
+                    <p>개봉일:{movieInfo.release_date}</p>
+                    <Link to={{
+                            pathname: `/ticket`,
+                            state: {
+                                id: movieInfo.id,
+                                poster: movieInfo.poster,
+                                title: movieInfo.title,
+                            }
+                        }}>
+                        <button className="btn btn-warning">예매하기</button>
+                    </Link>
+                </div>
             </div>
+            <div className="">
+                <ul className="nav nav-tabs justify-content-center my-4 border-0" id="myTab" role="tablist">
+                    <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">
+                        <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>
+                    </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">
+                    <div>예고편/스틸컷</div>
+                </div>
+                <div className="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
+                    <div>관람평</div>
+                </div>
+            </div>
+        </div>
+
     )
 }
 

client/src/pages/TicketingPage.js

+import React from 'react'
+import TicketingMovie from "../components/TicketingMovie/TicketingMovie"
+import TicketingTheater from "../components/TicketingTheater"
+import TicketingTimeTable from "../components/TicketingTimeTable"
+
+const TicketingPage = () => {
+    return (
+        <div style={{ backgroundColor: "black" }}>
+            <div className="row justify-content-center my-5">
+                <div className="col-sm-4">
+                    <h2 className="py-2 text-white text-center" style={{borderTop:"3px solid #FEDC00", borderBottom:"3px solid #FEDC00"}}>영화</h2>
+                    <TicketingMovie />
+                </div>
+                <div className="col-sm-4">
+                    <h2>극장</h2>
+                    <TicketingTheater />
+                </div>
+                <div className="col-sm-4">
+                    <h2>시간표</h2>
+                    <TicketingTimeTable />
+                </div>
+            </div>
+
+        </div>
+    )
+}
+
+export default TicketingPage
\ No newline at end of file

client/src/scss/custom.scss

@@ -27,12 +27,12 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
     font-family: "HangeulNuriB"
 }
 
-.carousel-inner .carousel-item.active,
-.carousel-inner .carousel-item-next,
-.carousel-inner .carousel-item-prev {
-    display: flex;
-    justify-content: center;
-}
+// .carousel-inner .carousel-item.active,
+// .carousel-inner .carousel-item-next,
+// .carousel-inner .carousel-item-prev {
+//     display: flex;
+//     justify-content: center;
+// }
 
 @font-face {
   font-family: 'HangeulNuri-Bold';
@@ -41,33 +41,33 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
   font-style: normal;
 }
 
-@media (max-width: 767px) {
-    .carousel-inner .carousel-item > div {
-        display: none;
-    }
-    .carousel-inner .carousel-item > div:first-child {
-        display: block;
-    }
-    .table > :not(caption) > * > * {
-        border-bottom-width: 0;
-    }
-}
+// @media (max-width: 767px) {
+//     .carousel-inner .carousel-item > div {
+//         display: none;
+//     }
+//     .carousel-inner .carousel-item > div:first-child {
+//         display: block;
+//     }
+//     .table > :not(caption) > * > * {
+//         border-bottom-width: 0;
+//     }
+// }
 
-/* medium and up screens */
-@media (min-width: 768px) {
+// /* 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-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-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
+// .carousel-inner .carousel-item-end,
+// .carousel-inner .carousel-item-start { 
+//   transform: translateX(0);
+// }
\ No newline at end of file