import axios from 'axios' import { useEffect, useState } from 'react' import { useHistory } from 'react-router-dom' import reservationApi from '../../apis/reservation.api' import { useAuth } from '../../context/auth_context' import catchErrors from '../../utils/catchErrors' import styles from './PaymentPage.module.scss' const Payment = ({ location }) => { const history = useHistory(); const { user } = useAuth() const [guestInfo, setGuestInfo] = useState({}) const [guestID, setGuestID] = useState() const [userInfo, setUserInfo] = useState({ nickname: "", email: "", birth: "", phoneNumber: "" }) const [ticketInfo, setTicketInfo] = useState({ ...location.state }) const [element, setElement] = useState() const [error, setError] = useState("") useEffect(() => { console.log(user.id) if (user.role === "member") { getUserInfo() } }, []) async function getUserInfo() { try { const response = await axios.post(`/api/auth/getuserinfo`, { id: user.id }) console.log(response.data) setUserInfo(response.data) } catch (error) { catchErrors(error, setError) } } function handleChangeGuest(e) { setGuestInfo({ ...guestInfo, [e.target.name]: String(e.target.value) }) } async function handleClickGuest() { try { const response = await reservationApi.save({ ...guestInfo }); setGuestID(response.data.id); alert("비회원 정보가 저장되었습니다."); } catch (error) { catchErrors(error, setError) } } function kakaoBtnClick() { setElement(

'카카오페이'

를 선택하셨습니다.

결제하기를 눌러 결제를 이어가주세요.

) setTicketInfo({ ...ticketInfo, payment: "카카오페이" }) } async function reservationComplete() { try { if (user.role === "member") { const response = await reservationApi.save({ userType: "member", // payment: "카카오페이", user: userInfo.id, ...ticketInfo, timetable: 1 }) const responsekakao = await axios.post('/api/kakaopay/test/single', { cid: 'TC0ONETIME', partner_order_id: 'butter_studio', partner_user_id: '000000'+ (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', }) if (response && responsekakao) { window.location.href = responsekakao.data.redirect_url } } else { if (guestID) { const response = await reservationApi.save({ userType: "guest", user: guestID, ...ticketInfo, // payment: "카카오페이", timetable: 1 }) const responsekakao = await axios.post('/api/kakaopay/test/single', { cid: 'TC0ONETIME', partner_order_id: 'butter_studio', partner_user_id: '000000'+ guestID, 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', }) if (response && responsekakao) { localStorage.setItem('tid',responsekakao.data.tid) window.location.href = responsekakao.data.redirect_url } } else { alert("비회원 정보를 모두 입력 후 비회원 정보 저장 버튼을 눌러주세요.") } } } catch (error) { catchErrors(error, setError) } } return (
{console.log(ticketInfo)} {/* {console.log(userInfo)} */} {/* {console.log(guestInfo)} */}

결제하기

{user.role === "member" ?
회원정보

※ 회원정보 변경은 마이페이지에서 가능합니다.

:
비회원예매 정보입력

※ 비회원 정보 오기입 시 예매 내역 확인/취소 및 티켓 발권이 어려울 수 있으니 다시 한번 확인해 주시기 바랍니다.

}
결제방법
{element}
영화포스터
{ticketInfo.title}
{ticketInfo.cinema}
{ticketInfo.time}
{ticketInfo.selectedTheater}관 {ticketInfo.selectedSeats.map(el => String.fromCharCode(parseInt(el.split('-')[0]) + 65) + el.split('-')[1]) + ' '}
성인: {ticketInfo.adult}명
청소년: {ticketInfo.youth}명
경로우대: {ticketInfo.senior}명
총 결제금액: {ticketInfo.totalFee}원
) } export default Payment