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