병합

client/src/App.js

@@ -14,13 +14,14 @@ import AdminPage from "./pages/AdminPage/AdminPage";
 import TicketingPage from "./pages/TicketingPage";
 import TicketingSeatPage from './pages/TicketingSeatPage'
 import SearchPage from "./pages/SearchPage";
+import Payment from "./pages/PaymentPage";
 
 function App() {
 
   return (
     <div className="" style={{ backgroundColor: "black" }}>
       <AuthProvider>
-        <Router style={{ backgroundColor: "black" }}>
+        <Router>
           <SubNav />
           <Header />
           <MainNav />
@@ -33,6 +34,7 @@ function App() {
             <Route path="/mypage" component={MyPage} />
             <Route path="/ticket/seat" component={TicketingSeatPage} />
             <Route path="/ticket" component={TicketingPage} />
+            <Route path="/payment" component={Payment} />
             <Route path="/search" component={SearchPage} />
             <Route path="/admin" component={AdminPage} />
           </Switch>

client/src/apis/cinema.api.js

 import axios from "axios";
-import {baseUrl} from "../utils/baseUrl.js";
+import { baseUrl } from "../utils/baseUrl.js";
 
-const getInfo = async () => {
-    const { data } = await axios.get(`${baseUrl}/api/cinema`)
+const getCinemaInfo = async () => {
+    const { data } = await axios.get(`${baseUrl}/api/info/cinema`)
     return data
 }
 
-const edit = async (cinemaInfo) => {
-    const { data } = await axios.put(`${baseUrl}/api/cinema`, cinemaInfo)
+const editCinema = async (cinemaInfo) => {
+    const { data } = await axios.put(`${baseUrl}/api/info/cinema`, cinemaInfo)
+    return data
+}
+
+const getTicketFee = async () => {
+    const { data } = await axios.get(`${baseUrl}/api/info/ticketfee`)
+    return data
+}
+
+const getTicketFeeOne = async (theaterType) => {
+    const { data } = await axios.get(`${baseUrl}/api/info/ticketfee/${theaterType}`)
+    return data
+}
+
+const editTicketFee = async (ticketFeeInfo) => {
+    const { data } = await axios.put(`${baseUrl}/api/info/ticketfee`, ticketFeeInfo)
+    return data
+}
+
+const removeTicketFee = async (theaterType) => {
+    const { data } = await axios.delete(`${baseUrl}/api/info/ticketfee?theaterType=${theaterType}`)
     return data
 }
 
 const cinemaApi = {
-    getInfo,
-    edit
+    getCinemaInfo,
+    editCinema,
+    getTicketFee,
+    getTicketFeeOne,
+    editTicketFee,
+    removeTicketFee
 }
 
 export default cinemaApi
\ No newline at end of file

client/src/apis/movie.api.js

 import axios from "axios";
 import { baseUrl, TMDBUrl } from "../utils/baseUrl.js";
 
-
 const getAllfromTM = async () => {
     const payload = {
         params: {

client/src/components/Admin/CinemaEdit.js

-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
+import TicketEditForm from "./TicketEditForm.js";
+import TicketFeeTable from "./TicketFeeTable.js";
 import cinemaApi from "../../apis/cinema.api.js";
 import catchErrors from "../../utils/catchErrors.js";
 import styles from "./admin.module.scss";
 
 const INIT_CINEMAINFO = {
-    cinemaName: "", 
-    transportation: "", 
-    parking: "", 
-    address: "" 
+    cinemaName: "",
+    transportation: "",
+    parking: "",
+    address: "",
+    moreFeeInfo: ""
 }
 
 const CinemaEdit = () => {
     const [cinemaInfo, setCinemaInfo] = useState(INIT_CINEMAINFO)
+    const [ticketFee, setTicketFee] = useState({})
     const [error, setError] = useState("")
+    const formRef = useRef(null)
 
     useEffect(() => {
         getInfo()
@@ -26,7 +31,7 @@ const CinemaEdit = () => {
     async function getInfo() {
         try {
             setError("")
-            const info = await cinemaApi.getInfo()
+            const info = await cinemaApi.getCinemaInfo()
             if (info) setCinemaInfo(info)
             else setCinemaInfo(INIT_CINEMAINFO)
         } catch (error) {
@@ -37,7 +42,7 @@ const CinemaEdit = () => {
     async function handleSubmit() {
         try {
             setError("")
-            await cinemaApi.edit(cinemaInfo)
+            await cinemaApi.editCinema(cinemaInfo)
             window.location.reload()
         } catch (error) {
             catchErrors(error, setError)
@@ -65,6 +70,14 @@ const CinemaEdit = () => {
                 <span className="input-group-text" id="address"><i className="bi bi-geo-alt-fill"></i></span>
                 <input type="text" className={`form-control ${styles.shadowNone}`} id="address" name="address" value={cinemaInfo.address} onChange={handleChange} value={cinemaInfo.address} />
             </div>
+            <p className="mb-0">영화관람료 설정</p>
+            <p className="text-danger">*추가금액 정보를 입력바랍니다. 필요에 따라 기본가격 또한 변경 가능합니다.</p>
+            <TicketEditForm editFee={ticketFee} formRef={formRef} />
+            <TicketFeeTable setEditFee={setTicketFee} formRef={formRef} />
+            <div className="mb-3">
+                <label for="moreFeeInfo" className="form-label">관람료 추가정보</label>
+                <textarea className={`form-control ${styles.shadowNone} ${styles.textarea}`} rows="7" id="moreFeeInfo" name="moreFeeInfo" value={cinemaInfo.moreFeeInfo} onChange={handleChange}></textarea>
+            </div>
             <div className="d-grid gap-2 mb-5">
                 <button type="submit" className={`btn btn-dark shadow-none ${styles.customBtn}`} onClick={handleSubmit}>수정</button>
             </div>

client/src/components/Admin/TicketEditForm.js

+import { useState, useEffect } from "react";
+import cinemaApi from "../../apis/cinema.api.js";
+import catchErrors from "../../utils/catchErrors.js";
+import styles from "./admin.module.scss";
+
+const INIT_TICKETFEE = {
+    theaterType: "",
+    weekdays: "",
+    weekend: "",
+    morning: "",
+    day: "",
+    night: "",
+    youth: "",
+    adult: "",
+    senior: "",
+    defaultPrice: 5000
+}
+
+const TicketEditForm = ({ editFee, formRef }) => {
+    const [ticketFee, setTicketFee] = useState(INIT_TICKETFEE)
+    const [error, setError] = useState("")
+
+    useEffect(() => {
+        setTicketFee({ ...ticketFee, ...editFee })
+    }, [editFee])
+
+    function handleChange(e) {
+        const { name, value } = e.target
+        setTicketFee({ ...ticketFee, [name]: value })
+    }
+
+    async function handleSubmit(e) {
+        e.preventDefault()
+        try {
+            setError("")
+            await cinemaApi.editTicketFee(ticketFee)
+            alert("해당 관람료 정보 등록이 성공적으로 완료되었습니다.")
+            window.location.reload()
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
+    return (
+        <form ref={formRef} onSubmit={handleSubmit}>
+            <div className="d-flex row row-cols-2 mb-2 mb-md-3 gx-0 gy-2 gy-md-0">
+                <label for="theaterType" className="col-md-auto col-form-label text-center text-md-start">상영관 종류</label>
+                <div className="col-md-4 col-lg-3 mx-md-2">
+                    <input className={`form-control ${styles.shadowNone}`} type="text" id="theaterType" name="theaterType" value={ticketFee.theaterType} onChange={handleChange} />
+                </div>
+                <label for="defaultPrice" className="col-md-auto col-form-label text-center text-md-start">기본 가격</label>
+                <div className="col-md-3 col-lg-2 mx-md-2">
+                    <input className={`form-control ${styles.shadowNone}`} type="number" id="defaultPrice" name="defaultPrice" value={ticketFee.defaultPrice} onChange={handleChange} />
+                </div>
+            </div>
+            <div className="d-flex row row-cols-2 mb-2 mb-md-3 gx-0 gy-2 gy-md-0">
+                <label for="weekdays" className="col-md-1 col-form-label text-center text-md-start">주중</label>
+                <div className="col-md-3 col-lg-2">
+                    <input className={`form-control ${styles.shadowNone}`} type="number" id="weekdays" name="weekdays" value={ticketFee.weekdays} onChange={handleChange} />
+                </div>
+                <label for="weekend" className="col-md-1 col-form-label text-center">주말</label>
+                <div className="col-md-3 col-lg-2">
+                    <input className={`form-control ${styles.shadowNone}`} type="number" id="weekend" name="weekend" value={ticketFee.weekend} onChange={handleChange} />
+                </div>
+            </div>
+            <div className="d-flex row row-cols-2 mb-2 mb-md-3 gx-0 gy-2 gy-md-0">
+                <label for="morning" className="col-md-1 col-form-label text-center text-md-start">조조</label>
+                <div className="col-md-3 col-lg-2">
+                    <input className={`form-control ${styles.shadowNone}`} type="number" id="morning" name="morning" value={ticketFee.morning} onChange={handleChange} />
+                </div>
+                <label for="day" className="col-md-1 col-form-label text-center">일반</label>
+                <div className="col-md-3 col-lg-2">
+                    <input className={`form-control ${styles.shadowNone}`} type="number" id="day" name="day" value={ticketFee.day} onChange={handleChange} />
+                </div>
+                <label for="night" className="col-md-1 col-form-label text-center">심야</label>
+                <div className="col-md-3 col-lg-2">
+                    <input className={`form-control ${styles.shadowNone}`} type="number" id="night" name="night" value={ticketFee.night} onChange={handleChange} />
+                </div>
+            </div>
+            <div className="d-flex row row-cols-2 flex-wrap flex-lg-nowrap mb-2 mb-md-3 gx-0 gy-2 gy-md-0">
+                <label for="youth" className="col-md-1 col-form-label text-center text-md-start">청소년</label>
+                <div className="col-md-3 col-lg-2">
+                    <input className={`form-control ${styles.shadowNone}`} type="number" id="youth" name="youth" value={ticketFee.youth} onChange={handleChange} />
+                </div>
+                <label for="adult" className="col-md-1 col-form-label text-center">일반</label>
+                <div className="col-md-3 col-lg-2">
+                    <input className={`form-control ${styles.shadowNone}`} type="number" id="adult" name="adult" value={ticketFee.adult} onChange={handleChange} />
+                </div>
+                <label for="senior" className="col-md-1 col-form-label text-center">경로</label>
+                <div className="col-md-3 col-lg-2">
+                    <input className={`form-control ${styles.shadowNone}`} type="number" id="senior" name="senior" value={ticketFee.senior} onChange={handleChange} />
+                </div>
+                <div className="col-12 col-md-2 col-lg-1 ms-lg-auto mt-md-2 mt-lg-0">
+                    <button type="submit" className={`btn btn-dark w-100 ${styles.customBtn}`}>추가</button>
+                </div>
+            </div>
+        </form>
+    )
+}
+
+export default TicketEditForm
\ No newline at end of file

client/src/components/Admin/TicketFeeTable.js

+import { useState, useEffect } from "react";
+import cinemaApi from "../../apis/cinema.api.js";
+import catchErrors from "../../utils/catchErrors.js";
+import styles from "./admin.module.scss";
+
+const TicketFeeTable = ({ setEditFee, formRef }) => {
+    const [ticketFee, setTicketFee] = useState([])
+    const [error, setError] = useState("")
+
+    useEffect(() => {
+        getInfo()
+    }, [])
+
+    async function getInfo() {
+        const res = await cinemaApi.getTicketFee()
+        setTicketFee(res)
+    }
+
+    async function editRow(theaterType) {
+        try {
+            setError("")
+            const res = await cinemaApi.getTicketFeeOne(theaterType)
+            setEditFee({ ...res })
+            formRef?.current.scrollIntoView({ behavior: "smooth", block: "center" })
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
+    async function deleteData(theaterType) {
+        try {
+            setError("")
+            await cinemaApi.removeTicketFee(theaterType)
+            alert("해당 관람료 정보를 성공적으로 삭제했습니다.")
+            getInfo()
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
+    function priceToString(price) {
+        return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    }
+
+    return (
+        <table className={`table caption-top text-center align-middle ${styles.tableForm}`}>
+            <caption className="text-dark">영화관람료 안내</caption>
+            <thead className={`table-dark align-middle ${styles.dNone}`}>
+                <tr>
+                    <th className={styles.word}>상영관 종류</th>
+                    <th>주중 / 주말</th>
+                    <th>시간대</th>
+                    <th>청소년</th>
+                    <th>일반</th>
+                    <th>경로</th>
+                    <th style={{ width: "14%" }}></th>
+                </tr>
+            </thead>
+            <tbody>
+                {ticketFee.length !== 0 ? ticketFee.map(info =>
+                    <>
+                        <tr>
+                            <td rowSpan="6" className={`d-block d-md-table-cell ${styles.Row} ${styles.type}`}>{info.theaterType}</td>
+                            <td rowSpan="3" className={`d-block d-md-table-cell ${styles.Row} ${styles.moreData}`} data-label="- 청소년 / 성인 / 경로">주중(월~목)</td>
+                            <td className="d-inline-block d-md-table-cell">조조 (06:00 ~ )</td>
+                            <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.morning + info.youth + info.defaultPrice)}원</td>
+                            <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.morning + info.adult + info.defaultPrice)}원</td>
+                            <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.morning + info.senior + info.defaultPrice)}원</td>
+                            <td rowSpan="6" className="d-none d-md-table-cell">
+                                <div className="d-flex flex-column">
+                                    <button type="button" className="btn btn-primary my-1" onClick={() => editRow(info.theaterType)}>수정</button>
+                                    <button type="button" className="btn btn-danger my-1" onClick={() => deleteData(info.theaterType)}>삭제</button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td className="d-inline-block d-md-table-cell">일반 (11:00 ~ )</td>
+                            <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.day + info.youth + info.defaultPrice)}원</td>
+                            <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.day + info.adult + info.defaultPrice)}원</td>
+                            <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.day + info.senior + info.defaultPrice)}원</td>
+                        </tr>
+                        <tr>
+                            <td className="d-inline-block d-md-table-cell">심야 (00:00 ~ )</td>
+                            <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.night + info.youth + info.defaultPrice)}원</td>
+                            <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.night + info.adult + info.defaultPrice)}원</td>
+                            <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.night + info.senior + info.defaultPrice)}원</td>
+                        </tr>
+                        <tr>
+                            <td rowSpan="3" className={`d-block d-md-table-cell ${styles.Row} ${styles.moreData} ${styles.word}`} data-label="- 청소년 / 성인 / 경로">주말(금~일) 및 공휴일</td>
+                            <td className="d-inline-block d-md-table-cell">조조 (06:00 ~ )</td>
+                            <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.morning + info.youth + info.defaultPrice)}원</td>
+                            <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.morning + info.adult + info.defaultPrice)}원</td>
+                            <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.morning + info.senior + info.defaultPrice)}원</td>
+                        </tr>
+                        <tr>
+                            <td className="d-inline-block d-md-table-cell">일반 (11:00 ~ )</td>
+                            <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.day + info.youth + info.defaultPrice)}원</td>
+                            <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.day + info.adult + info.defaultPrice)}원</td>
+                            <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.day + info.senior + info.defaultPrice)}원</td>
+                        </tr>
+                        <tr className={styles.Row}>
+                            <td className="d-inline-block d-md-table-cell">심야 (00:00 ~ )</td>
+                            <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.night + info.youth + info.defaultPrice)}원</td>
+                            <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.night + info.adult + info.defaultPrice)}원</td>
+                            <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.night + info.senior + info.defaultPrice)}원</td>
+                            <td className={`d-block d-md-none ${styles.borderTop}`}>
+                                <div className="d-flex justify-content-end">
+                                    <button type="button" className="btn btn-primary" onClick={() => editRow(info.theaterType)}>수정</button>
+                                    <button type="button" className="btn btn-danger ms-2" onClick={() => deleteData(info.theaterType)}>삭제</button>
+                                </div>
+                            </td>
+                        </tr>
+                    </>)
+                    : <tr>
+                        <td colSpan="7">등록된 관람료 관련 정보가 없습니다.</td>
+                    </tr>}
+            </tbody>
+        </table>
+    )
+}
+
+export default TicketFeeTable
\ No newline at end of file

client/src/components/Admin/admin.module.scss

-@media screen and (max-width: 768px) {
+@media screen and (max-width: 767px) {
     .box {
         margin-bottom: 100px;
 
@@ -14,6 +14,38 @@
             z-index: 10;
         }
     }
+
+    .tableForm {
+        border-top: 2px solid;
+
+        & .dNone {
+            display: none;
+            border: 0;
+        }
+
+        & .Row {
+            border-bottom: 2px solid;
+        }
+
+        & .type {
+            font-size: 1.2rem;
+            background-color: #000;
+            color: #fff;
+        }
+
+        & .borderTop {
+            border-top: 1px solid;
+        }
+
+        & .moreData::after {
+            content: attr(data-label);
+            margin-left: 1em;
+        }
+    }
+}
+
+.word {
+    word-break: keep-all;
 }
 
 .shadowNone {

client/src/components/CountButton.js

@@ -12,7 +12,7 @@ const CountButton = (props) => {
         }
     }
     return (
-        <span className="">
+        <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>
@@ -20,7 +20,7 @@ const CountButton = (props) => {
             <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>
-        </span>
+        </div>
     )
 }
 

client/src/components/Kakaopay.js

+import axios from 'axios'
+
+const Kakaopay = (props) => {
+    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: props.ticketInfo.title,
+                quantity: props.ticketInfo.teenager+props.ticketInfo.adult+props.ticketInfo.elderly,
+                total_amount: props.ticketInfo.teenager * 7000 + props.ticketInfo.adult * 8000 + props.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" />
+            </button>
+        </>
+    )
+}
+
+export default Kakaopay
\ No newline at end of file

client/src/components/MovieTable/MovieTable.js

@@ -31,7 +31,7 @@ const MovieTable = ({ movieList }) => {
     }
 
     return (
-        <table style={{ color:"white" }} className={`table text-center align-middle ${styles.tableForm}`}>
+        <table className={`table text-center align-middle ${styles.tableForm}`}>
             <thead className={`table-dark ${styles.dNone}`}>
                 <tr>
                     <th className="col-md-5">제목</th>

client/src/components/MovieTable/movie-table.module.scss

@@ -9,7 +9,7 @@
     word-break: keep-all;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 767px) {
     .tableForm {
         border-top: 2px solid;
 

client/src/components/Navs/SubNav.js

@@ -6,10 +6,9 @@ const SubNav = () => {
     return (
         <>  {(user) ?
             <nav className="nav justify-content-end py-1">
-                {(user.role === "member") 
-                ? <><Link className="nav-link text-white" to="/mypage">마이페이지</Link>
-                </>
-                : <Link className="nav-link text-white" to="/admin">관리자페이지</Link>}
+                {(user.role === "member")
+                    ? <Link className="nav-link text-white" to="/mypage">마이페이지</Link>
+                    : <Link className="nav-link text-white" to="/admin">관리자페이지</Link>}
                 <Link className="nav-link text-white" to="/" onClick={logout}>로그아웃 </Link>
             </nav> :
             <nav className="nav justify-content-end py-1">

client/src/pages/MoviePage.js

@@ -9,7 +9,7 @@ const MoviePage = ({ location }) => {
         stillCuts: [],
         cast: "",
         director: "",
-        genres: [],
+        // genres: [],
         attendance: ""
     })
     const [state, setState] = useState(0)
@@ -27,15 +27,15 @@ const MoviePage = ({ location }) => {
             const casts = castsInfo.reduce((acc, cur, idx) => {
                 if (idx !== 0) return acc + ', ' + cur
                 else return acc + cur
-            },"")
+            }, "")
             console.log(castsInfo)
             const directorsInfo = await credits.crew.filter(element => element.job === "Director")
             const directors = directorsInfo.reduce((acc, cur, idx) => {
                 if (idx !== 0) return acc + ', ' + cur.name
                 else return acc + cur.name
-            },"")
+            }, "")
 
-            console.log("directorInfo=",directorsInfo)
+            console.log("directorInfo=", directorsInfo)
             setMovieInfo({
                 ...movieInfo,
                 stillCuts: still,
@@ -81,7 +81,10 @@ const MoviePage = ({ location }) => {
                     <p>예매율: 0% 누적관객수: {movieInfo.attendance}명</p>
                     <p>감독: {movieInfo.director}</p>
                     <p>출연: {movieInfo.cast}</p>
-                    <p>장르: {movieInfo.genres.map(e => e)}</p>
+                    <p>장르: {movieInfo.genres.reduce((acc, cur, idx) => {
+                        if (idx !== 0) return acc + ', ' + cur.name
+                        else return acc + cur.name
+                    }, "")}</p>
                     <p>개봉일:{movieInfo.release_date}</p>
                     <div className="text-end">
                         <Link to={{

client/src/pages/PaymentPage.js

+import axios from 'axios'
+import { useState } from 'react'
+import Kakaopay from '../components/Kakaopay'
+
+const Payment = ({ location }) => {
+    const [ticketInfo, setTicketInfo] = useState({ ...location.state })
+
+    async function SendMail(e) {
+        try {
+            const response = await axios.post('/api/email/send',{
+                email:e.target.name
+            })
+            console.log(response.data)
+        } catch (error) {
+            console.log(error)
+        }
+    }
+
+    return (
+        <div className="container" style={{ color: "white" }}>
+            {console.log(ticketInfo)}
+            <div className="row justify-content-center my-5">
+                <div className="col-sm-4 mb-3 ">
+                    <h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>결제하기</h3>
+                </div>
+            </div>
+            <div className="row justify-content-center">
+                <div className="col-sm-8 text-center">
+                    <h5 className="mb-3">결제방법</h5>
+                    <img src="/images/naverpay_button.png"  />
+                    <Kakaopay ticketInfo={ticketInfo} setTicketInfo={setTicketInfo} />
+                </div>
+                <div className="col-sm-4 p-3 text-center rounded-3" style={{ backgroundColor: "#252525" }}>
+                    <img style={{ maxHeight: "10rem" }} src={`https://image.tmdb.org/t/p/original${ticketInfo.poster_path}`} alt="영화포스터" />
+                    <h5 className="my-3">{ticketInfo.title}</h5>
+                    <div>{ticketInfo.theater}</div>
+                    <div>{ticketInfo.time}</div>
+                    <div className="mb-3">{ticketInfo.selectedCinemaNum}관 {ticketInfo.selectedSeats}</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>
+                </div>
+            </div>
+            <div>
+                <button type="button" name="jiwon5393@naver.com" onClick={SendMail}>메일발송</button>
+            </div>
+        </div>
+    )
+}
+
+export default Payment
\ No newline at end of file

client/src/pages/TicketingPage.js

@@ -9,8 +9,8 @@ const TicketingPage = ({ location }) => {
     const [ticketInfo, setTicketInfo] = useState({
         ...location.state,
         theater:"",
-        selectedCinemaNum: 0,
-        time: {}
+        selectedCinemaNum: 3,
+        time: "2021/07/21 10:00"
     })
     const [theaterInfo, setTheaterInfo] = useState({
         theater: ["Butter Studio 조치원"],
@@ -62,8 +62,8 @@ const TicketingPage = ({ location }) => {
                         ? <ul>
                             <li>영화: {movieInfo.title}</li>
                             <li>극장: {ticketInfo.theater}</li>
-                            <li>일시: </li>
-                            <li>상영관: </li>
+                            <li>일시: {ticketInfo.time}</li>
+                            <li>상영관: {ticketInfo.selectedCinemaNum}</li>
                         </ul>
                         : <div></div>}
                 </div>

client/src/pages/TicketingSeatPage.js

@@ -22,25 +22,33 @@ const TicketingSeatPage = ({ location }) => {
             </div>
             <div className="row justify-content-center my-3">
                 <div className="col-sm-6 mb-4 text-center">
-                    <ul className="mr-2" style={{ listStyle: 'none' }}>
-                        <li>
-                            <span className="">일반</span>
-                            <CountButton name="adult" count={count} setCount={setCount} />
-                        </li>
-                        <li>
-                            <span className="">청소년</span>
-                            <CountButton name="teenager" count={count} setCount={setCount} />
-                        </li>
-                        <li>
-                            <span className="">경로우대</span>
-                            <CountButton name="elderly" count={count} setCount={setCount} />
-                        </li>
-                    </ul>
+                    <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">
+                        <CountButton name="adult" count={count} setCount={setCount} />
+                        <CountButton name="teenager" count={count} setCount={setCount} />
+                        <CountButton name="elderly" count={count} setCount={setCount} />
+                    </div>
+                    </div>
+                    {/* <span className="">일반</span>
+                    <CountButton name="adult" count={count} setCount={setCount} />
+
+                    <span className="">청소년</span>
+                    <CountButton name="teenager" count={count} setCount={setCount} />
+
+                    <span className="">경로우대</span>
+                    <CountButton name="elderly" count={count} setCount={setCount} /> */}
+
                 </div>
                 <div className="col-sm-6 mb-4 p-2 text-center" style={{ backgroundColor: '#252525' }}>
-                    <div>{ticketInfo.theater} | 3관</div>
+                    <div>{ticketInfo.theater} | {ticketInfo.selectedCinemaNum}관</div>
                     <div>{ticketInfo.title}</div>
-                    <div>2021/07/21 10:00 ~ 11:30</div>
+                    <div>{ticketInfo.time}</div>
                 </div>
             </div>
             <div className="row justify-content-center border p-5 ">
@@ -52,7 +60,7 @@ const TicketingSeatPage = ({ location }) => {
                     <p>선택불가</p>
                 </div>
             </div>
-            <div className="row p-3 my-5" style={{ backgroundColor: "#252525" }}>
+            <div className="row p-3 mt-5" style={{ backgroundColor: "#252525" }}>
                 <div className="col-sm-3 border-end text-center">
                     {ticketInfo
                         ? <img style={{ maxHeight: "10rem" }} src={`https://image.tmdb.org/t/p/original${ticketInfo.poster_path}`} alt="영화포스터" />
@@ -76,7 +84,7 @@ const TicketingSeatPage = ({ location }) => {
                         ?
                         <Link to={{
                             pathname: `/payment`,
-                            state: { }
+                            state: { ...ticketInfo, selectedSeats: selectedSeats, ...count }
                         }}>
                             <img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" alt="예매하기" />
                         </Link>