Skip to content

GitLab

Commit 05ec1de9 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

reservation/moviechart/moviecomming

parent 4517a35f
Show whitespace changes
Inline Side-by-side
client/src/App.js
View file @ 05ec1de9
......@@ -15,6 +15,7 @@ import TicketingPage from "./pages/TicketingPage";
import TicketingSeatPage from './pages/TicketingSeatPage'
import SearchPage from "./pages/SearchPage";
import Payment from "./pages/PaymentPage/PaymentPage";
import PaymentCompletePage from "./pages/PaymentCompletePage";
function App() {
......@@ -38,6 +39,7 @@ function App() {
<Route path="/ticket/seat" component={TicketingSeatPage} />
<Route path="/ticket" component={TicketingPage} />
<Route path="/payment" component={Payment} />
<Route path="/paymentcomplete" component={PaymentCompletePage} />
<Route path="/theater" component={TheaterPage}/>
<Route path="/search" component={SearchPage} />
</Switch>
......
client/src/apis/movie.api.js
View file @ 05ec1de9
......@@ -11,11 +11,6 @@ const getAllfromTM = async () => {
return data
}
const getMoviesfromTM = async (category) => {
const response = await axios.get(`${baseUrl}/api/movie/showmovies/${category}`)
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`)
......@@ -28,13 +23,13 @@ const getImagesfromTM = async (id) => {
return response.data
}
const getCreditsfromTM = async (id) =>{
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 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
......@@ -44,7 +39,10 @@ const getListfromDB = async () => {
const { data } = await axios.get(`${baseUrl}/api/movie`)
return data
}
const getListByCategoryfromDB = async (category) => {
const { data } = await axios.get(`${baseUrl}/api/movie/movielist/${category}`)
return data
}
const submit = async (movieId) => {
const { data } = await axios.post(`${baseUrl}/api/movie/${movieId}`)
return data
......@@ -67,7 +65,7 @@ const search = async ({ type, keyword }) => {
const movieApi = {
getAllfromTM,
getMoviesfromTM,
getListByCategoryfromDB,
getMovieInfofromTM,
getImagesfromTM,
getCreditsfromTM,
......
client/src/components/CountButton.js
View file @ 05ec1de9
......@@ -10,7 +10,7 @@ const CountButton = ({name, count, setCount}) => {
}
}
return (
<div className="">
<>
<button type="button" name="backbutton" style={{ backgroundColor: "black", border: "0" }} onClick={handleCount}>
<img src="/images/icons8-back-24.png" name="backbutton" alt="<" />
</button>
......@@ -18,7 +18,7 @@ const CountButton = ({name, count, setCount}) => {
<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>
</div>
</>
)
}
......
client/src/components/Kakaopay.js deleted 100644 → 0
View file @ 4517a35f
import axios from 'axios'
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: 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/',
fail_url: 'http://localhost:3000/',
cancel_url: 'http://localhost:3000/',
})
console.log(response.data)
if (response.data) {
window.location.href = response.data.redirect_url
}
} catch (error) {
console.log(error)
}
}
return (
<>
<button onClick={handleClick} style={{ backgroundColor: "black", border: '0' }}>
<img src="/images/payment_icon_yellow_medium.png" style={{width:"130px"}} />
</button>
</>
)
}
export default Kakaopay
\ No newline at end of file
client/src/components/MovieCard/MovieCard.js
View file @ 05ec1de9
......@@ -23,7 +23,8 @@ const MovieCard = ({ list }) => {
<div className={`${styles.description}`}>{movie.overview}</div>
</Link>
<div className="card-body text-light">
<marquee className={`h2 card-title text-center ${styles.title}`}>{movie.title}</marquee>
{movie.adult? <image src="/images/19.png" /> :<></>}
<div className={`h4 card-title text-center ${styles.title}`}>{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>
......
client/src/components/MovieChart.js
View file @ 05ec1de9
......@@ -16,7 +16,7 @@ const MovieChart = () => {
async function getTMDB_TopRated() {
try {
setError("")
const data = await movieApi.getMoviesfromTM(category)
const data = await movieApi.getListByCategoryfromDB(category)
console.log("sdad==", data)
setTMDB_TopRated_Data([...data])
} catch (error) {
......@@ -30,7 +30,7 @@ const MovieChart = () => {
<div className="row row-cols-1 row-cols-md-4 g-4">
<MovieCard list={TMDB_TopRated_Data} />
</div>
: <h2 className="text-white text-center my-5">영화정보를 로딩할 수 없습니다.</h2>
: <h2 className="text-white text-center p-5">영화정보를 로딩중입니다!</h2>
}
</>
)
......
client/src/components/MovieComing.js
View file @ 05ec1de9
......@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'
import movieApi from "../apis/movie.api.js"
// import MovieCard from "./MovieCard/index.js"
import { Link } from 'react-router-dom'
import styles from './MovieCard/MovieCard.js'
import styles from './MovieCard/movie-card.module.scss'
import catchErrors from '../utils/catchErrors.js'
const MovieComing = () => {
......@@ -17,8 +17,9 @@ const MovieComing = () => {
async function getTMDB_UpComing() {
try {
setError("")
const response = await movieApi.getMoviesfromTM(category)
const response = await movieApi.getListByCategoryfromDB(category)
setTMDB_UpComing_Data([...response])
console.log(response)
} catch (error) {
catchErrors(error, setError)
}
......@@ -41,7 +42,8 @@ const MovieComing = () => {
<div className={`${styles.description}`}>{movie.overview}</div>
</Link>
<div className="card-body text-light">
<marquee className={`h2 card-title text-center ${styles.title}`}>{movie.title}</marquee>
{movie.adult ? <image src="/images/19.png" /> : <></>}
<div className={`h4 card-title text-center ${styles.title}`}>{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>
......@@ -54,7 +56,7 @@ const MovieComing = () => {
</div>
))}
</div>
: <h2 className="text-white text-center my-5">영화정보를 로딩할 수 없습니다.</h2>
: <h2 className="text-white text-center p-5">영화정보를 로딩중입니다!</h2>
}
</>
)
......
client/src/components/SeatTable/SeatTable.js
View file @ 05ec1de9
......@@ -41,8 +41,6 @@ const SeatTable = ({ theaterInfo, count, setSelectedSeats, selectedSeats, reserv
}
return (
<div className="text-center">
{/* {console.log(theaterInfo)} */}
{console.log(selectedSeats)}
<div className="mb-2" style={{ backgroundColor: "gray" }}>Screen</div>
{table}
</div>
......
client/src/components/TheaterInfo.js
View file @ 05ec1de9
......@@ -63,6 +63,11 @@ const TheaterInfo = () => {
const response = await axios.get('/api/info/cinema')
const response2 = await axios.get('/api/theater')
setTheaterInfo({...response.data, theaterNum:response2.data.length})
setCurrentInfo({
name:"대중교통 안내",
title:"transportation",
information: response.data.transportation
})
} catch (error) {
catchErrors(error, setError)
}
......@@ -82,7 +87,7 @@ const TheaterInfo = () => {
{theaterInfo ?
<div>
{/* {console.log(currentInfo)} */}
{/* {console.log(theaterInfo)} */}
{console.log(theaterInfo)}
<h2 className="m-5">{theaterInfo.cinemaName}</h2>
<div className="my-3 text-center">
<img src="/images/movieTheater.jpg" style={{ width: "80%" }} />
......
client/src/components/TicketingMovie/TicketingMovie.js
View file @ 05ec1de9
import React, { useState, useEffect } from 'react'
import axios from 'axios'
import styles from "./ticketingMovie.module.scss"
import movieApi from '../../apis/movie.api'
import catchErrors from '../../utils/catchErrors'
const TicketingMovie = ({ticketInfo, setTicketInfo}) => {
const [movieList, setMovieList] = useState([])
const [error, setError] = useState()
useEffect(() => {
getMovieList()
}, [])
async function getMovieList() {
try {
const response = await axios.get(`/api/movie/movielist`)
setMovieList(response.data)
const response = await movieApi.getListByCategoryfromDB()
console.log(response)
setMovieList(response)
} catch (error) {
catchErrors(error, setError)
}
}
......
client/src/pages/MovieListPage.js
View file @ 05ec1de9
......@@ -3,27 +3,23 @@ import MovieChart from '../components/MovieChart.js'
import MovieComing from '../components/MovieComing.js'
const MovieListPage = () => {
const [state, setState] = useState(true)
const [state, setState] = useState(0)
return (
<div className="container">
<div>
<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? "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 className="nav-item" role="presentation">
<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>
</ul>
<div className="text-center my-5">
<button className="mx-auto" style={{ color: "white", borderColor: "black", backgroundColor: "black", borderBottom: !state ? "3px solid" : "none", borderBottomColor: !state ? "#FEDC00" : "black" }} type="button" onClick={() => setState(0)}>무비차트</button>
<button className="mx-auto" style={{ color: "white", borderColor: "black", backgroundColor: "black", borderBottom: !state ? "none" : "3px solid", borderBottomColor: !state ? "black" : "#FEDC00" }} type="button" onClick={() => setState(1)}>상영예정작</button>
</div>
<div className="tab-content" id="myTabContent">
<div className="tab-pane fade show active" id="moviechart" role="tabpanel" aria-labelledby="moviechart-tab">
<div>
{state === 0
?
<MovieChart />
</div>
<div className="tab-pane fade" id="moviecomming" role="tabpanel" aria-labelledby="moviecomming-tab">
:
<MovieComing />
</div>
}
</div>
</div>
)
......
client/src/pages/MoviePage.js
View file @ 05ec1de9
......@@ -113,13 +113,13 @@ const MoviePage = ({ location }) => {
</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>{movieInfo.overview}</div>
<div className="mt-5 pb-5 px-5">{movieInfo.overview}</div>
</div>
<div className="tab-pane fade" id="stillcut" role="tabpanel" aria-labelledby="stillcut-tab">
<Video movieId={movieInfo.id} />
</div>
<div className="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
<div>관람평</div>
<div className="mt-5 pb-5 px-5">관람평</div>
</div>
</div>
</div>
......
client/src/pages/PaymentCompletePage.js 0 → 100644
View file @ 05ec1de9
import axios from 'axios'
import { useAuth } from '../context/auth_context'
import { useEffect, useState } from 'react'
import catchErrors from '../utils/catchErrors'
const PaymentCompletePage = () => {
const { user } = useAuth()
const [error, setError] = useState()
useEffect(() => {
if (user.role === "member") {
getUserInfo()
} else {
getGuestInfo()
}
}, [user])
async function getGuestInfo() {
try {
if (user.id > 0) {
const response = await axios.get(`/api/auth/guestinfo/${user.id}`)
const response2 = await axios.post(`/api/reservation/findonereservation`, {
userType: "guest",
user: user.id
})
console.log({
reservationData: [...response2.data],
userData: { ...response.data },
})
if (response.data || response2.data) {
const responseEmail = await axios.post('/api/email/send', {
reservationData: [...response2.data],
userData: { ...response.data },
cinema: "Butter Studio 조치원",
title: "더 수어사이드 스쿼드",
theater: "1",
time:"2021/07/21 10:00"
})
console.log(responseEmail.data)
}
console.log(response.data)
}
} catch (error) {
catchErrors(error, setError)
}
}
async function getUserInfo() {
try {
const response = await axios.post(`/api/auth/getuserinfo`, {
id: user.id
})
const response2 = await axios.post(`/api/reservation/findonereservation`, {
userType: "member",
user: user.id
})
console.log(response2.data)
if (response.data || response2.data) {
const responseEmail = await axios.post('/api/email/send', {
...response2.data,
...response.data,
})
console.log(responseEmail.data)
}
} catch (error) {
catchErrors(error, setError)
}
}
return (
<div className="text-center">
<h3>예매가 정상적으로 완료되었습니다.</h3>
<button>홈으로</button>
{
user.role === "member" ? <button>마이페이지</button> : <></>
}
</div>
)
}
export default PaymentCompletePage
\ No newline at end of file
client/src/pages/PaymentPage/PaymentPage.js
View file @ 05ec1de9
import axios from 'axios'
import { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import Kakaopay from '../../components/Kakaopay'
import { useAuth } from '../../context/auth_context'
import catchErrors from '../../utils/catchErrors'
import styles from './PaymentPage.module.scss'
const Payment = ({ location }) => {
const history = useHistory();
const [ticketInfo, setTicketInfo] = useState({ ...location.state })
const [error, setError] = useState("")
const { user } = useAuth()
const [guestInfo, setGuestInfo] = useState({})
const [guestID, setGuestID] = useState()
const [userInfo, setUserInfo] = useState({
nickname: "",
email: "",
birth: "",
phoneNumber: ""
})
const [guestInfo, setGuestInfo] = useState({})
const [guestID, setGuestID] = useState()
const { user } = useAuth()
const [ticketInfo, setTicketInfo] = useState({ ...location.state })
const [element, setElement] = useState()
const [error, setError] = useState("")
useEffect(() => {
console.log(user.id)
......@@ -55,25 +55,41 @@ const Payment = ({ location }) => {
}
}
function kakaoBtnClick() {
setElement(
<div className="text-center">
<p className=" font-weight-bold" style={{ display: 'inline', color: "#FEDC00" }}>'카카오페이'</p><p style={{ display: 'inline' }}>를 선택하셨습니다. </p>
<p>결제하기를 눌러 결제를 이어가주세요.</p>
</div>
)
setTicketInfo({ ...ticketInfo, payment: "카카오페이" })
}
async function reservationComplete() {
try {
if (user.id > 0) {
if (user.role === "member") {
const response = await axios.post(`/api/reservation/save`, {
userType: "member",
payment: "카카오페이",
user: userInfo.id,
...ticketInfo,
payment: "카카오페이",
timetable: 1
})
if (response.data) {
const responseEmail = await axios.post('/api/email/send', {
...ticketInfo,
...userInfo,
...guestInfo,
const responsekakao = await axios.post('/api/kakaopay/test/single', {
cid: 'TC0ONETIME',
partner_order_id: 'orderNum',
partner_user_id: userInfo.id || guestInfo.id,
item_name: ticketInfo.title,
quantity: ticketInfo.adult + ticketInfo.youth + ticketInfo.senior,
total_amount: ticketInfo.totalFee,
vat_amount: 0,
tax_free_amount: 0,
approval_url: 'http://localhost:3000/paymentcomplete',
fail_url: 'http://localhost:3000/ticket',
cancel_url: 'http://localhost:3000/ticket',
})
console.log("이메일전송완료===", responseEmail.data)
alert("예매가 완료되었습니다.")
history.push('/')
if (response && responsekakao) {
window.location.href = responsekakao.data.redirect_url
}
} else {
if (guestID) {
......@@ -84,22 +100,26 @@ const Payment = ({ location }) => {
payment: "카카오페이",
timetable: 1
})
if (response.data) {
const responseEmail = await axios.post('/api/email/send', {
...ticketInfo,
...userInfo,
...guestInfo,
const responsekakao = await axios.post('/api/kakaopay/test/single', {
cid: 'TC0ONETIME',
partner_order_id: 'orderNum',
partner_user_id: 'user',
item_name: ticketInfo.title,
quantity: ticketInfo.adult + ticketInfo.youth + ticketInfo.senior,
total_amount: ticketInfo.totalFee,
vat_amount: 0,
tax_free_amount: 0,
approval_url: 'http://localhost:3000/paymentcomplete',
fail_url: 'http://localhost:3000/ticket',
cancel_url: 'http://localhost:3000/ticket',
})
console.log("이메일전송완료===", responseEmail.data)
if (response && responsekakao) {
window.location.href = responsekakao.data.redirect_url
}
alert("예매가 완료되었습니다.")
console.log("비회원예매완료===", response.data)
history.push('/')
} else {
alert("비회원 정보를 모두 입력 후 비회원 정보 저장 버튼을 눌러주세요.")
}
}
} catch (error) {
catchErrors(error, setError)
}
......@@ -109,7 +129,7 @@ const Payment = ({ location }) => {
return (
<div className="container" style={{ color: "white" }}>
{console.log(ticketInfo)}
{console.log(userInfo)}
{/* {console.log(userInfo)} */}
{/* {console.log(guestInfo)} */}
<div className="row justify-content-center my-5">
<div className="col-sm-4 ">
......@@ -176,10 +196,13 @@ const Payment = ({ location }) => {
</div>
}
<h5 className="my-4 p-2" style={{ backgroundColor: "white", color: "black" }}>결제방법</h5>
<img src="/images/naverpay_button.png" style={{width:"150px"}} />
<Kakaopay ticketInfo={ticketInfo} setTicketInfo={setTicketInfo} />
<img src="/images/naverpay_button.png" style={{ width: "150px" }} />
<button onClick={kakaoBtnClick} style={{ backgroundColor: "black", border: '0' }}>
<img src="/images/payment_icon_yellow_medium.png" style={{ width: "130px" }} />
</button>
{element}
<div className="my-5">
<button className="btn btn-warning" type="button" style={{ width: "100%" }} onClick={reservationComplete}>결제완료</button>
<button className="btn btn-warning" type="button" style={{ width: "100%" }} onClick={reservationComplete}>결제하기</button>
</div>
</div>
......@@ -191,10 +214,10 @@ const Payment = ({ location }) => {
<div>{ticketInfo.time}</div>
<div className="mb-3">{ticketInfo.selectedTheater}관 {ticketInfo.selectedSeats.map(el => String.fromCharCode(parseInt(el.split('-')[0]) + 65) + el.split('-')[1]) + ' '}</div>
<div className="rounded-3 p-3" style={{ backgroundColor: '#404040' }}>
<div>청소년: {ticketInfo.teenager}명</div>
<div>성인: {ticketInfo.adult}명</div>
<div>경로우대: {ticketInfo.elderly}명</div>
<div>총 결제금액: {ticketInfo.teenager * 7000 + ticketInfo.adult * 8000 + ticketInfo.elderly * 6000}</div>
<div>청소년: {ticketInfo.youth}명</div>
<div>경로우대: {ticketInfo.senior}명</div>
<div className="mt-2">총 결제금액: {ticketInfo.totalFee}원</div>
</div>
</div>
</div>
......
client/src/pages/TheaterPage.js
View file @ 05ec1de9
......@@ -29,7 +29,7 @@ const TheaterPage = () => {
</div>
<div className="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
<div className="row justify-content-center">
<div className="col-sm-9">
<div className="col-sm-9 pb-5">
<TicketFeeTable />
</div>
</div>
......
client/src/pages/TicketingSeatPage.js
View file @ 05ec1de9
......@@ -6,51 +6,76 @@ import SeatTable from '../components/SeatTable/SeatTable'
import styles from '../components/SeatTable/seatTable.module.scss'
import axios from 'axios'
import { useAuth } from '../context/auth_context.js'
import catchErrors from '../utils/catchErrors'
const TicketingSeatPage = ({ location }) => {
const history = useHistory()
const modalRef = useRef(null)
const modal = useRef()
const { user } = useAuth()
const [error, setError] = useState()
const [ticketInfo, setTicketInfo] = useState({ ...location.state })
const [theaterInfo, setTheaterInfo] = useState()
const [theaterInfo, setTheaterInfo] = useState({ theatertypeId: 0 })
const [selectedSeats, setSelectedSeats] = useState([])
const [reservedSeats, setReservedSeats] = useState([])
const [ticketFee, setTicketFee] = useState({
youth: 0,
adult: 0,
senior: 0
})
const [count, setCount] = useState({
youth: 0,
adult: 0,
teenager: 0,
elderly: 0
senior: 0
})
useEffect(() => {
getInfo()
}, [])
useEffect(() => {
getTicketFee()
}, [theaterInfo.theatertypeId])
async function getInfo() {
try {
const response = await axios.post('/api/theater/getInfo', {
theaterName: ticketInfo.selectedTheater
})
console.log(response.data)
setTheaterInfo(response.data)
const response2 = await axios.post('/api/reservation/findreservation', {
timetable: 1
})
console.log(response2.data)
const reserve = response2.data.map((el) =>
el.row + '-' + el.col
)
setReservedSeats(reserve)
} catch (error) {
console.log(error)
catchErrors(error, setError)
}
}
async function getTicketFee() {
try {
const response3 = await axios.get(`/api/info/ticketfee`, {
params: {
theaterTypeId: theaterInfo.theatertypeId
}
})
const basicFee = response3.data[0].day + response3.data[0].defaultPrice + response3.data[0].weekdays
setTicketFee({
adult: basicFee + response3.data[0].adult,
youth: basicFee + response3.data[0].youth,
senior: basicFee + response3.data[0].senior
})
} catch (error) {
catchErrors(error, setError)
}
}
function loginModal() {
if (user.role==="member") {
if (user.role === "member") {
history.push("/payment", {
...ticketInfo, selectedSeats: selectedSeats, ...count
...ticketInfo, selectedSeats: selectedSeats, ...count, totalFee: count.adult * ticketFee.adult + count.youth * ticketFee.youth + count.senior * ticketFee.senior
});
} else {
modal.current = new Modal(modalRef.current)
......@@ -63,7 +88,6 @@ const TicketingSeatPage = ({ location }) => {
<div ref={modalRef} className="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden={modal}>
<div className="modal-dialog">
<div className="modal-content">
{ }
<div className="modal-header">
<h5 className="modal-title" id="staticBackdropLabel">로그인이 필요한 서비스입니다.</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
......@@ -79,7 +103,7 @@ const TicketingSeatPage = ({ location }) => {
</Link>
<Link to={{
pathname: `/payment`,
state: { ...ticketInfo, selectedSeats: selectedSeats, ...count }
state: { ...ticketInfo, selectedSeats: selectedSeats, ...count,totalFee: count.adult * ticketFee.adult + count.youth * ticketFee.youth + count.senior * ticketFee.senior }
}}>
<button type="button" className="btn btn-primary" data-bs-dismiss="modal">비회원예매</button>
</Link>
......@@ -87,9 +111,7 @@ const TicketingSeatPage = ({ location }) => {
</div>
</div>
</div>
<div className="container" style={{ color: "white" }}>
{console.log(ticketInfo)}
{console.log(reservedSeats)}
<div className="mx-5 pb-5" style={{ color: "white" }}>
<div className="row justify-content-center my-5">
<div className="col-sm-4">
<h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>좌석선택</h3>
......@@ -97,17 +119,31 @@ const TicketingSeatPage = ({ location }) => {
</div>
<div className="row justify-content-center my-3">
<div className="col-sm-6 mb-4 text-center">
<div className="row">
<div className="col-sm-6 text-end">
<div className="my-1">일반</div>
<div className="my-1">청소년</div>
<div className="my-1">경로우대</div>
</div>
<div className="col-sm-6 text-start">
<div className="row text-end justify-content-sm-end">
<div className="col-sm-6 me-5">
<div>
<span className="my-1">일반</span>
<span>
<CountButton name="adult" count={count} setCount={setCount} />
<CountButton name="teenager" count={count} setCount={setCount} />
<CountButton name="elderly" count={count} setCount={setCount} />
</span>
</div>
<div>
<span className="my-1">청소년</span>
<span>
{ticketInfo.adult
?
<CountButton name="youth" count={count} setCount={setCount} disabled />
:
<CountButton name="youth" count={count} setCount={setCount} />
}
</span>
</div>
<div>
<span className="my-1">경로우대</span>
<span>
<CountButton name="senior" count={count} setCount={setCount} />
</span>
</div>
</div>
</div>
</div>
......@@ -133,33 +169,45 @@ const TicketingSeatPage = ({ location }) => {
</div>
</div>
<div className="row p-3 mt-5" style={{ backgroundColor: "#252525" }}>
<div className="col-sm-3 border-end text-center">
<div className="col-sm-2 mb-1 text-center">
{ticketInfo
? <img style={{ maxHeight: "10rem" }} src={`https://image.tmdb.org/t/p/original${ticketInfo.poster_path}`} alt="영화포스터" />
? <img style={{ width: "6rem" }} src={`https://image.tmdb.org/t/p/original${ticketInfo.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>
<div className="col-sm-4 mb-1" style={{ color: "white" }}>
{ticketInfo
? <ul>
<li>영화: {ticketInfo.title}</li>
<li>극장: {ticketInfo.cinema}</li>
<li>일시: 2021/07/21 10:00 </li>
<li>상영관: {ticketInfo.selectedTheater}관</li>
<li>좌석: {selectedSeats.map(el=>String.fromCharCode(parseInt(el.split('-')[0]) + 64)+el.split('-')[1])+' '}</li>
<li>좌석: {selectedSeats.map(el => String.fromCharCode(parseInt(el.split('-')[0]) + 64) + el.split('-')[1]) + ' '}</li>
</ul>
: <div></div>}
:
<div className="mb-2 text-center">극장선택</div>
}
</div>
<div className="col-sm-3 text-center">
<div className="mb-2" style={{ color: "white" }}>결제하기</div>
{ticketInfo
<div className="col-sm-4 mb-1">
{selectedSeats
?
<ul>
<li>성인: {count.adult}명</li>
<li>청소년: {count.youth}명</li>
<li>경로: {count.senior}명</li>
<li className="mt-3">총 결제금액: {count.adult * ticketFee.adult + count.youth * ticketFee.youth + count.senior * ticketFee.senior}원</li>
</ul>
: <></>}
</div>
<div className="col-sm-2 text-center mb-1">
<div className="h5 mb-3">결제하기</div>
{selectedSeats.length > 0 && count.adult + count.youth + count.senior === selectedSeats.length
?
<button onClick={loginModal} style={{ backgroundColor: '#252525', border: 0 }} >
<img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" style={{width:"90px"}} alt="결제하기" />
<img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" style={{ width: "70px" }} alt="결제하기" />
</button>
:
<button disabled>
<img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" alt="결제하기" />
<button onClick={() => { alert("좌석을 선택해주세요.") }} style={{ backgroundColor: '#252525', border: 0 }}>
<img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" style={{ width: "70px" }} alt="결제하기" />
</button>
}
......
server/controllers/email.controller.js
View file @ 05ec1de9
import nodemailer from "nodemailer"
const SendMail = async (req, res) => {
const { email, title, cinema, selectedTheater, time, name, nickname } = req.body
const selectedSeats = req.body.selectedSeats
console.log(selectedSeats)
const sendMail = async (email, title, cinema, selectedTheater, time, name, selectedSeats, nickname) => {
// const { email, title, cinema, theater, time, name, nickname } = req.body.userData
const { email, name, nickname } = req.body.userData
const {title, cinema, time, theater} = req.body
const selectedSeats = req.body.reservationData.map(el => String.fromCharCode(el.row + 65) + el.col)
const sendMail = async (email, title, cinema, theater, time, name, selectedSeats, nickname) => {
// 메일을 전달해줄 객체
const transporter = nodemailer.createTransport({
host: 'smtp.gmail.com',
......@@ -29,16 +30,16 @@ const SendMail = async (req, res) => {
subject: `${cinema} 예매확인내역: ${title}`,
html: `<div>
<h2>
${name||nickname}님의 예매
${name || nickname}님의 예매
</h2>
<div>
영화: ${title}
</div>
<div>
장소: ${cinema} ${selectedTheater}관
장소: ${cinema} ${theater}관
</div>
<div>
일시 및 좌석: ${time} / ${selectedSeats.map(el => String.fromCharCode(parseInt(el.split('-')[0]) + 65) + el.split('-')[1]) + ' '}
일시 및 좌석: ${time} / ${selectedSeats.map(el => el+ ' ')}
</div>
</div>`
};
......@@ -53,7 +54,7 @@ const SendMail = async (req, res) => {
}
}
sendMail(email, title, cinema, selectedTheater, time, name, selectedSeats, nickname);
sendMail(email, title, cinema, theater, time, name, selectedSeats, nickname);
}
......
server/controllers/movie.controller.js
View file @ 05ec1de9
......@@ -5,55 +5,13 @@ const { Op } = sequelize
const getListfromDB = async (req, res) => {
try {
const findAll = await Movie.findAll({ attributes: [ 'movieId', 'title', 'release_date' ] })
const findAll = await Movie.findAll({ attributes: ['movieId', 'title', 'release_date'] })
res.json(findAll)
} catch (error) {
return res.status(500).send(error.message || "영화 목록 가져오기 중 에러 발생");
}
}
const getMovieByCategory = async (req, res, next, category) => {
try {
const TMDBmovieIds = []
const movieIds = []
const response = await axios.get(`https://api.themoviedb.org/3/movie/${category}?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR&page=1`)
const TMDBmovies = response.data.results
TMDBmovies.forEach(element => {
TMDBmovieIds.push(element.id)
})
const responseAfterCompare = await Movie.findAll({
where: {
movieId: {
[Op.or]: TMDBmovieIds
}
}
})
responseAfterCompare.forEach(el => {
movieIds.push(el.movieId)
})
req.movieIds = movieIds
next()
} catch (error) {
return res.status(500).send(error.message || "영화 가져오기 중 에러 발생");
}
}
const getMovieById = async (req, res) => {
try {
const movieIds = req.movieIds
const elements = await Promise.all(
movieIds.map(async (movieId) => {
const movie = await axios.get(`https://api.themoviedb.org/3/movie/${movieId}?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR`)
return movie.data
})
)
res.json(elements)
} catch (error) {
return res.status(500).send(error.message || "영화 가져오기 중 에러 발생");
}
}
const movieforAdmin = async (req, res) => {
try {
const TMDBmovieIds = []
......@@ -68,7 +26,8 @@ const movieforAdmin = async (req, res) => {
if (findDirectors.length !== 0) {
const name = findDirectors.reduce((acc, cur, idx) => {
if (idx !== 0) return acc + ', ' + cur.name
else return acc + cur.name}, '')
else return acc + cur.name
}, '')
newObj.name = name
} else newObj.name = "없음"
......@@ -106,20 +65,56 @@ const getAllMovie = async (req, res, next) => {
}
}
const getMovieList = async(req,res)=>{
const getMovieList = async (req, res) => {
const { category } = req.params
// console.log(category)
try {
const movieList = await Movie.findAll()
const movieIds=[]
const movieIds = []
movieList.forEach(el => {
movieIds.push(el.movieId)
})
const elements = await Promise.all(
movieIds.map(async (movieId) => {
const movie = await axios.get(`https://api.themoviedb.org/3/movie/${movieId}?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR`)
return movie.data
const cols = await Movie.findOne({
where: { "movieId": movieId },
attributes: ["ticket_sales", "vote_average"]
})
const totalReservationRate = Movie.sum('ticket_sales')
const rate = await Promise.all(cols.ticket_sales / totalReservationRate * 100)
return { ...movie.data, ticket_sales: rate, vote_average: cols.vote_average }
})
)
if (category === "popular") {
for (let i = 0; i < elements.length; i++) {
if (new Date(elements[i].release_date) > new Date()) {
elements.splice(i, 1);
i--;
}
}
elements.sort(function (a, b) {
return b.popularity - a.popularity
})
res.json(elements)
} else if (category === "upcoming") {
for (let i = 0; i < elements.length; i++) {
if (new Date(elements[i].release_date) <= new Date()) {
elements.splice(i, 1);
i--;
}
}
elements.sort(function (a, b) {
return a.release_date - b.release_date
})
res.json(elements)
} else {
elements.sort(function (a, b) {
return a.title - b.title
})
res.json(elements)
}
} catch (error) {
console.log(error)
}
......@@ -185,8 +180,6 @@ const findaboutAll = async (req, res, next) => {
export default {
getListfromDB,
getMovieByCategory,
getMovieById,
getAllMovie,
getMovieList,
create,
......
server/controllers/reservation.controller.js
View file @ 05ec1de9
......@@ -3,7 +3,7 @@ import { Movie, Reservation, Theater } from '../db/index.js'
import sequelize from 'sequelize'
const { Op } = sequelize
const findReservation = async (req, res) => {
const findReservedSeats = async (req, res) => {
const { timetable } = req.body
try {
const reservedSeats = await Reservation.findAll({
......@@ -11,15 +11,41 @@ const findReservation = async (req, res) => {
timetable: timetable
}
})
console.log(reservedSeats)
res.json(reservedSeats)
} catch (error) {
res.status(500).send(error.message || "이미 예매되어있는 좌석을 찾는 중 오류발생")
}
}
const findReservation = async (req, res) => {
const { user } = req.body
try {
const reservation = await Reservation.findAll({
where: {
user: user
}
})
res.json(reservation)
} catch (error) {
res.status(500).send(error.message || "예매 내역들을 찾는 중 오류발생")
}
}
const findOneReservation = async (req, res) => {
const { userType, user } = req.body
try {
const reservation = await Reservation.findAll({
where: {
userType: userType,
user: user
},
})
console.log(reservation)
res.json(reservation)
} catch (error) {
res.status(500).send(error.message || "예매 내역을 찾는 중 오류 발생")
}
}
const saveReservation = async (req, res) => {
const { movieId, selectedTheater, timetable, payment,user, userType } = req.body
const { movieId, selectedTheater, timetable, payment, user, userType } = req.body
const rows = req.body.selectedSeats.map(el => el.split('-')[0])
const cols = req.body.selectedSeats.map(el => el.split('-')[1])
try {
......@@ -34,7 +60,6 @@ const saveReservation = async (req, res) => {
timetable: timetable,
payment: payment
})
res.json(reservation)
}
const movie = await Movie.findOne({
where: {
......@@ -43,6 +68,7 @@ const saveReservation = async (req, res) => {
})
movie.ticket_sales++
await movie.save();
res.json({ message: '200 OK' })
} catch (error) {
console.log(error)
res.status(500).send(error.message || "예매DB에 저장 실패")
......@@ -50,6 +76,8 @@ const saveReservation = async (req, res) => {
}
export default {
findReservedSeats,
findReservation,
findOneReservation,
saveReservation
}
\ 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