Merge branch 'kimpen'

client/src/pages/TheaterPage.js

@@ -4,9 +4,9 @@ import TheaterInfo from '../components/TheaterInfo'
 
 const TheaterPage = () => {
     const [state, setState] = useState(0)
+    
     return (
         <div>
-
             <div>
                 <ul className="nav nav-tabs justify-content-center my-4 border-0" id="myTab" role="tablist">
                     <li className="nav-item" role="presentation">

client/src/pages/TicketingPage.js

@@ -2,19 +2,26 @@ import axios from 'axios'
 import { useState, useEffect } from 'react'
 import { Link } from 'react-router-dom'
 import movieApi from '../apis/movie.api.js'
+import cinemaApi from "../apis/cinema.api.js"
 import TicketingMovie from "../components/TicketingMovie/TicketingMovie.js"
 import TicketingTheater from "../components/TicketingTheater/TicketingTheater.js"
 import TicketingTimeTable from "../components/TicketingTimeTable/TicketingTimeTable.js"
+import catchErrors from "../utils/catchErrors.js"
 
 const TicketingPage = ({ location }) => {
     const [ticketInfo, setTicketInfo] = useState({
         ...location.state,
-        cinema:"",
+        cinema: "",
         selectedTheater: "1",
         time: "2021/07/21 10:00"
     })
     const [cinemaInfo, setCinemaInfo] = useState({})
     const [movieInfo, setMovieInfo] = useState()
+    const [error, setError] = useState("")
+
+    useEffect(() => {
+        getCinemaInfo()
+    }, [])
 
     useEffect(() => {
         getCinemaInfo()
@@ -29,7 +36,16 @@ const TicketingPage = ({ location }) => {
             const data = await movieApi.getMovieInfofromTM(ticketInfo.movieId)
             setMovieInfo(data)
         } catch (error) {
-            console.log(error)
+            catchErrors(error, setError)
+        }
+    }
+
+    async function getCinemaInfo() {
+        try {
+            const response = await cinemaApi.getCinemaInfo()
+            setCinemaInfo(response.data)
+        } catch (error) {
+            catchErrors(error, setError)
         }
     }
     async function getCinemaInfo() {
@@ -43,9 +59,6 @@ const TicketingPage = ({ location }) => {
     }
     return (
         <div className="container" style={{ backgroundColor: "black" }}>
-            <div>
-                {console.log(ticketInfo)}
-            </div>
             <div className="row justify-content-center my-5">
                 <div className="col-sm-4 mb-4 ">
                     <h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>영화</h3>
@@ -60,7 +73,7 @@ const TicketingPage = ({ location }) => {
                     <TicketingTimeTable ticketInfo={ticketInfo} cinemaInfo={cinemaInfo} />
                 </div>
             </div>
-            <div className="row p-3" style={{ backgroundColor: "#252525"}}>
+            <div className="row p-3" style={{ backgroundColor: "#252525" }}>
                 <div className="col-sm-3 border-end text-center">
                     {movieInfo
                         ? <img style={{ maxHeight: "10rem" }} src={`https://image.tmdb.org/t/p/original${movieInfo.poster_path}`} alt="영화포스터" />
@@ -83,13 +96,11 @@ const TicketingPage = ({ location }) => {
                         ?
                         <Link to={{
                             pathname: `/ticket/seat`,
-                            state: {...ticketInfo,...movieInfo}
+                            state: { ...ticketInfo, ...movieInfo }
                         }}>
                             <img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" alt="예매하기" />
                         </Link>
-                        :
-                        <img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" alt="예매하기" />
-
+                        : <img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" alt="예매하기" />
                     }
                 </div>
             </div>

client/src/pages/TicketingSeatPage.js

-import { Link, useHistory } from 'react-router-dom'
 import { useState, useEffect, useRef } from 'react'
-import { Modal } from 'bootstrap'
+import { Link, useHistory } from 'react-router-dom'
 import CountButton from '../components/CountButton'
 import SeatTable from '../components/SeatTable/SeatTable'
-import styles from '../components/SeatTable/seatTable.module.scss'
 import axios from 'axios'
 import { useAuth } from '../context/auth_context.js'
+import { Modal } from 'bootstrap'
 import catchErrors from '../utils/catchErrors'
+import styles from '../components/SeatTable/seatTable.module.scss'
 import reservationApi from '../apis/reservation.api.js'
 
 const TicketingSeatPage = ({ location }) => {
@@ -33,6 +33,7 @@ const TicketingSeatPage = ({ location }) => {
     useEffect(() => {
         getInfo()
     }, [])
+    
     useEffect(() => {
         getTicketFee()
     }, [theaterInfo.theatertypeId])
@@ -102,7 +103,7 @@ const TicketingSeatPage = ({ location }) => {
                             </Link>
                             <Link to={{
                                 pathname: `/payment`,
-                                state: { ...ticketInfo, selectedSeats: selectedSeats, ...count,totalFee: count.adult * ticketFee.adult + count.youth * ticketFee.youth + count.senior * ticketFee.senior }
+                                state: { ...ticketInfo, selectedSeats: selectedSeats, ...count, totalFee: count.adult * ticketFee.adult + count.youth * ticketFee.youth + count.senior * ticketFee.senior }
                             }}>
                                 <button type="button" className="btn btn-primary" data-bs-dismiss="modal">비회원예매</button>
                             </Link>

client/src/scss/custom.scss

@@ -71,3 +71,12 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
 // .carousel-inner .carousel-item-start { 
 //   transform: translateX(0);
 // }
+
+.page-item.active .page-link {
+    background-color: #FEDC00;
+    border-color: #FEDC00;
+}
+
+.page-link:hover, .page-link:focus {
+    background-color: #fff;
+}
\ No newline at end of file

client/src/utils/auth.js

-import clientConfig from "./clientConfig";
-
-export function handleLogin(user) {
-    if (user) {
-        localStorage.setItem(clientConfig.loginUser, JSON.stringify(user));
-    }
-}
-
-export function getLocalUser() {
-    const userData = localStorage.getItem(clientConfig.loginUser);
-    console.log(userData);
-    let user = null;
-    if (userData) {
-        user = JSON.parse(userData);
-    }
-    return user;
-}
\ No newline at end of file

server/app.js

@@ -10,5 +10,4 @@ app.use(cookieParser())
 app.use('/upload', express.static('upload'))
 app.use('/api', mainRouter)
 
-
 export default app
\ No newline at end of file

server/controllers/email.controller.js

 import nodemailer from "nodemailer"
 
 const SendMail = async (req, res) => {
-  // const { email, title, cinema, theater, time, name, nickname } = req.body.userData
   const { email, name, nickname } = req.body.userData
-  const {title, cinema, time, theater} = req.body
+  const { title, cinema, time, theater } = req.body
   const selectedSeats = req.body.reservationData.map(el => String.fromCharCode(el.row + 64) + el.col)
   const sendMail = async (email, title, cinema, theater, time, name, selectedSeats, nickname) => {
-    // 메일을 전달해줄 객체
     const transporter = nodemailer.createTransport({
       host: 'smtp.gmail.com',
       port: 465,
@@ -39,12 +37,10 @@ const SendMail = async (req, res) => {
           장소:  ${cinema}  ${theater}관
         </div>
         <div>
-          일시 및 좌석: ${time} / ${selectedSeats.map(el => el+ ' ')}
+          일시 및 좌석: ${time} / ${selectedSeats.map(el => el + ' ')}
         </div>
       </div>`
     };
-
-    // 메일 전송
     try {
       const mailResult = await transporter.sendMail(mailOptions);
       console.log(`Mail sent - ID : ${mailResult.messageId}`);
@@ -53,9 +49,7 @@ const SendMail = async (req, res) => {
       console.log(err);
     }
   }
-
   sendMail(email, title, cinema, theater, time, name, selectedSeats, nickname);
 }
 
-
 export default { SendMail }
\ No newline at end of file

server/controllers/kakaopay.controller.js

@@ -57,12 +57,10 @@ const singleTest = async (req, res) => {
             },
         })
         const resp = response.data
-        console.log('resp', resp)
-        res.json({ tid: resp.tid, redirect_url: resp.next_redirect_pc_url })
+        res.json({ redirect_url: resp.next_redirect_pc_url })
     } catch (error) {
         console.log(error)
     }
-
 }
 
 export default { success, fail, cancel, singleTest }
\ No newline at end of file

server/controllers/movie.controller.js

@@ -16,6 +16,7 @@ const movieforAdmin = async (req, res) => {
     try {
         const TMDBmovieIds = []
         const TMDBmovies = req.TMDBmovies
+        const totalPage = req.totalPage
         TMDBmovies.forEach(element => {
             TMDBmovieIds.push(element.id)
         })
@@ -46,7 +47,7 @@ const movieforAdmin = async (req, res) => {
             if (movie.existed !== true && movie.id === element.movieId) movie.existed = true
             else if (movie.existed !== true) movie.existed = false
         }))
-        return res.json(TMDBmovies)
+        return res.json({ TMDBmovies, totalPage })
     } catch (error) {
         return res.status(500).send(error.message || "영화 가져오는 중 에러 발생")
     }
@@ -59,6 +60,7 @@ const getAllMovie = async (req, res, next) => {
         const monthAgo = new Date(now.setMonth(now.getMonth() - 1)).toJSON().split(/T/)[0]
         const response = await axios.get(`https://api.themoviedb.org/3/discover/movie?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR&region=KR&sort_by=release_date.asc&release_date.gte=${monthAgo}&page=${pageNum}`)
         req.TMDBmovies = response.data.results
+        req.totalPage = response.data.total_pages
         next()
     } catch (error) {
         return res.status(500).send(error.message || "영화 가져오는 중 에러 발생")
@@ -98,6 +100,7 @@ const getMovieList = async (req, res) => {
     const { category } = req.params
     // console.log(category)
     try {
+        const { category } = req.params
         const movieList = await Movie.findAll()
         const movieIds = []
         movieList.forEach(el => {
@@ -113,7 +116,7 @@ const getMovieList = async (req, res) => {
                 const totalReservationRate = await Movie.findAll({
                     attributes: [[sequelize.fn('SUM', sequelize.col('ticket_sales')), 'totalReservationRate']]
                 });
-                return { ...movie.data, ticket_sales: cols.ticket_sales, vote_average: cols.vote_average, totalReservationRate: totalReservationRate[0]}
+                return { ...movie.data, ticket_sales: cols.ticket_sales, vote_average: cols.vote_average, totalReservationRate: totalReservationRate[0] }
 
             })
         )
@@ -146,7 +149,7 @@ const getMovieList = async (req, res) => {
             res.json(elements)
         }
     } catch (error) {
-        console.log(error)
+        return res.status(500).send(error.message || "영화 정보 가져오는 중 에러 발생")
     }
 }
 
@@ -194,7 +197,7 @@ const findonlyTitle = async (req, res) => {
                     const totalReservationRate = await Movie.findAll({
                         attributes: [[sequelize.fn('SUM', sequelize.col('ticket_sales')), 'totalReservationRate']]
                     });
-                    return { ...movie.data, ticket_sales: cols.ticket_sales, vote_average: cols.vote_average, totalReservationRate: totalReservationRate[0]}
+                    return { ...movie.data, ticket_sales: cols.ticket_sales, vote_average: cols.vote_average, totalReservationRate: totalReservationRate[0] }
                 })
             )
             return res.json({ count: movieIds.length, results: elements })
@@ -206,9 +209,10 @@ const findonlyTitle = async (req, res) => {
 
 const findaboutAll = async (req, res, next) => {
     try {
-        const { keyword } = req.query
-        const response = await axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${process.env.TMDB_APP_KEY}&language=kr-KR&query=${encodeURI(keyword)}&region=KR`)
+        const { keyword, pageNum } = req.query
+        const response = await axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${process.env.TMDB_APP_KEY}&language=kr-KR&query=${encodeURI(keyword)}&region=KR&page=${pageNum}`)
         req.TMDBmovies = response.data.results
+        req.totalPage = response.data.total_pages
         next()
     } catch (error) {
         return res.status(500).send(error.message || "영화 검색 중 에러 발생");

server/controllers/user.controller.js

@@ -113,7 +113,7 @@ const guestLogin = async (req, res) => {
         console.error(error);
         return res.status(500).send("로그인 에러");
     }
-}
+};
 
 // 인증번호 발송
 const confirmMbnum = async (req, res) => {
@@ -471,7 +471,6 @@ const saveGuestInfo = async (req, res) => {
             password: password,
             roleId:1
         });
-        console.log(newGuest)
         res.clearCookie(config.cookieName);
         const token = jwt.sign({id: newGuest.id, role: "user"}, config.jwtSecret, {
             expiresIn: config.jwtExpires,

server/index.js

 import dotenv from "dotenv";
-import { sequelize, User, Role } from "./db/index.js";
 import app from "./app.js";
 import appConfig from "./config/app.config.js";
+import { sequelize, User, Role } from "./db/index.js";
 import { ROLE_NAME } from './models/role.model.js';
 
 dotenv.config({
@@ -19,7 +19,6 @@ sequelize
         );
 
         const adminRole = await Role.findOne({ where: { name: "admin" } });
-        // console.log("adminRole :  ", adminRole);
         if (!adminRole) {
             await User.create({
                 userId: "admin",

server/routes/user.route.js

 import express from "express";
+import multer from "multer";
 import userCtrl from "../controllers/user.controller.js";
 import multer from "multer"
 
@@ -7,6 +8,14 @@ const upload = multer({
     dest: "upload/"
 })
 
+router
+    .route("/user")
+    .get(userCtrl.getUser)
+
+const upload = multer({
+    dest: "upload/"
+})
+
 router
     .route("/user")
     .get(userCtrl.getUser)
@@ -28,7 +37,11 @@ router
     .post(userCtrl.signup)
 
 router
-    .post("/profile", upload.single("image"), userCtrl.uploadProfile)
+    .route("/profile")
+    .post(
+        upload.single("image"),
+        userCtrl.uploadProfile
+    )
 
 router
     .route("/modify")
@@ -41,6 +54,7 @@ router
 router
     .route("/num")
     .post(userCtrl.confirmNum)
+
 router
     .route("/pw/:pw")
     .get(userCtrl.comparePw)
@@ -49,14 +63,16 @@ router
     .route("/phone/:phone")
     .post(userCtrl.confirmMbnum)
 
-
-router.route('/getuserinfo')
+router
+    .route('/getuserinfo')
     .post(userCtrl.getUserInfo)
 
-router.route('/guest/save')
+router
+    .route('/guest/save')
     .post(userCtrl.saveGuestInfo)
 
-router.route('/guestinfo/:guestId')
+router
+    .route('/guestinfo/:guestId')
     .get(userCtrl.getGuestInfo)
 
 export default router;
\ No newline at end of file