Skip to content

GitLab

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

Merge branch 'jiwon'

parents d2351773 b606631f
Show whitespace changes
Inline Side-by-side
client/src/App.js
View file @ 75723912
...@@ -28,6 +28,7 @@ function App() { ...@@ -28,6 +28,7 @@ function App() {
<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="/ticket" component={TicketingPage} />
<Route path="/theater" component={TheaterPage}/>
<Route path="/search" component={SearchPage} /> <Route path="/search" component={SearchPage} />
<Route path="/admin" component={AdminPage} /> <Route path="/admin" component={AdminPage} />
</Switch> </Switch>
......
client/src/apis/movie.api.js
View file @ 75723912
import axios from "axios"; import axios from "axios";
import { baseUrl, TMDBUrl } from "../utils/baseUrl"; import {baseUrl,TMDBUrl} from "../utils/baseUrl.js";
const getUpcomingfromTM = async () => { const getUpcomingfromTM = async () => {
const { data } = await axios.get(`${TMDBUrl}/upcoming?api_key=${process.env.REACT_APP_TMDB_API_KEY}&language=ko-KR`) const { data } = await axios.get(`${TMDBUrl}/upcoming?api_key=${process.env.REACT_APP_TMDB_API_KEY}&language=ko-KR`)
return data.results return data.results
} }
const getMoviesfromTM = async (cate) => {
const category = cate
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 submit = async (movieId) => {
const { data } = await axios.post(`${baseUrl}/api/movie/${movieId}`) const { data } = await axios.post(`${baseUrl}/api/movie/${movieId}`)
console.log("data==",data) console.log("data==",data)
...@@ -13,6 +24,8 @@ const submit = async (movieId) => { ...@@ -13,6 +24,8 @@ const submit = async (movieId) => {
const movieApi = { const movieApi = {
getUpcomingfromTM, getUpcomingfromTM,
getMoviesfromTM,
getMovieInfofromTM,
submit submit
} }
......
client/src/components/BoxOffice/BoxOffice.js
View file @ 75723912
import axios from "axios" import axios from "axios"
<<<<<<< HEAD import {baseUrl} from '../../utils/baseUrl.js'
import baseUrl from '../../utils/baseUrl'
import React, { useState, useEffect } from "react" import React, { useState, useEffect } from "react"
import "./box-office.module.scss" // import styles from "./box-office.module.scss"
// import "./mystyle.css"
=======
import { baseUrl } from '../../utils/baseUrl'
import React, { useState, useEffect } from "react"
import styles from "./box-office.module.scss"
>>>>>>> kimpen
const BoxOffice = () => { const BoxOffice = () => {
const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState() const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState()
......
client/src/components/MovieChart/MovieChart.js
View file @ 75723912
import React,{useState, useEffect} from 'react' import { useState, useEffect } from 'react'
import axios from 'axios' import movieApi from '../../apis/movie.api.js'
import baseUrl from '../../utils/baseUrl'
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import styles from "./movieChart.module.scss" import styles from "./movieChart.module.scss"
const MovieChart = () => { const MovieChart = () => {
const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState() const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState([])
const category="popular"
useEffect(() => { useEffect(() => {
getTMDB_TopRated() getTMDB_TopRated()
}, []) }, [])
async function getTMDB_TopRated() { async function getTMDB_TopRated() {
try { try {
const response = await axios.get(`${baseUrl}/api/movie`) const data = await movieApi.getMoviesfromTM(category)
console.log(response.data) console.log(data)
setTMDB_TopRated_Data([...response.data]) setTMDB_TopRated_Data([...data])
} catch (error) { } catch (error) {
} }
...@@ -25,22 +25,25 @@ const MovieChart = () => { ...@@ -25,22 +25,25 @@ const MovieChart = () => {
{TMDB_TopRated_Data {TMDB_TopRated_Data
? ?
TMDB_TopRated_Data.map(movie => ( TMDB_TopRated_Data.map(movie => (
<div className="card h-100" style={{ backgroundColor: "black" }}> <div className="card h-100 " style={{ backgroundColor: "black" }}>
<Link to={{ <Link to={{
pathname: `/movie/${movie.id}`, pathname: `/movie/${movie.id}`,
state: { state: {...movie}
...movie
}
}} className={`${styles.layer}`} > }} 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" /> <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> <div className={`${styles.description}`}>{movie.overview}</div>
</Link> </Link>
<div className="card-body text-light"> <div className="card-body text-light">
<marquee onmouseover="this.stop()" className={`h2 card-title text-center ${styles.title}`}>{movie.title}</marquee> <div onmouseover="this.stop()" className={`h2 card-title text-center ${styles.title} ${styles.txt}`}>{movie.title}</div>
<p className="card-text text-center">예매율: {movie.ticket_sales}0% | {movie.runtime}분</p> <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> <p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
</div> </div>
<Link to={{
pathname:`/ticket`,
state: {movieId:movie.id,}
}} className="text-center">
<button className="btn btn-warning">예매하기</button> <button className="btn btn-warning">예매하기</button>
</Link>
</div> </div>
)) ))
: <div>영화정보를 로딩할 수 없습니다.</div> : <div>영화정보를 로딩할 수 없습니다.</div>
......
client/src/components/MovieChart/movieChart.module.scss
View file @ 75723912
.layer{ .layer{
position: relative; position: relative;
} }
// .poster{ .poster{
// opacity: 1; max-height: 20rem;
// &:hover{ object-fit: contain;
// opacity: 0.3; }
// }
// }
.description{ .description{
position: absolute; position: absolute;
top: 0%; top: 0%;
...@@ -28,6 +26,6 @@ ...@@ -28,6 +26,6 @@
opacity: 1; opacity: 1;
} }
} }
.title{ .txt{
font-size: 99%;
} }
\ No newline at end of file
client/src/components/MovieComming/MovieComming.js
View file @ 75723912
import React,{useState, useEffect} from 'react' import { useState, useEffect } from 'react'
import axios from 'axios' import movieApi from '../../apis/movie.api.js'
import baseUrl from '../../utils/baseUrl'
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import styles from "./movieComming.module.scss" import styles from "./movieComming.module.scss"
const MovieComming = () => { const MovieComming = () => {
const [TMDB_UpComming_Data, setTMDB_UpComming_Data] = useState() const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState()
const category="upcoming"
useEffect(() => { useEffect(() => {
getTMDB_UpComming() getTMDB_TopRated()
}, []) }, [])
async function getTMDB_UpComming() { async function getTMDB_TopRated() {
try { try {
const response = await axios.get(`${baseUrl}/api/movie/upcomming`) const data = await movieApi.getfromTM(category)
console.log(response.data) console.log(data)
setTMDB_UpComming_Data([...response.data]) setTMDB_TopRated_Data(data)
} catch (error) { } catch (error) {
} }
} }
return ( return (
<div class="row row-cols-1 row-cols-md-4 g-4"> <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" }}> <div className="card h-100" style={{ backgroundColor: "black" }}>
<Link to={{ <Link to={{
pathname: `/movie/${movie.id}`, pathname: `/movie/${movie.id}`,
state: { state: {...movie}
...movie
}
}} className={`${styles.layer}`} > }} 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" /> <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> <div className={`${styles.description}`}>{movie.overview}</div>
</Link> </Link>
<div className="card-body text-light"> <div className="card-body text-light">
<marquee onmouseover="this.stop()" className={`h2 card-title text-center ${styles.title}`}>{movie.title}</marquee> <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> <p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
</div> </div>
<Link to={{
pathname:`/ticket`,
state: {movieId:movie.id}
}}>
<button className="btn btn-warning">예매하기</button> <button className="btn btn-warning">예매하기</button>
</Link>
</div> </div>
)) ))
: <div>영화정보를 로딩할 수 없습니다.</div> : <div>영화정보를 로딩할 수 없습니다.</div>
......
client/src/components/Navs/MainNav.js
View file @ 75723912
...@@ -11,10 +11,10 @@ const MainNav = () => { ...@@ -11,10 +11,10 @@ const MainNav = () => {
} }
return ( return (
<nav class="nav justify-content-evenly border border-start-0 border-end-0 border-white border-2 py-1"> <nav className="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 className="nav-link text-white" href="/movielist">영화</a>
<a class="nav-link text-white" href="/ticket">빠른예매</a> <a className="nav-link text-white" href="/ticket">빠른예매</a>
<a class="nav-link text-white" href="#">극장</a> <a className="nav-link text-white" href="/theater">극장</a>
<Search type="home" search={search} setSearch={setSearch} handleClick={searchMovie} /> <Search type="home" search={search} setSearch={setSearch} handleClick={searchMovie} />
</nav> </nav>
) )
......
client/src/components/Navs/SubNav.js
View file @ 75723912
const SubNav = () => { const SubNav = () => {
return ( return (
<nav class="nav justify-content-end py-1"> <nav className="nav justify-content-end py-1">
<a class="nav-link text-white" href="/login">로그인</a> <a className="nav-link text-white" href="/login">로그인</a>
<a class="nav-link text-white" href="/signup">회원가입</a> <a className="nav-link text-white" href="/signup">회원가입</a>
</nav> </nav>
) )
} }
......
client/src/components/TicketingMovie/TicketingMovie.js
View file @ 75723912
import React,{useState} from 'react' import React, { useState, useEffect } from 'react'
import axios from 'axios'
import styles from "./ticketingMovie.module.scss" import styles from "./ticketingMovie.module.scss"
const TicketingMovie = () => { const TicketingMovie = (props) => {
const [state, setState] = useState(0) const [movieList, setMovieList] = useState([])
return ( useEffect(() => {
<div> getMovieList()
}, [])
async function getMovieList() {
try {
const response = await axios.get(`/api/movie/movielist`)
setMovieList(response.data)
} catch (error) {
}
}
function handleClick(event) {
console.log(event.target.name)
props.setTicketInfo({ movieId: event.target.name })
}
return (
<div >
{console.log(props.ticketInfo.movieId)}
<div className="d-grid gap-2">
{movieList.length > 0
? movieList.map(movie => (
<button name={movie.id} className={`${props.ticketInfo.movieId == movie.id ? styles.on : styles.btn}`} onClick={handleClick}>
{movie.title}
</button>
))
: <div>영화정보를 불러올 수 없습니다.</div>}
</div>
</div> </div>
) )
} }
......
client/src/components/TicketingMovie/ticketingMovie.module.scss
View file @ 75723912
.navBtn{ .btn {
color: "white"; background:black;
background-color: "black"; color:white;
border-color:"#FEDC00"; border:0;
border-top: "0";
border-left: "0";
border-right: "0";
border-bottom: "3px solid";
} }
.on {
.navBtnFocus{ background: white;
color: "white"; color: black;
background-color: "black"; border:0;
border-color:"#FEDC00";
border-bottom: "0";
} }
\ No newline at end of file
client/src/components/TicketingTheater.js deleted 100644 → 0
View file @ d2351773
const TicketingTheater = () => {
return (
<>
</>
)
}
export default TicketingTheater
\ No newline at end of file
client/src/components/TicketingTheater/TicketingTheater.js 0 → 100644
View file @ 75723912
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 >
<div className="d-grid gap-2">
{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>
)
}
export default TicketingTheater
\ No newline at end of file
client/src/components/TicketingTheater/index.js 0 → 100644
View file @ 75723912
export { default } from './TicketingTheater'
\ No newline at end of file
client/src/components/TicketingTheater/ticketingTheater.module.scss 0 → 100644
View file @ 75723912
.btn {
background:black;
color:white;
border:0;
}
.on {
background: white;
color: black;
border:0;
}
\ No newline at end of file
client/src/components/TicketingTimeTable.js deleted 100644 → 0
View file @ d2351773
const TicketingTimeTable = () => {
return (
<>
</>
)
}
export default TicketingTimeTable
\ No newline at end of file
client/src/components/TicketingTimeTable/TicketingTimeTable.js 0 → 100644
View file @ 75723912
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 @ 75723912
import {useState} from 'react'
const TheaterPage = () => { const TheaterPage = () => {
const [state, setState] = useState(0)
return ( return (
<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>극장정보</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> </div>
) )
} }
......
client/src/pages/TicketingPage.js
View file @ 75723912
import React from 'react' import { useState, useEffect } from 'react'
import TicketingMovie from "../components/TicketingMovie/TicketingMovie" import { Link } from 'react-router-dom'
import TicketingTheater from "../components/TicketingTheater" import movieApi from '../apis/movie.api.js'
import TicketingTimeTable from "../components/TicketingTimeTable" 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 [ticketInfo, setTicketInfo] = useState({
...location.state,
theater:"",
selectedCinemaNum: 0,
time: {}
})
const [theaterInfo, setTheaterInfo] = useState({
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)
}
}
const TicketingPage = () => {
return ( return (
<div style={{ backgroundColor: "black" }}> <div className="container" style={{ backgroundColor: "black" }}>
<div>
{console.log(location.state)}
</div>
<div className="row justify-content-center my-5"> <div className="row justify-content-center my-5">
<div className="col-sm-4"> <div className="col-sm-4 mb-4 ">
<h2 className="py-2 text-white text-center" style={{borderTop:"3px solid #FEDC00", borderBottom:"3px solid #FEDC00"}}>영화</h2> <h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>영화</h3>
<TicketingMovie /> <TicketingMovie ticketInfo={ticketInfo} setTicketInfo={setTicketInfo} />
</div> </div>
<div className="col-sm-4"> <div className="col-sm-3 mb-4 ">
<h2>극장</h2> <h3 className="py-2 mb-3 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>극장</h3>
<TicketingTheater /> <TicketingTheater theaterInfo={theaterInfo} ticketInfo={ticketInfo} setTicketInfo={setTicketInfo} />
</div> </div>
<div className="col-sm-4"> <div className="col-sm-5 mb-4 ">
<h2>시간표</h2> <h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>시간표</h3>
<TicketingTimeTable /> <TicketingTimeTable ticketInfo={ticketInfo} theaterInfo={theaterInfo} />
</div> </div>
</div> </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> </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