Merge branch 'gyumin'

client/src/App.js

@@ -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

@@ -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

 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

@@ -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

 .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

@@ -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

 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

@@ -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

@@ -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

@@ -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

@@ -55,6 +55,7 @@ TimeTable.belongsTo(Theater);
 Reservation.belongsTo(Theater);
 Reservation.belongsTo(TimeTable);
 
+
 export {
     sequelize,
     User,

server/routes/reservation.route.js

 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)