Skip to content

GitLab

Commit 920bdcc0 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Merge branch 'gyumin'

parents b81942c2 50dbd99d
Show whitespace changes
Inline Side-by-side
client/src/App.js
View file @ 920bdcc0
......@@ -26,6 +26,7 @@ function App() {
<Router>
<Switch>
<Route path="/admin" component={AdminPage} />
<>
<div style={{ backgroundColor: "black" }}>
<SubNav />
<Header />
......@@ -47,6 +48,7 @@ function App() {
<Route path="/search" component={SearchPage} />
</Switch>
</div>
</>
</Switch>
</Router>
</AuthProvider>
......
client/src/apis/reservation.api.js
View file @ 920bdcc0
......@@ -15,7 +15,6 @@ const findReservation = async () => {
}
const findOneReservation = async () => {
console.log("여기여기2");
const url = `${baseUrl}/api/reservation/findonereservation`;
const { data } = await axios.get(url);
return data
......
client/src/components/ReservationDetails/ReservationDetails.js
View file @ 920bdcc0
import { useState, useEffect } from "react";
import reservationApi from "../../apis/reservation.api";
import styles from "./reservation-details.module.scss";
import moment from 'moment';
const ReservationDetails = () => {
const [movies, setMovies] = useState([]);
......@@ -8,12 +10,9 @@ const ReservationDetails = () => {
const movieList = await reservationApi.findOneReservation();
setMovies(movieList);
}
useEffect(() => {
findReservaion();
}, [])
return (
<div className={`d-flex flex-column align-items-center ${styles.width}`}>
<div className={`${styles.header}`}>나의 예매 내역</div>
......@@ -26,11 +25,11 @@ const ReservationDetails = () => {
</div>
<div className={`${styles.span} d-flex flex-column`}>
<span className={`${styles.layout}`}>{movie.title}</span>
<span className={`${styles.layout}`}>예매확인번호</span>
<span className={`${styles.layout}`}></span>
<span className={`${styles.layout}`}></span>
<span className={`${styles.layout}`}>{movie.row}행 {movie.col}열</span>
<span className={`${styles.layout}`}>결제금액</span>
<span className={`${styles.layout}`}>{moment(movie.data).format('YYYY-MM-DD')}</span>
<span className={`${styles.layout}`}>{moment(movie.start_time).format('HH:mm')} ~ {moment(movie.end_time).format('HH:mm')}</span>
<span className={`${styles.layout}`}>{movie.theaterName}관</span>
<span className={`${styles.layout}`}>{ String.fromCharCode(movie.row + 64)}행 {movie.col}열</span>
<span className={`${styles.layout}`}>{movie.totalFee}원</span>
<span className={`${styles.layout}`}>{movie.payment}</span>
</div>
</div>
......
client/src/pages/PaymentPage/PaymentPage.js
View file @ 920bdcc0
......@@ -9,7 +9,22 @@ import styles from './PaymentPage.module.scss'
const Payment = ({ location }) => {
const { user } = useAuth()
const [guestInfo, setGuestInfo] = useState({})
const [guestInfo, setGuestInfo] = useState({
name: "",
email: "",
birth: "",
phoneNumber: "",
password: "",
rePassword: ""
})
const [errorMsg, setErrorMsg] = useState({
errorName: false,
errorEmail: false,
errorBirthday: false,
errorMbnum: false,
errorPassword: false,
})
const [guestID, setGuestID] = useState()
const [userInfo, setUserInfo] = useState({
nickname: "",
......@@ -21,13 +36,19 @@ const Payment = ({ location }) => {
const [element, setElement] = useState()
const [error, setError] = useState("")
const [startTime, setStartTime] = useState("");
const [number, setNumber] = useState(null);
const [loading, setLoading] = useState(false);
const [mbError, setMbError] = useState(false);
const [confirmMb, setConfirmMb] = useState(false);
useEffect(() => {
if (user.role === "member") {
getUserInfo()
}
}, [])
async function getUserInfo() {
const getUserInfo = async () => {
try {
setError("")
const response = await axios.post(`/api/auth/getuserinfo`, {
......@@ -39,24 +60,89 @@ const Payment = ({ location }) => {
}
}
function handleChangeGuest(e) {
setGuestInfo({ ...guestInfo, [e.target.name]: String(e.target.value) })
const handleChangeGuest = (e) => {
setGuestInfo({
...guestInfo,
[e.target.name]: String(e.target.value)
})
if (e.target.name === "birth" || e.target.name === "phoneNumber") {
setGuestInfo({
...guestInfo,
[e.target.name]: String(e.target.value)
})
}
}
//인증번호
const handleOnClickMbnum = async (e) => {
e.preventDefault();
try {
setStartTime("");
setError("");
setLoading(true)
const phone = guestInfo.phoneNumber;
const message = await authApi.confirmMbnum(phone);
if (message.isSuccess) {
setMbError("보냄");
setStartTime(message.startTime);
}
} catch (error) {
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: guestInfo.phoneNumber, number: number, startTime: startTime };
const message = await authApi.confirmNum(confirmNum);
setMbError(message);
if (message === "성공") {
setConfirmMb(true);
}
} catch (error) {
catchErrors(error, setError);
} finally {
setLoading(false);
}
}
//비밀번호 확인
const validationPw = () => {
if (guestInfo.password !== guestInfo.rePassword) return false;
else return true;
}
async function handleClickGuest() {
const handleClickGuest = async () => {
try {
setError("")
const response = await axios.post('/api/auth/guest/save', {
...guestInfo
})
setGuestID(response.data.id)
setLoading(true);
let validPw = validationPw();
if (confirmMb) {
if (validPw) {
const response = await authApi.saveGuestInfo(guestInfo);
if (response.id) {
setGuestID(response.id)
alert("비회원 정보가 저장되었습니다.")
}
else {
setErrorMsg(response);
alert("형식에 맞게 다시 작성해주세요");
}
} else throw new Error("비밀번호가 일치하지 않습니다.");
} else throw new Error("핸드폰 번호를 인증해주세요.");
} catch (error) {
catchErrors(error, setError)
}
}
function kakaoBtnClick() {
const kakaoBtnClick = () => {
setElement(
<div className="text-center">
<p className=" font-weight-bold" style={{ display: 'inline', color: "#FEDC00" }}>'카카오페이'</p><p style={{ display: 'inline' }}>를 선택하셨습니다. </p>
......@@ -66,7 +152,7 @@ const Payment = ({ location }) => {
setTicketInfo({ ...ticketInfo, payment: "카카오페이" })
}
async function reservationComplete() {
const reservationComplete = async () => {
try {
setError("")
if (user.role === "member") {
......@@ -127,7 +213,6 @@ const Payment = ({ location }) => {
}
}
return (
<div className="container" style={{ color: "white" }}>
<div className="row justify-content-center my-5">
......@@ -166,26 +251,63 @@ const Payment = ({ location }) => {
:
<div>
<h5 className="mb-4 p-2" style={{ backgroundColor: "white", color: "black" }}>비회원예매 정보입력</h5>
<div className="d-flex flex-column">
<div className="my-1">
<label className={styles.labelStyle}>이름</label>
<input type="text" name="name" placeholder="이름" onChange={handleChangeGuest} required />
<input type="text" name="name" placeholder="이름" onChange={handleChangeGuest} />
</div>
{errorMsg.errorName && <p className={styles.errorMsg}>이름을 입력해주세요</p>}
</div>
<div className="d-flex flex-column">
<div className="my-1">
<label className={styles.labelStyle}>이메일</label>
<input type="email" name="email" placeholder="이메일" onChange={handleChangeGuest} required />
<input type="email" name="email" placeholder="이메일" onChange={handleChangeGuest} />
</div>
{errorMsg.errorEmail && <p className={styles.errorMsg}>이메일을 입력해주세요</p>}
</div>
<div className="d-flex flex-column">
<div className="my-1">
<label className={styles.labelStyle}>생년월일</label>
<input type="number" name="birth" placeholder="생년월일" onChange={handleChangeGuest} maxLength="6" required />
<input type="number" name="birth" placeholder="생년월일" onChange={handleChangeGuest} maxLength="6" />
</div>
{errorMsg.errorBirthday && <p className={styles.errorMsg}>숫자 6자리를 입력해주세요.</p>}
</div>
<div className="d-flex flex-column">
<div className="my-1">
<label className={styles.labelStyle}>휴대폰 번호</label>
<input type="number" name="phoneNumber" placeholder="휴대폰 번호" onChange={handleChangeGuest} maxLength="11" required />
<input type="number" name="phoneNumber" placeholder="휴대폰 번호" onChange={handleChangeGuest} maxLength="11" />
<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>
{errorMsg.errorMbnum && <p className={styles.errorMsg}>-없이 숫자 11자리를 입력해주세요.</p>}
<div className="collapse" id="collapseExample">
<div className="d-flex justify-content-center align-items-center mt-3">
<label className={styles.labelStyle}>인증하기</label>
<div>
<input className={`${styles.input} ${styles.input2}`} type="number" placeholder="인증번호를 입력" onChange={handleOnChangeMb} />
<button type="button" className={`rounded-2 py-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} onClick={handleOnClickMbConfirm}>확인</button>
<button type="button" className={`rounded-2 py-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} onClick={handleOnClickMbnum}>재전송</button>
</div>
</div>
{(mbError === "재전송") && <p className={styles.errorMsg}>유효시간이 만료되었습니다. 재전송해주세요.</p>}
{(mbError === "보냄") && <p className={styles.errorMsg}>5분이내에 입력해주세요.</p>}
{(mbError === "성공") && <p className={styles.errorMsg}>인증되었습니다.</p>}
{(mbError === "실패") && <p className={styles.errorMsg}>인증번호를 다시 입력해주세요.</p>}
</div>
</div>
<div className="d-flex flex-column">
<div className="my-1">
<label className={styles.labelStyle}>비밀번호</label>
<input type="password" name="password" placeholder="비밀번호" onChange={handleChangeGuest} required style={{ width: "178px" }} />
<input type="password" name="password" placeholder="비밀번호" onChange={handleChangeGuest} style={{ width: "178px" }} />
</div>
{errorMsg.errorPassword && <p className={styles.errorMsg}>8~11자리 사이로 입력해주세요.</p>}
</div>
<div className="d-flex flex-column">
<div className="my-1">
<label className={styles.labelStyle}>비밀번호 확인</label>
<input type="password" name="rePassword" placeholder="비밀번호 확인" onChange={handleChangeGuest} style={{ width: "178px" }} />
</div>
</div>
<div className="m-2">
<p className={`text-muted ${styles.warningText}`}>
※ 비회원 정보 오기입 시 예매 내역 확인/취소 및 티켓 발권이 어려울 수 있으니 다시 한번 확인해 주시기 바랍니다.
......
client/src/pages/PaymentPage/PaymentPage.module.scss
View file @ 920bdcc0
.labelStyle {
display: inline-block;
width: 80px;
width: 100px;
text-align: right;
margin-right: 1rem;
}
......@@ -8,3 +8,38 @@
.warningText {
font-size: small;
}
.input {
margin: 0.5rem 0 0 0;
border-radius: 3px;
text-align: center;
}
.butterYellowAndBtn{
color: black;
background-color: #FEDC00;
border: 1px solid black;
text-align: center;
padding: none;
}
.btnHover:hover{
background-color: black;
color: #FEDC00;
transition: ease-out;
border: 1px solid white ;
text-align: center;
padding: none;
}
.errorMsg{
display: flex;
justify-content: center;
margin: 0.5rem 0 0.5rem 0;
text-align: end;
font-size: 13px;
color: #FEDC00;
}
\ No newline at end of file
server/controllers/movie.controller.js
View file @ 920bdcc0
......@@ -67,7 +67,7 @@ const getAllMovie = async (req, res, next) => {
}
}
const getMovieById = async (req, res) => {
const getMovieById = async (req, res, next) => {
try {
const reservation = req.reservation
const movieId = reservation.map(movie => movie.movieId);
......@@ -83,14 +83,15 @@ const getMovieById = async (req, res) => {
})
)
reservation.map(reservation => {
const movieId = elements.find(el => reservation.movieId === el.movieId )
const movieId = elements.find(el => reservation.movieId === el.movieId );
reservation.dataValues = {
...reservation.dataValues,
poster_path: movieId.poster_path,
title: movieId.title
}
});
res.json(reservation);
req.reservation = reservation;
next();
} catch (error) {
return res.status(500).send(error.message || "영화 가져오기 중 에러 발생");
}
......
server/controllers/reservation.controller.js
View file @ 920bdcc0
import jwt from "jsonwebtoken";
import { Movie, Reservation, Theater, TimeTable } from '../db/index.js'
import { Movie, Reservation, Theater, TheaterType, TimeTable } from '../db/index.js'
import config from '../config/app.config.js'
const findReservedSeats = async (req, res) => {
......@@ -23,7 +23,8 @@ const findReservation = async (req, res) => {
const reservation = await Reservation.findAll({
where: {
user: id
}
},
include: [Theater, TimeTable]
})
res.json(reservation)
} catch (error) {
......@@ -34,17 +35,16 @@ const findOneReservation = async (req, res, next) => {
try {
const token = req.cookies.butterStudio;
const { id, role } = jwt.verify(token, config.jwtSecret);
console.log(id, role);
const reservation = await Reservation.findAll({
where: {
userType: role,
user: id
user: id,
userType: role
},
include: [Theater, TimeTable]
include:[TimeTable, Theater]
});
console.log(reservation);
req.reservation = reservation
next()
// res.json(reservation);
req.reservation = reservation;
next();
} catch (error) {
res.status(500).send(error.message || "예매 내역을 찾는 중 오류 발생")
}
......
server/controllers/theater.controller.js
View file @ 920bdcc0
......@@ -9,7 +9,7 @@ const getTheaterInfo = async (req, res) => {
})
// console.log("theaterInfo====",theaterInfo)
return res.json(theaterInfo)
} catch (error){
} catch (error) {
console.log(error)
}
}
......@@ -42,6 +42,35 @@ const getTypes = async (req, res) => {
}
}
const getTheater = async (req, res) => {
try {
const reservation = req.reservation;
const theaterId = reservation.map(movie => movie.theaterId);
const elements = await Promise.all(
theaterId.map(async (theaterId) => {
const theater = await Theater.findOne({ where: { id: theaterId } });
const theaterData = {
theaterId: theater.id,
theaterName: theater.theaterName,
theatertypeId: theater.theatertypeId
}
return theaterData
})
);
reservation.map(reservation => {
const theaterId = elements.find(el => reservation.theaterId === el.theaterId);
reservation.dataValues = {
...reservation.dataValues,
theaterName: theaterId.theaterName,
theatertypeId: theaterId.theatertypeId
}
})
res.json(reservation);
} catch (error) {
return res.status(500).send(error.message || "상영관 정보 불러오기 실패")
}
}
const submit = async (req, res) => {
try {
const { id, theatertypeId, theaterName, rows, columns } = req.body
......@@ -76,6 +105,7 @@ export default {
getAll,
getOne,
getTypes,
getTheater,
submit,
remove,
getTheaterInfo
......
server/controllers/timetable.controller.js
View file @ 920bdcc0
......@@ -30,6 +30,37 @@ const getAll = async (req, res) => {
return res.status(500).send(error.message || "상영시간표 정보 가져오는 중 에러 발생")
}
}
const getTimeTable = async (req, res, next) => {
try {
const reservation = req.reservation;
const timetableId = reservation.map(movie => movie.timetableId);
const elements = await Promise.all(
timetableId.map(async (timetableId) => {
const time = await TimeTable.findOne({ where: { id: timetableId } })
const movieData = {
timetableId: time.id,
date: time.date,
start_time: time.start_time,
end_time: time.end_time,
}
return movieData
})
);
reservation.map(reservation => {
const timetableId = elements.find(el => reservation.timetableId === el.timetableId);
reservation.dataValues = {
...reservation.dataValues,
date: timetableId.date,
start_time: timetableId.start_time,
end_time: timetableId.end_time,
}
});
req.reservation = reservation;
next();
} catch (error) {
return res.status(500).send(error.message || "상영 시간표 불러오기 실패")
}
}
const submit = async (req, res) => {
try {
......@@ -102,6 +133,7 @@ const remove = async (req, res) => {
export default {
getAll,
getTimeTable,
submit,
remove
}
\ No newline at end of file
server/controllers/user.controller.js
View file @ 920bdcc0
......@@ -4,7 +4,7 @@ import { User, Role, Guest, ConfirmNum } from '../db/index.js';
import fs from "fs";
import CryptoJS from "crypto-js";
import validator from "validator";
import axios from "axios";
// 현재 유저 상태 결정
const getUser = async (req, res) => {
try {
......@@ -149,11 +149,10 @@ const confirmMbnum = async (req, res) => {
const signature = hash.toString(CryptoJS.enc.Base64);
const phoneNumber = req.params.phone;
console.log(phoneNumber);
console.log("phoneNumber: ", phoneNumber);
//인증번호 생성
const verifyCode = Math.floor(Math.random() * (999999 - 100000)) + 100000;
console.log("verifyCode : ", verifyCode);
console.log(verifyCode);
let today = new Date();
let time = String(today.getTime());
// let result = await axios({
......@@ -182,12 +181,11 @@ const confirmMbnum = async (req, res) => {
// const resultMs = result.data.messages;
// console.log('resultMs', resultMs);
// console.log('response', res.data, res['data']);
const confirm = await ConfirmNum.findOne({ where: { phone: phoneNumber } });
if (confirm) {
await confirm.destroy();
// 5분 유효시간 설정
await ConfirmNum.create({
confirmNum: String(verifyCode),
phone: phoneNumber,
......@@ -463,6 +461,26 @@ const getUserInfo = async (req, res) => {
const saveGuestInfo = async (req, res) => {
try {
const { name, email, birth, phoneNumber, password } = req.body
let errorMsg = {
errorName: false,
errorEmail: false,
errorNickName: false,
errorMbnum: false,
errorPassword: false,
};
validation(errorMsg, name, 1, 10, "errorName");
validation(errorMsg, email, 3, 20, "errorEmail");
validation(errorMsg, birth, 1, 10, "errorNickName");
validation(errorMsg, phoneNumber, 11, 11, "errorMbnum");
validation(errorMsg, password, 8, 11, "errorPassword");
let valid = !(Object.values(errorMsg).some((element) => (element)));
if(!valid){
res.json(errorMsg);
}else{
const newGuest = await Guest.create({
name: name,
email: email,
......@@ -482,6 +500,7 @@ const saveGuestInfo = async (req, res) => {
secure: config.env === "production",
})
res.json(newGuest);
}
} catch (error) {
res.status(500).send("비회원정보 등록 실패");
}
......
server/db/index.js
View file @ 920bdcc0
......@@ -55,6 +55,7 @@ TimeTable.belongsTo(Theater);
Reservation.belongsTo(Theater);
Reservation.belongsTo(TimeTable);
export {
sequelize,
User,
......
server/routes/reservation.route.js
View file @ 920bdcc0
import express from "express";
import movieCtrl from "../controllers/movie.controller.js";
import reservationCtrl from "../controllers/reservation.controller.js";
import timetableCtrl from "../controllers/timetable.controller.js";
import theaterCtrl from "../controllers/theater.controller.js"
const router = express.Router();
......@@ -10,8 +11,12 @@ router.route('/findreservation')
.get(reservationCtrl.findReservation)
router.route('/findonereservation')
.get(reservationCtrl.findOneReservation, movieCtrl.getMovieById)
.get(
reservationCtrl.findOneReservation,
movieCtrl.getMovieById,
timetableCtrl.getTimeTable,
theaterCtrl.getTheater
)
router.route('/save')
.post(reservationCtrl.saveReservation)
......
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