refactor(desktop): 라이선스 UI 빅뱅 — 키 입력 제거, 구독 기반 전환

- LicenseTab/LicenseModal: LemonSqueezy 키 입력 삭제, Payple 구독 UI로 전환
- useLicenseState 훅: 라이선스+클라우드 인증 공용 상태 관리 추출
- PREMIUM_MODEL_LIMITS: 3곳 중복 → @d3ro/core/constants 단일 소스
- i18n: LemonSqueezy 전용 키 18개 삭제, 구독 관련 키 13개 추가 (12 locale)
- DashboardPage: dashboard.model* → license.model* 키 통일

apps/desktop/src/renderer/components/LicenseModal.tsx

@@ -1,91 +1,36 @@
 // src/renderer/components/LicenseModal.tsx
-// Full-screen license management modal with instrument aesthetic
+// 구독 기반 라이선스 모달 — 클라우드 인증 + Payple 결제 연동
 
-import { useState, useEffect, useCallback } from 'react'
 import {
   Dialog,
   DialogTitle,
   DialogContent,
   Box,
   IconButton,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
+  Divider,
+  LinearProgress,
 } from '@mui/material'
 import CloseIcon from '@mui/icons-material/Close'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 import CancelIcon from '@mui/icons-material/Cancel'
 import { MetalCard, PhosphorText, Led, PhysicalButton } from '@d3ro/ui/components/ds'
-import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius, d3roShadow } from '@d3ro/ui/theme'
+import { d3roPalette, d3roTypo, d3roRadius, d3roShadow, d3roFontMono } from '@d3ro/ui/theme'
 import { useI18n } from '@d3ro/i18n'
-import type { LicenseInfo, LicenseTier, TierComparison, UsageQuota } from '@d3ro/core/types'
+import { PREMIUM_MODEL_LIMITS } from '@d3ro/core/constants'
+import { useLicenseState } from '../hooks/useLicenseState'
 
 interface LicenseModalProps {
   open: boolean
   onClose: () => void
 }
 
-type LedColor = 'amber' | 'green' | 'red' | 'orange' | 'off'
-
-function tierToLedColor(tier: LicenseTier): LedColor {
-  switch (tier) {
-    case 'free': return 'amber'
-    case 'pro': return 'green'
-    case 'pro_plus': return 'green'
-  }
-}
-
-function tierToLabel(tier: LicenseTier, t: (k: string) => string): string {
-  switch (tier) {
-    case 'free': return t('license.free')
-    case 'pro': return t('license.pro')
-    case 'pro_plus': return t('license.proPlus')
-  }
-}
-
 export function LicenseModal({ open, onClose }: LicenseModalProps): React.ReactElement {
   const { t } = useI18n()
-  const [licenseInfo, setLicenseInfo] = useState<LicenseInfo | null>(null)
-  const [tierComparison, setTierComparison] = useState<TierComparison[]>([])
-  const [usageQuotas, setUsageQuotas] = useState<UsageQuota[]>([])
-
-  const loadData = useCallback(() => {
-    window.electronAPI.license.getInfo().then((r) => {
-      if (r.success) setLicenseInfo(r.data)
-    })
-    window.electronAPI.license.getTierComparison().then((r) => {
-      if (r.success) setTierComparison(r.data)
-    })
-    window.electronAPI.license.getAllUsage().then((r) => {
-      if (r.success) setUsageQuotas(r.data)
-    })
-  }, [])
-
-  useEffect(() => {
-    if (open) {
-      loadData()
-    }
-  }, [open, loadData])
-
-  // Subscribe to tier changes
-  useEffect(() => {
-    const unsub = window.electronAPI.license.onTierChanged((info) => {
-      setLicenseInfo(info)
-      loadData()
-    })
-    return unsub
-  }, [loadData])
-
-  const currentTier = licenseInfo?.tier ?? 'free'
-  const isFree = currentTier === 'free'
-  const isPro = currentTier === 'pro'
-
-  const handleUpgrade = useCallback((tier: 'pro' | 'pro_plus' = 'pro') => {
-    window.electronAPI.license.openBilling({ tier })
-  }, [])
+  const {
+    cloud, usage, comparison,
+    currentTier, isFree, isPro,
+    handleUpgrade, handleOpenBilling, openCloudSettings,
+  } = useLicenseState()
 
   return (
     <Dialog
@@ -120,158 +65,163 @@ export function LicenseModal({ open, onClose }: LicenseModalProps): React.ReactE
         </IconButton>
       </DialogTitle>
 
-      <DialogContent sx={{ p: 3, display: 'flex', flexDirection: 'column', gap: 3, overflow: 'auto' }}>
-        {/* ---- Current Tier ---- */}
+      <DialogContent sx={{ p: 3, display: 'flex', flexDirection: 'column', gap: 2.5, overflow: 'auto' }}>
+        {/* ── 현재 티어 ── */}
         <MetalCard sx={{ overflow: 'visible' }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-            <Led color={licenseInfo ? tierToLedColor(licenseInfo.tier) : 'off'} size={12} pulse={!isFree} />
+            <Led
+              color={currentTier === 'free' ? 'amber' : 'green'}
+              size={12}
+              pulse={currentTier !== 'free'}
+            />
             <Box sx={{ flex: 1 }}>
               <PhosphorText variant="meta">{t('license.currentTier')}</PhosphorText>
-              <PhosphorText variant="value">
-                {licenseInfo ? tierToLabel(licenseInfo.tier, t) : '...'}
-              </PhosphorText>
+              <TierLabel tier={currentTier} t={t} />
             </Box>
+            {cloud.authenticated && cloud.userEmail && (
+              <PhosphorText variant="dim" sx={{ fontSize: d3roTypo.small.size }}>
+                {cloud.userEmail}
+              </PhosphorText>
+            )}
           </Box>
         </MetalCard>
 
-        {/* ---- Subscription Management ---- */}
+        {/* ── 구독 관리 ── */}
         <MetalCard sx={{ overflow: 'visible' }}>
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-            <PhosphorText variant="meta">{t('license.subscribe')}</PhosphorText>
-
-            {isFree && (
-              <>
-                <PhysicalButton onClick={() => handleUpgrade('pro')} sx={{ width: '100%' }}>
-                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <Led color="green" size={8} />
-                    <PhosphorText variant="compact">
-                      {t('license.upgrade')} — {t('license.proPlan')}
-                    </PhosphorText>
-                  </Box>
-                </PhysicalButton>
-                <PhysicalButton onClick={() => handleUpgrade('pro_plus')} sx={{ width: '100%' }}>
-                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <Led color="green" size={8} />
-                    <PhosphorText variant="compact">
-                      {t('license.upgrade')} — {t('license.proPlusPlan')}
-                    </PhosphorText>
-                  </Box>
-                </PhysicalButton>
-              </>
-            )}
-
-            {isPro && (
-              <>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-                  <Led color="green" size={8} pulse />
-                  <PhosphorText variant="compact" sx={{ color: d3roPalette.tag.green }}>
-                    {t('license.currentPlan')} — {t('license.proPlan')}
-                  </PhosphorText>
-                </Box>
-                <PhysicalButton onClick={() => handleUpgrade('pro_plus')} sx={{ width: '100%' }}>
-                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <Led color="green" size={8} />
-                    <PhosphorText variant="compact">
-                      {t('license.upgrade')} — {t('license.proPlusPlan')}
-                    </PhosphorText>
-                  </Box>
-                </PhysicalButton>
-              </>
-            )}
-
-            {currentTier === 'pro_plus' && (
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-                <Led color="green" size={8} pulse />
-                <PhosphorText variant="compact" sx={{ color: d3roPalette.tag.purple }}>
-                  {t('license.currentPlan')} — {t('license.proPlusPlan')}
-                </PhosphorText>
-              </Box>
-            )}
-          </Box>
+          <SubscriptionSection
+            t={t}
+            authenticated={cloud.authenticated}
+            isFree={isFree}
+            isPro={isPro}
+            onUpgrade={handleUpgrade}
+            onManage={handleOpenBilling}
+            onSignIn={() => { onClose(); openCloudSettings() }}
+          />
         </MetalCard>
 
-        {/* ---- Daily Usage ---- */}
-        {usageQuotas.length > 0 && (
+        {/* ── 사용량 ── */}
+        {usage.length > 0 && (
           <MetalCard sx={{ overflow: 'visible' }}>
             <PhosphorText variant="meta" sx={{ mb: 1.5 }}>{t('license.dailyUsage')}</PhosphorText>
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-              {usageQuotas.map((q) => (
-                <Box key={q.feature} sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-                  <PhosphorText variant="small" sx={{ flex: 1 }}>
+            {usage.map((q) => (
+              <Box key={q.feature} sx={{ mb: 1 }}>
+                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.3 }}>
+                  <PhosphorText variant="small">
                     {t(`license.feature.${q.feature}` as Parameters<typeof t>[0])}
                   </PhosphorText>
-                  <Box sx={{ flex: 1 }}>
-                    <Box
-                      sx={{
-                        height: 4,
-                        borderRadius: d3roRadius.pill,
-                        bgcolor: d3roPalette.bg.inset,
-                        overflow: 'hidden',
-                      }}
-                    >
-                      <Box
-                        sx={{
-                          height: '100%',
-                          borderRadius: d3roRadius.pill,
-                          bgcolor:
-                            q.limit < 0
-                              ? d3roPalette.tag.green
-                              : q.used >= q.limit
-                                ? d3roPalette.tag.red
-                                : d3roPalette.accent.amber,
-                          width: q.limit < 0 ? '100%' : `${Math.min(100, (q.used / q.limit) * 100)}%`,
-                          transition: 'width 0.3s ease',
-                        }}
-                      />
-                    </Box>
-                  </Box>
-                  <PhosphorText variant="dim" sx={{ minWidth: 60, textAlign: 'right' }}>
-                    {q.limit < 0
-                      ? t('license.quotaUnlimited')
+                  <PhosphorText variant="small" sx={{
+                    color: q.limit === -1 ? d3roPalette.tag.green : q.remaining === 0 ? d3roPalette.tag.red : d3roPalette.accent.amber,
+                  }}>
+                    {q.limit === -1
+                      ? t('license.unlimited')
                       : t('license.quotaUsed', { used: String(q.used), limit: String(q.limit) })}
                   </PhosphorText>
                 </Box>
-              ))}
-            </Box>
+                {q.limit > 0 && (
+                  <LinearProgress
+                    variant="determinate"
+                    value={Math.min(100, (q.used / q.limit) * 100)}
+                    sx={{
+                      height: 4,
+                      borderRadius: d3roRadius.xs,
+                      bgcolor: d3roPalette.bg.inset,
+                      '& .MuiLinearProgress-bar': {
+                        bgcolor: q.used >= q.limit ? d3roPalette.tag.red : d3roPalette.accent.amber,
+                        borderRadius: d3roRadius.xs,
+                      },
+                    }}
+                  />
+                )}
+              </Box>
+            ))}
+
+            {/* Premium 모델별 쿼터 */}
+            {PREMIUM_MODEL_LIMITS[currentTier as keyof typeof PREMIUM_MODEL_LIMITS]?.length > 0 && (
+              <>
+                <Divider sx={{ borderColor: d3roPalette.border.subtle, my: 1 }} />
+                <PhosphorText variant="label" sx={{ mb: 0.5, display: 'block', color: d3roPalette.tag.green }}>
+                  {t('license.premiumQuota')}
+                </PhosphorText>
+                {PREMIUM_MODEL_LIMITS[currentTier as keyof typeof PREMIUM_MODEL_LIMITS].map((m) => (
+                  <Box key={m.model} sx={{ mb: 1 }}>
+                    <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.3 }}>
+                      <PhosphorText variant="small">{t(m.i18nKey as Parameters<typeof t>[0])}</PhosphorText>
+                      <PhosphorText variant="small" sx={{ color: d3roPalette.accent.amber }}>
+                        {m.limit === -1
+                          ? t('license.unlimited')
+                          : `${m.limit}/${t(m.period === 'weekly' ? 'license.quotaWeekly' : 'license.quotaDaily')}`}
+                      </PhosphorText>
+                    </Box>
+                    {m.limit > 0 && (
+                      <LinearProgress
+                        variant="determinate"
+                        value={0}
+                        sx={{
+                          height: 4,
+                          borderRadius: d3roRadius.xs,
+                          bgcolor: d3roPalette.bg.inset,
+                          '& .MuiLinearProgress-bar': {
+                            bgcolor: d3roPalette.tag.green,
+                            borderRadius: d3roRadius.xs,
+                          },
+                        }}
+                      />
+                    )}
+                  </Box>
+                ))}
+              </>
+            )}
           </MetalCard>
         )}
 
-        {/* ---- Tier Comparison ---- */}
-        {tierComparison.length > 0 && (
+        {/* ── 티어 비교표 ── */}
+        {comparison.length > 0 && (
           <MetalCard sx={{ overflow: 'visible' }}>
             <PhosphorText variant="meta" sx={{ mb: 1.5 }}>{t('license.tierComparison')}</PhosphorText>
-            <TableContainer>
-              <Table size="small" sx={{ '& td, & th': { borderColor: d3roPalette.border.subtle, py: 0.75 } }}>
-                <TableHead>
-                  <TableRow>
-                    <TableCell sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.label.size, color: d3roPalette.text.label, letterSpacing: d3roTypo.label.spacing, textTransform: 'uppercase' }}>
-                      &nbsp;
-                    </TableCell>
-                    <TableCell align="center" sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.label.size, color: d3roPalette.text.label, letterSpacing: d3roTypo.label.spacing }}>
-                      {t('license.free')}
-                    </TableCell>
-                    <TableCell align="center" sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.label.size, color: d3roPalette.tag.green, letterSpacing: d3roTypo.label.spacing }}>
-                      {t('license.pro')}
-                    </TableCell>
-                    <TableCell align="center" sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.label.size, color: d3roPalette.tag.purple, letterSpacing: d3roTypo.label.spacing }}>
-                      {t('license.proPlus')}
-                    </TableCell>
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {tierComparison.map((row) => (
-                    <TableRow key={row.feature}>
-                      <TableCell sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.compact.size, color: d3roPalette.text.secondary }}>
-                        {t(row.featureLabel as Parameters<typeof t>[0])}
-                      </TableCell>
-                      <TableCell align="center">{renderTierCell(row.free)}</TableCell>
-                      <TableCell align="center">{renderTierCell(row.pro)}</TableCell>
-                      <TableCell align="center">{renderTierCell(row.proPlus)}</TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </TableContainer>
+            <Box
+              component="table"
+              sx={{
+                width: '100%',
+                borderCollapse: 'collapse',
+                fontFamily: d3roFontMono,
+                fontSize: d3roTypo.small.size,
+                '& th, & td': {
+                  py: 0.5,
+                  px: 1,
+                  textAlign: 'center',
+                  borderBottom: `1px solid ${d3roPalette.border.subtle}`,
+                },
+                '& th': {
+                  color: d3roPalette.text.label,
+                  fontWeight: d3roTypo.label.weight,
+                  letterSpacing: d3roTypo.label.spacing,
+                  textTransform: 'uppercase',
+                },
+                '& td:first-of-type': {
+                  textAlign: 'left',
+                  color: d3roPalette.text.primary,
+                },
+              }}
+            >
+              <thead>
+                <tr>
+                  <th>{''}</th>
+                  <th>{t('license.free')}</th>
+                  <th style={{ color: d3roPalette.tag.green }}>{t('license.pro')}</th>
+                  <th style={{ color: d3roPalette.tag.purple }}>{t('license.proPlus')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {comparison.map((row) => (
+                  <tr key={row.feature}>
+                    <td>{t(row.featureLabel as Parameters<typeof t>[0])}</td>
+                    <td><TierCell value={row.free} /></td>
+                    <td><TierCell value={row.pro} /></td>
+                    <td><TierCell value={row.proPlus} /></td>
+                  </tr>
+                ))}
+              </tbody>
+            </Box>
           </MetalCard>
         )}
       </DialogContent>
@@ -279,16 +229,109 @@ export function LicenseModal({ open, onClose }: LicenseModalProps): React.ReactE
   )
 }
 
-function renderTierCell(value: boolean | string): React.ReactElement {
-  if (typeof value === 'boolean') {
-    return value ? (
-      <CheckCircleIcon sx={{ fontSize: 16, color: d3roPalette.tag.green }} />
-    ) : (
-      <CancelIcon sx={{ fontSize: 16, color: d3roPalette.text.disabled }} />
+// ── 공유 하위 컴포넌트 ──────────────────────────────────
+
+function TierLabel({ tier, t }: { tier: string; t: (k: string) => string }): React.ReactElement {
+  const color = tier === 'pro_plus'
+    ? d3roPalette.tag.purple
+    : tier === 'pro'
+      ? d3roPalette.tag.green
+      : d3roPalette.accent.amber
+  const label = tier === 'pro_plus' ? t('license.proPlus') : tier === 'pro' ? t('license.pro') : t('license.free')
+  return <PhosphorText variant="value" sx={{ color }}>{label}</PhosphorText>
+}
+
+interface SubscriptionSectionProps {
+  t: (k: string) => string
+  authenticated: boolean
+  isFree: boolean
+  isPro: boolean
+  onUpgrade: (tier: 'pro' | 'pro_plus') => void
+  onManage: () => void
+  onSignIn: () => void
+}
+
+function SubscriptionSection({ t, authenticated, isFree, isPro, onUpgrade, onManage, onSignIn }: SubscriptionSectionProps): React.ReactElement {
+  if (!authenticated) {
+    return (
+      <Box sx={{ textAlign: 'center', py: 1 }}>
+        <PhosphorText variant="body" sx={{ mb: 1.5, display: 'block', color: d3roPalette.text.secondary }}>
+          {t('license.signInRequired')}
+        </PhosphorText>
+        <PhysicalButton onClick={onSignIn} sx={{ width: '100%' }}>
+          {t('license.signInToUpgrade')}
+        </PhysicalButton>
+      </Box>
     )
   }
+
+  if (isFree) {
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+        <PhosphorText variant="meta">{t('license.subscribe')}</PhosphorText>
+        <PhosphorText variant="dim" sx={{ fontSize: d3roTypo.small.size, display: 'block' }}>
+          {t('license.upgradeToProDesc')}
+        </PhosphorText>
+        <UpgradeButton tier="pro" t={t} onUpgrade={onUpgrade} />
+        <UpgradeButton tier="pro_plus" t={t} onUpgrade={onUpgrade} />
+      </Box>
+    )
+  }
+
+  if (isPro) {
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+        <ActivePlanIndicator label={`${t('license.currentPlanActive')} — ${t('license.proPlan')}`} color={d3roPalette.tag.green} />
+        <UpgradeButton tier="pro_plus" t={t} onUpgrade={onUpgrade} />
+        <PhysicalButton onClick={onManage} sx={{ width: '100%' }}>
+          <PhosphorText variant="compact">{t('license.subscriptionManage')}</PhosphorText>
+        </PhysicalButton>
+      </Box>
+    )
+  }
+
   return (
-    <PhosphorText variant="dim" sx={{ fontSize: d3roTypo.compact.size }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+      <ActivePlanIndicator label={`${t('license.currentPlanActive')} — ${t('license.proPlusPlan')}`} color={d3roPalette.tag.purple} />
+      <PhysicalButton onClick={onManage} sx={{ width: '100%' }}>
+        <PhosphorText variant="compact">{t('license.subscriptionManage')}</PhosphorText>
+      </PhysicalButton>
+    </Box>
+  )
+}
+
+function ActivePlanIndicator({ label, color }: { label: string; color: string }): React.ReactElement {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+      <Led color="green" size={8} pulse />
+      <PhosphorText variant="compact" sx={{ color }}>{label}</PhosphorText>
+    </Box>
+  )
+}
+
+function UpgradeButton({ tier, t, onUpgrade }: { tier: 'pro' | 'pro_plus'; t: (k: string) => string; onUpgrade: (t: 'pro' | 'pro_plus') => void }): React.ReactElement {
+  const planLabel = tier === 'pro_plus' ? t('license.proPlusPlan') : t('license.proPlan')
+  return (
+    <PhysicalButton onClick={() => onUpgrade(tier)} sx={{ width: '100%' }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+        <Led color="green" size={8} />
+        <PhosphorText variant="compact">
+          {t('license.upgrade')} — {planLabel}
+        </PhosphorText>
+      </Box>
+    </PhysicalButton>
+  )
+}
+
+function TierCell({ value }: { value: boolean | string }): React.ReactElement {
+  if (value === true) {
+    return <CheckCircleIcon sx={{ fontSize: 14, color: d3roPalette.tag.green }} />
+  }
+  if (value === false) {
+    return <CancelIcon sx={{ fontSize: 14, color: d3roPalette.text.disabled }} />
+  }
+  return (
+    <PhosphorText variant="dim" sx={{ fontSize: d3roTypo.small.size, color: d3roPalette.accent.amber }}>
       {value}
     </PhosphorText>
   )