Skip to content

GitLab

Commit a2aad3e6 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

movieList-css

parent 04e35c5c
Show whitespace changes
Inline Side-by-side
client/src/App.js
View file @ a2aad3e6
...@@ -22,7 +22,8 @@ function App() { ...@@ -22,7 +22,8 @@ function App() {
<Route exact path="/" component={HomePage} /> <Route exact path="/" component={HomePage} />
<Route path="/login" component={LoginPage} /> <Route path="/login" component={LoginPage} />
<Route path="/signup" component={SignupPage} /> <Route path="/signup" component={SignupPage} />
<Route path="/movie" component={MovieListPage} /> <Route path="/movielist" component={MovieListPage} />
<Route path="/movie/:movieId" component={MoviePage}/>
<Route path="/admin" component={AdminPage}/> <Route path="/admin" component={AdminPage}/>
</Switch> </Switch>
</Router> </Router>
......
client/src/components/Movie/index.js 0 → 100644
View file @ a2aad3e6
export { default } from './Movie'
client/src/components/MovieChart.js deleted 100644 → 0
View file @ 04e35c5c
const MovieChart = () => {
return (
<>
<h1>영화</h1>
</>
)
}
export default MovieChart
\ No newline at end of file
client/src/components/MovieChart/MovieChart.js 0 → 100644
View file @ a2aad3e6
import React, { useState, useEffect } from 'react'
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":2,
"src": "/images/movie_image_limit.jpg",
"title": "발신제한",
"popularity": 3.22,
"release_date": "2021-06-23",
"runtime": 94
},
{
"id":3,
"src": "/images/movie_image_everyday.jpg",
"title": "우리는 매일매일",
"popularity": 2.83,
"release_date": "2021-06-30",
"runtime": 75
},
{
"id":4,
"src": "/images/movie_image_cruella.jpg",
"title": "크루엘라",
"popularity": 1.72,
"release_date": "2021-05-26",
"runtime": 133
}
]
return (
<div class="row row-cols-1 row-cols-md-4 g-4">
{MovieChartList.length > 0
?
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>
<div className="card-body text-light">
<h5 className="card-title text-center">{movie.title}</h5>
<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>
<button className="btn btn-warning">예매하기</button>
</div>
))
: <div>영화정보를 로딩할 수 없습니다.</div>
}
</div>
)
}
export default MovieChart
\ No newline at end of file
client/src/components/MovieChart/index.js 0 → 100644
View file @ a2aad3e6
export { default } from './MovieChart'
\ No newline at end of file
client/src/components/MovieChart/movieChart.module.scss 0 → 100644
View file @ a2aad3e6
.poster{
opacity: 1;
&:hover{
opacity: 0.3;
}
}
// .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{
// opacity: 1;
// }
// }
\ No newline at end of file
client/src/components/MovieComming.js deleted 100644 → 0
View file @ 04e35c5c
const MovieComming = () => {
return (
<>
<h1>상영예정작</h1>
</>
)
}
export default MovieComming
\ No newline at end of file
client/src/components/MovieComming/MovieComming.js 0 → 100644
View file @ a2aad3e6
import styles from "./movieComming.module.scss"
const MovieComming = () => {
const MovieCommingList = [
{
"src": "/images/movie_image_black.jpg",
"title": "블랙위도우",
"popularity": 50.98,
"release_date": "2021-07-07",
"runtime": 134
},
{
"src": "/images/movie_image_limit.jpg",
"title": "발신제한",
"popularity": 3.22,
"release_date": "2021-06-23",
"runtime": 94
},
{
"src": "/images/movie_image_everyday.jpg",
"title": "우리는 매일매일",
"popularity": 2.83,
"release_date": "2021-06-30",
"runtime": 75
},
{
"src": "/images/movie_image_cruella.jpg",
"title": "크루엘라",
"popularity": 1.72,
"release_date": "2021-05-26",
"runtime": 133
}
]
return (
<div class="row row-cols-1 row-cols-md-4 g-4">
{MovieCommingList.length > 0
?
MovieCommingList.map(movie => (
<div className="card h-100" style={{ backgroundColor: "black" }}>
<img src={movie.src} className={`card-img-top rounded ${styles.poster}`} alt="Movie Poster" />
<div className="card-body text-light">
<h5 className="card-title text-center">{movie.title}</h5>
<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>
<button className="btn btn-warning">예매하기</button>
</div>
))
: <div>영화정보를 로딩할 수 없습니다.</div>
}
</div>
)
}
export default MovieComming
\ No newline at end of file
client/src/components/MovieComming/index.js 0 → 100644
View file @ a2aad3e6
export { default } from './MovieComming'
\ No newline at end of file
client/src/components/MovieComming/movieComming.module.scss 0 → 100644
View file @ a2aad3e6
.poster{
opacity: 1;
&:hover{
opacity: 0.3;
}
}
\ No newline at end of file
client/src/components/Navs/MainNav.js
View file @ a2aad3e6
...@@ -3,7 +3,7 @@ import Search from "../Search"; ...@@ -3,7 +3,7 @@ import Search from "../Search";
const MainNav = () => { 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="/movie">영화</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="#">빠른예매</a>
<a class="nav-link text-white" href="#">극장</a> <a class="nav-link text-white" href="#">극장</a>
<Search type="home" /> <Search type="home" />
......
client/src/pages/MovieListPage.js
View file @ a2aad3e6
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import MovieChart from '../components/MovieChart' import MovieChart from '../components/MovieChart/MovieChart'
import MovieComming from '../components/MovieComming' import MovieComming from '../components/MovieComming/MovieComming'
const MovieListPage = () => { const MovieListPage = () => {
const [state, setState] = useState(true)
return ( return (
<div className="container"> <div className="container">
<ul className="nav nav-tabs row justify-content-center my-3 border-0" id="myTab" role="tablist"> <div className="">
<li className={`nav-item col-5`} role="presentation"> <ul className="nav nav-tabs justify-content-center my-4 border-0" id="myTab" role="tablist">
<button className="nav-link active mx-auto" id="moviechart-tab" data-bs-toggle="tab" data-bs-target="#moviechart" type="button" role="tab" aria-controls="moviechart" aria-selected="true">무비차트</button> <li className="nav-item" role="presentation">
<button className="nav-link active mx-auto" style={{color:"white", borderColor: "black", backgroundColor:"black", borderBottom: state? "3px solid":"none" ,borderBottomColor:state?"#FEDC00":"black"}} id="moviechart-tab" data-bs-toggle="tab" data-bs-target="#moviechart" type="button" role="tab" aria-controls="moviechart" aria-selected="true" onClick={() => setState(true)}>무비차트</button>
</li> </li>
<li className="nav-item col-5" role="presentation"> <li className="nav-item" role="presentation">
<button className="nav-link mx-auto" id="moviecomming-tab" data-bs-toggle="tab" data-bs-target="#moviecomming" type="button" role="tab" aria-controls="moviecomming" aria-selected="false">상영예정작</button> <button className="nav-link mx-auto" style={{color:"white", borderColor: "black",backgroundColor:"black", borderBottom: state?"none" :"3px solid", borderBottomColor:state?"black": "#FEDC00"}} id="moviecomming-tab" data-bs-toggle="tab" data-bs-target="#moviecomming" type="button" role="tab" aria-controls="moviecomming" aria-selected="false" onClick={() => setState(false)}>상영예정작</button>
</li> </li>
</ul> </ul>
</div>
<div className="tab-content" id="myTabContent"> <div className="tab-content" id="myTabContent">
<div className="tab-pane fade show active" id="moviechart" role="tabpanel" aria-labelledby="moviechart-tab"> <div className="tab-pane fade show active" id="moviechart" role="tabpanel" aria-labelledby="moviechart-tab">
<MovieChart /> <MovieChart />
......
client/src/pages/MoviePage.js
View file @ a2aad3e6
const MoviePage = () => { const MoviePage = () => {
return ( return (
<div> <div>
......
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