feat: 포트원 V2 결제 마이그레이션 + 법적 페이지 추가 (PG 심사용)

- 토스페이먼츠 SDK → 포트원 V2 (@portone/browser-sdk) 전환
- 4채널 결제수단 선택 UI: 카드(KPN)/카카오페이/네이버페이/토스페이
- 서버 결제 검증 API를 포트원 V2 조회 방식으로 변경
- 이용약관(/legal/terms), 개인정보처리방침(/legal/privacy), 환불정책(/legal/refund) 페이지 생성
- 푸터에 법적 페이지 링크 추가

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/components/DashboardShell.tsx

@@ -55,6 +55,11 @@ export default function DashboardShell({ children }: { children: React.ReactNode
                 <span>전화: 010-3907-1392</span>
                 <span>이메일: bgg8988@gmail.com</span>
               </div>
+              <div className="flex flex-wrap gap-x-3 mt-3">
+                <a href="/legal/terms" className="text-slate-400 hover:text-[#1a56db] transition underline underline-offset-2">이용약관</a>
+                <a href="/legal/privacy" className="text-slate-400 hover:text-[#1a56db] transition underline underline-offset-2">개인정보처리방침</a>
+                <a href="/legal/refund" className="text-slate-400 hover:text-[#1a56db] transition underline underline-offset-2">환불 정책</a>
+              </div>
               <p className="mt-2 text-slate-400">© 2025 쟁승메이드. All rights reserved.</p>
             </div>
           </footer>

app/components/PaymentButton.tsx

@@ -4,6 +4,8 @@ import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { createClient } from '@/lib/supabase/client';
 import { PRODUCTS } from '@/lib/products';
+import { getActiveChannels, type PaymentChannel } from '@/lib/payment-channels';
+import PortOne from '@portone/browser-sdk/v2';
 
 interface PaymentButtonProps {
   productId: string;
@@ -15,11 +17,14 @@ interface PaymentButtonProps {
 
 export default function PaymentButton({ productId, className, style, children, returnUrl }: PaymentButtonProps) {
   const [loading, setLoading] = useState(false);
+  const [showMethodPicker, setShowMethodPicker] = useState(false);
   const router = useRouter();
   const supabase = createClient();
   const product = PRODUCTS[productId];
+  const channels = getActiveChannels();
 
-  const handlePayment = async () => {
+  const processPayment = async (channel: PaymentChannel) => {
+    setShowMethodPicker(false);
     setLoading(true);
     try {
       // 1. 로그인 확인
@@ -29,85 +34,171 @@ export default function PaymentButton({ productId, className, style, children, r
         return;
       }
 
-      // 2. 프로필 없으면 생성 (Google OAuth 등으로 트리거 미실행된 경우 대비)
+      // 2. 프로필 없으면 생성
       await supabase.from('profiles').upsert({ id: user.id, email: user.email }, { onConflict: 'id' });
 
       // 3. Supabase에 order 생성
-      const orderId = crypto.randomUUID();
+      const paymentId = `order_${Date.now()}_${crypto.randomUUID().slice(0, 8)}`;
       const { error: orderError } = await supabase
         .from('orders')
         .insert({
-          id: orderId,
+          id: paymentId,
           user_id: user.id,
           product_id: productId,
           amount: product.price,
           status: 'pending',
-          metadata: { product_name: product.name },
+          metadata: { product_name: product.name, pay_channel: channel.id },
         });
 
       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);
+      // 4. 포트원 V2 결제 요청
+      const storeId = process.env.NEXT_PUBLIC_PORTONE_STORE_ID!;
 
-      const payment = tossPayments.payment({
-        customerKey: user.id,
-      });
-
-      await payment.requestPayment({
-        method: 'CARD',
-        amount: {
-          currency: 'KRW',
-          value: product.price,
-        },
-        orderId,
+      const response = await PortOne.requestPayment({
+        storeId,
+        channelKey: channel.channelKey,
+        paymentId,
         orderName: product.name,
-        successUrl: `${window.location.origin}/payment/success${returnUrl ? '?returnUrl=' + encodeURIComponent(returnUrl) : ''}`,
-        failUrl: `${window.location.origin}/payment/fail`,
-        customerEmail: user.email,
+        totalAmount: product.price,
+        currency: 'CURRENCY_KRW',
+        payMethod: channel.payMethod,
+        customer: {
+          email: user.email ?? undefined,
+        },
       });
+
+      // 5. 결제 결과 처리
+      if (!response || response.code != null) {
+        if (response?.code === 'FAILURE_TYPE_PG' || response?.message?.includes('cancel')) {
+          return;
+        }
+        throw new Error(response?.message ?? '결제 요청 실패');
+      }
+
+      // 6. 서버에서 결제 검증
+      const confirmRes = await fetch('/api/payment/confirm', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ paymentId }),
+      });
+
+      const confirmData = await confirmRes.json();
+
+      if (!confirmRes.ok || !confirmData.success) {
+        throw new Error(confirmData.error || '결제 검증에 실패했습니다.');
+      }
+
+      // 7. 결제 성공
+      if (returnUrl) {
+        router.push(returnUrl);
+      } else {
+        router.push(`/payment/success?paymentId=${paymentId}`);
+      }
     } catch (err: unknown) {
       const error = err as { code?: string; message?: string };
-      // 사용자가 결제창 닫은 경우는 무시
-      if (error?.code !== 'USER_CANCEL') {
-        alert('결제 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.');
-        console.error(err);
+      if (error?.code === 'USER_CANCEL' || error?.message?.includes('cancel')) {
+        return;
       }
+      alert('결제 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.');
+      console.error(err);
     } finally {
       setLoading(false);
     }
   };
 
+  const handleClick = () => {
+    if (channels.length === 0) {
+      alert('결제 서비스가 준비 중입니다.');
+      return;
+    }
+    // 채널이 1개면 바로 결제, 여러 개면 선택 UI
+    if (channels.length === 1) {
+      processPayment(channels[0]);
+    } else {
+      setShowMethodPicker(true);
+    }
+  };
+
   if (!product) return null;
 
-  const isTestMode = process.env.NEXT_PUBLIC_TOSS_CLIENT_KEY?.startsWith('test_');
+  const isTestMode = process.env.NEXT_PUBLIC_PORTONE_STORE_ID?.includes('test')
+    || process.env.NODE_ENV === 'development';
 
   return (
-    <div style={{ display: style ? 'block' : 'inline-block', position: 'relative' }}>
-      <button
-        onClick={handlePayment}
-        disabled={loading}
-        className={className}
-        style={style}
-      >
-        {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 style={{ display: style ? 'block' : 'inline-block', position: 'relative' }}>
+        <button
+          onClick={handleClick}
+          disabled={loading}
+          className={className}
+          style={style}
+        >
+          {loading ? '결제 처리 중...' : children}
+        </button>
+        {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>
+
+      {/* 결제수단 선택 모달 */}
+      {showMethodPicker && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm"
+          onClick={() => setShowMethodPicker(false)}
+        >
+          <div
+            className="bg-white rounded-2xl shadow-2xl w-full max-w-sm mx-4 overflow-hidden"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="bg-[#04102b] px-5 py-4 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="w-6 h-6 rounded-md bg-[#1a56db] flex items-center justify-center text-white font-bold text-[10px]">
+                  쟁
+                </div>
+                <span className="text-white font-bold text-sm">결제수단 선택</span>
+              </div>
+              <button
+                onClick={() => setShowMethodPicker(false)}
+                className="text-white/60 hover:text-white transition text-lg leading-none"
+              >
+                ✕
+              </button>
+            </div>
+
+            <div className="p-4">
+              <p className="text-slate-500 text-xs mb-3">
+                {product.name} · {product.price.toLocaleString()}원
+              </p>
+              <div className="space-y-2">
+                {channels.map((channel) => (
+                  <button
+                    key={channel.id}
+                    onClick={() => processPayment(channel)}
+                    className="w-full flex items-center gap-3 px-4 py-3.5 rounded-xl border border-slate-200 hover:border-[#1a56db] hover:bg-blue-50/50 transition text-left group"
+                  >
+                    <span className="text-xl">{channel.icon}</span>
+                    <span className="text-sm font-semibold text-slate-700 group-hover:text-[#1a56db]">
+                      {channel.label}
+                    </span>
+                    <svg className="w-4 h-4 text-slate-300 group-hover:text-[#1a56db] ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    </svg>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
       )}
-    </div>
+    </>
   );
 }