dpot-frontend/app/charge/success/page.tsx

'use client';

import '../style.scss';
import { useEffect, useRef, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { fetchApi, getDateTime } from '@/lib/utils/client';
import { DanalConfirmRequest } from '@/types/request/payment/charge';
import { DanalConfirmResponse } from '@/types/response/payment/charge';

const METHOD_LABELS: Record<string, string> = {
	CARD: '신용카드',
	KAKAOPAY: '카카오페이',
	NAVERPAY: '네이버페이',
	TRANSFER: '계좌이체',
	MOBILE: '휴대폰',
	VIRTUAL_ACCOUNT: '가상계좌'
};

export default function ChargeSuccessPage()
{
	const searchParams = useSearchParams();
	const [status, setStatus] = useState<'loading'|'success'|'error'>('loading');
	const [message, setMessage] = useState('결제 승인 처리 중...');
	const [pointAmount, setPointAmount] = useState<number>(0);
	const [paidAt, setPaidAt] = useState<string|null>(null);
	const calledRef = useRef(false);

	useEffect(() => {
		if (calledRef.current) {
			return;
		}

		calledRef.current = true;
		confirmPayment();

	}, []);

	const confirmPayment = async () => {
		const orderID = searchParams.get('orderId');
		const transactionID = searchParams.get('transactionId');
		const method = searchParams.get('method');

		if (!orderID || !transactionID || !method) {
			setStatus('error');
			setMessage('결제 정보가 올바르지 않습니다.');
			return;
		}

		try {
			const res = await fetchApi<DanalConfirmResponse>('/api/payment/confirm', {
				method: 'POST',
				body: { orderID, transactionID, method } as DanalConfirmRequest
			});

			if (res.success && res.data) {
				setPointAmount(res.data.pointAmount);
				setPaidAt(res.data.paidAt);
				setStatus('success');
				setMessage('포인트 충전 완료');

				if (window.opener) {
					window.opener.postMessage({ type: 'CHARGE_COMPLETE' }, '*');
				}
			} else {
				setStatus('error');
				setMessage(res.message || '결제 승인에 실패했습니다.');
			}
		} catch {
			setStatus('error');
			setMessage('결제 승인 중 오류가 발생했습니다.');
		}
	};

	const method = searchParams.get('method') ?? '';
	const methodLabel = METHOD_LABELS[method] ?? method;

	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">
					{status === 'loading' && <div className="charge-page__spinner" />}
					{status === 'success' && <div className="charge-page__result-icon charge-page__result-icon--success">✓</div>}
					{status === 'error' && <div className="charge-page__result-icon charge-page__result-icon--error">✕</div>}
					<p className="charge-page__result-message">{message}</p>

					{status === 'success' && (
						<div className="charge-page__receipt">
							<div className="charge-page__receipt-row">
								<span>결제 금액</span>
								<span>{pointAmount.toLocaleString()} 원</span>
							</div>
							<div className="charge-page__receipt-row">
								<span>결제 수단</span>
								<span>{methodLabel}</span>
							</div>
							<div className="charge-page__receipt-row">
								<span>결제 일시</span>
								<span>{getDateTime(paidAt)}</span>
							</div>
						</div>
					)}

					{status !== 'loading' && (
						<button type="button" className="charge-page__submit" onClick={handleClose}>
							닫기
						</button>
					)}
				</div>
			</div>
		</div>
	);
}