diff --git a/src/pages/PaymentApproval.js b/src/pages/PaymentApproval.js index 1afc126..fe587a5 100644 --- a/src/pages/PaymentApproval.js +++ b/src/pages/PaymentApproval.js @@ -6,23 +6,28 @@ const PaymentApproval = () => { const location = useLocation(); useEffect(() => { + // 부모 창이 존재하는 경우에만 실행 if (window.opener) { - const currentUrl = `${window.location.origin}/api/v1/payments${location.pathname}${location.search}`; + // 메시지 전송 window.opener.postMessage( { type: 'KAKAO_PAYMENT_SUCCESS', - url: currentUrl + url: window.location.href }, - window.location.origin + '*' ); - window.close(); + + // 잠시 후 창 닫기 (메시지가 확실히 전달되도록) + setTimeout(() => { + window.close(); + }, 500); } - }, [location]); + }, []); return (
-

결제 승인 중...

-

잠시만 기다려주세요.

+

결제가 완료되었습니다

+

곧 창이 자동으로 닫힙니다.

); }; diff --git a/src/pages/booking.js b/src/pages/booking.js index 504178a..cab89dd 100644 --- a/src/pages/booking.js +++ b/src/pages/booking.js @@ -40,99 +40,92 @@ export default function BookingForm() { } }; - const handleSubmit = async (e) => { - e.preventDefault(); - - if (step < 3) { - setStep(prev => prev + 1); - } - else if (step === 3) { - if (!bookingData.agreement) { - alert('예약 정책에 동의해주세요.'); - return; - } +// BookingForm.js +const handleSubmit = async (e) => { + e.preventDefault(); - try { - setPaymentProcessing(true); - if (bookingData.paymentMethod === 'kakao') { - const paymentData = usageUnit === 'DAY' - ? { - date: bookingData.date, - user_name: bookingData.name, - phone: bookingData.phone, - email: bookingData.email + if (step < 3) { + setStep(prev => prev + 1); + } + else if (step === 3) { + if (!bookingData.agreement) { + alert('예약 정책에 동의해주세요.'); + return; + } + + try { + setPaymentProcessing(true); + if (bookingData.paymentMethod === 'kakao') { + const paymentData = usageUnit === 'DAY' + ? { + date: bookingData.date, + user_name: bookingData.name, + phone: bookingData.phone, + email: bookingData.email + } + : { + start_time: bookingData.start_time, + end_time: bookingData.end_time, + user_name: bookingData.name, + phone: bookingData.phone, + email: bookingData.email + }; + + const response = await initiateKakaoPayment( + paymentData, + totalPrice, + bookingInfo.spaceId + ); + + if (response.next_redirect_pc_url) { + // 카카오페이 결제창 팝업으로 열기 + const width = 450; + const height = 650; + const left = window.screen.width / 2 - width / 2; + const top = window.screen.height / 2 - height / 2; + + // 결제 완료 후 처리를 위한 메시지 리스너 + const handleMessage = async (e) => { + if (e.data.type === 'KAKAO_PAYMENT_SUCCESS') { + const approvalUrl = e.data.url; + const urlParams = new URLSearchParams(new URL(approvalUrl).search); + const orderNumber = urlParams.get('order_number'); + const pgToken = urlParams.get('pg_token'); + + const result = await handlePaymentApproval(orderNumber, pgToken); + if (result.success) { + setStep(4); // 결제 성공 시 step 4로 이동 } - : { - start_time: bookingData.start_time, - end_time: bookingData.end_time, - user_name: bookingData.name, - phone: bookingData.phone, - email: bookingData.email - }; - - const response = await initiateKakaoPayment( - paymentData, - totalPrice, - bookingInfo.spaceId + } + }; + + window.addEventListener('message', handleMessage); + + const popup = window.open( + response.next_redirect_pc_url, + 'KakaoPay', + `width=${width},height=${height},left=${left},top=${top}` ); - - if (response.next_redirect_pc_url) { - // 팝업창 크기와 위치 설정 - const width = 450; - const height = 650; - const left = window.screen.width / 2 - width / 2; - const top = window.screen.height / 2 - height / 2; - - // approval_url에 대한 메시지 이벤트 리스너 추가 - window.addEventListener('message', async function(e) { - if (e.data.type === 'KAKAO_PAYMENT_SUCCESS') { - const approvalUrl = e.data.url; - try { - const urlParams = new URLSearchParams(new URL(approvalUrl).search); - const orderNumber = urlParams.get('order_number'); - const pgToken = urlParams.get('pg_token'); - - if (orderNumber && pgToken) { - const result = await handlePaymentApproval(orderNumber, pgToken); - if (result.success) { - setStep(4); - } else { - alert('결제 처리 중 오류가 발생했습니다.'); - } - } - } catch (error) { - console.error('Payment processing error:', error); - alert('결제 처리 중 오류가 발생했습니다.'); - } - } - }); - - // 팝업창 열기 - const popup = window.open( - response.next_redirect_pc_url, - 'KakaoPay', - `width=${width},height=${height},left=${left},top=${top}` - ); - - // 팝업 닫힘 감지 - const checkPopupClosed = setInterval(() => { - if (popup.closed) { - clearInterval(checkPopupClosed); - setPaymentProcessing(false); - } - }, 500); - } + + // 팝업 닫힘 감지 + const checkPopupClosed = setInterval(() => { + if (popup.closed) { + clearInterval(checkPopupClosed); + window.removeEventListener('message', handleMessage); + setPaymentProcessing(false); + } + }, 500); } - } catch (error) { - alert('결제 처리 중 오류가 발생했습니다.'); - console.error('Payment error:', error); - } finally { - setPaymentProcessing(false); } + } catch (error) { + alert('결제 처리 중 오류가 발생했습니다.'); + console.error('Payment error:', error); + setPaymentProcessing(false); } - }; + } +}; + - // 결제 상태 확인 함수 const checkPaymentStatus = async (tid) => {