Skip to content

Commit

Permalink
Merge pull request #48 from Spaces-Place/dusqo
Browse files Browse the repository at this point in the history 
수정중
  • Loading branch information
@KangYeonbae
KangYeonbae authored Dec 4, 2024
2 parents 2f23f9d + 3db4c3e commit 03a1bc4
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 93 deletions.
19 changes: 12 additions & 7 deletions src/pages/PaymentApproval.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div className="payment-approval">
<h2>결제 승인 중...</h2>
<p>잠시만 기다려주세요.</p>
<h2>결제가 완료되었습니다</h2>
<p>곧 창이 자동으로 닫힙니다.</p>
</div>
);
};
Expand Down
165 changes: 79 additions & 86 deletions src/pages/booking.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down

0 comments on commit 03a1bc4

Please sign in to comment.