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>
   )