Phase 10~11 전체 구현: 킬러 피처 5종 + 수익화 시스템
Phase 10 킬러 피처: - MemoService: 태그 CRUD + 마크다운 내보내기 (memo_tags DB) - VoiceCommandService: 키워드→명령어 매칭, 프리셋 4종 - ScreenContextService: PowerShell 활성 윈도우 + Ctrl+C 선택 텍스트 - ChainService: LLM 명령어 순차 실행 파이프라인 - CaptionService: 6초 청크 연속 전사 + 시스템 오디오 루프백 VoiceModeService 파이프라인 통합: - 녹음 시작 → 컨텍스트 캡처 → STT → 키워드 매칭 → LLM(체인/컨텍스트 주입) → 삽입 시스템 오디오 캡처: - setDisplayMediaRequestHandler + audio: 'loopback' (IPC 브릿지) - electron-audio-loopback 패키지 contextIsolation 호환 불가 → 직접 구현 Phase 11 수익화: - LicenseService: Free/Pro/Pro+ 3티어, LemonSqueezy API - Feature Gate: requireFeature/checkFeature/consumeFeature - 일일 쿼터: Free dictation 20/일, LLM 10/일 (SQLite daily_usage) - LicenseModal, ProBadge, UpgradePromptModal UI 디자인 보강: - d3roTypo(13종), d3roShadow(10종), d3roRadius(7종) 토큰 시스템 - ScreenPanel, ButtonGroup DS 컴포넌트 신규 - PhosphorText 4→13종 변형, MetalDial conic-gradient 광택 - 공유 컴포넌트: EmptyStateCard, SearchInput, PageHeader, HistoryEntryCard 기타: - 자막 핫키 SSOT 전체 연동 (Config→Hotkey→VoiceMode→Caption→Settings) - StatusBar 자막 LED + 효과음, 자막 로딩 UI - LLM 상태 이벤트 전파 수정 (폴링 제거 → onStatusChanged) - 커맨드 팝업 "선택 해제" 항목 추가
This commit is contained in:
Yun Chan
parent
36d77ca224
commit
a31f96bbb8
97 changed files with 11853 additions and 1143 deletions
297
src/renderer/components/LicenseTab.tsx
Normal file
297
src/renderer/components/LicenseTab.tsx
Normal file
|
|
@ -0,0 +1,297 @@
|
|||
// src/renderer/components/LicenseTab.tsx
|
||||
// Phase 11: Settings License 탭 — 라이선스 키 입력, 사용량, 티어 비교
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
TextField,
|
||||
Button,
|
||||
Divider,
|
||||
LinearProgress,
|
||||
} from '@mui/material'
|
||||
import CheckCircleIcon from '@mui/icons-material/CheckCircle'
|
||||
import CancelIcon from '@mui/icons-material/Cancel'
|
||||
import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius } from '../theme'
|
||||
import { useI18n } from '../i18n'
|
||||
import type {
|
||||
LicenseInfo,
|
||||
LicenseTier,
|
||||
UsageQuota,
|
||||
TierComparison,
|
||||
ActivateLicenseResult,
|
||||
} from '@shared/types'
|
||||
|
||||
export function LicenseTab(): React.ReactElement {
|
||||
const { t } = useI18n()
|
||||
const [licenseInfo, setLicenseInfo] = useState<LicenseInfo | null>(null)
|
||||
const [usage, setUsage] = useState<UsageQuota[]>([])
|
||||
const [comparison, setComparison] = useState<TierComparison[]>([])
|
||||
const [keyInput, setKeyInput] = useState('')
|
||||
const [activating, setActivating] = useState(false)
|
||||
const [message, setMessage] = useState<{ text: string; success: boolean } | null>(null)
|
||||
|
||||
const loadData = useCallback(() => {
|
||||
window.electronAPI.license.getInfo().then((r) => {
|
||||
if (r.success) setLicenseInfo(r.data)
|
||||
})
|
||||
window.electronAPI.license.getAllUsage().then((r) => {
|
||||
if (r.success) setUsage(r.data)
|
||||
})
|
||||
window.electronAPI.license.getTierComparison().then((r) => {
|
||||
if (r.success) setComparison(r.data)
|
||||
})
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
const unsub = window.electronAPI.license.onTierChanged(() => loadData())
|
||||
return unsub
|
||||
}, [loadData])
|
||||
|
||||
const handleActivate = useCallback(async () => {
|
||||
if (!keyInput.trim()) return
|
||||
setActivating(true)
|
||||
setMessage(null)
|
||||
const result = await window.electronAPI.license.activate({ licenseKey: keyInput.trim() })
|
||||
setActivating(false)
|
||||
if (result.success) {
|
||||
const data = result.data as ActivateLicenseResult
|
||||
if (data.success) {
|
||||
setMessage({ text: t('license.activated'), success: true })
|
||||
setKeyInput('')
|
||||
loadData()
|
||||
} else {
|
||||
setMessage({ text: t('license.activateError', { message: data.message }), success: false })
|
||||
}
|
||||
}
|
||||
}, [keyInput, t, loadData])
|
||||
|
||||
const handleDeactivate = useCallback(async () => {
|
||||
await window.electronAPI.license.deactivate()
|
||||
setMessage({ text: t('license.deactivated'), success: true })
|
||||
loadData()
|
||||
}, [t, loadData])
|
||||
|
||||
const tierLabel = (tier: LicenseTier): string => {
|
||||
if (tier === 'pro_plus') return t('license.proPlus')
|
||||
if (tier === 'pro') return t('license.pro')
|
||||
return t('license.free')
|
||||
}
|
||||
|
||||
const tierColor = (tier: LicenseTier): string => {
|
||||
if (tier === 'pro_plus') return d3roPalette.tag.green
|
||||
if (tier === 'pro') return d3roPalette.accent.amber
|
||||
return d3roPalette.text.secondary
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2.5 }}>
|
||||
{/* 현재 플랜 */}
|
||||
<Typography variant="overline" sx={{ color: d3roPalette.text.label, letterSpacing: '1.5px' }}>
|
||||
{t('license.currentTier')}
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontFamily: d3roFontMono,
|
||||
fontSize: d3roTypo.title.size,
|
||||
fontWeight: d3roTypo.title.weight,
|
||||
color: licenseInfo ? tierColor(licenseInfo.tier) : d3roPalette.text.primary,
|
||||
}}
|
||||
>
|
||||
{licenseInfo ? tierLabel(licenseInfo.tier) : '...'}
|
||||
</Typography>
|
||||
{licenseInfo?.activatedAt && (
|
||||
<Typography sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.meta.size, color: d3roPalette.text.secondary }}>
|
||||
{t('license.activatedAt')}: {new Date(licenseInfo.activatedAt).toLocaleDateString()}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Divider sx={{ borderColor: d3roPalette.border.subtle }} />
|
||||
|
||||
{/* 라이선스 키 입력 */}
|
||||
<Typography variant="overline" sx={{ color: d3roPalette.text.label, letterSpacing: '1.5px' }}>
|
||||
{t('license.keyLabel')}
|
||||
</Typography>
|
||||
|
||||
{licenseInfo?.tier === 'free' ? (
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
placeholder={t('license.keyPlaceholder')}
|
||||
value={keyInput}
|
||||
onChange={(e) => setKeyInput(e.target.value)}
|
||||
disabled={activating}
|
||||
sx={{
|
||||
'& .MuiInputBase-root': {
|
||||
fontFamily: d3roFontMono,
|
||||
fontSize: d3roTypo.compact.size,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
onClick={handleActivate}
|
||||
disabled={activating || !keyInput.trim()}
|
||||
sx={{
|
||||
fontFamily: d3roFontMono,
|
||||
fontSize: d3roTypo.small.size,
|
||||
bgcolor: d3roPalette.accent.amber,
|
||||
color: d3roPalette.bg.app,
|
||||
whiteSpace: 'nowrap',
|
||||
'&:hover': { bgcolor: d3roPalette.accent.amber, filter: 'brightness(1.1)' },
|
||||
}}
|
||||
>
|
||||
{activating ? t('license.activating') : t('license.activate')}
|
||||
</Button>
|
||||
</Box>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.compact.size, color: d3roPalette.text.secondary }}>
|
||||
{licenseInfo?.licenseKey ? `${licenseInfo.licenseKey.substring(0, 16)}...` : ''}
|
||||
</Typography>
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="small"
|
||||
onClick={handleDeactivate}
|
||||
sx={{
|
||||
fontFamily: d3roFontMono,
|
||||
fontSize: d3roTypo.small.size,
|
||||
color: d3roPalette.tag.red,
|
||||
borderColor: d3roPalette.tag.red,
|
||||
}}
|
||||
>
|
||||
{t('license.deactivate')}
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{message && (
|
||||
<Typography
|
||||
sx={{
|
||||
fontFamily: d3roFontMono,
|
||||
fontSize: d3roTypo.small.size,
|
||||
color: message.success ? d3roPalette.tag.green : d3roPalette.tag.red,
|
||||
}}
|
||||
>
|
||||
{message.text}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
<Divider sx={{ borderColor: d3roPalette.border.subtle }} />
|
||||
|
||||
{/* 일일 사용량 */}
|
||||
<Typography variant="overline" sx={{ color: d3roPalette.text.label, letterSpacing: '1.5px' }}>
|
||||
{t('license.dailyUsage')}
|
||||
</Typography>
|
||||
|
||||
{usage.map((q) => (
|
||||
<Box key={q.feature}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
|
||||
<Typography sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.compact.size, color: d3roPalette.text.primary }}>
|
||||
{t(`license.feature.${q.feature}` as Parameters<typeof t>[0])}
|
||||
</Typography>
|
||||
<Typography sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.compact.size, color: q.limit === -1 ? d3roPalette.tag.green : d3roPalette.accent.amber }}>
|
||||
{q.limit === -1
|
||||
? t('license.quotaUnlimited')
|
||||
: t('license.quotaUsed', { used: String(q.used), limit: String(q.limit) })}
|
||||
</Typography>
|
||||
</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>
|
||||
))}
|
||||
|
||||
<Divider sx={{ borderColor: d3roPalette.border.subtle }} />
|
||||
|
||||
{/* 티어 비교표 */}
|
||||
<Typography variant="overline" sx={{ color: d3roPalette.text.label, letterSpacing: '1.5px' }}>
|
||||
{t('license.tierComparison')}
|
||||
</Typography>
|
||||
|
||||
<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>{t('license.pro')}</th>
|
||||
<th>{t('license.proPlus')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{comparison.map((row) => (
|
||||
<tr key={row.feature}>
|
||||
<td>{t(`license.feature.${row.feature}`)}</td>
|
||||
<td><TierCell value={row.free} /></td>
|
||||
<td><TierCell value={row.pro} /></td>
|
||||
<td><TierCell value={row.proPlus} /></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</Box>
|
||||
|
||||
{/* 기기 ID */}
|
||||
{licenseInfo && (
|
||||
<Typography sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.micro.size, color: d3roPalette.text.disabled }}>
|
||||
{t('license.machineId')}: {licenseInfo.machineId.substring(0, 16)}...
|
||||
</Typography>
|
||||
)}
|
||||
</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 (
|
||||
<Typography sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.small.size, color: d3roPalette.accent.amber }}>
|
||||
{value}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue