'use client'; import { useState, useEffect, useRef, useCallback } from 'react'; import Link from 'next/link'; import { createClient } from '@/lib/supabase/client'; // 계좌이체 구매 모달. // - 열릴 때 세션 확인 → 미로그인이면 로그인 유도(구매 폼 미노출) // - 로그인 상태: 입금자명 + 약관 동의 → POST /api/orders // - 주문 금액은 서버가 DB price로 확정한다. 아래 표시 금액은 안내용일 뿐이다. // 접근성: role="dialog" aria-modal, Esc/backdrop 닫기, TopNav 드로어 패턴 차용. const KOR_TIGHT = { letterSpacing: '-0.02em' } as const; const KOR_BODY = { letterSpacing: '-0.01em' } as const; const BANK = { name: '케이뱅크', account: '100-116-337157', holder: '박재오' }; interface Props { product: { id: string; name: string; price: number }; isOpen: boolean; onClose: () => void; } type AuthState = 'checking' | 'guest' | 'user'; interface SuccessInfo { orderId: string; depositorName: string; reused: boolean; } export default function BankTransferModal({ product, isOpen, onClose }: Props) { const [authState, setAuthState] = useState('checking'); const [depositorName, setDepositorName] = useState(''); const [agreed, setAgreed] = useState(false); const [submitting, setSubmitting] = useState(false); const [error, setError] = useState(''); const [success, setSuccess] = useState(null); const closeBtnRef = useRef(null); const priceLabel = `₩${product.price.toLocaleString('ko-KR')}`; const loginHref = `/login?next=${encodeURIComponent(`/products/${product.id}`)}`; // 열릴 때마다 상태 초기화 + 세션 확인 useEffect(() => { if (!isOpen) return; let mounted = true; setAuthState('checking'); setDepositorName(''); setAgreed(false); setSubmitting(false); setError(''); setSuccess(null); const supabase = createClient(); supabase.auth .getSession() .then(({ data }) => { if (mounted) setAuthState(data.session?.user ? 'user' : 'guest'); }) .catch(() => { if (mounted) setAuthState('guest'); }); return () => { mounted = false; }; }, [isOpen]); // Esc 닫기 + body 스크롤 잠금 useEffect(() => { if (!isOpen) return; const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); const prevOverflow = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = prevOverflow; }; }, [isOpen, onClose]); // 초기 포커스: 모달 열릴 때 닫기 버튼으로 포커스 이동 useEffect(() => { if (isOpen) closeBtnRef.current?.focus(); }, [isOpen]); const handleSubmit = useCallback( async (e: React.FormEvent) => { e.preventDefault(); const name = depositorName.trim(); if (!name || !agreed || submitting) return; setSubmitting(true); setError(''); try { const res = await fetch('/api/orders', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ productId: product.id, depositorName: name }), }); const data = await res.json().catch(() => ({})); if (!res.ok) { if (res.status === 401) { setSubmitting(false); setAuthState('guest'); return; } setError(data?.error || '주문 처리 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.'); setSubmitting(false); return; } setSuccess({ orderId: data.orderId as string, depositorName: name, reused: Boolean(data.reused), }); } catch { setError('네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요.'); } finally { setSubmitting(false); } }, [depositorName, agreed, submitting, product.id], ); if (!isOpen) return null; const canSubmit = depositorName.trim().length > 0 && agreed && !submitting; return (

); }