feat(server+web+desktop): Phase 3.2-B Payple 결제 연동 + 대시보드 Premium 상태 표시

Payple PG 연동:
- _shared/payple.ts: Payple API 래퍼 (auth/billing/cancel/deleteBillingKey)
- payple-checkout Edge Function: 빌링키 결제 + 구독 활성화
- payple-webhook Edge Function: 결제완료/취소 이벤트
- payple-manage Edge Function: 구독 취소 (빌링키 해지)
- DB migration: payment_provider + payple_payer_id + payple_pay_oid
- 웹 billing 페이지: Payple JS SDK 결제창 + 관리 버튼 (Stripe 대체)
- Electron LicenseModal: shell.openExternal → 웹 결제 페이지

대시보드 Premium 상태:
- CrtDisplay services에 PREMIUM LLM LED 추가
- 백엔드 인디케이터 카드 (Local/Premium) + 티어 카드
- 사용량 섹션: 전 티어 표시 + 모델별 Premium 쿼터
- 12개 locale × 14개 i18n 키

apps/web/src/app/(app)/billing/page.tsx

@@ -1,15 +1,15 @@
 // apps/web/src/app/(app)/billing/page.tsx
-// 구독 및 결제 페이지 — auth/Sidebar는 (app)/layout.tsx가 제공
+// 구독 및 결제 페이지 — Payple 결제 연동 (Phase 3.2-B)
 
 import { Box, Grid, Stack } from '@mui/material'
 import { MetalCard, PhosphorText } from '@d3ro/ui/components/ds'
 import { d3roPalette, typoSx } from '@d3ro/ui/theme'
-import { CheckoutButton } from '@/components/billing/checkout-button'
-import { PortalButton } from '@/components/billing/portal-button'
+import { PaypleCheckoutButton } from '@/components/billing/payple-checkout-button'
+import { PaypleManageButton } from '@/components/billing/payple-manage-button'
 import { getSupabaseServerClient } from '@/lib/supabase-server'
 
 interface Plan {
-  tier: 'free' | 'pro' | 'team'
+  tier: 'free' | 'pro' | 'pro_plus'
   name: string
   price: string
   features: string[]
@@ -20,40 +20,40 @@ const PLANS: Plan[] = [
   {
     tier: 'free',
     name: 'Free',
-    price: '$0',
+    price: '₩0',
     features: [
-      '월 5시간 전사',
-      '월 50회 LLM 처리',
-      '1기기 동기화',
-      '로컬 모델 (데스크톱)'
-    ]
+      '로컬 STT/LLM 무제한',
+      'Haiku 250회/주간',
+      '히스토리 3일 보존',
+    ],
   },
   {
     tier: 'pro',
     name: 'Pro',
-    price: '$10/월',
+    price: '₩9,900/월',
     highlight: true,
     features: [
-      '무제한 전사',
-      '무제한 LLM 처리',
-      '5기기 동기화',
-      'Sonnet 모델 사용',
-      '우선 지원'
-    ]
+      '로컬 STT/LLM 무제한',
+      'Haiku 1,500회/일',
+      'Sonnet 300회/일',
+      'Opus 50회/일',
+      '히스토리 무제한',
+      '클라우드 동기화',
+    ],
   },
   {
-    tier: 'team',
-    name: 'Team',
-    price: '$20/인/월',
+    tier: 'pro_plus',
+    name: 'Pro+',
+    price: '₩29,900/월',
     features: [
       'Pro 모든 기능',
-      '무제한 멤버',
-      '팀 회의 공유',
-      '관리자 대시보드',
-      'Opus 모델 사용',
-      'SSO/SAML (V2-8b)'
-    ]
-  }
+      'Haiku 무제한',
+      'Sonnet 1,500회/일',
+      'Opus 300회/일',
+      '팀 협업 (회의 공유)',
+      '우선 지원',
+    ],
+  },
 ]
 
 async function loadCurrentTier(): Promise<string> {
@@ -77,74 +77,74 @@ export default async function BillingPage(): Promise<React.ReactElement> {
             BILLING
           </PhosphorText>
           <Box sx={{ color: d3roPalette.text.muted, fontSize: 13 }}>
-            현재 구독: <strong>{currentTier.toUpperCase()}</strong>
+            현재 구독: <strong>{currentTier === 'pro_plus' ? 'PRO+' : currentTier.toUpperCase()}</strong>
           </Box>
         </Box>
-        {currentTier !== 'free' && <PortalButton />}
+        {currentTier !== 'free' && <PaypleManageButton />}
       </Stack>
 
-        <Grid container spacing={3}>
-          {PLANS.map((plan) => {
-            const active = currentTier === plan.tier
-            return (
-              <Grid size={{ xs: 12, md: 4 }} key={plan.tier}>
-                <MetalCard
-                  sx={{
-                    p: 4,
-                    height: '100%',
-                    border: active
-                      ? `2px solid ${d3roPalette.accent.amber}`
-                      : plan.highlight
-                        ? `2px solid ${d3roPalette.tag.purple}`
-                        : undefined
-                  }}
-                >
-                  <Box sx={{ ...typoSx('label'), color: d3roPalette.text.label, mb: 1 }}>
-                    {plan.tier.toUpperCase()}
-                  </Box>
-                  <PhosphorText variant="title" sx={{ mb: 1 }}>
-                    {plan.name}
-                  </PhosphorText>
-                  <Box sx={{ ...typoSx('value'), color: d3roPalette.text.primary, mb: 3 }}>
-                    {plan.price}
-                  </Box>
+      <Grid container spacing={3}>
+        {PLANS.map((plan) => {
+          const active = currentTier === plan.tier
+          return (
+            <Grid size={{ xs: 12, md: 4 }} key={plan.tier}>
+              <MetalCard
+                sx={{
+                  p: 4,
+                  height: '100%',
+                  border: active
+                    ? `2px solid ${d3roPalette.accent.amber}`
+                    : plan.highlight
+                      ? `2px solid ${d3roPalette.tag.purple}`
+                      : undefined,
+                }}
+              >
+                <Box sx={{ ...typoSx('label'), color: d3roPalette.text.label, mb: 1 }}>
+                  {plan.tier === 'pro_plus' ? 'PRO+' : plan.tier.toUpperCase()}
+                </Box>
+                <PhosphorText variant="title" sx={{ mb: 1 }}>
+                  {plan.name}
+                </PhosphorText>
+                <Box sx={{ ...typoSx('value'), color: d3roPalette.text.primary, mb: 3 }}>
+                  {plan.price}
+                </Box>
 
-                  <Box component="ul" sx={{ pl: 2, mb: 3, color: d3roPalette.text.secondary }}>
-                    {plan.features.map((f) => (
-                      <Box component="li" key={f} sx={{ fontSize: 13, mb: 0.5 }}>
-                        {f}
-                      </Box>
-                    ))}
-                  </Box>
+                <Box component="ul" sx={{ pl: 2, mb: 3, color: d3roPalette.text.secondary }}>
+                  {plan.features.map((f) => (
+                    <Box component="li" key={f} sx={{ fontSize: 13, mb: 0.5 }}>
+                      {f}
+                    </Box>
+                  ))}
+                </Box>
 
-                  {active ? (
-                    <Box
-                      sx={{
-                        textAlign: 'center',
-                        p: 1.5,
-                        bgcolor: d3roPalette.bg.inset,
-                        borderRadius: 1,
-                        color: d3roPalette.accent.amber,
-                        ...typoSx('label')
-                      }}
-                    >
-                      현재 구독 중
-                    </Box>
-                  ) : plan.tier === 'free' ? (
-                    <Box sx={{ textAlign: 'center', color: d3roPalette.text.muted, fontSize: 12 }}>
-                      기본 플랜
-                    </Box>
-                  ) : (
-                    <CheckoutButton tier={plan.tier} />
-                  )}
-                </MetalCard>
-              </Grid>
-            )
-          })}
-        </Grid>
+                {active ? (
+                  <Box
+                    sx={{
+                      textAlign: 'center',
+                      p: 1.5,
+                      bgcolor: d3roPalette.bg.inset,
+                      borderRadius: 1,
+                      color: d3roPalette.accent.amber,
+                      ...typoSx('label'),
+                    }}
+                  >
+                    현재 구독 중
+                  </Box>
+                ) : plan.tier === 'free' ? (
+                  <Box sx={{ textAlign: 'center', color: d3roPalette.text.muted, fontSize: 12 }}>
+                    기본 플랜
+                  </Box>
+                ) : (
+                  <PaypleCheckoutButton tier={plan.tier} />
+                )}
+              </MetalCard>
+            </Grid>
+          )
+        })}
+      </Grid>
 
       <Box sx={{ mt: 4, color: d3roPalette.text.muted, fontSize: 11 }}>
-        결제는 Stripe로 안전하게 처리됩니다. 언제든 취소할 수 있습니다.
+        결제는 Payple로 안전하게 처리됩니다. 언제든 구독을 취소할 수 있습니다.
       </Box>
     </Box>
   )

apps/web/src/components/billing/payple-checkout-button.tsx

@@ -0,0 +1,165 @@
+'use client'
+
+// apps/web/src/components/billing/payple-checkout-button.tsx
+// Payple 결제창 호출 → 빌링키 획득 → payple-checkout Edge Function 호출
+
+import { useState, useEffect, useCallback } from 'react'
+import { Button, CircularProgress, Alert, Box } from '@mui/material'
+import Script from 'next/script'
+import { getSupabaseBrowserClient } from '@/lib/supabase-browser'
+
+// Payple JS SDK 타입 (전역 함수)
+declare global {
+  interface Window {
+    PaypleCpayAuthCheck: (obj: Record<string, unknown>) => void
+  }
+}
+
+interface PaypleCheckoutButtonProps {
+  tier: 'pro' | 'pro_plus'
+}
+
+// 테스트 환경 감지: 환경변수가 없거나 test면 테스트 모드
+const PAYPLE_CLIENT_KEY = process.env.NEXT_PUBLIC_PAYPLE_CLIENT_KEY ?? 'test_DF55F29DA654A8CBC0F0A9DD4B556486'
+const IS_TEST = PAYPLE_CLIENT_KEY.startsWith('test_')
+const SDK_URL = IS_TEST
+  ? 'https://democpay.payple.kr/js/v1/payment.js'
+  : 'https://cpay.payple.kr/js/v1/payment.js'
+
+export function PaypleCheckoutButton({ tier }: PaypleCheckoutButtonProps): React.ReactElement {
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState(false)
+  const [sdkReady, setSdkReady] = useState(false)
+
+  // SDK가 이미 로드되어 있는지 확인
+  useEffect(() => {
+    if (typeof window !== 'undefined' && typeof window.PaypleCpayAuthCheck === 'function') {
+      setSdkReady(true)
+    }
+  }, [])
+
+  const handleCheckout = useCallback(async () => {
+    setError(null)
+    setSuccess(false)
+
+    if (!sdkReady || typeof window.PaypleCpayAuthCheck !== 'function') {
+      setError('결제 모듈 로딩 중입니다. 잠시 후 다시 시도해주세요.')
+      return
+    }
+
+    const supabase = getSupabaseBrowserClient()
+    const { data: { session } } = await supabase.auth.getSession()
+
+    if (!session) {
+      setError('로그인이 필요합니다')
+      return
+    }
+
+    setBusy(true)
+
+    try {
+      // Payple 결제창 호출 (SPA 콜백 패턴)
+      const obj: Record<string, unknown> = {
+        clientKey: PAYPLE_CLIENT_KEY,
+        PCD_PAY_TYPE: 'card',
+        PCD_PAY_WORK: 'AUTH',          // 카드 등록만 (빌링키 발급)
+        PCD_CARD_VER: '01',            // 정기결제용
+        PCD_PAY_GOODS: tier === 'pro_plus' ? 'D3RO Voice Pro+' : 'D3RO Voice Pro',
+        PCD_PAY_TOTAL: tier === 'pro_plus' ? 29900 : 9900,
+        PCD_PAYER_NO: session.user.id,
+        PCD_PAYER_EMAIL: session.user.email ?? '',
+        PCD_RST_URL: '/billing',        // 상대 경로 → callbackFunction 사용
+        callbackFunction: async (result: Record<string, string>) => {
+          try {
+            if (result['PCD_PAY_RST'] !== 'success') {
+              setError(result['PCD_PAY_MSG'] ?? '결제가 취소되었습니다')
+              setBusy(false)
+              return
+            }
+
+            const payerId = result['PCD_PAYER_ID']
+            if (!payerId) {
+              setError('빌링키를 받지 못했습니다')
+              setBusy(false)
+              return
+            }
+
+            // Edge Function 호출: 빌링키로 첫 결제 실행
+            const response = await fetch(
+              `${process.env.NEXT_PUBLIC_SUPABASE_URL}/functions/v1/payple-checkout`,
+              {
+                method: 'POST',
+                headers: {
+                  Authorization: `Bearer ${session.access_token}`,
+                  'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                  payer_id: payerId,
+                  tier,
+                  pcd_pay_cardname: result['PCD_PAY_CARDNAME'],
+                  pcd_pay_cardnum: result['PCD_PAY_CARDNUM'],
+                }),
+              }
+            )
+
+            if (!response.ok) {
+              const txt = await response.text()
+              throw new Error(`결제 처리 실패: ${response.status} ${txt}`)
+            }
+
+            setSuccess(true)
+            // 2초 후 페이지 리로드하여 구독 상태 반영
+            setTimeout(() => {
+              window.location.reload()
+            }, 2000)
+          } catch (e) {
+            setError(e instanceof Error ? e.message : '알 수 없는 오류')
+          } finally {
+            setBusy(false)
+          }
+        },
+      }
+
+      window.PaypleCpayAuthCheck(obj)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : '알 수 없는 오류')
+      setBusy(false)
+    }
+  }, [sdkReady, tier])
+
+  return (
+    <Box>
+      <Script
+        src={SDK_URL}
+        strategy="afterInteractive"
+        onLoad={() => setSdkReady(true)}
+        onError={() => setError('결제 모듈 로드 실패')}
+      />
+
+      {success ? (
+        <Alert severity="success" variant="filled" sx={{ fontSize: 13 }}>
+          결제가 완료되었습니다! 잠시 후 새로고침됩니다.
+        </Alert>
+      ) : (
+        <>
+          <Button
+            fullWidth
+            variant="contained"
+            size="large"
+            onClick={() => void handleCheckout()}
+            disabled={busy || !sdkReady}
+            startIcon={busy ? <CircularProgress size={16} color="inherit" /> : null}
+          >
+            {busy ? '처리 중...' : '업그레이드'}
+          </Button>
+          {error && (
+            <Alert severity="error" variant="outlined" sx={{ mt: 1, fontSize: 11 }}>
+              {error}
+            </Alert>
+          )}
+        </>
+      )}
+    </Box>
+  )
+}

apps/web/src/components/billing/payple-manage-button.tsx

@@ -0,0 +1,101 @@
+'use client'
+
+// apps/web/src/components/billing/payple-manage-button.tsx
+// Payple 구독 관리 — payple-manage Edge Function 호출 (구독 취소)
+
+import { useState } from 'react'
+import { Button, CircularProgress, Alert, Box, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material'
+import SettingsIcon from '@mui/icons-material/Settings'
+import { getSupabaseBrowserClient } from '@/lib/supabase-browser'
+
+export function PaypleManageButton(): React.ReactElement {
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [confirmOpen, setConfirmOpen] = useState(false)
+  const [success, setSuccess] = useState(false)
+
+  async function handleCancel(): Promise<void> {
+    setConfirmOpen(false)
+    setError(null)
+    setBusy(true)
+    try {
+      const supabase = getSupabaseBrowserClient()
+      const { data: { session } } = await supabase.auth.getSession()
+
+      if (!session) {
+        setError('로그인이 필요합니다')
+        return
+      }
+
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_SUPABASE_URL}/functions/v1/payple-manage`,
+        {
+          method: 'POST',
+          headers: {
+            Authorization: `Bearer ${session.access_token}`,
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ action: 'cancel' }),
+        }
+      )
+
+      if (!response.ok) {
+        const txt = await response.text()
+        throw new Error(`구독 취소 실패: ${response.status} ${txt}`)
+      }
+
+      const data = await response.json() as { success?: boolean; cancel_at?: string }
+      if (data.success) {
+        setSuccess(true)
+        setTimeout(() => window.location.reload(), 2000)
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : '알 수 없는 오류')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  if (success) {
+    return (
+      <Alert severity="info" variant="outlined" sx={{ fontSize: 12 }}>
+        구독이 취소되었습니다. 현재 결제 기간이 끝날 때까지 이용 가능합니다.
+      </Alert>
+    )
+  }
+
+  return (
+    <Box>
+      <Button
+        variant="outlined"
+        size="small"
+        startIcon={busy ? <CircularProgress size={14} /> : <SettingsIcon />}
+        onClick={() => setConfirmOpen(true)}
+        disabled={busy}
+      >
+        구독 관리
+      </Button>
+
+      <Dialog open={confirmOpen} onClose={() => setConfirmOpen(false)}>
+        <DialogTitle>구독 취소</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            정말 구독을 취소하시겠습니까? 현재 결제 기간이 끝날 때까지는 계속 이용할 수 있습니다.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setConfirmOpen(false)}>돌아가기</Button>
+          <Button onClick={() => void handleCancel()} color="error" variant="contained">
+            구독 취소
+          </Button>
+        </DialogActions>
+      </Dialog>
+
+      {error && (
+        <Alert severity="error" variant="outlined" sx={{ mt: 1, fontSize: 11 }}>
+          {error}
+        </Alert>
+      )}
+    </Box>
+  )
+}