Skip to content

GitLab

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

0719 예매페이지

parent 5f60aebc
Show whitespace changes
Inline Side-by-side
.env.development deleted 100644 → 0
View file @ 5f60aebc
PG_DATABASE=butterDB
PG_USER=butter
PG_PASSWORD=butter
TMDB_APP_KEY=1477348488076cafd4dcf973a314957d
REACT_APP_KAKAO_KEY=a04f2d1d1722f5fbadd556e742465d9f
client/src/App.js
View file @ b606631f
......@@ -28,6 +28,7 @@ function App() {
<Route path="/movielist" component={MovieListPage} />
<Route path="/movie/:movieId" component={MoviePage} />
<Route path="/ticket" component={TicketingPage} />
<Route path="/theater" component={TheaterPage}/>
<Route path="/search" component={SearchPage} />
<Route path="/admin" component={AdminPage} />
</Switch>
......
client/src/apis/movie.api.js
View file @ b606631f
......@@ -5,13 +5,18 @@ const getUpcomingfromTM = async () => {
const { data } = await axios.get(`${TMDBUrl}/upcoming?api_key=${process.env.REACT_APP_TMDB_API_KEY}&language=ko-KR`)
return data.results
}
const getfromTM = async (cate) => {
const getMoviesfromTM = async (cate) => {
const category = cate
const response = await axios.get(`${baseUrl}/api/movie/showmovie/${category}`)
const response = await axios.get(`${baseUrl}/api/movie/showmovies/${category}`)
console.log(response.data)
return response.data
}
const getMovieInfofromTM = async (id) => {
const movieId = id
const response = await axios.get(`${TMDBUrl}/${movieId}?api_key=${process.env.REACT_APP_TMDB_API_KEY}&language=ko-KR`)
console.log(response.data)
return response.data
}
const submit = async (movieId) => {
const { data } = await axios.post(`${baseUrl}/api/movie/${movieId}`)
console.log("data==",data)
......@@ -19,7 +24,8 @@ const submit = async (movieId) => {
const movieApi = {
getUpcomingfromTM,
getfromTM,
getMoviesfromTM,
getMovieInfofromTM,
submit
}
......
client/src/components/MovieChart/MovieChart.js
View file @ b606631f
......@@ -4,17 +4,17 @@ import { Link } from 'react-router-dom';
import styles from "./movieChart.module.scss"
const MovieChart = () => {
const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState()
const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState([])
const category="popular"
useEffect(() => {
getTMDB_TopRated()
}, [])
async function getTMDB_TopRated() {
const category="popular"
try {
const data = await movieApi.getfromTM(category)
const data = await movieApi.getMoviesfromTM(category)
console.log(data)
setTMDB_TopRated_Data(data)
setTMDB_TopRated_Data([...data])
} catch (error) {
}
......@@ -25,7 +25,7 @@ const MovieChart = () => {
{TMDB_TopRated_Data
?
TMDB_TopRated_Data.map(movie => (
<div className="card h-100" style={{ backgroundColor: "black" }}>
<div className="card h-100 " style={{ backgroundColor: "black" }}>
<Link to={{
pathname: `/movie/${movie.id}`,
state: {...movie}
......@@ -34,14 +34,14 @@ const MovieChart = () => {
<div className={`${styles.description}`}>{movie.overview}</div>
</Link>
<div className="card-body text-light">
<marquee onmouseover="this.stop()" className={`h2 card-title text-center ${styles.title}`}>{movie.title}</marquee>
<p className="card-text text-center">예매율: {movie.ticket_sales}0% | {movie.runtime}분</p>
<div onmouseover="this.stop()" className={`h2 card-title text-center ${styles.title} ${styles.txt}`}>{movie.title}</div>
<p className={`card-text text-center ${styles.txt}`}>예매율: {movie.ticket_sales}0% | {movie.runtime}분</p>
<p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
</div>
<Link to={{
pathname:`/ticket`,
state: {movieId:movie.id}
}}>
state: {movieId:movie.id,}
}} className="text-center">
<button className="btn btn-warning">예매하기</button>
</Link>
</div>
......
client/src/components/MovieChart/movieChart.module.scss
View file @ b606631f
.layer{
position: relative;
}
// .poster{
// opacity: 1;
// &:hover{
// opacity: 0.3;
// }
// }
.poster{
max-height: 20rem;
object-fit: contain;
}
.description{
position: absolute;
top: 0%;
......@@ -28,6 +26,6 @@
opacity: 1;
}
}
.title{
.txt{
font-size: 99%;
}
\ No newline at end of file
client/src/components/MovieComming/MovieComming.js
View file @ b606631f
import React,{useState, useEffect} from 'react'
import axios from 'axios'
import baseUrl from '../../utils/baseUrl'
import { useState, useEffect } from 'react'
import movieApi from '../../apis/movie.api.js'
import { Link } from 'react-router-dom';
import styles from "./movieComming.module.scss"
const MovieComming = () => {
const [TMDB_UpComming_Data, setTMDB_UpComming_Data] = useState()
const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState()
const category="upcoming"
useEffect(() => {
getTMDB_UpComming()
getTMDB_TopRated()
}, [])
async function getTMDB_UpComming() {
async function getTMDB_TopRated() {
try {
const response = await axios.get(`/api/movie/showmovie/upcomming`)
console.log(response.data)
setTMDB_UpComming_Data([...response.data])
const data = await movieApi.getfromTM(category)
console.log(data)
setTMDB_TopRated_Data(data)
} catch (error) {
}
}
return (
<div class="row row-cols-1 row-cols-md-4 g-4">
{TMDB_UpComming_Data
{console.log(TMDB_TopRated_Data)}
{TMDB_TopRated_Data
?
TMDB_UpComming_Data.map(movie => (
TMDB_TopRated_Data.map(movie => (
<div className="card h-100" style={{ backgroundColor: "black" }}>
<Link to={{
pathname: `/movie/${movie.id}`,
state: {
...movie
}
state: {...movie}
}} className={`${styles.layer}`} >
<img src={`https://image.tmdb.org/t/p/original${movie.poster_path}`} className={`card-img-top rounded ${styles.poster}`} alt="Movie Poster" />
<div className={`${styles.description}`}>{movie.overview}</div>
</Link>
<div className="card-body text-light">
<marquee onmouseover="this.stop()" className={`h2 card-title text-center ${styles.title}`}>{movie.title}</marquee>
<p className="card-text text-center">{movie.runtime}분</p>
<p className="card-text text-center">예매율: {movie.ticket_sales}0% | {movie.runtime}분</p>
<p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
</div>
<Link to={{
pathname:`/ticket`,
state: {movieId:movie.id}
}}>
<button className="btn btn-warning">예매하기</button>
</Link>
</div>
))
: <div>영화정보를 로딩할 수 없습니다.</div>
......
client/src/components/Navs/MainNav.js
View file @ b606631f
......@@ -11,10 +11,10 @@ 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="/ticket">빠른예매</a>
<a class="nav-link text-white" href="#">극장</a>
<nav className="nav justify-content-evenly border border-start-0 border-end-0 border-white border-2 py-1">
<a className="nav-link text-white" href="/movielist">영화</a>
<a className="nav-link text-white" href="/ticket">빠른예매</a>
<a className="nav-link text-white" href="/theater">극장</a>
<Search type="home" search={search} setSearch={setSearch} handleClick={searchMovie} />
</nav>
)
......
client/src/components/Navs/SubNav.js
View file @ b606631f
const SubNav = () => {
return (
<nav class="nav justify-content-end py-1">
<a class="nav-link text-white" href="/login">로그인</a>
<a class="nav-link text-white" href="/signup">회원가입</a>
<nav className="nav justify-content-end py-1">
<a className="nav-link text-white" href="/login">로그인</a>
<a className="nav-link text-white" href="/signup">회원가입</a>
</nav>
)
}
......
client/src/components/TicketingMovie/TicketingMovie.js
View file @ b606631f
......@@ -4,7 +4,6 @@ import styles from "./ticketingMovie.module.scss"
const TicketingMovie = (props) => {
const [movieList, setMovieList] = useState([])
const [state, setState] = useState(0)
useEffect(() => {
getMovieList()
......@@ -13,27 +12,29 @@ const TicketingMovie = (props) => {
async function getMovieList() {
try {
const response = await axios.get(`/api/movie/movielist`)
console.log(response.data)
setMovieList(response.data)
} catch (error) {
}
}
function handleClick(event) {
console.log(event.target.name)
props.setTicketInfo({ movieId: event.target.name })
}
return (
<div className={``} >
<ul className="d-grid gap-2">
<div >
{console.log(props.ticketInfo.movieId)}
<div className="d-grid gap-2">
{movieList.length > 0
? movieList.map(movie => (
<li>
<button className={`${styles.btn}`} onClick={() => { props.setMovieInfo({ movieId: movie.id }) }}>
<button name={movie.id} className={`${props.ticketInfo.movieId == movie.id ? styles.on : styles.btn}`} onClick={handleClick}>
{movie.title}
</button>
</li>
))
: <div>영화정보를 불러올 수 없습니다.</div>}
</ul>
</div>
</div>
)
}
......
client/src/components/TicketingMovie/ticketingMovie.module.scss
View file @ b606631f
......@@ -2,8 +2,9 @@
background:black;
color:white;
border:0;
&:focus{
}
.on {
background: white;
color: black;
}
border:0;
}
\ No newline at end of file
client/src/components/TicketingTheater/TicketingTheater.js
View file @ b606631f
import styles from "./ticketingTheater.module.scss"
const TicketingTheater = (props) => {
function handleClick(event) {
// event.preventDefault()
console.log(event.target.name)
props.setTicketInfo({ ...props.ticketInfo, theater:event.target.name})
}
return (
<div className={``} >
<div >
<div className="d-grid gap-2">
{props.theaterInfo.cinemaNum.length > 0
? props.theaterInfo.cinemaNum.map(num => (
<button className={`${styles.btn}`} onClick={()=>props.setTheaterInfo({...props.theaterInfo,selectedCinemaNum:num})}>{num}</button>
{props.theaterInfo.theater.length > 0
? props.theaterInfo.theater.map(name => (
<button name={name} className={`${props.ticketInfo.theater === name ? styles.on : styles.btn}`} onClick={handleClick}>{name}</button>
))
: <div>영화정보를 불러올 수 없습니다.</div>}
: <div>영화관 정보가 존재하지 않습니다.</div>}
</div>
</div>
)
......
client/src/components/TicketingTheater/ticketingTheater.module.scss
View file @ b606631f
......@@ -2,8 +2,9 @@
background:black;
color:white;
border:0;
&:focus{
}
.on {
background: white;
color: black;
}
border:0;
}
\ No newline at end of file
client/src/components/TicketingTimeTable.js deleted 100644 → 0
View file @ 5f60aebc
const TicketingTimeTable = () => {
return (
<>
</>
)
}
export default TicketingTimeTable
\ No newline at end of file
client/src/components/TicketingTimeTable/TicketingTimeTable.js 0 → 100644
View file @ b606631f
const TicketingTimeTable = (props) => {
return (
<div>
<div className="text-center" style={{color:"white"}}>
{console.log(props.ticketInfo.movieId, props.ticketInfo.theater)}
{props.ticketInfo.movieId && props.ticketInfo.theater
? <div>{props.ticketInfo.movieId} {props.ticketInfo.theater}</div>
: <div>영화와 극장을 모두 선택해주세요.</div>}
</div>
</div>
)
}
export default TicketingTimeTable
\ No newline at end of file
client/src/pages/TheaterPage.js
View file @ b606631f
import {useState} from 'react'
const TheaterPage = () => {
const [state, setState] = useState(0)
return (
<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>극장정보</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
View file @ b606631f
import { useState } from 'react'
import TicketingMovie from "../components/TicketingMovie/TicketingMovie"
import TicketingTheater from "../components/TicketingTheater/TicketingTheater"
import TicketingTimeTable from "../components/TicketingTimeTable"
import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import movieApi from '../apis/movie.api.js'
import TicketingMovie from "../components/TicketingMovie/TicketingMovie.js"
import TicketingTheater from "../components/TicketingTheater/TicketingTheater.js"
import TicketingTimeTable from "../components/TicketingTimeTable/TicketingTimeTable.js"
const TicketingPage = (location) => {
// const [movieInfo, setMovieInfo] = useState(location)
const [movieInfo, setMovieInfo] = useState({ movieId: "497698" })
const TicketingPage = ({ location }) => {
const [ticketInfo, setTicketInfo] = useState({
...location.state,
theater:"",
selectedCinemaNum: 0,
time: {}
})
const [theaterInfo, setTheaterInfo] = useState({
theater: "Butter 조치원",
cinemaNum: [1, 2, 3, 4],
selectedCinemaNum:0
theater: ["Butter Studio 조치원"],
cinemaNum: [1, 2, 3, 4]
})
const [movieInfo, setMovieInfo] = useState()
useEffect(() => {
getMovieInfo()
}, [ticketInfo])
async function getMovieInfo() {
try {
const data = await movieApi.getMovieInfofromTM(ticketInfo.movieId)
console.log(data)
setMovieInfo(data)
} catch (error) {
console.log(error)
}
}
return (
<div className="container" style={{ backgroundColor: "black" }}>
<div>
{console.log(location.state)}
</div>
<div className="row justify-content-center my-5">
<div className="col-sm-4">
<h2 className="py-2 text-white text-center" style={{ border: "3px solid #FEDC00", borderBottom: "3px solid #FEDC00" }}>영화</h2>
<TicketingMovie movieInfo={movieInfo} setMovieInfo={setMovieInfo} />
<div className="col-sm-4 mb-4 ">
<h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>영화</h3>
<TicketingMovie ticketInfo={ticketInfo} setTicketInfo={setTicketInfo} />
</div>
<div className="col-sm-3 mb-4 ">
<h3 className="py-2 mb-3 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>극장</h3>
<TicketingTheater theaterInfo={theaterInfo} ticketInfo={ticketInfo} setTicketInfo={setTicketInfo} />
</div>
<div className="col-sm-4">
<h2 className="py-2 text-white text-center" style={{ border: "3px solid #FEDC00", borderBottom: "3px solid #FEDC00" }}>극장</h2>
<TicketingTheater theaterInfo={theaterInfo} setTheaterInfo={setTheaterInfo} />
<div className="col-sm-5 mb-4 ">
<h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>시간표</h3>
<TicketingTimeTable ticketInfo={ticketInfo} theaterInfo={theaterInfo} />
</div>
<div className="col-sm-4">
<h2 className="py-2 text-white text-center" style={{ border: "3px solid #FEDC00", borderBottom: "3px solid #FEDC00" }}>시간표</h2>
<TicketingTimeTable movieInfo={movieInfo} theaterInfo={theaterInfo} />
</div>
<div className="row p-3" style={{ backgroundColor: "#252525"}}>
<div className="col-sm-3 border-end text-center">
{movieInfo
? <img style={{ maxHeight: "10rem" }} src={`https://image.tmdb.org/t/p/original${movieInfo.poster_path}`} alt="영화포스터" />
: <div className="mb-2" style={{ color: "white" }}>영화선택</div>}
</div>
<div className="col-sm-6 border-end" style={{ color: "white" }}>
<div className="mb-2 text-center">극장선택</div>
{movieInfo && ticketInfo.theater
? <ul>
<li>영화: {movieInfo.title}</li>
<li>극장: {ticketInfo.theater}</li>
<li>일시: </li>
<li>상영관: </li>
</ul>
: <div></div>}
</div>
<div className="col-sm-3 text-center">
<div className="mb-2" style={{ color: "white" }}>좌석선택</div>
{movieInfo && ticketInfo.theater
?
<Link to={{
pathname: `/seat`,
state: {}
}}>
<img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" alt="예매하기" />
</Link>
:
<img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" alt="예매하기" />
}
</div>
</div>
</div>
)
}
......
server/routes/movie.route.js
View file @ b606631f
......@@ -7,7 +7,7 @@ router
.route("/")
// .post(movieCtrl.comparePopularMovie)
router.route('/showmovie/:category')
router.route('/showmovies/:category')
.get(movieCtrl.getMovieById)
router.route('/movielist')
......@@ -18,5 +18,4 @@ router
.post(movieCtrl.create)
router.param('category', movieCtrl.getMovieByCategory)
export default router;
\ 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