Skip to content

GitLab

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

ticketing-seat

parent 01ce1fdf
Show whitespace changes
Inline Side-by-side
client/src/App.js
View file @ fa2af12b
...@@ -11,6 +11,7 @@ import TheaterPage from "./pages/TheaterPage"; ...@@ -11,6 +11,7 @@ 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"; import TicketingPage from "./pages/TicketingPage";
import TicketingSeatPage from './pages/TicketingSeatPage'
import SearchPage from "./pages/SearchPage"; import SearchPage from "./pages/SearchPage";
function App() { function App() {
...@@ -27,6 +28,7 @@ function App() { ...@@ -27,6 +28,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/seat" component={TicketingSeatPage} />
<Route path="/ticket" component={TicketingPage} /> <Route path="/ticket" component={TicketingPage} />
<Route path="/theater" component={TheaterPage}/> <Route path="/theater" component={TheaterPage}/>
<Route path="/search" component={SearchPage} /> <Route path="/search" component={SearchPage} />
......
client/src/apis/movie.api.js
View file @ fa2af12b
import axios from "axios"; import axios from "axios";
import {baseUrl,TMDBUrl} from "../utils/baseUrl.js"; 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`)
...@@ -17,15 +17,35 @@ const getMovieInfofromTM = async (id) => { ...@@ -17,15 +17,35 @@ const getMovieInfofromTM = async (id) => {
console.log(response.data) console.log(response.data)
return response.data return response.data
} }
const getImagesfromTM = async (id) => {
const movieId = id
const response = await axios.get(`${TMDBUrl}/${movieId}/images?api_key=${process.env.REACT_APP_TMDB_API_KEY}`)
return response.data
}
const getCreditsfromTM = async (id) =>{
const movieId = id
const response = await axios.get(`${TMDBUrl}/${movieId}/credits?api_key=${process.env.REACT_APP_TMDB_API_KEY}`)
return response.data
}
const getVideosfromTM = async (id) =>{
const movieId = id
const response = await axios.get(`${TMDBUrl}/${movieId}/videos?api_key=${process.env.REACT_APP_TMDB_API_KEY}`)
return response.data.results
}
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)
} }
const movieApi = { const movieApi = {
getUpcomingfromTM, getUpcomingfromTM,
getMoviesfromTM, getMoviesfromTM,
getMovieInfofromTM, getMovieInfofromTM,
getImagesfromTM,
getCreditsfromTM,
getVideosfromTM,
submit submit
} }
......
client/src/components/BoxOffice/BoxOffice.js
View file @ fa2af12b
import axios from "axios" import { useState, useEffect } from "react"
import {baseUrl} from '../../utils/baseUrl.js' import movieApi from '../../apis/movie.api.js'
import React, { useState, useEffect } from "react" import "./box-office.module.css"
// import styles from "./box-office.module.scss"
const BoxOffice = () => { const BoxOffice = () => {
const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState() const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState()
useEffect(() => { useEffect(() => {
getTMDB_TopRated() // getTMDB_TopRated()
let items = document.querySelectorAll('.carousel-item') let items = document.querySelectorAll('.carousel .carousel-item')
console.log("item", items) // console.log("item", items)
items.forEach((el) => { items.forEach((el) => {
const minPerSlide = 4 const minPerSlide = 4
let next = el.nextElementSibling let next = el.nextElementSibling
for (let i = 1; i < minPerSlide; i++) { for (let i = 1; i < minPerSlide; i++) {
if (!next) { if (!next) {
// wrap carousel by using first child
next = items[0] next = items[0]
} }
let cloneChild = next.cloneNode(true) let cloneChild = next.cloneNode(true)
...@@ -24,18 +24,95 @@ const BoxOffice = () => { ...@@ -24,18 +24,95 @@ const BoxOffice = () => {
}, []) }, [])
async function getTMDB_TopRated() { async function getTMDB_TopRated() {
const category = "popular"
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) {
console.log(error)
} }
} }
return ( return (
<div className="container text-center my-3"> <div className="container text-center my-3">
{console.log(typeof (TMDB_TopRated_Data))} {console.log(TMDB_TopRated_Data)}
<div className="container text-center my-3">
<h2 className="font-weight-light">Bootstrap Multi Slide Carousel</h2>
<div className="row mx-auto my-auto justify-content-center">
<div id="recipeCarousel" className="carousel slide" data-bs-ride="carousel">
<div className="carousel-inner" role="listbox">
<div className="carousel-item active">
<div className="col-md-3">
<div className="card">
<div className="card-img">
<img src="//via.placeholder.com/500x400/31f?text=1" className="img-fluid" />
</div>
<div className="card-img-overlay">Slide 1</div>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-md-3">
<div className="card">
<div className="card-img">
<img src="//via.placeholder.com/500x400/e66?text=2" className="img-fluid" />
</div>
<div className="card-img-overlay">Slide 2</div>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-md-3">
<div className="card">
<div className="card-img">
<img src="//via.placeholder.com/500x400/7d2?text=3" className="img-fluid" />
</div>
<div className="card-img-overlay">Slide 3</div>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-md-3">
<div className="card">
<div className="card-img">
<img src="//via.placeholder.com/500x400?text=4" className="img-fluid" />
</div>
<div className="card-img-overlay">Slide 4</div>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-md-3">
<div className="card">
<div className="card-img">
<img src="//via.placeholder.com/500x400/aba?text=5" className="img-fluid" />
</div>
<div className="card-img-overlay">Slide 5</div>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-md-3">
<div className="card">
<div className="card-img">
<img src="//via.placeholder.com/500x400/fc0?text=6" className="img-fluid" />
</div>
<div className="card-img-overlay">Slide 6</div>
</div>
</div>
</div>
</div>
<a className="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a className="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
<h5 className="mt-2 fw-light">advances one slide at a time</h5>
</div>
<div className="row my-auto justify-content-center"> <div className="row my-auto justify-content-center">
<div id="recipeCarousel" className="carousel slide" data-bs-ride="carousel" data-bs-interval="999999999"> <div id="recipeCarousel" className="carousel slide" data-bs-ride="carousel" data-bs-interval="999999999">
<div className={`carousel-inner`} role="listbox"> <div className={`carousel-inner`} role="listbox">
......
client/src/components/BoxOffice/box-office.module.css 0 → 100644
View file @ fa2af12b
@media (max-width: 767px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
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%);
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
client/src/components/BoxOffice/box-office.module.scss deleted 100644 → 0
View file @ 01ce1fdf
/* // .cursor {
// cursor: pointer;
// }
// .dNone {
// display: none;
// }
\
// .dBlock {
// display: block;
// } */
// @media (max-width: 767px) {
// .carousel-inner .carousel-item >div {
// display: none;
// }
// .carousel-inner .carousel-item >div:first-child {
// display: block;
// }
// }
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
$breakpoint-tablet: 768px;
/* medium and up screens */
@media (min-width: $breakpoint-tablet) {
.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-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
client/src/components/CountButton.js 0 → 100644
View file @ fa2af12b
import {useState} from 'react'
const CountButton = (props) => {
const name = props.name
function handleCount(event) {
if (event.target.name === "backbutton") {
props.setCount({...props.count, [name] :props.count[name] - 1})
} else if (event.target.name === "forwardbutton") {
props.setCount({...props.count, [name] :props.count[name] + 1})
} else {
props.setCount({...props.count, [name] :event.target.value})
}
}
return (
<span className="">
<button type="button" name="backbutton" style={{ backgroundColor: "black", border: "0" }} onClick={handleCount}>
<img src="/images/icons8-back-24.png" name="backbutton" alt="<" />
</button>
<input type='number' onChange={handleCount} value={props.count[name]} style={{ width: '2rem' }} className="text-center" />
<button type="button" name="forwardbutton" min="0" style={{ backgroundColor: "black", border: "0" }} onClick={handleCount}>
<img src="/images/icons8-forward-24.png" name="forwardbutton" alt=">" />
</button>
</span>
)
}
export default CountButton
\ No newline at end of file
client/src/components/SeatTable/SeatTable.js 0 → 100644
View file @ fa2af12b
import { useState } from 'react'
import styles from './seatTable.module.scss'
const SeatTable = (props) => {
const table = []
for (let rowIndex = 0; rowIndex < props.allSeat.row; rowIndex++) {
table.push(<span className="me-3" style={{color:"gray"}}>{String.fromCharCode(rowIndex + 65)}</span>)
// console.log(String.fromCharCode(rowIndex+65))
for (let colIndex = 0; colIndex < props.allSeat.col; colIndex++) {
table.push(
<span>
<button className={props.selectedSeats.find(el => el === String.fromCharCode(rowIndex + 65) + String(colIndex + 1)) ? styles.on : styles.btn} name={`${String.fromCharCode(rowIndex + 65)}${colIndex + 1}`} type="button" onClick={handleClick}> {colIndex + 1} </button>
</span>
)
}
table.push(<br />)
}
function handleClick(event) {
const num = Object.values(props.count).reduce((a, b) => (a + b))
if (props.selectedSeats.find(el => el === event.target.name)) {
//제거
const deleted = props.selectedSeats.filter((element) => element !== event.target.name);
props.setSelectedSeats(deleted)
} else {
if (props.selectedSeats.length > num - 1) {
alert("선택한 좌석이 예매인원보다 많습니다.")
} else {
//추가
props.setSelectedSeats([...props.selectedSeats, event.target.name])
}
}
}
return (
<div className="text-center">
{console.log(props.selectedSeats)}
<div className="mb-2" style={{ backgroundColor: "gray" }}>Screen</div>
{table}
</div>
)
}
export default SeatTable
\ No newline at end of file
client/src/components/SeatTable/index.js 0 → 100644
View file @ fa2af12b
export { default } from "./SeatTable"
\ No newline at end of file
client/src/components/SeatTable/seatTable.module.scss 0 → 100644
View file @ fa2af12b
.btn {
border:0;
background: black;
color: white;
&:hover{
border:0;
background: red ;
color:white
}
}
.on {
border:0;
background: red ;
color:white
}
\ 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