Commit 31cef7c3 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Merge branch 'kimpen'

parents 53792c65 ba5429cf
const Pagination = () => { import PaginationBoot from "./PaginationBoot";
const Pagination = ({ totalPages, activePage, prevPage, nextPage, paginate }) => {
const pageWidth = 5
const section = Math.floor((activePage - 1) / pageWidth)
let startPage = section * pageWidth + 1
if (startPage < 1) startPage = 1
let endPage = startPage + pageWidth - 1
if (endPage > totalPages) endPage = totalPages
const pageNumbers = []
for (let i = startPage; i <= endPage; i++) {
pageNumbers.push(i);
}
return ( return (
<nav className="col-12 col-md-4 offset-md-4 my-2" aria-label="Page navigation"> <PaginationBoot>
<ul className="pagination justify-content-center mb-0"> <PaginationBoot.First
<li className="page-item"> disabled={activePage <= 1}
<a className="page-link" href="#" aria-label="Previous"> onClick={() => paginate(1)}
<span aria-hidden="true">&laquo;</span> />
</a> <PaginationBoot.Prev onClick={prevPage} disabled={activePage <= 1} />
</li> {pageNumbers.map((number, index) => <PaginationBoot.Item
<li className="page-item"><a className="page-link" href="#">1</a></li> key={index}
<li className="page-item"><a className="page-link" href="#">2</a></li> active={activePage === number}
<li className="page-item"><a className="page-link" href="#">3</a></li> onClick={() => {
<li className="page-item"> console.log("number", number);
<a className="page-link" href="#" aria-label="Next"> paginate(number);
<span aria-hidden="true">&raquo;</span> }}
</a> >
</li> {number}
</ul> </PaginationBoot.Item>
</nav> )}
<PaginationBoot.Next
onClick={nextPage}
disabled={activePage >= totalPages}
/>
<PaginationBoot.Last
disabled={activePage >= totalPages}
onClick={() => paginate(totalPages)}
/>
</PaginationBoot>
) )
} }
......
import { Link } from "react-router-dom";
const PaginationBoot = ({ children }) => {
return (
<nav aria-label="page navigation">
<ul className="pagination justify-content-center py-3">{children}</ul>
</nav>
);
};
const PageItem = ({
active = false,
disabled = false,
className = "",
style,
activeLabel = "(current)",
children,
...props
}) => {
return (
<li
style={style}
className={`${className}` + " page-item " + (active ? "active " : "") + (disabled ? "disabled " : "")}
>
<Link to="#" className={"page-link border-0 shadow-none " + (active ? "rounded-circle text-white" : "text-dark")} {...props}>
{children}
</Link>
</li>
);
};
const createButton = (name, defaultValue, label = name) => {
function Button({ children, ...props }) {
return (
<PageItem {...props}>
<span aria-hidden="true">{children || defaultValue}</span>
<span className="visually-hidden">{label}</span>
</PageItem>
);
}
Button.displayName = name;
return Button;
};
PaginationBoot.First = createButton("First", <i className="bi bi-chevron-double-left"></i>);
PaginationBoot.Prev = createButton("Prev", <i className="bi bi-chevron-left"></i>);
PaginationBoot.Item = PageItem;
PaginationBoot.Next = createButton("Next", <i className="bi bi-chevron-right"></i>);
PaginationBoot.Last = createButton("Last", <i className="bi bi-chevron-double-right"></i>);
export default PaginationBoot
\ No newline at end of file
...@@ -31,7 +31,6 @@ ...@@ -31,7 +31,6 @@
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.header{ .header{
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -41,9 +40,8 @@ ...@@ -41,9 +40,8 @@
font-size: 1.5rem; font-size: 1.5rem;
margin: 1rem; margin: 1rem;
} }
.layout{
.layout{
color:white; color:white;
font-size: 1rem; font-size: 1rem;
} }
} }
\ No newline at end of file
...@@ -9,7 +9,7 @@ const Search = ({ search, setSearch, handleClick }) => { ...@@ -9,7 +9,7 @@ const Search = ({ search, setSearch, handleClick }) => {
return ( return (
<div className="d-flex"> <div className="d-flex">
<input className={`form-control ${search.type === "home" ? styles.searchWhite : `${styles.search}`}`} name="keyword" type="text" autoComplete="off" onChange={handleSearch} /> <input className={`form-control ${search.type === "home" ? styles.searchWhite : `${styles.search}`}`} name="keyword" type="text" autoComplete="off" onChange={handleSearch} />
<i className={`bi bi-search align-self-center ${search.type === "home" ? "text-white" : "mx-2"} ${styles.icon}`} onClick={handleClick} style={{ fontSize: "1.3rem" }}></i> <i className={`bi bi-search align-self-center ${search.type === "home" ? "text-white" : "mx-2"} ${styles.icon}`} onClick={() => handleClick(1)} style={{ fontSize: "1.3rem" }}></i>
</div> </div>
) )
} }
......
// import { useState } from 'react'
import styles from './seatTable.module.scss' import styles from './seatTable.module.scss'
const SeatTable = ({ theaterInfo, count, setSelectedSeats, selectedSeats, reservedSeats }) => { const SeatTable = ({ theaterInfo, count, setSelectedSeats, selectedSeats, reservedSeats }) => {
const table = [] const table = []
if (theaterInfo) { if (theaterInfo) {
for (let rowIndex = 0; rowIndex < theaterInfo.rows; rowIndex++) { for (let rowIndex = 0; rowIndex < theaterInfo.rows; rowIndex++) {
table.push(<span className="me-3" style={{ color: "gray" }}>{String.fromCharCode(rowIndex + 65)}</span>) table.push(<span className="me-3" style={{ color: "gray" }}>{String.fromCharCode(rowIndex + 65)}</span>)
...@@ -26,19 +26,14 @@ const SeatTable = ({ theaterInfo, count, setSelectedSeats, selectedSeats, reserv ...@@ -26,19 +26,14 @@ const SeatTable = ({ theaterInfo, count, setSelectedSeats, selectedSeats, reserv
function handleClick(event) { function handleClick(event) {
const num = Object.values(count).reduce((a, b) => (a + b)) const num = Object.values(count).reduce((a, b) => (a + b))
if (selectedSeats.find(el => el === event.target.name + '-' + event.target.id)) { if (selectedSeats.find(el => el === event.target.name + '-' + event.target.id)) {
//제거
const deleted = selectedSeats.filter((element) => element !== event.target.name + '-' + event.target.id); const deleted = selectedSeats.filter((element) => element !== event.target.name + '-' + event.target.id);
setSelectedSeats(deleted) setSelectedSeats(deleted)
} else { } else {
if (selectedSeats.length > num - 1) { if (selectedSeats.length > num - 1) alert("선택한 좌석이 예매인원보다 많습니다.")
alert("선택한 좌석이 예매인원보다 많습니다.") else setSelectedSeats([...selectedSeats, event.target.name + '-' + event.target.id])
} else {
//추가
setSelectedSeats([...selectedSeats, event.target.name + '-' + event.target.id])
} }
} }
}
return ( return (
<div className="text-center"> <div className="text-center">
<div className="mb-2" style={{ backgroundColor: "gray" }}>Screen</div> <div className="mb-2" style={{ backgroundColor: "gray" }}>Screen</div>
......
.btn { .btn {
border:0; border: 0;
background: black; background: black;
color: white; color: white;
&:hover{
border:0; &:hover {
background: red ; border: 0;
color:white background: red;
color: white;
} }
} }
.on { .on {
border:0; border: 0;
background: red ; background: red;
color:white color: white;
} }
.btnBlock { .btnBlock {
background: gray; background: gray;
border: 0; border: 0;
color:white; color: white;
} }
\ No newline at end of file
import styles from "./signup.module.scss";
import { useState } from "react"; import { useState } from "react";
import authApi from "../../apis/auth.api.js";
import { Redirect } from "react-router-dom"; import { Redirect } from "react-router-dom";
import authApi from "../../apis/auth.api.js";
import catchErrors from "../../utils/catchErrors.js"; import catchErrors from "../../utils/catchErrors.js";
import styles from "./signup.module.scss";
const Signup = () => { const Signup = () => {
//회원정보 //회원정보
const [user, setUser] = useState({ const [user, setUser] = useState({
userId: "", userId: "",
userName:"", userName: "",
userEmail: "", userEmail: "",
userNickName: "", userNickName: "",
userBirthday: "", userBirthday: "",
...@@ -20,8 +20,7 @@ const Signup = () => { ...@@ -20,8 +20,7 @@ const Signup = () => {
const [number, setNumber] = useState(null); const [number, setNumber] = useState(null);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false); const [success, setSuccess] = useState(false);
//각 타입별 error 유무 state const [mbError, setMbError] = useState(false);
const [mbError,setMbError] = useState(false);
const [error, setError] = useState(""); const [error, setError] = useState("");
const [errorMsg, setErrorMsg] = useState({ const [errorMsg, setErrorMsg] = useState({
errorId: false, errorId: false,
...@@ -34,7 +33,6 @@ const Signup = () => { ...@@ -34,7 +33,6 @@ const Signup = () => {
}) })
const [confirmMb, setConfirmMb] = useState(false); const [confirmMb, setConfirmMb] = useState(false);
//입력할때마다 state에 저장
const handleUserOnChange = (e) => { const handleUserOnChange = (e) => {
setUser({ setUser({
...user, ...user,
...@@ -47,7 +45,6 @@ const Signup = () => { ...@@ -47,7 +45,6 @@ const Signup = () => {
}) })
} }
} }
//인증번호 보내기
const handleOnClickMbnum = async (e) => { const handleOnClickMbnum = async (e) => {
e.preventDefault(); e.preventDefault();
try { try {
...@@ -56,91 +53,80 @@ const Signup = () => { ...@@ -56,91 +53,80 @@ const Signup = () => {
setLoading(true) setLoading(true)
const phone = user.userMbnum; const phone = user.userMbnum;
const message = await authApi.confirmMbnum(phone); const message = await authApi.confirmMbnum(phone);
if(message.isSuccess){ if (message.isSuccess) {
setMbError("보냄"); setMbError("보냄");
setStartTime(message.startTime); setStartTime(message.startTime);
} }
} catch (error) { } catch (error) {
console.log('error'+ error) catchErrors(error, setError);
}finally { } finally {
setLoading(false); setLoading(false);
} }
} }
//인증번호 입력
const handleOnChangeMb = (e) => { const handleOnChangeMb = (e) => {
setNumber(String(e.target.value)); setNumber(String(e.target.value));
} }
//인증번호 검증
const handleOnClickMbConfirm = async (e) => { const handleOnClickMbConfirm = async (e) => {
e.preventDefault(); e.preventDefault();
try { try {
setError(""); setError("");
setLoading(true); setLoading(true);
const confirmNum = {userMbnum : user.userMbnum, number : number, startTime : startTime}; const confirmNum = { userMbnum: user.userMbnum, number: number, startTime: startTime };
const message = await authApi.confirmNum(confirmNum); const message = await authApi.confirmNum(confirmNum);
setMbError(message); setMbError(message);
if(message === "성공"){ if (message === "성공") {
setConfirmMb(true); setConfirmMb(true);
console.log("인증완료");
} }
} catch (error) { } catch (error) {
catchErrors(error, setError); catchErrors(error, setError);
}finally { } finally {
setLoading(false); setLoading(false);
} }
} }
//비밀번호일치 여부만 클라이언트에서 확인
const validationPw = () => { const validationPw = () => {
if(user.userPassword !== user.userRePassword){ if (user.userPassword !== user.userRePassword) return false;
return false; else return true;
}else{return true;}
} }
//서버로 전송
const handleOnSummit = async (e) => { const handleOnSummit = async (e) => {
e.preventDefault(); e.preventDefault();
try { try {
setError(""); setError("");
//처리가 될때까지 버튼(가입하기)이 안눌리게 지정
setLoading(true); setLoading(true);
let validPw = validationPw(); let validPw = validationPw();
if(confirmMb){ if (confirmMb) {
if(validPw){ if (validPw) {
const userData = user; const userData = user;
//서버로 전송
const error = await authApi.signup(userData); const error = await authApi.signup(userData);
if(error === "성공"){ if (error === "성공") setSuccess(true);
setSuccess(true); else {
}else{
setErrorMsg(error); setErrorMsg(error);
alert("형식에 맞게 다시 작성해주세요"); alert("형식에 맞게 다시 작성해주세요");
} }
}else{ } else throw new Error("비밀번호가 일치하지 않습니다.");
throw new Error("비밀번호가 일치하지 않습니다."); } else throw new Error("핸드폰 번호를 인증해주세요.");
}
}else{
throw new Error("핸드폰 번호를 인증해주세요.");
}
} catch (error) { } catch (error) {
//에러전송
catchErrors(error, setError); catchErrors(error, setError);
} finally { } finally {
setLoading(false); setLoading(false);
} }
} }
if(success){ if (success) {
return <Redirect to="/login" />; return <Redirect to="/login" />;
} }
return ( return (
// 데이터 입력과 유효성 검사 후 보이는 경고창
<form className={`d-flex col-md-6 col-12 justify-content-center`} onSubmit={handleOnSummit}> <form className={`d-flex col-md-6 col-12 justify-content-center`} onSubmit={handleOnSummit}>
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<span className={styles.title}>회원가입</span> <span className={styles.title}>회원가입</span>
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<div className={styles.inputContent}> <div className={styles.inputContent}>
<label className={styles.signupLabel}>아이디</label> <label className={styles.signupLabel}>아이디</label>
<input className={`${styles.input} ${styles.inputSize}`} type="text" name="userId" placeholder="5~10자리 사이" onChange={handleUserOnChange} maxLength="10"/> <input className={`${styles.input} ${styles.inputSize}`} type="text" name="userId" placeholder="5~10자리 사이" onChange={handleUserOnChange} maxLength="10" />
</div> </div>
{errorMsg.errorId && <p className={styles.errorMsg}>5~10자리 사이로 입력해주세요.</p>} {errorMsg.errorId && <p className={styles.errorMsg}>5~10자리 사이로 입력해주세요.</p>}
</div> </div>
...@@ -165,7 +151,6 @@ const Signup = () => { ...@@ -165,7 +151,6 @@ const Signup = () => {
</div> </div>
{errorMsg.errorNickName && <p className={styles.errorMsg}>10 이내로 입력해주세요.</p>} {errorMsg.errorNickName && <p className={styles.errorMsg}>10 이내로 입력해주세요.</p>}
</div> </div>
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<div className={styles.inputContent}> <div className={styles.inputContent}>
<label className={styles.signupLabel}>생년월일</label> <label className={styles.signupLabel}>생년월일</label>
...@@ -173,7 +158,6 @@ const Signup = () => { ...@@ -173,7 +158,6 @@ const Signup = () => {
</div> </div>
{errorMsg.errorBirthday && <p className={styles.errorMsg}>숫자 6자리를 입력해주세요.</p>} {errorMsg.errorBirthday && <p className={styles.errorMsg}>숫자 6자리를 입력해주세요.</p>}
</div> </div>
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<div className={styles.inputContent}> <div className={styles.inputContent}>
<label className={styles.signupLabel}>휴대폰 번호</label> <label className={styles.signupLabel}>휴대폰 번호</label>
...@@ -183,9 +167,7 @@ const Signup = () => { ...@@ -183,9 +167,7 @@ const Signup = () => {
</div> </div>
</div> </div>
{errorMsg.errorMbnum && <p className={styles.errorMsg}>-없이 숫자 11자리를 입력해주세요.</p>} {errorMsg.errorMbnum && <p className={styles.errorMsg}>-없이 숫자 11자리를 입력해주세요.</p>}
<div className="collapse" id="collapseExample"> <div className="collapse" id="collapseExample">
{/* <div className="d-flex col-md-auto justify-content-end"> */}
<div className="d-flex justify-content-between mt-3"> <div className="d-flex justify-content-between mt-3">
<label className={`${styles.confirm}`}>인증하기</label> <label className={`${styles.confirm}`}>인증하기</label>
<div> <div>
...@@ -208,12 +190,10 @@ const Signup = () => { ...@@ -208,12 +190,10 @@ const Signup = () => {
</div> </div>
{errorMsg.errorPassword && <p className={styles.errorMsg}>8~11자리 사이로 입력해주세요.</p>} {errorMsg.errorPassword && <p className={styles.errorMsg}>8~11자리 사이로 입력해주세요.</p>}
</div> </div>
<div className={`d-flex ${styles.inputContent}`}> <div className={`d-flex ${styles.inputContent}`}>
<label className={styles.signupLabel}>비밀번호 확인</label> <label className={styles.signupLabel}>비밀번호 확인</label>
<input className={`${styles.input} ${styles.inputSize}`} type="password" name="userRePassword" placeholder="8~11자리 사이" onChange={handleUserOnChange} maxLength="20" /> <input className={`${styles.input} ${styles.inputSize}`} type="password" name="userRePassword" placeholder="8~11자리 사이" onChange={handleUserOnChange} maxLength="20" />
</div> </div>
<button className={`rounded my-3 py-2 fs-5 ${styles.butterYellowAndBtn} ${styles.btnHover}`} type="submit" disabled={loading}>가입하기</button> <button className={`rounded my-3 py-2 fs-5 ${styles.butterYellowAndBtn} ${styles.btnHover}`} type="submit" disabled={loading}>가입하기</button>
</div> </div>
</form> </form>
......
import { useRef, useState, useEffect } from 'react' import { useRef, useState, useEffect } from 'react'
import axios from "axios" import cinemaApi from "../apis/cinema.api,js"
import theaterApi from "../apis/theater.api.js"
import catchErrors from "../utils/catchErrors" import catchErrors from "../utils/catchErrors"
// import InfoModal from "./InfoModal"
const { kakao } = window; const { kakao } = window;
const options = { const options = {
center: new kakao.maps.LatLng(37.365264512305174, 127.10676860117488), center: new kakao.maps.LatLng(37.365264512305174, 127.10676860117488),
level: 3 level: 3
}; };
const TheaterInfo = () => { const TheaterInfo = () => {
const container = useRef(null) const container = useRef(null)
const [cinemaInfo, setCinemaInfo] = useState() const [cinemaInfo, setCinemaInfo] = useState()
...@@ -23,33 +25,24 @@ const TheaterInfo = () => { ...@@ -23,33 +25,24 @@ const TheaterInfo = () => {
useEffect(() => { useEffect(() => {
if (currentInfo.title === "address") { if (currentInfo.title === "address") {
// 지도를 담을 영역의 DOM 레퍼런스
const container = document.getElementById("map"); const container = document.getElementById("map");
// center옵션은 지도를 생성하는데 반드시 필요하며 파라미터는 위경도좌표이다. (위도,경도 순서)
// level옵션은 지도의 확대, 축소 정도이다.
const options = { const options = {
center: new kakao.maps.LatLng(33.450701, 126.570667), center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3, level: 3,
}; };
// 지도 생성 및 객체 리턴
const map = new kakao.maps.Map(container, options); const map = new kakao.maps.Map(container, options);
const geocoder = new kakao.maps.services.Geocoder(); const geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch(`${cinemaInfo.address}`, function (result, status) { geocoder.addressSearch(`${cinemaInfo.address}`, function (result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) { if (status === kakao.maps.services.Status.OK) {
const coords = new kakao.maps.LatLng(result[0].y, result[0].x); const coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
const marker = new kakao.maps.Marker({ const marker = new kakao.maps.Marker({
map: map, map: map,
position: coords position: coords
}); });
// 인포윈도우로 장소에 대한 설명을 표시합니다
const infowindow = new kakao.maps.InfoWindow({ const infowindow = new kakao.maps.InfoWindow({
content: '<div style="color:black; width:150px;text-align:center;padding:6px 0;">Butter Studio</div>' content: '<div style="color:black; width:150px;text-align:center;padding:6px 0;">Butter Studio</div>'
}); });
infowindow.open(map, marker); infowindow.open(map, marker);
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords); map.setCenter(coords);
} }
}); });
...@@ -58,8 +51,8 @@ const TheaterInfo = () => { ...@@ -58,8 +51,8 @@ const TheaterInfo = () => {
async function getTheaterInfo() { async function getTheaterInfo() {
try { try {
const response = await axios.get('/api/info/cinema') const response = await cinemaApi.getCinemaInfo()
const response2 = await axios.get('/api/theater') const response2 = await theaterApi.getAll()
setCinemaInfo({ ...response.data, theaterNum: response2.data.length }) setCinemaInfo({ ...response.data, theaterNum: response2.data.length })
setCurrentInfo({ setCurrentInfo({
name: "대중교통 안내", name: "대중교통 안내",
...@@ -79,13 +72,10 @@ const TheaterInfo = () => { ...@@ -79,13 +72,10 @@ const TheaterInfo = () => {
}) })
} }
return ( return (
<> <>
{cinemaInfo ? {cinemaInfo ?
<div> <div>
{/* {console.log(currentInfo)} */}
{console.log(cinemaInfo)}
<h2 className="m-5">{cinemaInfo.cinemaName}</h2> <h2 className="m-5">{cinemaInfo.cinemaName}</h2>
<div className="my-3 text-center"> <div className="my-3 text-center">
<img src="/images/movieTheater.jpg" style={{ width: "80%" }} /> <img src="/images/movieTheater.jpg" style={{ width: "80%" }} />
......
import React, { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import axios from 'axios' import movieApi from '../../apis/movie.api'
import catchErrors from '../../utils/catchErrors'
import styles from "./ticketingMovie.module.scss" import styles from "./ticketingMovie.module.scss"
import movieApi from '../../apis/movie.api' import movieApi from '../../apis/movie.api'
import catchErrors from '../../utils/catchErrors' import catchErrors from '../../utils/catchErrors'
const TicketingMovie = ({ticketInfo, setTicketInfo}) => { const TicketingMovie = ({ ticketInfo, setTicketInfo }) => {
const [movieList, setMovieList] = useState([]) const [movieList, setMovieList] = useState([])
const [error, setError] = useState() const [error, setError] = useState()
useEffect(() => { useEffect(() => {
getMovieList() getMovieList()
}, []) }, [])
...@@ -14,7 +16,6 @@ const TicketingMovie = ({ticketInfo, setTicketInfo}) => { ...@@ -14,7 +16,6 @@ const TicketingMovie = ({ticketInfo, setTicketInfo}) => {
async function getMovieList() { async function getMovieList() {
try { try {
const response = await movieApi.getListByCategoryfromDB() const response = await movieApi.getListByCategoryfromDB()
console.log(response)
setMovieList(response) setMovieList(response)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
...@@ -22,13 +23,10 @@ const TicketingMovie = ({ticketInfo, setTicketInfo}) => { ...@@ -22,13 +23,10 @@ const TicketingMovie = ({ticketInfo, setTicketInfo}) => {
} }
function handleClick(event) { function handleClick(event) {
console.log(event.target.name) setTicketInfo({ ...ticketInfo, movieId: event.target.name })
setTicketInfo({...ticketInfo, movieId: event.target.name })
} }
return ( return (
<div >
{console.log(ticketInfo.movieId)}
<div className="d-grid gap-2"> <div className="d-grid gap-2">
{movieList.length > 0 {movieList.length > 0
? movieList.map(movie => ( ? movieList.map(movie => (
...@@ -38,7 +36,6 @@ const TicketingMovie = ({ticketInfo, setTicketInfo}) => { ...@@ -38,7 +36,6 @@ const TicketingMovie = ({ticketInfo, setTicketInfo}) => {
)) ))
: <div>영화정보를 불러올 없습니다.</div>} : <div>영화정보를 불러올 없습니다.</div>}
</div> </div>
</div>
) )
} }
......
import styles from "./ticketingTheater.module.scss" import styles from "./ticketingTheater.module.scss"
const TicketingTheater = ({ticketInfo, cinemaInfo, setTicketInfo}) => {
const TicketingTheater = ({ ticketInfo, cinemaInfo, setTicketInfo }) => {
function handleClick(event) { function handleClick(event) {
// event.preventDefault()
console.log(event.target.name)
setTicketInfo({ ...ticketInfo, cinema: event.target.name }) setTicketInfo({ ...ticketInfo, cinema: event.target.name })
} }
return ( return (
<div >
<div className="d-grid gap-2"> <div className="d-grid gap-2">
<button name={cinemaInfo.cinemaName} className={`${ticketInfo.cinema === cinemaInfo.cinemaName ? styles.on : styles.btn}`} onClick={handleClick}>{cinemaInfo.cinemaName}</button> <button name={cinemaInfo.cinemaName} className={`${ticketInfo.cinema === cinemaInfo.cinemaName ? styles.on : styles.btn}`} onClick={handleClick}>{cinemaInfo.cinemaName}</button>
</div> </div>
</div>
) )
} }
......
const TicketingTimeTable = ({ticketInfo}) => { const TicketingTimeTable = ({ ticketInfo }) => {
return ( return (
<div> <div className="text-center" style={{ color: "white" }}>
<div className="text-center" style={{color:"white"}}>
{console.log(ticketInfo.movieId, ticketInfo.cinema)}
{ticketInfo.movieId && ticketInfo.cinema {ticketInfo.movieId && ticketInfo.cinema
? <div>{ticketInfo.movieId} {ticketInfo.cinema}</div> ? <div>{ticketInfo.movieId} {ticketInfo.cinema}</div>
: <div>영화와 극장을 모두 선택해주세요.</div>} : <div>영화와 극장을 모두 선택해주세요.</div>}
</div> </div>
</div>
) )
} }
......
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import movieApi from '../apis/movie.api.js' import movieApi from '../apis/movie.api.js'
const Video = ({movieId}) => { import catchErrors from "../utils/catchErrors.js"
const Video = ({ movieId }) => {
const [videoUrls, setVideoUrls] = useState([]) const [videoUrls, setVideoUrls] = useState([])
const [error, setError] = useState("")
useEffect(() => { useEffect(() => {
getVideos() getVideos()
}, []) }, [])
...@@ -11,9 +15,10 @@ const Video = ({movieId}) => { ...@@ -11,9 +15,10 @@ const Video = ({movieId}) => {
const data = await movieApi.getVideosfromTM(movieId) const data = await movieApi.getVideosfromTM(movieId)
setVideoUrls(data) setVideoUrls(data)
} catch (error) { } catch (error) {
console.log(error) catchErrors(error, setError)
} }
} }
return ( return (
<div> <div>
{videoUrls.length > 0 {videoUrls.length > 0
......
...@@ -5,7 +5,7 @@ import catchErrors from "../utils/catchErrors"; ...@@ -5,7 +5,7 @@ import catchErrors from "../utils/catchErrors";
const AuthContext = createContext({ const AuthContext = createContext({
error: "", error: "",
loading: false, loading: false,
user: {id:0, role:"user"}, user: { id: 0, role: "user" },
setUser: () => { }, setUser: () => { },
login: () => Promise.resolve(false), login: () => Promise.resolve(false),
logout: () => { }, logout: () => { },
...@@ -16,17 +16,17 @@ const AuthContext = createContext({ ...@@ -16,17 +16,17 @@ const AuthContext = createContext({
const AuthProvider = ({ children }) => { const AuthProvider = ({ children }) => {
const [error, setError] = useState(""); const [error, setError] = useState("");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [user, setUser] = useState({id:0, role:"user"}); const [user, setUser] = useState({ id: 0, role: "user" });
const getUser = async() => { const getUser = async () => {
const {id, role} = await authApi.getUser(); const { id, role } = await authApi.getUser();
const user = {"id" : id, "role" : role}; const user = { "id": id, "role": role };
setUser(user); setUser(user);
}; };
useEffect(() => { useEffect(() => {
getUser(); getUser();
},[]); }, []);
const login = useCallback(async (id, password) => { const login = useCallback(async (id, password) => {
try { try {
...@@ -34,7 +34,7 @@ const AuthProvider = ({ children }) => { ...@@ -34,7 +34,7 @@ const AuthProvider = ({ children }) => {
setLoading(true); setLoading(true);
const user = await authApi.login(id, password); const user = await authApi.login(id, password);
setUser(user); setUser(user);
return true return true;
} catch (error) { } catch (error) {
catchErrors(error, setError); catchErrors(error, setError);
return false; return false;
...@@ -82,7 +82,6 @@ const AuthProvider = ({ children }) => { ...@@ -82,7 +82,6 @@ const AuthProvider = ({ children }) => {
if (data.redirectUrl) { if (data.redirectUrl) {
errorMsg = data.message; errorMsg = data.message;
console.log("Error response with redirected message:", errorMsg); console.log("Error response with redirected message:", errorMsg);
console.log("redirect url", data.redirectUrl);
return await logout(); return await logout();
} }
} }
...@@ -93,7 +92,6 @@ const AuthProvider = ({ children }) => { ...@@ -93,7 +92,6 @@ const AuthProvider = ({ children }) => {
errorMsg = error.message; errorMsg = error.message;
console.log("Error message:", errorMsg); console.log("Error message:", errorMsg);
} }
displayError(errorMsg); displayError(errorMsg);
}, []); }, []);
......
...@@ -18,7 +18,6 @@ const HomePage = () => { ...@@ -18,7 +18,6 @@ const HomePage = () => {
try { try {
setError("") setError("")
const data = await movieApi.getListByCategoryfromDB(category) const data = await movieApi.getListByCategoryfromDB(category)
console.log("sdad==", data)
data.sort(function (a, b) { data.sort(function (a, b) {
return b.popularity - a.popularity return b.popularity - a.popularity
}) })
...@@ -27,6 +26,7 @@ const HomePage = () => { ...@@ -27,6 +26,7 @@ const HomePage = () => {
catchErrors(error, setError) catchErrors(error, setError)
} }
} }
return ( return (
<> <>
<BoxOffice TMDB_TopRated_Data={TMDB_TopRated_Data} /> <BoxOffice TMDB_TopRated_Data={TMDB_TopRated_Data} />
......
...@@ -9,18 +9,9 @@ const MovieListPage = () => { ...@@ -9,18 +9,9 @@ const MovieListPage = () => {
<div className="container"> <div className="container">
<div className="text-center my-5"> <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 ? "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> <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>
{state === 0
?
<MovieChart />
:
<MovieComing />
}
</div> </div>
<div>{state === 0 ? <MovieChart /> : <MovieComing />}</div>
</div> </div>
) )
} }
......
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import movieApi from '../apis/movie.api.js' import Video from '../components/Video.js';
import Video from '../components/Video.js' import movieApi from '../apis/movie.api.js';
import catchErrors from "../utils/catchErrors.js";
const MoviePage = ({ location }) => { const MoviePage = ({ location }) => {
const [movieInfo, setMovieInfo] = useState({ const [movieInfo, setMovieInfo] = useState({
...location.state, ...location.state,
stillCuts: [], stillCuts: [],
cast: [], cast: [],
director: [], director: []
// attendance: ""
}) })
const [state, setState] = useState(0) const [state, setState] = useState(0)
const [error, setError] = useState("")
useEffect(() => { useEffect(() => {
getImagesAndCredits() getImagesAndCredits()
...@@ -23,9 +24,7 @@ const MoviePage = ({ location }) => { ...@@ -23,9 +24,7 @@ const MoviePage = ({ location }) => {
const still = images.backdrops.map(el => el.file_path) const still = images.backdrops.map(el => el.file_path)
const credits = await movieApi.getCreditsfromTM(movieInfo.id) const credits = await movieApi.getCreditsfromTM(movieInfo.id)
const castsInfo = credits.cast.map(el => el.name) const castsInfo = credits.cast.map(el => el.name)
console.log(castsInfo) const directorsInfo = await credits.crew.filter(element => element.job === "Director").map(el => el.name)
const directorsInfo = await credits.crew.filter(element => element.job === "Director").map(el=>el.name)
console.log("directorInfo=", directorsInfo)
setMovieInfo({ setMovieInfo({
...movieInfo, ...movieInfo,
stillCuts: still, stillCuts: still,
...@@ -33,13 +32,12 @@ const MoviePage = ({ location }) => { ...@@ -33,13 +32,12 @@ const MoviePage = ({ location }) => {
director: directorsInfo director: directorsInfo
}) })
} catch (error) { } catch (error) {
console.log(error) catchErrors(error, setError)
} }
} }
return ( return (
<div className="container" style={{ backgroundColor: "black" }}> <div className="container" style={{ backgroundColor: "black" }}>
{console.log(movieInfo)}
<div id="carouselExampleInterval" className="carousel slide py-4" data-bs-ride="carousel"> <div id="carouselExampleInterval" className="carousel slide py-4" data-bs-ride="carousel">
<div className="carousel-inner"> <div className="carousel-inner">
{movieInfo.stillCuts.length > 0 {movieInfo.stillCuts.length > 0
...@@ -68,12 +66,12 @@ const MoviePage = ({ location }) => { ...@@ -68,12 +66,12 @@ const MoviePage = ({ location }) => {
</div> </div>
<div className="col-sm-6" style={{ color: "white" }}> <div className="col-sm-6" style={{ color: "white" }}>
<h1 className="pb-3">{movieInfo.title}</h1> <h1 className="pb-3">{movieInfo.title}</h1>
<p>예매율:{Math.round((movieInfo.ticket_sales / (movieInfo.totalReservationRate.totalReservationRate||1)) * 100)}% 누적관객수: {movieInfo.ticket_sales}</p> <p>예매율:{Math.round((movieInfo.ticket_sales / (movieInfo.totalReservationRate.totalReservationRate || 1)) * 100)}% 누적관객수: {movieInfo.ticket_sales}</p>
{movieInfo.director || movieInfo.cast {movieInfo.director || movieInfo.cast
? ?
<> <>
<p>감독: {movieInfo.director.map(el => el)+' '}</p> <p>감독: {movieInfo.director.map(el => el) + ' '}</p>
<p>출연: {movieInfo.cast.slice(0, 5).map(el => el)+' '}</p> <p>출연: {movieInfo.cast.slice(0, 5).map(el => el) + ' '}</p>
</> </>
: :
<></> <></>
...@@ -95,7 +93,7 @@ const MoviePage = ({ location }) => { ...@@ -95,7 +93,7 @@ const MoviePage = ({ location }) => {
</div> </div>
</div> </div>
</div> </div>
<div className=""> <div>
<ul className="nav nav-tabs justify-content-center mt-4 border-0" id="myTab" role="tablist"> <ul className="nav nav-tabs justify-content-center mt-4 border-0" id="myTab" role="tablist">
<li className="nav-item" role="presentation"> <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> <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>
......
import MyInfo from "../components/MyInfo/MyInfo"; import MyInfo from "../components/MyInfo/MyInfo"
import ReservationDetails from "../components/ReservationDetails/ReservationDetails"; import ReservationDetails from "../components/ReservationDetails/index.js";
const MyPage = () => { const MyPage = () => {
return ( return (
......
import axios from 'axios' import axios from 'axios'
import { useAuth } from '../context/auth_context'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useAuth } from '../context/auth_context'
import catchErrors from '../utils/catchErrors' import catchErrors from '../utils/catchErrors'
import reservationApi from '../apis/reservation.api' import reservationApi from '../apis/reservation.api'
const PaymentCompletePage = () => { const PaymentCompletePage = () => {
const { user } = useAuth() const { user } = useAuth()
const [error, setError] = useState() const [error, setError] = useState()
...@@ -89,9 +88,7 @@ const PaymentCompletePage = () => { ...@@ -89,9 +88,7 @@ const PaymentCompletePage = () => {
<div className="text-center"> <div className="text-center">
<h3>예매가 정상적으로 완료되었습니다.</h3> <h3>예매가 정상적으로 완료되었습니다.</h3>
<button>홈으로</button> <button>홈으로</button>
{ {user.role === "member" ? <button>마이페이지</button> : <></>}
user.role === "member" ? <button>마이페이지</button> : <></>
}
</div> </div>
) )
} }
......
import axios from 'axios' import axios from 'axios'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import authApi from '../../apis/auth.api' import authApi from '../../apis/auth.api'
import reservationApi from '../../apis/reservation.api' import reservationApi from '../../apis/reservation.api'
import { useAuth } from '../../context/auth_context' import { useAuth } from '../../context/auth_context'
...@@ -8,7 +7,6 @@ import catchErrors from '../../utils/catchErrors' ...@@ -8,7 +7,6 @@ import catchErrors from '../../utils/catchErrors'
import styles from './PaymentPage.module.scss' import styles from './PaymentPage.module.scss'
const Payment = ({ location }) => { const Payment = ({ location }) => {
const history = useHistory();
const { user } = useAuth() const { user } = useAuth()
const [guestInfo, setGuestInfo] = useState({}) const [guestInfo, setGuestInfo] = useState({})
const [guestID, setGuestID] = useState() const [guestID, setGuestID] = useState()
...@@ -23,7 +21,6 @@ const Payment = ({ location }) => { ...@@ -23,7 +21,6 @@ const Payment = ({ location }) => {
const [error, setError] = useState("") const [error, setError] = useState("")
useEffect(() => { useEffect(() => {
console.log(user.id)
if (user.role === "member") { if (user.role === "member") {
getUserInfo() getUserInfo()
} }
...@@ -31,10 +28,10 @@ const Payment = ({ location }) => { ...@@ -31,10 +28,10 @@ const Payment = ({ location }) => {
async function getUserInfo() { async function getUserInfo() {
try { try {
setError("")
const response = await axios.post(`/api/auth/getuserinfo`, { const response = await axios.post(`/api/auth/getuserinfo`, {
id: user.id id: user.id
}) })
console.log(response.data)
setUserInfo(response.data) setUserInfo(response.data)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
...@@ -47,11 +44,12 @@ const Payment = ({ location }) => { ...@@ -47,11 +44,12 @@ const Payment = ({ location }) => {
async function handleClickGuest() { async function handleClickGuest() {
try { try {
const response = await authApi.saveGuestInfo({ setError("")
const response = await axios.post('/api/auth/guest/save', {
...guestInfo ...guestInfo
}); })
setGuestID(response.id); setGuestID(response.data.id)
alert("비회원 정보가 저장되었습니다."); alert("비회원 정보가 저장되었습니다.")
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
} }
...@@ -69,6 +67,7 @@ const Payment = ({ location }) => { ...@@ -69,6 +67,7 @@ const Payment = ({ location }) => {
async function reservationComplete() { async function reservationComplete() {
try { try {
setError("")
if (user.role === "member") { if (user.role === "member") {
const response = await reservationApi.save({ const response = await reservationApi.save({
userType: "member", userType: "member",
...@@ -130,9 +129,6 @@ const Payment = ({ location }) => { ...@@ -130,9 +129,6 @@ const Payment = ({ location }) => {
return ( return (
<div className="container" style={{ color: "white" }}> <div className="container" style={{ color: "white" }}>
{console.log(ticketInfo)}
{/* {console.log(userInfo)} */}
{/* {console.log(guestInfo)} */}
<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 ">
<h3 className="py-2 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>
......
...@@ -5,6 +5,6 @@ ...@@ -5,6 +5,6 @@
margin-right: 1rem; margin-right: 1rem;
} }
.warningText{ .warningText {
font-size: small; font-size: small;
} }
\ 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