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>

app/api/payment/confirm/route.ts

@@ -28,7 +28,14 @@ export async function POST(request: NextRequest) {
     }
 
     // 2. 토스페이먼츠 서버 승인
+    // dev: TOSS_SECRET_KEY=test_sk_* (테스트 결제)
+    // prod: TOSS_SECRET_KEY=live_sk_* (실결제) — Vercel 환경변수에 설정
     const secretKey = process.env.TOSS_SECRET_KEY!;
+    const isTestKey = secretKey.startsWith('test_');
+    if (!isTestKey && process.env.NODE_ENV === 'development') {
+      // 실수로 live 키를 dev에서 쓰는 것 방지
+      console.warn('[Payment] WARNING: live Toss key detected in development!');
+    }
     const encoded = Buffer.from(`${secretKey}:`).toString('base64');
 
     const tossRes = await fetch('https://api.tosspayments.com/v1/payments/confirm', {

app/auth/callback/route.ts

@@ -6,15 +6,15 @@ export async function GET(request: Request) {
   const code = searchParams.get('code');
   const next = searchParams.get('next') ?? '/mypage';
 
-  // 프로덕션 기준 URL 결정
+  // 리다이렉트 기준 URL 결정
-  // 우선순위: NEXT_PUBLIC_SITE_URL > x-forwarded-host > origin
+  // - dev: 항상 현재 request의 origin (localhost) → NEXT_PUBLIC_SITE_URL 무시
+  // - prod: NEXT_PUBLIC_SITE_URL > x-forwarded-host (Vercel) > origin
   const siteUrl = process.env.NEXT_PUBLIC_SITE_URL;
   const forwardedHost = request.headers.get('x-forwarded-host');
-  const baseUrl =
+  const isDev = process.env.NODE_ENV === 'development';
-    siteUrl ??
+  const baseUrl = isDev
-    (process.env.NODE_ENV !== 'development' && forwardedHost
+    ? origin
-      ? `https://${forwardedHost}`
+    : (siteUrl ?? (forwardedHost ? `https://${forwardedHost}` : origin));
-      : origin);
 
   if (code) {
     const supabase = await createClient();

app/components/PaymentButton.tsx

@@ -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
+    <div style={{ display: 'inline-block', position: 'relative' }}>
-      onClick={handlePayment}
+      <button
-      disabled={loading}
+        onClick={handlePayment}
-      className={className}
+        disabled={loading}
-    >
+        className={className}
-      {loading ? '결제 처리 중...' : children}
+      >
-    </button>
+        {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>
   );
 }

app/login/page.tsx

@@ -60,8 +60,12 @@ function LoginForm() {
   };
 
   const handleGoogleLogin = async () => {
-    // NEXT_PUBLIC_SITE_URL 이 설정되어 있으면 우선 사용 (localhost 리다이렉트 방지)
+    // dev 환경에서는 NEXT_PUBLIC_SITE_URL을 무시하고 현재 브라우저 origin 사용
-    const base = process.env.NEXT_PUBLIC_SITE_URL ?? window.location.origin;
+    // (NEXT_PUBLIC_SITE_URL이 .env.local에 있어도 localhost로 콜백 돌아옴)
+    const base =
+      process.env.NODE_ENV === 'development'
+        ? window.location.origin
+        : (process.env.NEXT_PUBLIC_SITE_URL ?? window.location.origin);
     const { error } = await supabase.auth.signInWithOAuth({
       provider: 'google',
       options: { redirectTo: `${base}/auth/callback` },