Skip to content

GitLab

Commit ba5429cf authored by Kim, Subin's avatar Kim, Subin
Browse files

master 병합

parent c465b924
Hide whitespace changes
Inline Side-by-side
.gitignore
View file @ ba5429cf
/node_modules
.env.development
.env
\ No newline at end of file
.env
upload/
\ No newline at end of file
client/package-lock.json
View file @ ba5429cf
......@@ -4419,9 +4419,9 @@
}
},
"cookie": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
"integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
"integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA=="
},
"cookie-signature": {
"version": "1.0.6",
......@@ -6510,6 +6510,11 @@
"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
"integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
},
"cookie": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
"integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
},
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
......
client/src/App.js
View file @ ba5429cf
......@@ -14,7 +14,8 @@ import AdminPage from "./pages/AdminPage/AdminPage";
import TicketingPage from "./pages/TicketingPage";
import TicketingSeatPage from './pages/TicketingSeatPage'
import SearchPage from "./pages/SearchPage";
import Payment from "./pages/PaymentPage";
import Payment from "./pages/PaymentPage/PaymentPage";
import PaymentCompletePage from "./pages/PaymentCompletePage";
function App() {
......@@ -46,4 +47,4 @@ function App() {
);
}
export default App;
export default App;
\ No newline at end of file
client/src/apis/auth.api.js
View file @ ba5429cf
import axios from "axios";
import { baseUrl } from "../utils/baseUrl.js";
import config from "../utils/clientConfig.js";
const getUser = async () => {
const url = `${baseUrl}/api/auth/user`
const { data } = await axios.get(url)
return data
}
const login = async (login) => {
const payload = login;
......@@ -9,41 +14,61 @@ const login = async (login) => {
};
const logout = async () => {
alert("로그아웃되었습니다.");
localStorage.removeItem(config.loginUser);
await axios.get(`${baseUrl}/api/auth/logout`);
const { data } = await axios.get(`${baseUrl}/api/auth/logout`);
return data
};
const signup = async (user) => {
const url = `${baseUrl}/api/auth/signup`
await axios.post(url, user)
const url = `${baseUrl}/api/auth/signup`;
const { data } = await axios.post(url, user);
return data
}
const confirmMbnum = async (phone) => {
const url = `${baseUrl}/api/auth/phone/${phone}`
const { data } = await axios.post(url);
return data
}
const confirmNum = async (confirmNum) => {
const url = `${baseUrl}/api/auth/num`
const { data } = await axios.post(url, confirmNum);
return data
}
const compareId = async (userId) => {
const url = `${baseUrl}/api/auth/${userId}`
const profile = async (formData) => {
const url = `${baseUrl}/api/auth/profile`
const { data } = await axios.post(url, formData)
return data
}
const getMember = async () => {
const url = `${baseUrl}/api/auth/member`
const { data } = await axios.get(url)
return data
}
}
const confirmMbnum = async (id,token) => {
const url = `${baseUrl}/api/auth/${id}/${token}`
const comparePw = async (pw) => {
const url = `${baseUrl}/api/auth/pw/${pw}`
const { data } = await axios.get(url)
return data
}
const getNickName = async(id) =>{
const url = `${baseUrl}/api/auth/${id}`
console.log("url : ", url);
const { nickName } = await axios.get(url)
return nickName
const modifyUser = async (user) => {
const url = `${baseUrl}/api/auth/modify`
const { data } = await axios.post(url, user)
return data
}
const authApi = {
getUser,
login,
logout,
signup,
compareId,
confirmMbnum,
getNickName,
confirmNum,
profile,
getMember,
comparePw,
modifyUser,
};
export default authApi
\ No newline at end of file
client/src/apis/movie.api.js
View file @ ba5429cf
......@@ -11,11 +11,6 @@ const getAllfromTM = async (pageNum) => {
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
......@@ -45,6 +40,11 @@ const getListfromDB = async () => {
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
......@@ -68,7 +68,7 @@ const search = async ({ type, keyword }, pageNum) => {
const movieApi = {
getAllfromTM,
getMoviesfromTM,
getListByCategoryfromDB,
getMovieInfofromTM,
getImagesfromTM,
getCreditsfromTM,
......
client/src/components/Admin/TicketFeeTable.js
View file @ ba5429cf
import { useState, useEffect } from "react";
import cinemaApi from "../../apis/cinema.api.js";
import catchErrors from "../../utils/catchErrors.js";
import { useAuth } from '../../context/auth_context';
import styles from "./admin.module.scss";
const TicketFeeTable = ({ selectTheater, setEditFee, formRef }) => {
const [ticketFee, setTicketFee] = useState([])
const [error, setError] = useState("")
const { user } = useAuth()
useEffect(() => {
if (selectTheater !== 0) getOne(selectTheater)
......@@ -48,7 +51,7 @@ const TicketFeeTable = ({ selectTheater, setEditFee, formRef }) => {
}
return (
<table className={`table text-center align-middle ${styles.tableForm}`}>
<table className={`table text-center align-middle ${styles.tableForm}`} style={{ color: user.role === "admin" ? "" : "white" }}>
<thead className={`table-dark align-middle ${styles.dNone}`}>
<tr>
<th className={styles.word}>상영관 종류</th>
......@@ -57,7 +60,7 @@ const TicketFeeTable = ({ selectTheater, setEditFee, formRef }) => {
<th>청소년</th>
<th>일반</th>
<th>경로</th>
<th style={{ width: "14%" }}></th>
{user.role === "admin" ? <th style={{ width: "14%" }}></th> : <></>}
</tr>
</thead>
<tbody>
......@@ -70,12 +73,15 @@ const TicketFeeTable = ({ selectTheater, setEditFee, formRef }) => {
<td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.morning + info.youth + info.defaultPrice)}원</td>
<td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.morning + info.adult + info.defaultPrice)}원</td>
<td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.morning + info.senior + info.defaultPrice)}원</td>
<td rowSpan="6" className="d-none d-md-table-cell">
<div className="d-flex flex-column">
<button type="button" className="btn btn-primary my-1" onClick={() => editRow(info.theatertypeId)}>수정</button>
<button type="button" className="btn btn-danger my-1" onClick={() => deleteData(info.theatertypeId)}>삭제</button>
</div>
</td>
{user.role === "admin"
?
<td rowSpan="6" className="d-none d-md-table-cell">
<div className="d-flex flex-column">
<button type="button" className="btn btn-primary my-1" onClick={() => editRow(info.theatertypeId)}>수정</button>
<button type="button" className="btn btn-danger my-1" onClick={() => deleteData(info.theatertypeId)}>삭제</button>
</div>
</td>
: <></>}
</tr>
<tr>
<td className="d-inline-block d-md-table-cell">일반 (11:00 ~ )</td>
......@@ -107,12 +113,15 @@ const TicketFeeTable = ({ selectTheater, setEditFee, formRef }) => {
<td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.night + info.youth + info.defaultPrice)}원</td>
<td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.night + info.adult + info.defaultPrice)}원</td>
<td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.night + info.senior + info.defaultPrice)}원</td>
<td className={`d-block d-md-none ${styles.borderTop}`}>
<div className="d-flex justify-content-end">
<button type="button" className="btn btn-primary" onClick={() => editRow(info.theatertypeId)}>수정</button>
<button type="button" className="btn btn-danger ms-2" onClick={() => deleteData(info.theatertypeId)}>삭제</button>
</div>
</td>
{user.role === "admin"
?
<td className={`d-block d-md-none ${styles.borderTop}`}>
<div className="d-flex justify-content-end">
<button type="button" className="btn btn-primary" onClick={() => editRow(info.theatertypeId)}>수정</button>
<button type="button" className="btn btn-danger ms-2" onClick={() => deleteData(info.theatertypeId)}>삭제</button>
</div>
</td>
: <></>}
</tr>
</>)
: <tr>
......
client/src/components/BoxOffice/BoxOffice.js
View file @ ba5429cf
import { useState, useEffect } from "react"
import movieApi from '../../apis/movie.api.js'
import "./box-office.module.css"
const BoxOffice = () => {
const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState()
useEffect(() => {
// getTMDB_TopRated()
let items = document.querySelectorAll('.carousel .carousel-item')
// console.log("item", items)
items.forEach((el) => {
const minPerSlide = 4
let next = el.nextElementSibling
for (let i = 1; i < minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
}, [])
async function getTMDB_TopRated() {
const category = "popular"
try {
const data = await movieApi.getMoviesfromTM(category)
console.log(data)
setTMDB_TopRated_Data(data)
} catch (error) {
console.log(error)
}
}
const BoxOffice = ({TMDB_TopRated_Data}) => {
return (
<div className="container text-center my-3">
{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 id="carouselExampleControls" className="carousel slide" data-bs-ride="carousel">
<div className="carousel-inner">
{TMDB_TopRated_Data.length>0
?
TMDB_TopRated_Data.map((movie, index) => {
<div className={`carousel-item ${index === 0 ? "active" : ""}`}>
{console.log(movie.poster_path)}
<img src={`https://image.tmdb.org/t/p/original${movie.poster_path}`} className="d-block w-100" alt="Movie Poster"/>
</div>
})
:
<div className="carousel-item">
{console.log("스틸컷 불러오기 오류")}
<img src="/images/none.jpg" className="d-block w-100" alt="등록된 스틸컷이 없습니다." />
</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 id="recipeCarousel" className="carousel slide" data-bs-ride="carousel" data-bs-interval="999999999">
<div className={`carousel-inner`} role="listbox">
{TMDB_TopRated_Data ?
TMDB_TopRated_Data.map((moviePoster, index) => (
<div className={`carousel-item ${index === 0 ? "active" : ""}`}>
<div className="col-sm-3">
<div className="card">
<div className="card-img">
<img src={`https://image.tmdb.org/t/p/original${moviePoster.poster_path}`} className="img-fluid" />
</div>
</div>
</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>
<button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="visually-hidden">Previous</span>
</button>
<button className="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="visually-hidden">Next</span>
</button>
</div> */}
</div>
)
}
export default BoxOffice
\ No newline at end of file
export default BoxOffice
// import { useState, useEffect } from "react"
// import movieApi from '../../apis/movie.api.js'
// import "./box-office.module.css"
// const BoxOffice = () => {
// const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState()
// useEffect(() => {
// // getTMDB_TopRated()
// let items = document.querySelectorAll('.carousel .carousel-item')
// // console.log("item", items)
// items.forEach((el) => {
// const minPerSlide = 4
// let next = el.nextElementSibling
// for (let i = 1; i < minPerSlide; i++) {
// if (!next) {
// // wrap carousel by using first child
// next = items[0]
// }
// let cloneChild = next.cloneNode(true)
// el.appendChild(cloneChild.children[0])
// next = next.nextElementSibling
// }
// })
// }, [])
// async function getTMDB_TopRated() {
// const category = "popular"
// try {
// const data = await movieApi.getMoviesfromTM(category)
// console.log(data)
// setTMDB_TopRated_Data(data)
// } catch (error) {
// console.log(error)
// }
// }
// return (
// <div className="container text-center my-3">
// {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 id="recipeCarousel" className="carousel slide" data-bs-ride="carousel" data-bs-interval="999999999">
// <div className={`carousel-inner`} role="listbox">
// {TMDB_TopRated_Data ?
// TMDB_TopRated_Data.map((moviePoster, index) => (
// <div className={`carousel-item ${index === 0 ? "active" : ""}`}>
// <div className="col-sm-3">
// <div className="card">
// <div className="card-img">
// <img src={`https://image.tmdb.org/t/p/original${moviePoster.poster_path}`} className="img-fluid" />
// </div>
// </div>
// </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>
// </div>
// )
// }
// export default BoxOffice
\ No newline at end of file
client/src/components/BoxOffice/box-office.module.css deleted 100644 → 0
View file @ c465b924
@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/mystyle.css deleted 100644 → 0
View file @ c465b924
@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/Collection.js
View file @ ba5429cf
const Collection = () => {
import { useEffect, useState } from 'react'
import movieApi from '../apis/movie.api.js'
import catchErrors from '../utils/catchErrors.js'
const Collection = ({ TMDB_TopRated_Data }) => {
const [videoUrls, setVideoUrls] = useState([])
const [error, setError] = useState("")
useEffect(() => {
if (TMDB_TopRated_Data.length > 0) {
getVideos()
}
}, [TMDB_TopRated_Data])
async function getVideos() {
try {
const data = await movieApi.getVideosfromTM(TMDB_TopRated_Data[0].id)
setVideoUrls(data)
} catch (error) {
catchErrors(error, setError)
}
}
return (
<>
<h2 className="fw-bold text-white text-center my-5">Movie Collection</h2>
<div className="d-flex container justify-content-between" style={{ marginBottom: "8em" }}>
<div className="col-md-8 col-12 bg-white" style={{ height: "20em" }}></div>
<img className="col-md-3 bg-white" style={{ height: "20em" }} />
<div className="row justify-content-sm-center" style={{ marginBottom: "8rem" }}>
<div className="col-md-8">
{videoUrls.length > 0
?
<div className="">
<div className="ratio ratio-16x9">
<iframe src={`https://www.youtube.com/embed/${videoUrls[0].key}`} title="YouTube video" allowfullscreen></iframe>
</div>
</div>
: <div className="text-center">예고편 정보가 존재하지 않습니다.</div>}
</div>
{TMDB_TopRated_Data.length > 0
?
<img src={`https://image.tmdb.org/t/p/original${TMDB_TopRated_Data[0].poster_path}`} className="col-md-3 bg-black" />
:
<div className="col-md-3"></div>
}
</div>
</>
)
......
client/src/components/CountButton.js
View file @ ba5429cf
import {useState} from 'react'
const CountButton = (props) => {
const name = props.name
const CountButton = ({name, count, setCount}) => {
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})
}
}
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>
<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>
</div>
</>
)
}
......
client/src/components/Kakaopay.js deleted 100644 → 0
View file @ c465b924
import axios from 'axios'
const Kakaopay = (props) => {
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,
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" />
</button>
</>
)
}
export default Kakaopay
\ No newline at end of file
client/src/components/Login/Login.js
View file @ ba5429cf
import { useState } from "react";
import styles from "./login.module.scss";
import { Redirect } from "react-router-dom";
import { useAuth } from "../../context/auth_context.js";
import catchErrors from "../../utils/catchErrors";
import {useAuth} from "../../context/auth_context.js";
import styles from "./login.module.scss";
const Login = () => {
const {login, loading} = useAuth();
//useState를 이용해서 각 state 생성 및 초기값 저장
const [state, setState] = useState(true); // 이 줄은 css에 해당하는 state
//state변수 지정 하지만 이 변수는 react에 의해 없어지지 않음, 그리고 그 다음 변수는 state변수를 갱신해주는 함수
const { login, loading } = useAuth();
const [state, setState] = useState(true);
const [user, setUser] = useState({
id: '',
password: ''
});
const [error, setError] = useState("");
const [success, setSuccess] = useState(false);
const [guest, setGuset] = useState({
guestName: '',
gusetBirthday: '',
......@@ -23,10 +20,7 @@ const Login = () => {
guestPassword: ''
})
//input태그에 걸려있는 onchange에서 실행할 함수설정
const handleLoginOnChange = (e) => {
// ... 전개 연산자
// 현재 state에 방금 변화한 값을 다시 저장함
setUser({
...user,
[e.target.name]: e.target.value
......@@ -41,9 +35,12 @@ const Login = () => {
}
const requestServer = async (data) => {
if(data === user){
await login(data);
}else{
if (data === user) {
const success = await login(data);
if (success) {
setSuccess(true);
alert('로그인이 완료되었습니다.')
}
}
}
......@@ -51,11 +48,8 @@ const Login = () => {
e.preventDefault();
try {
setError("");
console.log(e.target.name);
if (e.target.name === "login") {
requestServer(user);
alert('로그인이 완료되었습니다.')
setSuccess(true);
}
else {
requestServer(guest);
......@@ -86,7 +80,6 @@ const Login = () => {
</li>
</ul>
<div className="tab-content w-100" id="myTabContent">
{/* 로그인 */}
<div className="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<form className="d-flex flex-column" name="login" onSubmit={handleOnSummit}>
<input className={styles.input} type="text" name="id" placeholder="ID" onChange={handleLoginOnChange} maxLength="10" required />
......@@ -95,7 +88,6 @@ const Login = () => {
<span><a href="./signup" className={styles.intoSignupPage}>회원이 아니십니까?</a></span>
</form>
</div>
{/* 비회원예매 학인 */}
<div className="tab-pane fade" id="guest" role="tabpanel" aria-labelledby="guest-tab">
<form className="d-flex flex-column" onSubmit={handleOnSummit}>
<input className={styles.input} type="text" name="guestName" id="guestName" placeholder="이름" onChange={handleGuestOnChange} maxLength="5" required />
......@@ -103,7 +95,6 @@ const Login = () => {
<input className={styles.input} type="number" name="gusetBirthday" id="gusetBirthday" placeholder="생년월일" onChange={handleGuestOnChange} maxLength="6" required />
<input className={styles.input} type="number" name="gusetMbnum" id="gusetMbnum" placeholder="휴대폰 번호" onChange={handleGuestOnChange} maxLength="11" required />
<input className={styles.input} type="password" name="guestPassword" id="password" placeholder="비밀번호" onChange={handleGuestOnChange} maxLength="11" required />
<p className={`text-white ${styles.fontSizeTwo}`}>
※ 비회원 정보 오 입력 시 예매 내역 확인/취소 및 티켓 발권이 어려울 수 있으니 다시 한번 확인해 주시기 바랍니다.
</p>
......
client/src/components/MovieCard/MovieCard.js
View file @ ba5429cf
......@@ -23,8 +23,9 @@ 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>
<p className={`card-text text-center ${styles.txt}`}>예매율: {movie.ticket_sales}0% | {movie.runtime}분</p>
{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}`}>예매율: {Math.round((movie.ticket_sales/(movie.totalReservationRate.totalReservationRate||1))*100)}% | {movie.runtime}분</p>
<p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
</div>
<Link to={{
......
client/src/components/MovieChart.js
View file @ ba5429cf
......@@ -3,7 +3,6 @@ import MovieCard from './MovieCard/index.js'
import movieApi from '../apis/movie.api.js'
import catchErrors from '../utils/catchErrors.js'
const MovieChart = () => {
const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState([])
const [error, setError] = useState("")
......@@ -16,8 +15,7 @@ const MovieChart = () => {
async function getTMDB_TopRated() {
try {
setError("")
const data = await movieApi.getMoviesfromTM(category)
console.log("sdad==", data)
const data = await movieApi.getListByCategoryfromDB(category)
setTMDB_TopRated_Data([...data])
} catch (error) {
catchErrors(error, setError)
......@@ -30,7 +28,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 @ ba5429cf
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 movieApi from "../apis/movie.api.js"
import catchErrors from '../utils/catchErrors.js'
import styles from './MovieCard/movie-card.module.scss'
const MovieComing = () => {
const [TMDB_UpComing_Data, setTMDB_UpComing_Data] = useState([])
......@@ -17,7 +16,7 @@ const MovieComing = () => {
async function getTMDB_UpComing() {
try {
setError("")
const response = await movieApi.getMoviesfromTM(category)
const response = await movieApi.getListByCategoryfromDB(category)
setTMDB_UpComing_Data([...response])
} catch (error) {
catchErrors(error, setError)
......@@ -28,7 +27,6 @@ const MovieComing = () => {
<>
{TMDB_UpComing_Data.length !== 0 ?
<div className="row row-cols-1 row-cols-md-4 g-4">
{/* <MovieCard list={TMDB_UpComing_Data} /> */}
{TMDB_UpComing_Data.map(movie => (
<div className="card h-100" style={{ backgroundColor: "black" }}>
<Link to={{
......@@ -41,8 +39,9 @@ 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>
<p className={`card-text text-center ${styles.txt}`}>예매율: {movie.ticket_sales}0% | {movie.runtime}분</p>
{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.runtime}분</p>
<p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
</div>
<Link to={{
......@@ -54,7 +53,7 @@ const MovieComing = () => {
</div>
))}
</div>
: <h2 className="text-white text-center my-5">영화정보를 로딩할 수 없습니다.</h2>
: <h2 className="text-white text-center p-5"> </h2>
}
</>
)
......
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