fix: dev/prod 환경 분리 — Google OAuth 리다이렉트 + TossPayments 키 구분
[Google OAuth] - login/page.tsx: NODE_ENV=development일 때 NEXT_PUBLIC_SITE_URL 무시하고 window.location.origin(localhost) 사용 - auth/callback/route.ts: dev에서는 항상 request origin 사용하도록 수정 (이전: siteUrl이 없을 때만 origin 사용 → dev이면 무조건 origin) [TossPayments] - confirm/route.ts: 실수로 dev에서 live 키 사용 시 console.warn 추가 - PaymentButton.tsx: NEXT_PUBLIC_TOSS_CLIENT_KEY가 test_ck_* 이면 버튼 우상단에 TEST 배지 표시 (dev 확인용) [환경변수 구조] - dev (.env.local): test_ck_*, test_sk_* → 테스트 결제 (실청구 없음) - prod (Vercel ENV): live_ck_*, live_sk_* → 실결제 - 코드 변경 없이 같은 변수명으로 환경별 키만 다르게 설정 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -47,6 +47,8 @@ export default function PaymentButton({ productId, className, children, returnUr
|
||||
if (orderError) throw new Error('주문 생성 실패: ' + orderError.message);
|
||||
|
||||
// 4. 토스페이먼츠 결제창 호출
|
||||
// dev: NEXT_PUBLIC_TOSS_CLIENT_KEY=test_ck_* → 테스트 결제 (실제 청구 없음)
|
||||
// prod: NEXT_PUBLIC_TOSS_CLIENT_KEY=live_ck_* → 실결제 (Vercel 환경변수에 설정)
|
||||
const { loadTossPayments } = await import('@tosspayments/tosspayments-sdk');
|
||||
const clientKey = process.env.NEXT_PUBLIC_TOSS_CLIENT_KEY!;
|
||||
const tossPayments = await loadTossPayments(clientKey);
|
||||
@@ -81,13 +83,29 @@ export default function PaymentButton({ productId, className, children, returnUr
|
||||
|
||||
if (!product) return null;
|
||||
|
||||
const isTestMode = process.env.NEXT_PUBLIC_TOSS_CLIENT_KEY?.startsWith('test_');
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={handlePayment}
|
||||
disabled={loading}
|
||||
className={className}
|
||||
>
|
||||
{loading ? '결제 처리 중...' : children}
|
||||
</button>
|
||||
<div style={{ display: 'inline-block', position: 'relative' }}>
|
||||
<button
|
||||
onClick={handlePayment}
|
||||
disabled={loading}
|
||||
className={className}
|
||||
>
|
||||
{loading ? '결제 처리 중...' : children}
|
||||
</button>
|
||||
{/* dev/test 환경에서만 표시되는 배지 — 실수로 실결제 누르는 것 방지 */}
|
||||
{isTestMode && (
|
||||
<span style={{
|
||||
position: 'absolute', top: -8, right: -8,
|
||||
background: '#f59e0b', color: '#fff',
|
||||
fontSize: 9, fontWeight: 800, letterSpacing: '0.05em',
|
||||
padding: '2px 6px', borderRadius: 4,
|
||||
pointerEvents: 'none', userSelect: 'none',
|
||||
}}>
|
||||
TEST
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user