996def683b
- LicenseTab/LicenseModal: LemonSqueezy 키 입력 삭제, Payple 구독 UI로 전환 - useLicenseState 훅: 라이선스+클라우드 인증 공용 상태 관리 추출 - PREMIUM_MODEL_LIMITS: 3곳 중복 → @d3ro/core/constants 단일 소스 - i18n: LemonSqueezy 전용 키 18개 삭제, 구독 관련 키 13개 추가 (12 locale) - DashboardPage: dashboard.model* → license.model* 키 통일
329 lines
12 KiB
TypeScript
329 lines
12 KiB
TypeScript
// src/renderer/components/LicenseTab.tsx
|
|
// 구독 기반 라이선스 탭 — 클라우드 인증 + Payple 결제 연동
|
|
|
|
import {
|
|
Box,
|
|
Divider,
|
|
LinearProgress,
|
|
} from '@mui/material'
|
|
import CheckCircleIcon from '@mui/icons-material/CheckCircle'
|
|
import CancelIcon from '@mui/icons-material/Cancel'
|
|
import { Led, PhosphorText, PhysicalButton, MetalCard } from '@d3ro/ui/components/ds'
|
|
import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius } from '@d3ro/ui/theme'
|
|
import { useI18n } from '@d3ro/i18n'
|
|
import { PREMIUM_MODEL_LIMITS } from '@d3ro/core/constants'
|
|
import { useLicenseState } from '../hooks/useLicenseState'
|
|
|
|
export function LicenseTab(): React.ReactElement {
|
|
const { t } = useI18n()
|
|
const {
|
|
licenseInfo, usage, comparison, cloud,
|
|
currentTier, isFree, isPro,
|
|
handleUpgrade, handleOpenBilling, openCloudSettings,
|
|
} = useLicenseState()
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2.5 }}>
|
|
{/* ── 현재 플랜 + 계정 상태 ── */}
|
|
<MetalCard>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
|
<Led
|
|
color={currentTier === 'free' ? 'amber' : 'green'}
|
|
size={12}
|
|
pulse={currentTier !== 'free'}
|
|
/>
|
|
<Box sx={{ flex: 1 }}>
|
|
<PhosphorText variant="label" sx={{ mb: 0.5, display: 'block' }}>
|
|
{t('license.currentTier')}
|
|
</PhosphorText>
|
|
<TierLabel tier={currentTier} t={t} />
|
|
</Box>
|
|
{cloud.authenticated && cloud.userEmail && (
|
|
<PhosphorText variant="dim" sx={{ fontSize: d3roTypo.small.size }}>
|
|
{cloud.userEmail}
|
|
</PhosphorText>
|
|
)}
|
|
</Box>
|
|
</MetalCard>
|
|
|
|
{/* ── 구독 관리 / 업그레이드 ── */}
|
|
<MetalCard>
|
|
<SubscriptionSection
|
|
t={t}
|
|
authenticated={cloud.authenticated}
|
|
isFree={isFree}
|
|
isPro={isPro}
|
|
currentTier={currentTier}
|
|
onUpgrade={handleUpgrade}
|
|
onManage={handleOpenBilling}
|
|
onSignIn={openCloudSettings}
|
|
/>
|
|
</MetalCard>
|
|
|
|
<Divider sx={{ borderColor: d3roPalette.border.subtle }} />
|
|
|
|
{/* ── 일일 사용량 ── */}
|
|
<UsageSection t={t} usage={usage} currentTier={currentTier} />
|
|
|
|
{/* ── 티어 비교표 ── */}
|
|
<ComparisonTable t={t} comparison={comparison} />
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
// ── 하위 컴포넌트 ──────────────────────────────────────
|
|
|
|
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
|
|
currentTier: string
|
|
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="label" sx={{ display: 'block' }}>
|
|
{t('license.subscribe')}
|
|
</PhosphorText>
|
|
<PhosphorText variant="dim" sx={{ fontSize: d3roTypo.small.size, mb: 0.5, 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>
|
|
)
|
|
}
|
|
|
|
// Pro+
|
|
return (
|
|
<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 UsageSection({ t, usage, currentTier }: { t: (k: string) => string; usage: Array<{ feature: string; used: number; limit: number; remaining: number }>; currentTier: string }): React.ReactElement | null {
|
|
if (usage.length === 0) return null
|
|
|
|
return (
|
|
<>
|
|
<PhosphorText variant="label" sx={{ color: d3roPalette.text.label }}>
|
|
{t('license.dailyUsage')}
|
|
</PhosphorText>
|
|
|
|
{usage.map((q) => (
|
|
<QuotaBar key={q.feature} t={t} feature={q.feature} used={q.used} limit={q.limit} remaining={q.remaining} />
|
|
))}
|
|
|
|
{/* Premium 모델별 쿼터 */}
|
|
{PREMIUM_MODEL_LIMITS[currentTier as keyof typeof PREMIUM_MODEL_LIMITS]?.length > 0 && (
|
|
<>
|
|
<PhosphorText variant="label" sx={{ mt: 1, color: d3roPalette.tag.green }}>
|
|
{t('license.premiumQuota')}
|
|
</PhosphorText>
|
|
{PREMIUM_MODEL_LIMITS[currentTier as keyof typeof PREMIUM_MODEL_LIMITS].map((m) => (
|
|
<Box key={m.model}>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
|
|
<PhosphorText variant="small">{t(m.i18nKey)}</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>
|
|
))}
|
|
</>
|
|
)}
|
|
|
|
<Divider sx={{ borderColor: d3roPalette.border.subtle }} />
|
|
</>
|
|
)
|
|
}
|
|
|
|
function QuotaBar({ t, feature, used, limit, remaining }: { t: (k: string, p?: Record<string, string>) => string; feature: string; used: number; limit: number; remaining: number }): React.ReactElement {
|
|
return (
|
|
<Box>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
|
|
<PhosphorText variant="small">
|
|
{t(`license.feature.${feature}`)}
|
|
</PhosphorText>
|
|
<PhosphorText variant="small" sx={{
|
|
color: limit === -1 ? d3roPalette.tag.green : remaining === 0 ? d3roPalette.tag.red : d3roPalette.accent.amber,
|
|
}}>
|
|
{limit === -1
|
|
? t('license.unlimited')
|
|
: t('license.quotaUsed', { used: String(used), limit: String(limit) })}
|
|
</PhosphorText>
|
|
</Box>
|
|
{limit > 0 && (
|
|
<LinearProgress
|
|
variant="determinate"
|
|
value={Math.min(100, (used / limit) * 100)}
|
|
sx={{
|
|
height: 4,
|
|
borderRadius: d3roRadius.xs,
|
|
bgcolor: d3roPalette.bg.inset,
|
|
'& .MuiLinearProgress-bar': {
|
|
bgcolor: used >= limit ? d3roPalette.tag.red : d3roPalette.accent.amber,
|
|
borderRadius: d3roRadius.xs,
|
|
},
|
|
}}
|
|
/>
|
|
)}
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
function ComparisonTable({ t, comparison }: { t: (k: string) => string; comparison: Array<{ feature: string; featureLabel: string; free: boolean | string; pro: boolean | string; proPlus: boolean | string }> }): React.ReactElement | null {
|
|
if (comparison.length === 0) return null
|
|
|
|
return (
|
|
<>
|
|
<PhosphorText variant="label" sx={{ color: d3roPalette.text.label }}>
|
|
{t('license.tierComparison')}
|
|
</PhosphorText>
|
|
|
|
<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)}</td>
|
|
<td><TierCell value={row.free} /></td>
|
|
<td><TierCell value={row.pro} /></td>
|
|
<td><TierCell value={row.proPlus} /></td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</Box>
|
|
</>
|
|
)
|
|
}
|
|
|
|
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>
|
|
)
|
|
}
|