reservation/moviechart/moviecomming

client/src/App.js

@@ -15,6 +15,7 @@ import TicketingPage from "./pages/TicketingPage";
 import TicketingSeatPage from './pages/TicketingSeatPage'
 import SearchPage from "./pages/SearchPage";
 import Payment from "./pages/PaymentPage/PaymentPage";
+import PaymentCompletePage from "./pages/PaymentCompletePage";
 
 function App() {
 
@@ -38,6 +39,7 @@ function App() {
                 <Route path="/ticket/seat" component={TicketingSeatPage} />
                 <Route path="/ticket" component={TicketingPage} />
                 <Route path="/payment" component={Payment} />
+                <Route path="/paymentcomplete" component={PaymentCompletePage} />
                 <Route path="/theater" component={TheaterPage}/>
                 <Route path="/search" component={SearchPage} />
               </Switch>

client/src/apis/movie.api.js

@@ -11,11 +11,6 @@ const getAllfromTM = async () => {
     return data
 }
 
-const getMoviesfromTM = async (category) => {
-    const response = await axios.get(`${baseUrl}/api/movie/showmovies/${category}`)
-    return response.data
-}
-
 const getMovieInfofromTM = async (id) => {
     const movieId = id
     const response = await axios.get(`${TMDBUrl}/${movieId}?api_key=${process.env.REACT_APP_TMDB_API_KEY}&language=ko-KR`)
@@ -28,13 +23,13 @@ const getImagesfromTM = async (id) => {
     return response.data
 }
 
-const getCreditsfromTM = async (id) =>{
+const getCreditsfromTM = async (id) => {
     const movieId = id
     const response = await axios.get(`${TMDBUrl}/${movieId}/credits?api_key=${process.env.REACT_APP_TMDB_API_KEY}`)
     return response.data
 }
 
-const getVideosfromTM = async (id) =>{
+const getVideosfromTM = async (id) => {
     const movieId = id
     const response = await axios.get(`${TMDBUrl}/${movieId}/videos?api_key=${process.env.REACT_APP_TMDB_API_KEY}`)
     return response.data.results
@@ -44,7 +39,10 @@ const getListfromDB = async () => {
     const { data } = await axios.get(`${baseUrl}/api/movie`)
     return data
 }
-
+const getListByCategoryfromDB = async (category) => {
+    const { data } = await axios.get(`${baseUrl}/api/movie/movielist/${category}`)
+    return data
+}
 const submit = async (movieId) => {
     const { data } = await axios.post(`${baseUrl}/api/movie/${movieId}`)
     return data
@@ -67,7 +65,7 @@ const search = async ({ type, keyword }) => {
 
 const movieApi = {
     getAllfromTM,
-    getMoviesfromTM,
+    getListByCategoryfromDB,
     getMovieInfofromTM,
     getImagesfromTM,
     getCreditsfromTM,

client/src/components/CountButton.js

@@ -10,7 +10,7 @@ const CountButton = ({name, count, setCount}) => {
         }
     }
     return (
-        <div className="">
+        <>
             <button type="button" name="backbutton" style={{ backgroundColor: "black", border: "0" }} onClick={handleCount}>
                 <img src="/images/icons8-back-24.png" name="backbutton" alt="<" />
             </button>
@@ -18,7 +18,7 @@ const CountButton = ({name, count, setCount}) => {
             <button type="button" name="forwardbutton" min="0" style={{ backgroundColor: "black", border: "0" }} onClick={handleCount}>
                 <img src="/images/icons8-forward-24.png" name="forwardbutton" alt=">" />
             </button>
-        </div>
+        </>
     )
 }
 

client/src/components/Kakaopay.js

-import axios from 'axios'
-
-const Kakaopay = ({ticketInfo}) => {
-    async function handleClick() {
-        try {
-            const response = await axios.post('/api/kakaopay/test/single', {
-                cid: 'TC0ONETIME',
-                partner_order_id: 'orderNum',
-                partner_user_id: 'userName',
-                item_name: ticketInfo.title,
-                quantity: ticketInfo.teenager+ticketInfo.adult+ticketInfo.elderly,
-                total_amount: ticketInfo.teenager * 7000 + ticketInfo.adult * 8000 + ticketInfo.elderly * 6000,
-                vat_amount: 0,
-                tax_free_amount: 0,
-                approval_url: 'http://localhost:3000/',
-                fail_url: 'http://localhost:3000/',
-                cancel_url: 'http://localhost:3000/',
-            })
-            console.log(response.data)
-            if (response.data) {
-                window.location.href = response.data.redirect_url
-            }
-        } catch (error) {
-            console.log(error)
-        }
-    }
-
-    return (
-        <>
-            <button onClick={handleClick} style={{ backgroundColor: "black", border: '0' }}>
-                <img src="/images/payment_icon_yellow_medium.png" style={{width:"130px"}} />
-            </button>
-        </>
-    )
-}
-
-export default Kakaopay
\ No newline at end of file

client/src/components/MovieCard/MovieCard.js

@@ -23,7 +23,8 @@ const MovieCard = ({ list }) => {
                         <div className={`${styles.description}`}>{movie.overview}</div>
                     </Link>
                     <div className="card-body text-light">
-                        <marquee className={`h2 card-title text-center ${styles.title}`}>{movie.title}</marquee>
+                        {movie.adult? <image src="/images/19.png" /> :<></>}
+                        <div className={`h4 card-title text-center ${styles.title}`}>{movie.title}</div>
                         <p className={`card-text text-center ${styles.txt}`}>예매율: {movie.ticket_sales}0% | {movie.runtime}분</p>
                         <p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
                     </div>

client/src/components/MovieChart.js

@@ -16,7 +16,7 @@ const MovieChart = () => {
     async function getTMDB_TopRated() {
         try {
             setError("")
-            const data = await movieApi.getMoviesfromTM(category)
+            const data = await movieApi.getListByCategoryfromDB(category)
             console.log("sdad==", data)
             setTMDB_TopRated_Data([...data])
         } catch (error) {
@@ -30,7 +30,7 @@ const MovieChart = () => {
                 <div className="row row-cols-1 row-cols-md-4 g-4">
                     <MovieCard list={TMDB_TopRated_Data} />
                 </div>
-                : <h2 className="text-white text-center my-5">영화정보를 로딩할 수 없습니다.</h2>
+                : <h2 className="text-white text-center p-5">영화정보를 로딩중입니다!</h2>
             }
         </>
     )

client/src/components/MovieComing.js

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'
 import movieApi from "../apis/movie.api.js"
 // import MovieCard from "./MovieCard/index.js"
 import { Link } from 'react-router-dom'
-import styles from './MovieCard/MovieCard.js'
+import styles from './MovieCard/movie-card.module.scss'
 import catchErrors from '../utils/catchErrors.js'
 
 const MovieComing = () => {
@@ -17,8 +17,9 @@ const MovieComing = () => {
     async function getTMDB_UpComing() {
         try {
             setError("")
-            const response = await movieApi.getMoviesfromTM(category)
+            const response = await movieApi.getListByCategoryfromDB(category)
             setTMDB_UpComing_Data([...response])
+            console.log(response)
         } catch (error) {
             catchErrors(error, setError)
         }
@@ -41,7 +42,8 @@ const MovieComing = () => {
                                 <div className={`${styles.description}`}>{movie.overview}</div>
                             </Link>
                             <div className="card-body text-light">
-                                <marquee className={`h2 card-title text-center ${styles.title}`}>{movie.title}</marquee>
+                                {movie.adult ? <image src="/images/19.png" /> : <></>}
+                                <div className={`h4 card-title text-center ${styles.title}`}>{movie.title}</div>
                                 <p className={`card-text text-center ${styles.txt}`}>예매율: {movie.ticket_sales}0% | {movie.runtime}분</p>
                                 <p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
                             </div>
@@ -54,7 +56,7 @@ const MovieComing = () => {
                         </div>
                     ))}
                 </div>
-                : <h2 className="text-white text-center my-5">영화정보를 로딩할 수 없습니다.</h2>
+                : <h2 className="text-white text-center p-5">영화정보를 로딩중입니다!</h2>
             }
         </>
     )

client/src/components/SeatTable/SeatTable.js

@@ -41,8 +41,6 @@ const SeatTable = ({ theaterInfo, count, setSelectedSeats, selectedSeats, reserv
     }
     return (
         <div className="text-center">
-            {/* {console.log(theaterInfo)} */}
-            {console.log(selectedSeats)}
             <div className="mb-2" style={{ backgroundColor: "gray" }}>Screen</div>
             {table}
         </div>

client/src/components/TheaterInfo.js

@@ -63,6 +63,11 @@ const TheaterInfo = () => {
             const response = await axios.get('/api/info/cinema')
             const response2 = await axios.get('/api/theater')
             setTheaterInfo({...response.data, theaterNum:response2.data.length})
+            setCurrentInfo({
+                name:"대중교통 안내",
+                title:"transportation",
+                information: response.data.transportation
+            })
         } catch (error) {
             catchErrors(error, setError)
         }
@@ -82,7 +87,7 @@ const TheaterInfo = () => {
             {theaterInfo ?
                 <div>
                     {/* {console.log(currentInfo)} */}
-                    {/* {console.log(theaterInfo)} */}
+                    {console.log(theaterInfo)}
                     <h2 className="m-5">{theaterInfo.cinemaName}</h2>
                     <div className="my-3 text-center">
                         <img src="/images/movieTheater.jpg" style={{ width: "80%" }} />

client/src/components/TicketingMovie/TicketingMovie.js

 import React, { useState, useEffect } from 'react'
 import axios from 'axios'
 import styles from "./ticketingMovie.module.scss"
+import movieApi from '../../apis/movie.api'
+import catchErrors from '../../utils/catchErrors'
 
 const TicketingMovie = ({ticketInfo, setTicketInfo}) => {
     const [movieList, setMovieList] = useState([])
+    const [error, setError] = useState()
     useEffect(() => {
         getMovieList()
     }, [])
 
     async function getMovieList() {
         try {
-            const response = await axios.get(`/api/movie/movielist`)
-            setMovieList(response.data)
+            const response = await movieApi.getListByCategoryfromDB()
+            console.log(response)
+            setMovieList(response)
         } catch (error) {
-
+            catchErrors(error, setError)
         }
     }
 

client/src/pages/MovieListPage.js

@@ -3,27 +3,23 @@ import MovieChart from '../components/MovieChart.js'
 import MovieComing from '../components/MovieComing.js'
 
 const MovieListPage = () => {
-    const [state, setState] = useState(true)
+    const [state, setState] = useState(0)
 
     return (
         <div className="container">
-            <div>
-                <ul className="nav nav-tabs justify-content-center my-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? "3px solid":"none" ,borderBottomColor:state?"#FEDC00":"black"}} id="moviechart-tab" data-bs-toggle="tab" data-bs-target="#moviechart" type="button" role="tab" aria-controls="moviechart" aria-selected="true" onClick={() => setState(true)}>무비차트</button>
-                    </li>
-                    <li className="nav-item" role="presentation">
-                        <button className="nav-link mx-auto" style={{color:"white", borderColor: "black",backgroundColor:"black", borderBottom: state?"none" :"3px solid", borderBottomColor:state?"black": "#FEDC00"}} id="moviecomming-tab" data-bs-toggle="tab" data-bs-target="#moviecomming" type="button" role="tab" aria-controls="moviecomming" aria-selected="false" onClick={() => setState(false)}>상영예정작</button>
-                    </li>
-                </ul>
+            <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 className="tab-content" id="myTabContent">
-                <div className="tab-pane fade show active" id="moviechart" role="tabpanel" aria-labelledby="moviechart-tab">
+            <div>
+                {state === 0
+                    ?
                     <MovieChart />
-                </div>
-                <div className="tab-pane fade" id="moviecomming" role="tabpanel" aria-labelledby="moviecomming-tab">
+                    :
                     <MovieComing />
-                </div>
+                }
             </div>
         </div>
     )

client/src/pages/MoviePage.js

@@ -113,13 +113,13 @@ const MoviePage = ({ location }) => {
             </div>
             <div className="tab-content text-center" id="myTabContent" style={{ color: "white" }}>
                 <div className="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
-                    <div>{movieInfo.overview}</div>
+                    <div className="mt-5 pb-5 px-5">{movieInfo.overview}</div>
                 </div>
                 <div className="tab-pane fade" id="stillcut" role="tabpanel" aria-labelledby="stillcut-tab">
                     <Video movieId={movieInfo.id} />
                 </div>
                 <div className="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
-                    <div>관람평</div>
+                    <div className="mt-5 pb-5 px-5">관람평</div>
                 </div>
             </div>
         </div>

client/src/pages/PaymentCompletePage.js

+import axios from 'axios'
+import { useAuth } from '../context/auth_context'
+import { useEffect, useState } from 'react'
+
+import catchErrors from '../utils/catchErrors'
+
+
+const PaymentCompletePage = () => {
+    const { user } = useAuth()
+    const [error, setError] = useState()
+    useEffect(() => {
+        if (user.role === "member") {
+            getUserInfo()
+        } else {
+            getGuestInfo()
+        }
+    }, [user])
+
+    async function getGuestInfo() {
+        try {
+            if (user.id > 0) {
+                const response = await axios.get(`/api/auth/guestinfo/${user.id}`)
+                const response2 = await axios.post(`/api/reservation/findonereservation`, {
+                    userType: "guest",
+                    user: user.id
+                })
+                console.log({
+                    reservationData: [...response2.data],
+                    userData: { ...response.data },
+                })
+                if (response.data || response2.data) {
+                    const responseEmail = await axios.post('/api/email/send', {
+                        reservationData: [...response2.data],
+                        userData: { ...response.data },
+                        cinema: "Butter Studio 조치원",
+                        title: "더 수어사이드 스쿼드",
+                        theater: "1",
+                        time:"2021/07/21 10:00"
+                    })
+                    console.log(responseEmail.data)
+                }
+
+                console.log(response.data)
+            }
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
+    async function getUserInfo() {
+        try {
+            const response = await axios.post(`/api/auth/getuserinfo`, {
+                id: user.id
+            })
+            const response2 = await axios.post(`/api/reservation/findonereservation`, {
+                userType: "member",
+                user: user.id
+            })
+            console.log(response2.data)
+            if (response.data || response2.data) {
+                const responseEmail = await axios.post('/api/email/send', {
+                    ...response2.data,
+                    ...response.data,
+                    
+                })
+                console.log(responseEmail.data)
+            }
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
+    return (
+        <div className="text-center">
+            <h3>예매가 정상적으로 완료되었습니다.</h3>
+            <button>홈으로</button>
+            {
+                user.role === "member" ? <button>마이페이지</button> : <></>
+            }
+        </div>
+    )
+}
+
+export default PaymentCompletePage
\ No newline at end of file

client/src/pages/PaymentPage/PaymentPage.js

 import axios from 'axios'
 import { useEffect, useState } from 'react'
 import { useHistory } from 'react-router-dom'
-import Kakaopay from '../../components/Kakaopay'
 import { useAuth } from '../../context/auth_context'
 import catchErrors from '../../utils/catchErrors'
 import styles from './PaymentPage.module.scss'
 
 const Payment = ({ location }) => {
     const history = useHistory();
-    const [ticketInfo, setTicketInfo] = useState({ ...location.state })
-    const [error, setError] = useState("")
+    const { user } = useAuth()
+    const [guestInfo, setGuestInfo] = useState({})
+    const [guestID, setGuestID] = useState()
     const [userInfo, setUserInfo] = useState({
         nickname: "",
         email: "",
         birth: "",
         phoneNumber: ""
     })
-    const [guestInfo, setGuestInfo] = useState({})
-    const [guestID, setGuestID] = useState()
-    const { user } = useAuth()
+    const [ticketInfo, setTicketInfo] = useState({ ...location.state })
+    const [element, setElement] = useState()
+    const [error, setError] = useState("")
 
     useEffect(() => {
         console.log(user.id)
@@ -55,25 +55,41 @@ const Payment = ({ location }) => {
         }
     }
 
+    function kakaoBtnClick() {
+        setElement(
+            <div className="text-center">
+                <p className=" font-weight-bold" style={{ display: 'inline', color: "#FEDC00" }}>'카카오페이'</p><p style={{ display: 'inline' }}>를 선택하셨습니다. </p>
+                <p>결제하기를 눌러 결제를 이어가주세요.</p>
+            </div>
+        )
+        setTicketInfo({ ...ticketInfo, payment: "카카오페이" })
+    }
+
     async function reservationComplete() {
         try {
-            if (user.id > 0) {
+            if (user.role === "member") {
                 const response = await axios.post(`/api/reservation/save`, {
                     userType: "member",
+                    payment: "카카오페이",
                     user: userInfo.id,
                     ...ticketInfo,
-                    payment: "카카오페이",
                     timetable: 1
                 })
-                if (response.data) {
-                    const responseEmail = await axios.post('/api/email/send', {
-                        ...ticketInfo,
-                        ...userInfo,
-                        ...guestInfo,
+                const responsekakao = await axios.post('/api/kakaopay/test/single', {
+                    cid: 'TC0ONETIME',
+                    partner_order_id: 'orderNum',
+                    partner_user_id: userInfo.id || guestInfo.id,
+                    item_name: ticketInfo.title,
+                    quantity: ticketInfo.adult + ticketInfo.youth + ticketInfo.senior,
+                    total_amount: ticketInfo.totalFee,
+                    vat_amount: 0,
+                    tax_free_amount: 0,
+                    approval_url: 'http://localhost:3000/paymentcomplete',
+                    fail_url: 'http://localhost:3000/ticket',
+                    cancel_url: 'http://localhost:3000/ticket',
                 })
-                    console.log("이메일전송완료===", responseEmail.data)
-                    alert("예매가 완료되었습니다.")
-                    history.push('/')
+                if (response && responsekakao) {
+                    window.location.href = responsekakao.data.redirect_url
                 }
             } else {
                 if (guestID) {
@@ -84,22 +100,26 @@ const Payment = ({ location }) => {
                         payment: "카카오페이",
                         timetable: 1
                     })
-                    if (response.data) {
-                        const responseEmail = await axios.post('/api/email/send', {
-                            ...ticketInfo,
-                            ...userInfo,
-                            ...guestInfo,
+                    const responsekakao = await axios.post('/api/kakaopay/test/single', {
+                        cid: 'TC0ONETIME',
+                        partner_order_id: 'orderNum',
+                        partner_user_id: 'user',
+                        item_name: ticketInfo.title,
+                        quantity: ticketInfo.adult + ticketInfo.youth + ticketInfo.senior,
+                        total_amount: ticketInfo.totalFee,
+                        vat_amount: 0,
+                        tax_free_amount: 0,
+                        approval_url: 'http://localhost:3000/paymentcomplete',
+                        fail_url: 'http://localhost:3000/ticket',
+                        cancel_url: 'http://localhost:3000/ticket',
                     })
-                        console.log("이메일전송완료===", responseEmail.data)
+                    if (response && responsekakao) {
+                        window.location.href = responsekakao.data.redirect_url
                     }
-                    alert("예매가 완료되었습니다.")
-                    console.log("비회원예매완료===", response.data)
-                    history.push('/')
                 } else {
                     alert("비회원 정보를 모두 입력 후 비회원 정보 저장 버튼을 눌러주세요.")
                 }
             }
-
         } catch (error) {
             catchErrors(error, setError)
         }
@@ -109,7 +129,7 @@ const Payment = ({ location }) => {
     return (
         <div className="container" style={{ color: "white" }}>
             {console.log(ticketInfo)}
-            {console.log(userInfo)}
+            {/* {console.log(userInfo)} */}
             {/* {console.log(guestInfo)} */}
             <div className="row justify-content-center my-5">
                 <div className="col-sm-4 ">
@@ -176,10 +196,13 @@ const Payment = ({ location }) => {
                         </div>
                     }
                     <h5 className="my-4 p-2" style={{ backgroundColor: "white", color: "black" }}>결제방법</h5>
-                    <img src="/images/naverpay_button.png" style={{width:"150px"}} />
-                    <Kakaopay ticketInfo={ticketInfo} setTicketInfo={setTicketInfo} />
+                    <img src="/images/naverpay_button.png" style={{ width: "150px" }} />
+                    <button onClick={kakaoBtnClick} style={{ backgroundColor: "black", border: '0' }}>
+                        <img src="/images/payment_icon_yellow_medium.png" style={{ width: "130px" }} />
+                    </button>
+                    {element}
                     <div className="my-5">
-                        <button className="btn btn-warning" type="button" style={{ width: "100%" }} onClick={reservationComplete}>결제완료</button>
+                        <button className="btn btn-warning" type="button" style={{ width: "100%" }} onClick={reservationComplete}>결제하기</button>
                     </div>
                 </div>
 
@@ -191,10 +214,10 @@ const Payment = ({ location }) => {
                         <div>{ticketInfo.time}</div>
                         <div className="mb-3">{ticketInfo.selectedTheater}관 {ticketInfo.selectedSeats.map(el => String.fromCharCode(parseInt(el.split('-')[0]) + 65) + el.split('-')[1]) + ' '}</div>
                         <div className="rounded-3 p-3" style={{ backgroundColor: '#404040' }}>
-                            <div>청소년: {ticketInfo.teenager}명</div>
                             <div>성인: {ticketInfo.adult}명</div>
-                            <div>경로우대: {ticketInfo.elderly}명</div>
-                            <div>총 결제금액: {ticketInfo.teenager * 7000 + ticketInfo.adult * 8000 + ticketInfo.elderly * 6000}</div>
+                            <div>청소년: {ticketInfo.youth}명</div>
+                            <div>경로우대: {ticketInfo.senior}명</div>
+                            <div className="mt-2">총 결제금액: {ticketInfo.totalFee}원</div>
                         </div>
                     </div>
                 </div>

client/src/pages/TheaterPage.js

@@ -29,7 +29,7 @@ const TheaterPage = () => {
                 </div>
                 <div className="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
                     <div className="row justify-content-center">
-                        <div className="col-sm-9">
+                        <div className="col-sm-9 pb-5">
                             <TicketFeeTable />
                         </div>
                     </div>

client/src/pages/TicketingSeatPage.js

@@ -6,51 +6,76 @@ 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 catchErrors from '../utils/catchErrors'
 
 const TicketingSeatPage = ({ location }) => {
     const history = useHistory()
     const modalRef = useRef(null)
     const modal = useRef()
     const { user } = useAuth()
+    const [error, setError] = useState()
     const [ticketInfo, setTicketInfo] = useState({ ...location.state })
-    const [theaterInfo, setTheaterInfo] = useState()
+    const [theaterInfo, setTheaterInfo] = useState({ theatertypeId: 0 })
     const [selectedSeats, setSelectedSeats] = useState([])
     const [reservedSeats, setReservedSeats] = useState([])
+    const [ticketFee, setTicketFee] = useState({
+        youth: 0,
+        adult: 0,
+        senior: 0
+    })
     const [count, setCount] = useState({
+        youth: 0,
         adult: 0,
-        teenager: 0,
-        elderly: 0
+        senior: 0
     })
 
     useEffect(() => {
         getInfo()
     }, [])
+    useEffect(() => {
+        getTicketFee()
+    }, [theaterInfo.theatertypeId])
 
     async function getInfo() {
         try {
             const response = await axios.post('/api/theater/getInfo', {
                 theaterName: ticketInfo.selectedTheater
             })
-            console.log(response.data)
             setTheaterInfo(response.data)
-
             const response2 = await axios.post('/api/reservation/findreservation', {
                 timetable: 1
             })
-            console.log(response2.data)
             const reserve = response2.data.map((el) =>
                 el.row + '-' + el.col
             )
             setReservedSeats(reserve)
         } catch (error) {
-            console.log(error)
+            catchErrors(error, setError)
+        }
+    }
+
+    async function getTicketFee() {
+        try {
+            const response3 = await axios.get(`/api/info/ticketfee`, {
+                params: {
+                    theaterTypeId: theaterInfo.theatertypeId
+                }
+            })
+            const basicFee = response3.data[0].day + response3.data[0].defaultPrice + response3.data[0].weekdays
+            setTicketFee({
+                adult: basicFee + response3.data[0].adult,
+                youth: basicFee + response3.data[0].youth,
+                senior: basicFee + response3.data[0].senior
+            })
+        } catch (error) {
+            catchErrors(error, setError)
         }
     }
 
     function loginModal() {
-        if (user.role==="member") {
+        if (user.role === "member") {
             history.push("/payment", {
-                ...ticketInfo, selectedSeats: selectedSeats, ...count
+                ...ticketInfo, selectedSeats: selectedSeats, ...count, totalFee: count.adult * ticketFee.adult + count.youth * ticketFee.youth + count.senior * ticketFee.senior
             });
         } else {
             modal.current = new Modal(modalRef.current)
@@ -63,7 +88,6 @@ const TicketingSeatPage = ({ location }) => {
             <div ref={modalRef} className="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden={modal}>
                 <div className="modal-dialog">
                     <div className="modal-content">
-                        { }
                         <div className="modal-header">
                             <h5 className="modal-title" id="staticBackdropLabel">로그인이 필요한 서비스입니다.</h5>
                             <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
@@ -79,7 +103,7 @@ const TicketingSeatPage = ({ location }) => {
                             </Link>
                             <Link to={{
                                 pathname: `/payment`,
-                                state: { ...ticketInfo, selectedSeats: selectedSeats, ...count }
+                                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>
@@ -87,9 +111,7 @@ const TicketingSeatPage = ({ location }) => {
                     </div>
                 </div>
             </div>
-            <div className="container" style={{ color: "white" }}>
-                {console.log(ticketInfo)}
-                {console.log(reservedSeats)}
+            <div className="mx-5 pb-5" style={{ color: "white" }}>
                 <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>
@@ -97,17 +119,31 @@ const TicketingSeatPage = ({ location }) => {
                 </div>
                 <div className="row justify-content-center my-3">
                     <div className="col-sm-6 mb-4 text-center">
-                        <div className="row">
-
-                            <div className="col-sm-6 text-end">
-                                <div className="my-1">일반</div>
-                                <div className="my-1">청소년</div>
-                                <div className="my-1">경로우대</div>
-                            </div>
-                            <div className="col-sm-6 text-start">
+                        <div className="row text-end justify-content-sm-end">
+                            <div className="col-sm-6 me-5">
+                                <div>
+                                    <span className="my-1">일반</span>
+                                    <span>
                                         <CountButton name="adult" count={count} setCount={setCount} />
-                                <CountButton name="teenager" count={count} setCount={setCount} />
-                                <CountButton name="elderly" count={count} setCount={setCount} />
+                                    </span>
+                                </div>
+                                <div>
+                                    <span className="my-1">청소년</span>
+                                    <span>
+                                        {ticketInfo.adult
+                                        ?
+                                        <CountButton name="youth" count={count} setCount={setCount} disabled />
+                                        :
+                                        <CountButton name="youth" count={count} setCount={setCount} />
+                                        }
+                                    </span>
+                                </div>
+                                <div>
+                                    <span className="my-1">경로우대</span>
+                                    <span>
+                                        <CountButton name="senior" count={count} setCount={setCount} />
+                                    </span>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -133,33 +169,45 @@ const TicketingSeatPage = ({ location }) => {
                     </div>
                 </div>
                 <div className="row p-3 mt-5" style={{ backgroundColor: "#252525" }}>
-                    <div className="col-sm-3 border-end text-center">
+                    <div className="col-sm-2 mb-1 text-center">
                         {ticketInfo
-                            ? <img style={{ maxHeight: "10rem" }} src={`https://image.tmdb.org/t/p/original${ticketInfo.poster_path}`} alt="영화포스터" />
+                            ? <img style={{ width: "6rem" }} src={`https://image.tmdb.org/t/p/original${ticketInfo.poster_path}`} alt="영화포스터" />
                             : <div className="mb-2" style={{ color: "white" }}>영화선택</div>}
                     </div>
-                    <div className="col-sm-6 border-end" style={{ color: "white" }}>
-                        <div className="mb-2  text-center">극장선택</div>
+                    <div className="col-sm-4  mb-1" style={{ color: "white" }}>
                         {ticketInfo
                             ? <ul>
                                 <li>영화: {ticketInfo.title}</li>
                                 <li>극장: {ticketInfo.cinema}</li>
                                 <li>일시: 2021/07/21 10:00 </li>
                                 <li>상영관: {ticketInfo.selectedTheater}관</li>
-                                <li>좌석: {selectedSeats.map(el=>String.fromCharCode(parseInt(el.split('-')[0]) + 64)+el.split('-')[1])+' '}</li>
+                                <li>좌석: {selectedSeats.map(el => String.fromCharCode(parseInt(el.split('-')[0]) + 64) + el.split('-')[1]) + ' '}</li>
                             </ul>
-                            : <div></div>}
+                            :
+                            <div className="mb-2  text-center">극장선택</div>
+                        }
                     </div>
-                    <div className="col-sm-3 text-center">
-                        <div className="mb-2" style={{ color: "white" }}>결제하기</div>
-                        {ticketInfo
+                    <div className="col-sm-4  mb-1">
+                        {selectedSeats
+                            ?
+                            <ul>
+                                <li>성인: {count.adult}명</li>
+                                <li>청소년: {count.youth}명</li>
+                                <li>경로: {count.senior}명</li>
+                                <li className="mt-3">총 결제금액: {count.adult * ticketFee.adult + count.youth * ticketFee.youth + count.senior * ticketFee.senior}원</li>
+                            </ul>
+                            : <></>}
+                    </div>
+                    <div className="col-sm-2 text-center  mb-1">
+                        <div className="h5 mb-3">결제하기</div>
+                        {selectedSeats.length > 0 && count.adult + count.youth + count.senior === selectedSeats.length
                             ?
                             <button onClick={loginModal} style={{ backgroundColor: '#252525', border: 0 }} >
-                                <img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" style={{width:"90px"}} alt="결제하기" />
+                                <img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" style={{ width: "70px" }} alt="결제하기" />
                             </button>
                             :
-                            <button disabled>
-                                <img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" alt="결제하기" />
+                            <button onClick={() => { alert("좌석을 선택해주세요.") }} style={{ backgroundColor: '#252525', border: 0 }}>
+                                <img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" style={{ width: "70px" }} alt="결제하기" />
                             </button>
 
                         }

server/controllers/email.controller.js

 import nodemailer from "nodemailer"
 
 const SendMail = async (req, res) => {
-  const { email, title, cinema, selectedTheater, time, name, nickname } = req.body
-  const selectedSeats = req.body.selectedSeats
-  console.log(selectedSeats)
-  const sendMail = async (email, title, cinema, selectedTheater, time, name, selectedSeats, nickname) => {
+  // 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 selectedSeats = req.body.reservationData.map(el => String.fromCharCode(el.row + 65) + el.col)
+  const sendMail = async (email, title, cinema, theater, time, name, selectedSeats, nickname) => {
     // 메일을 전달해줄 객체
     const transporter = nodemailer.createTransport({
       host: 'smtp.gmail.com',
@@ -29,16 +30,16 @@ const SendMail = async (req, res) => {
       subject: `${cinema} 예매확인내역: ${title}`,
       html: `<div>
         <h2>
-          ${name||nickname}님의 예매
+          ${name || nickname}님의 예매
         </h2>
         <div>
           영화: ${title}
         </div>
         <div>
-          장소:  ${cinema}  ${selectedTheater}관
+          장소:  ${cinema}  ${theater}관
         </div>
         <div>
-          일시 및 좌석: ${time} / ${selectedSeats.map(el => String.fromCharCode(parseInt(el.split('-')[0]) + 65) + el.split('-')[1]) + ' '}
+          일시 및 좌석: ${time} / ${selectedSeats.map(el => el+ ' ')}
         </div>
       </div>`
     };
@@ -53,7 +54,7 @@ const SendMail = async (req, res) => {
     }
   }
 
-  sendMail(email, title, cinema, selectedTheater, time, name, selectedSeats, nickname);
+  sendMail(email, title, cinema, theater, time, name, selectedSeats, nickname);
 }
 
 

server/controllers/movie.controller.js

@@ -5,55 +5,13 @@ const { Op } = sequelize
 
 const getListfromDB = async (req, res) => {
     try {
-        const findAll = await Movie.findAll({ attributes: [ 'movieId', 'title', 'release_date' ] })
+        const findAll = await Movie.findAll({ attributes: ['movieId', 'title', 'release_date'] })
         res.json(findAll)
     } catch (error) {
         return res.status(500).send(error.message || "영화 목록 가져오기 중 에러 발생");
     }
 }
 
-const getMovieByCategory = async (req, res, next, category) => {
-    try {
-        const TMDBmovieIds = []
-        const movieIds = []
-        const response = await axios.get(`https://api.themoviedb.org/3/movie/${category}?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR&page=1`)
-        const TMDBmovies = response.data.results
-
-        TMDBmovies.forEach(element => {
-            TMDBmovieIds.push(element.id)
-        })
-        const responseAfterCompare = await Movie.findAll({
-            where: {
-                movieId: {
-                    [Op.or]: TMDBmovieIds
-                }
-            }
-        })
-        responseAfterCompare.forEach(el => {
-            movieIds.push(el.movieId)
-        })
-        req.movieIds = movieIds
-        next()
-    } catch (error) {
-        return res.status(500).send(error.message || "영화 가져오기 중 에러 발생");
-    }
-}
-
-const getMovieById = async (req, res) => {
-    try {
-        const movieIds = req.movieIds
-        const elements = await Promise.all(
-            movieIds.map(async (movieId) => {
-                const movie = await axios.get(`https://api.themoviedb.org/3/movie/${movieId}?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR`)
-                return movie.data
-            })
-        )
-        res.json(elements)
-    } catch (error) {
-        return res.status(500).send(error.message || "영화 가져오기 중 에러 발생");
-    }
-}
-
 const movieforAdmin = async (req, res) => {
     try {
         const TMDBmovieIds = []
@@ -68,7 +26,8 @@ const movieforAdmin = async (req, res) => {
             if (findDirectors.length !== 0) {
                 const name = findDirectors.reduce((acc, cur, idx) => {
                     if (idx !== 0) return acc + ', ' + cur.name
-                    else return acc + cur.name}, '')
+                    else return acc + cur.name
+                }, '')
                 newObj.name = name
             } else newObj.name = "없음"
 
@@ -106,20 +65,56 @@ const getAllMovie = async (req, res, next) => {
     }
 }
 
-const getMovieList = async(req,res)=>{
+const getMovieList = async (req, res) => {
+    const { category } = req.params
+    // console.log(category)
     try {
         const movieList = await Movie.findAll()
-        const movieIds=[]
+        const movieIds = []
         movieList.forEach(el => {
             movieIds.push(el.movieId)
         })
         const elements = await Promise.all(
             movieIds.map(async (movieId) => {
                 const movie = await axios.get(`https://api.themoviedb.org/3/movie/${movieId}?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR`)
-                return movie.data
+                const cols = await Movie.findOne({
+                    where: { "movieId": movieId },
+                    attributes: ["ticket_sales", "vote_average"]
+                })
+                const totalReservationRate = Movie.sum('ticket_sales')
+                const rate =  await Promise.all(cols.ticket_sales / totalReservationRate * 100) 
+                return { ...movie.data, ticket_sales: rate, vote_average: cols.vote_average }
+
             })
         )
+        if (category === "popular") {
+            for (let i = 0; i < elements.length; i++) {
+                if (new Date(elements[i].release_date) > new Date()) {
+                    elements.splice(i, 1);
+                    i--;
+                }
+            }
+            elements.sort(function (a, b) {
+                return b.popularity - a.popularity
+            })
             res.json(elements)
+        } else if (category === "upcoming") {
+            for (let i = 0; i < elements.length; i++) {
+                if (new Date(elements[i].release_date) <= new Date()) {
+                    elements.splice(i, 1);
+                    i--;
+                }
+            }
+            elements.sort(function (a, b) {
+                return a.release_date - b.release_date
+            })
+            res.json(elements)
+        } else {
+            elements.sort(function (a, b) {
+                return a.title - b.title
+            })
+            res.json(elements)
+        }
     } catch (error) {
         console.log(error)
     }
@@ -185,8 +180,6 @@ const findaboutAll = async (req, res, next) => {
 
 export default {
     getListfromDB,
-    getMovieByCategory,
-    getMovieById,
     getAllMovie,
     getMovieList,
     create,

server/controllers/reservation.controller.js

@@ -3,7 +3,7 @@ import { Movie, Reservation, Theater } from '../db/index.js'
 import sequelize from 'sequelize'
 const { Op } = sequelize
 
-const findReservation = async (req, res) => {
+const findReservedSeats = async (req, res) => {
     const { timetable } = req.body
     try {
         const reservedSeats = await Reservation.findAll({
@@ -11,15 +11,41 @@ const findReservation = async (req, res) => {
                 timetable: timetable
             }
         })
-        console.log(reservedSeats)
         res.json(reservedSeats)
     } catch (error) {
         res.status(500).send(error.message || "이미 예매되어있는 좌석을 찾는 중 오류발생")
     }
 }
-
+const findReservation = async (req, res) => {
+    const { user } = req.body
+    try {
+        const reservation = await Reservation.findAll({
+            where: {
+                user: user
+            }
+        })
+        res.json(reservation)
+    } catch (error) {
+        res.status(500).send(error.message || "예매 내역들을 찾는 중 오류발생")
+    }
+}
+const findOneReservation = async (req, res) => {
+    const { userType, user } = req.body
+    try {
+        const reservation = await Reservation.findAll({
+            where: {
+                userType: userType,
+                user: user
+            },
+        })
+        console.log(reservation)
+        res.json(reservation)
+    } catch (error) {
+        res.status(500).send(error.message || "예매 내역을 찾는 중 오류 발생")
+    }
+}
 const saveReservation = async (req, res) => {
-    const { movieId, selectedTheater, timetable, payment,user, userType } = req.body
+    const { movieId, selectedTheater, timetable, payment, user, userType } = req.body
     const rows = req.body.selectedSeats.map(el => el.split('-')[0])
     const cols = req.body.selectedSeats.map(el => el.split('-')[1])
     try {
@@ -34,7 +60,6 @@ const saveReservation = async (req, res) => {
                 timetable: timetable,
                 payment: payment
             })
-            res.json(reservation)
         }
         const movie = await Movie.findOne({
             where: {
@@ -43,6 +68,7 @@ const saveReservation = async (req, res) => {
         })
         movie.ticket_sales++
         await movie.save();
+        res.json({ message: '200 OK' })
     } catch (error) {
         console.log(error)
         res.status(500).send(error.message || "예매DB에 저장 실패")
@@ -50,6 +76,8 @@ const saveReservation = async (req, res) => {
 }
 
 export default {
+    findReservedSeats,
     findReservation,
+    findOneReservation,
     saveReservation
 }
\ No newline at end of file