Skip to content

GitLab

Commit 7578fa34 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

영화페이지

parent eb5bd89d
Show whitespace changes
Inline Side-by-side
client/src/App.js
View file @ 7578fa34
...@@ -10,8 +10,10 @@ import MoviePage from "./pages/MoviePage"; ...@@ -10,8 +10,10 @@ import MoviePage from "./pages/MoviePage";
import TheaterPage from "./pages/TheaterPage"; import TheaterPage from "./pages/TheaterPage";
import MyPage from "./pages/MyPage"; import MyPage from "./pages/MyPage";
import AdminPage from "./pages/AdminPage/AdminPage"; import AdminPage from "./pages/AdminPage/AdminPage";
import TicketingPage from "./pages/TicketingPage";
function App() { function App() {
return ( return (
<div className="" style={{ backgroundColor: "black" }}> <div className="" style={{ backgroundColor: "black" }}>
<SubNav /> <SubNav />
...@@ -24,6 +26,7 @@ function App() { ...@@ -24,6 +26,7 @@ function App() {
<Route path="/signup" component={SignupPage} /> <Route path="/signup" component={SignupPage} />
<Route path="/movielist" component={MovieListPage} /> <Route path="/movielist" component={MovieListPage} />
<Route path="/movie/:movieId" component={MoviePage}/> <Route path="/movie/:movieId" component={MoviePage}/>
<Route path="/ticket" component={TicketingPage}/>
<Route path="/admin" component={AdminPage}/> <Route path="/admin" component={AdminPage}/>
</Switch> </Switch>
</Router> </Router>
......
client/src/components/BoxOffice/BoxOffice.js
View file @ 7578fa34
...@@ -25,9 +25,9 @@ const BoxOffice = () => { ...@@ -25,9 +25,9 @@ const BoxOffice = () => {
<div className="container"> <div className="container">
<h2 className="fw-bold text-white text-center mt-5">Box Office</h2> <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 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="carousel-item active">
<div className="col-md-3"> <div className="col-sm-3">
<div className="card bg-dark"> <div className="card bg-dark">
<div className={`card-img ${styles.cursor} ${styles.showplot}`}> <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
<img src="//via.placeholder.com/500x400/31f?text=1" className="img-fluid" /> <img src="//via.placeholder.com/500x400/31f?text=1" className="img-fluid" />
...@@ -38,7 +38,7 @@ const BoxOffice = () => { ...@@ -38,7 +38,7 @@ const BoxOffice = () => {
</div> </div>
</div> </div>
<div className="carousel-item"> <div className="carousel-item">
<div className="col-md-3"> <div className="col-sm-3">
<div className="card bg-dark"> <div className="card bg-dark">
<div className={`card-img ${styles.cursor} ${styles.showplot}`}> <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
<img src="//via.placeholder.com/500x400/e66?text=2" className="img-fluid" /> <img src="//via.placeholder.com/500x400/e66?text=2" className="img-fluid" />
...@@ -49,7 +49,7 @@ const BoxOffice = () => { ...@@ -49,7 +49,7 @@ const BoxOffice = () => {
</div> </div>
</div> </div>
<div className="carousel-item"> <div className="carousel-item">
<div className="col-md-3"> <div className="col-sm-3">
<div className="card bg-dark"> <div className="card bg-dark">
<div className={`card-img ${styles.cursor} ${styles.showplot}`}> <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
<img src="//via.placeholder.com/500x400/7d2?text=3" className="img-fluid" /> <img src="//via.placeholder.com/500x400/7d2?text=3" className="img-fluid" />
...@@ -60,7 +60,7 @@ const BoxOffice = () => { ...@@ -60,7 +60,7 @@ const BoxOffice = () => {
</div> </div>
</div> </div>
<div className="carousel-item"> <div className="carousel-item">
<div className="col-md-3"> <div className="col-sm-3">
<div className="card bg-dark"> <div className="card bg-dark">
<div className={`card-img ${styles.cursor} ${styles.showplot}`}> <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
<img src="//via.placeholder.com/500x400?text=4" className="img-fluid" /> <img src="//via.placeholder.com/500x400?text=4" className="img-fluid" />
...@@ -71,7 +71,7 @@ const BoxOffice = () => { ...@@ -71,7 +71,7 @@ const BoxOffice = () => {
</div> </div>
</div> </div>
<div className="carousel-item"> <div className="carousel-item">
<div className="col-md-3"> <div className="col-sm-3">
<div className="card bg-dark"> <div className="card bg-dark">
<div className={`card-img ${styles.cursor} ${styles.showplot}`}> <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
<img src="//via.placeholder.com/500x400/aba?text=5" className="img-fluid" /> <img src="//via.placeholder.com/500x400/aba?text=5" className="img-fluid" />
...@@ -82,7 +82,7 @@ const BoxOffice = () => { ...@@ -82,7 +82,7 @@ const BoxOffice = () => {
</div> </div>
</div> </div>
<div className="carousel-item"> <div className="carousel-item">
<div className="col-md-3"> <div className="col-sm-3">
<div className="card bg-dark"> <div className="card bg-dark">
<div className={`card-img ${styles.cursor} ${styles.showplot}`}> <div className={`card-img ${styles.cursor} ${styles.showplot}`}>
<img src="//via.placeholder.com/500x400/fc0?text=6" className="img-fluid" /> <img src="//via.placeholder.com/500x400/fc0?text=6" className="img-fluid" />
......
client/src/components/BoxOffice/box-office.module.scss
View file @ 7578fa34
.cursor { /* // .cursor {
cursor: pointer; // cursor: pointer;
} // }
// .dNone {
// display: none;
// }
// .dBlock {
// display: block;
// } */
.dNone { @media (max-width: 767px) {
.carousel-inner .carousel-item > div {
display: none; display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
} }
.dBlock { .carousel-inner .carousel-item.active,
display: block; .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 { .carousel-inner .carousel-item-end,
height: 70vh; .carousel-inner .carousel-item-start {
transform: translateX(0);
} }
client/src/components/MovieChart/MovieChart.js
View file @ 7578fa34
import React, { useState, useEffect } from 'react' import React from 'react'
import { Link } from 'react-router-dom';
import styles from "./movieChart.module.scss" import styles from "./movieChart.module.scss"
const MovieChart = () => { const MovieChart = () => {
const MovieChartList = [ const MovieChartList = [
{ {
"id":1, id: 1,
"src": "/images/movie_image_black.jpg", poster: "/images/movie_image_black.jpg",
"title": "블랙위도우", title: "블랙위도우",
"popularity": 50.98, popularity: 50.98,
"release_date": "2021-07-07", release_date: "2021-07-07",
"runtime": 134 runtime: 134,
overview: "어벤져스의 히어로 블랙 위도우, 나타샤 로마노프는 자신의 과거와 연결된 레드룸의 거대한 음모와 실체를 깨닫게 된다. 상대의 능력을 복제하는 빌런 태스크마스터와 새로운 위도우들의 위협에 맞서 목숨을 건 반격을 시작하는 나타샤는 스파이로 활약했던 자신의 과거 뿐 아니라, 어벤져스가 되기 전 함께했던 동료들을 마주해야만 하는데…"
}, },
{ {
"id":2, id: 2,
"src": "/images/movie_image_limit.jpg", poster: "/images/movie_image_limit.jpg",
"title": "발신제한", title: "발신제한",
"popularity": 3.22, popularity: 3.22,
"release_date": "2021-06-23", release_date: "2021-06-23",
"runtime": 94 runtime: 94,
overview: ''
}, },
{ {
"id":3, id: 3,
"src": "/images/movie_image_everyday.jpg", poster: "/images/movie_image_everyday.jpg",
"title": "우리는 매일매일", title: "우리는 매일매일",
"popularity": 2.83, popularity: 2.83,
"release_date": "2021-06-30", release_date: "2021-06-30",
"runtime": 75 runtime: 75,
overview: ''
}, },
{ {
"id":4, id: 4,
"src": "/images/movie_image_cruella.jpg", poster: "/images/movie_image_cruella.jpg",
"title": "크루엘라", title: "크루엘라",
"popularity": 1.72, popularity: 1.72,
"release_date": "2021-05-26", release_date: "2021-05-26",
"runtime": 133 runtime: 133,
overview: ''
} }
] ]
return ( return (
...@@ -41,13 +47,23 @@ const MovieChart = () => { ...@@ -41,13 +47,23 @@ const MovieChart = () => {
? ?
MovieChartList.map(movie => ( MovieChartList.map(movie => (
<div className="card h-100" style={{ backgroundColor: "black" }}> <div className="card h-100" style={{ backgroundColor: "black" }}>
<a href={`/movie/${movie.id}`}> <Link to={{
<img src={movie.src} className={`card-img-top rounded ${styles.poster}`} alt="Movie Poster" /> pathname: `/movie/${movie.id}`,
{/* <div className={`${styles.darkness}`}></div> */} state: {
{/* <div className={`${styles.description}`}>상세설명asdasd</div> */} id: movie.id,
</a> 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"> <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">예매율: {movie.popularity}% | {movie.runtime}분</p>
<p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p> <p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
</div> </div>
......
client/src/components/MovieChart/movieChart.module.scss
View file @ 7578fa34
.poster{ .layer{
opacity: 1; position: relative;
&:hover{
opacity: 0.3;
}
} }
// .description{ // .poster{
// 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{
// opacity: 1; // 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
View file @ 7578fa34
...@@ -4,7 +4,7 @@ const MainNav = () => { ...@@ -4,7 +4,7 @@ const MainNav = () => {
return ( return (
<nav class="nav justify-content-evenly border border-start-0 border-end-0 border-white border-2 py-1"> <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="/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> <a class="nav-link text-white" href="#">극장</a>
<Search type="home" /> <Search type="home" />
</nav> </nav>
......
client/src/components/TicketingMovie/TicketingMovie.js 0 → 100644
View file @ 7578fa34
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 0 → 100644
View file @ 7578fa34
export { default } from './TicketingMovie'
\ No newline at end of file
client/src/components/TicketingMovie/ticketingMovie.module.scss 0 → 100644
View file @ 7578fa34
.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 0 → 100644
View file @ 7578fa34
const TicketingTheater = () => {
return (
<>
</>
)
}
export default TicketingTheater
\ No newline at end of file
client/src/components/TicketingTimeTable.js 0 → 100644
View file @ 7578fa34
const TicketingTimeTable = () => {
return (
<>
</>
)
}
export default TicketingTimeTable
\ No newline at end of file
client/src/pages/MovieListPage.js
View file @ 7578fa34
import React, { useState, useEffect } from 'react' import React, { useState } from 'react'
import MovieChart from '../components/MovieChart/MovieChart' import MovieChart from '../components/MovieChart/MovieChart'
import MovieComming from '../components/MovieComming/MovieComming' import MovieComming from '../components/MovieComming/MovieComming'
const MovieListPage = () => { const MovieListPage = () => {
......
client/src/pages/MoviePage.js
View file @ 7578fa34
const MoviePage = () => { import React, { useState } from 'react';
import { Link } from 'react-router-dom';
return ( const MoviePage = ({ location }) => {
<div> 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>
<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 0 → 100644
View file @ 7578fa34
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
View file @ 7578fa34
...@@ -27,12 +27,12 @@ $theme-colors: map-merge($theme-colors, $custom-colors); ...@@ -27,12 +27,12 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
font-family: "HangeulNuriB" font-family: "HangeulNuriB"
} }
.carousel-inner .carousel-item.active, // .carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next, // .carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev { // .carousel-inner .carousel-item-prev {
display: flex; // display: flex;
justify-content: center; // justify-content: center;
} // }
@font-face { @font-face {
font-family: 'HangeulNuri-Bold'; font-family: 'HangeulNuri-Bold';
...@@ -41,33 +41,33 @@ $theme-colors: map-merge($theme-colors, $custom-colors); ...@@ -41,33 +41,33 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
font-style: normal; font-style: normal;
} }
@media (max-width: 767px) { // @media (max-width: 767px) {
.carousel-inner .carousel-item > div { // .carousel-inner .carousel-item > div {
display: none; // display: none;
} // }
.carousel-inner .carousel-item > div:first-child { // .carousel-inner .carousel-item > div:first-child {
display: block; // display: block;
} // }
.table > :not(caption) > * > * { // .table > :not(caption) > * > * {
border-bottom-width: 0; // border-bottom-width: 0;
} // }
} // }
/* medium and up screens */ // /* medium and up screens */
@media (min-width: 768px) { // @media (min-width: 768px) {
.carousel-inner .carousel-item-end.active, // .carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next { // .carousel-inner .carousel-item-next {
transform: translateX(25%); // transform: translateX(25%);
} // }
.carousel-inner .carousel-item-start.active, // .carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev { // .carousel-inner .carousel-item-prev {
transform: translateX(-25%); // transform: translateX(-25%);
} // }
} // }
.carousel-inner .carousel-item-end, // .carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { // .carousel-inner .carousel-item-start {
transform: translateX(0); // transform: translateX(0);
} // }
\ No newline at end of file \ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment