ANTOOZA-FRONTEND/app/charge/fail/page.tsx

'use client';

import '../style.scss';
import { useSearchParams } from 'next/navigation';

// 토스 SDK 에러 코드 → 사용자 친화 안내 (미매핑 코드는 토스가 전달한 message 사용)
const CODE_MESSAGES: Record<string, string> = {
	PAY_PROCESS_CANCELED: '결제를 취소했습니다.',
	PAY_PROCESS_ABORTED: '결제가 중단되었습니다. 다시 시도해주세요.',
	REJECT_CARD_COMPANY: '카드사에서 결제를 거절했습니다. 다른 결제수단을 이용해주세요.',
	USER_CANCEL: '결제를 취소했습니다.'
};

export default function ChargeFailPage()
{
	const searchParams = useSearchParams();
	const code = searchParams.get('code') || '';
	const rawMessage = searchParams.get('message') || '';
	const message = CODE_MESSAGES[code] || rawMessage || '결제가 취소되었거나 실패했습니다.';

	const handleRetry = () => {
		window.location.href = '/charge';
	};

	const handleClose = () => {
		if (window.opener) {
			window.close();
		} else {
			window.location.href = '/';
		}
	};

	return (
		<div className="charge-page">
			<div className="charge-page__card">
				<div className="charge-page__result">
					<div className="charge-page__result-icon charge-page__result-icon--error">✕</div>
					<p className="charge-page__result-message">{message}</p>
					{code && <p className="charge-page__result-code">오류 코드: {code}</p>}
					<button type="button" className="charge-page__submit" onClick={handleRetry}>
						다시 충전하기
					</button>
					<button type="button" className="charge-page__reset" onClick={handleClose}>
						닫기
					</button>
				</div>
			</div>
		</div>
	);
}