Commit 54b1ec39 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

theaterInfo

parent 5ee991bb
......@@ -38,6 +38,7 @@ function App() {
<Route path="/ticket/seat" component={TicketingSeatPage} />
<Route path="/ticket" component={TicketingPage} />
<Route path="/payment" component={Payment} />
<Route path="/theater" component={TheaterPage}/>
<Route path="/search" component={SearchPage} />
</Switch>
</Router>
......
import {useState} from 'react'
const CountButton = (props) => {
const name = props.name
const CountButton = ({count, setCount}) => {
const name = name
function handleCount(event) {
if (event.target.name === "backbutton") {
props.setCount({...props.count, [name] :props.count[name] - 1})
setCount({...count, [name] :count[name] - 1})
} else if (event.target.name === "forwardbutton") {
props.setCount({...props.count, [name] :props.count[name] + 1})
setCount({...count, [name] :count[name] + 1})
} else {
props.setCount({...props.count, [name] :event.target.value})
setCount({...count, [name] :event.target.value})
}
}
......@@ -16,7 +16,7 @@ const CountButton = (props) => {
<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" />
<input type='number' onChange={handleCount} value={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>
......
import axios from 'axios'
const Kakaopay = (props) => {
const Kakaopay = ({ticketInfo}) => {
async function handleClick() {
try {
const response = await axios.post('/api/kakaopay/test/single', {
cid: 'TC0ONETIME',
partner_order_id: 'orderNum',
partner_user_id: 'userName',
item_name: props.ticketInfo.title,
quantity: props.ticketInfo.teenager+props.ticketInfo.adult+props.ticketInfo.elderly,
total_amount: props.ticketInfo.teenager * 7000 + props.ticketInfo.adult * 8000 + props.ticketInfo.elderly * 6000,
item_name: ticketInfo.title,
quantity: ticketInfo.teenager+ticketInfo.adult+ticketInfo.elderly,
total_amount: ticketInfo.teenager * 7000 + ticketInfo.adult * 8000 + ticketInfo.elderly * 6000,
vat_amount: 0,
tax_free_amount: 0,
approval_url: 'http://localhost:3000/',
......
import { useState } from 'react'
// import { useState } from 'react'
import styles from './seatTable.module.scss'
const SeatTable = (props) => {
const SeatTable = ({ theaterInfo, count, setSelectedSeats, selectedSeats, reservedSeats }) => {
const table = []
if (props.theaterInfo) {
for (let rowIndex = 0; rowIndex < props.theaterInfo.rows; rowIndex++) {
if (theaterInfo) {
for (let rowIndex = 0; rowIndex < theaterInfo.rows; rowIndex++) {
table.push(<span className="me-3" style={{ color: "gray" }}>{String.fromCharCode(rowIndex + 65)}</span>)
for (let colIndex = 0; colIndex < props.theaterInfo.columns; colIndex++) {
for (let colIndex = 0; colIndex < theaterInfo.columns; colIndex++) {
table.push(
<span>
{props.reservedSeats.find(el => el === String(rowIndex + 1) + '-' + String(colIndex + 1))
{reservedSeats.find(el => el === String(rowIndex + 1) + '-' + String(colIndex + 1))
?
<button className={styles.btnBlock} name={rowIndex + 1} id={colIndex + 1} type="button" disabled>{colIndex + 1}</button>
:
<button className={props.selectedSeats.find(el => el === String(rowIndex + 1) + '-' + String(colIndex + 1)) ? styles.on : styles.btn} name={rowIndex + 1} id={colIndex + 1} type="button" onClick={handleClick}> {colIndex + 1} </button>
<button className={selectedSeats.find(el => el === String(rowIndex + 1) + '-' + String(colIndex + 1)) ? styles.on : styles.btn} name={rowIndex + 1} id={colIndex + 1} type="button" onClick={handleClick}> {colIndex + 1} </button>
}
</span>
)
......@@ -24,25 +24,25 @@ const SeatTable = (props) => {
function handleClick(event) {
const num = Object.values(props.count).reduce((a, b) => (a + b))
if (props.selectedSeats.find(el => el === event.target.name + '-' + event.target.id)) {
const num = Object.values(count).reduce((a, b) => (a + b))
if (selectedSeats.find(el => el === event.target.name + '-' + event.target.id)) {
//제거
const deleted = props.selectedSeats.filter((element) => element !== event.target.name + '-' + event.target.id);
props.setSelectedSeats(deleted)
const deleted = selectedSeats.filter((element) => element !== event.target.name + '-' + event.target.id);
setSelectedSeats(deleted)
} else {
if (props.selectedSeats.length > num - 1) {
if (selectedSeats.length > num - 1) {
alert("선택한 좌석이 예매인원보다 많습니다.")
} else {
//추가
props.setSelectedSeats([...props.selectedSeats, event.target.name + '-' + event.target.id])
setSelectedSeats([...selectedSeats, event.target.name + '-' + event.target.id])
}
}
}
return (
<div className="text-center">
{/* {console.log(props.theaterInfo)} */}
{console.log(props.selectedSeats)}
{/* {console.log(theaterInfo)} */}
{console.log(selectedSeats)}
<div className="mb-2" style={{ backgroundColor: "gray" }}>Screen</div>
{table}
</div>
......
import axios from "axios"
import {useState, useEffect} from 'react'
import catchErrors from "../utils/catchErrors"
const TheaterInfo = () => {
const [theaterInfo, setTheaterInfo] = useState()
const [error, setError] = useState()
useEffect(() => {
getTheaterInfo()
}, [])
async function getTheaterInfo() {
try {
const response = await axios.get('/api/info/cinema')
console.log(response.data)
setTheaterInfo(response.data)
} catch (error) {
catchErrors(error,setError)
}
}
return (
<>
{/* <h3>{theaterInfo.cinemaName}</h3> */}
<div> 상영관 : </div>
{/* <div>{theaterInfo.address}</div> */}
</>
)
}
export default TheaterInfo
\ No newline at end of file
......@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
import axios from 'axios'
import styles from "./ticketingMovie.module.scss"
const TicketingMovie = (props) => {
const TicketingMovie = ({ticketInfo, setTicketInfo}) => {
const [movieList, setMovieList] = useState([])
useEffect(() => {
getMovieList()
......@@ -19,16 +19,16 @@ const TicketingMovie = (props) => {
function handleClick(event) {
console.log(event.target.name)
props.setTicketInfo({...props.ticketInfo, movieId: event.target.name })
setTicketInfo({...ticketInfo, movieId: event.target.name })
}
return (
<div >
{console.log(props.ticketInfo.movieId)}
{console.log(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}>
<button name={movie.id} className={`${ticketInfo.movieId == movie.id ? styles.on : styles.btn}`} onClick={handleClick}>
{movie.title}
</button>
))
......
import styles from "./ticketingTheater.module.scss"
const TicketingTheater = (props) => {
const TicketingTheater = ({ticketInfo, cinemaInfo, setTicketInfo}) => {
function handleClick(event) {
// event.preventDefault()
console.log(event.target.name)
props.setTicketInfo({ ...props.ticketInfo, cinema: event.target.name })
setTicketInfo({ ...ticketInfo, cinema: event.target.name })
}
return (
<div >
<div className="d-grid gap-2">
<button name={props.cinemaInfo.cinemaName} className={`${props.ticketInfo.cinema === props.cinemaInfo.cinemaName ? styles.on : styles.btn}`} onClick={handleClick}>{props.cinemaInfo.cinemaName}</button>
<button name={cinemaInfo.cinemaName} className={`${ticketInfo.cinema === cinemaInfo.cinemaName ? styles.on : styles.btn}`} onClick={handleClick}>{cinemaInfo.cinemaName}</button>
</div>
</div>
)
......
const TicketingTimeTable = (props) => {
const TicketingTimeTable = ({ticketInfo}) => {
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>
{console.log(ticketInfo.movieId, ticketInfo.cinema)}
{ticketInfo.movieId && ticketInfo.cinema
? <div>{ticketInfo.movieId} {ticketInfo.cinema}</div>
: <div>영화와 극장을 모두 선택해주세요.</div>}
</div>
</div>
......
import { useEffect, useState } from 'react'
import movieApi from '../apis/movie.api.js'
const Video = (props) => {
const Video = ({movieId}) => {
const [videoUrls, setVideoUrls] = useState([])
useEffect(() => {
getVideos()
......@@ -8,7 +8,7 @@ const Video = (props) => {
async function getVideos() {
try {
const data = await movieApi.getVideosfromTM(props.movieId)
const data = await movieApi.getVideosfromTM(movieId)
setVideoUrls(data)
} catch (error) {
console.log(error)
......
import {useState} from 'react'
import { useState } from 'react'
import TheaterInfo from '../components/TheaterInfo'
const TheaterPage = () => {
const [state, setState] = useState(0)
......@@ -19,7 +20,7 @@ const TheaterPage = () => {
</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>
<TheaterInfo/>
</div>
<div className="tab-pane fade" id="stillcut" role="tabpanel" aria-labelledby="stillcut-tab">
<div>상영시간표</div>
......
......@@ -52,7 +52,7 @@ const TicketingPage = ({ location }) => {
<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>
<h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>극장</h3>
<TicketingTheater cinemaInfo={cinemaInfo} ticketInfo={ticketInfo} setTicketInfo={setTicketInfo} />
</div>
<div className="col-sm-5 mb-4 ">
......
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