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:
2026-03-22 17:33:43 +09:00
parent 3b4054e23e
commit de941442ae
4 changed files with 45 additions and 16 deletions

View File

@@ -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>
);
}