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)
- 커맨드 팝업 "선택 해제" 항목 추가

src/renderer/pages/DictionaryPage.tsx

@@ -1,19 +1,21 @@
 // src/renderer/pages/DictionaryPage.tsx
-// 인스트루먼트 미학: MetalCard + PhosphorText
+// 인스트루먼트 미학: MetalCard + PhosphorText + 타이포 토큰
 
 import { useState, useEffect, useCallback } from 'react'
-import { Box, TextField, Button, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, InputAdornment } from '@mui/material'
+import { Box, TextField, Button, IconButton, Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material'
 import AddIcon from '@mui/icons-material/Add'
 import DeleteIcon from '@mui/icons-material/Delete'
 import EditIcon from '@mui/icons-material/Edit'
-import SearchIcon from '@mui/icons-material/Search'
-import { MetalCard, PhosphorText, PhysicalButton } from '../components/ds'
-import { d3roPalette, d3roFontMono } from '../theme'
+import { MetalCard, PhosphorText } from '../components/ds'
+import { PageHeader, SearchInput, EmptyStateCard } from '../components/shared'
+import { d3roPalette, d3roFontMono, d3roTypo } from '../theme'
+import { useI18n } from '../i18n'
 import type { DictionaryEntry, DictionaryPage as DictPageData } from '@shared/types'
 
 const PAGE_SIZE = 50
 
 export function DictionaryPage(): React.ReactElement {
+  const { t } = useI18n()
   const [data, setData] = useState<DictPageData | null>(null)
   const [search, setSearch] = useState('')
   const [loading, setLoading] = useState(true)
@@ -67,32 +69,26 @@ export function DictionaryPage(): React.ReactElement {
 
   return (
     <Box sx={{ maxWidth: 900, mx: 'auto', p: 4 }}>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
-        <PhosphorText variant="label" sx={{ color: d3roPalette.text.inactive }}>
-          CUSTOM DICTIONARY — {data?.total ?? 0} WORDS
-        </PhosphorText>
-        <Button variant="contained" startIcon={<AddIcon />} onClick={openAdd} size="small">
-          ADD
-        </Button>
-      </Box>
+      <PageHeader
+        title={t('dictionary.title').toUpperCase()}
+        count={t('dictionary.words', { count: data?.total ?? 0 }).toUpperCase()}
+        action={
+          <Button variant="contained" startIcon={<AddIcon />} onClick={openAdd} size="small">
+            {t('dictionary.add').toUpperCase()}
+          </Button>
+        }
+      />
 
-      <TextField
-        placeholder="SEARCH..."
+      <SearchInput
+        placeholder={t('dictionary.search').toUpperCase()}
         value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        fullWidth
-        sx={{ mb: 3, '& .MuiInputBase-input': { fontFamily: d3roFontMono, fontSize: '12px', letterSpacing: '0.5px' } }}
-        slotProps={{ input: { startAdornment: <InputAdornment position="start"><SearchIcon sx={{ color: d3roPalette.text.inactive, fontSize: 18 }} /></InputAdornment> } }}
+        onChange={setSearch}
       />
 
       {loading ? (
-        <PhosphorText variant="dim">LOADING...</PhosphorText>
+        <PhosphorText variant="dim">{t('common.loading').toUpperCase()}</PhosphorText>
       ) : !data || data.entries.length === 0 ? (
-        <MetalCard>
-          <Box sx={{ py: 6, textAlign: 'center' }}>
-            <PhosphorText variant="dim">{search ? 'NO RESULTS' : 'NO WORDS — ADD CUSTOM WORDS FOR BETTER STT'}</PhosphorText>
-          </Box>
-        </MetalCard>
+        <EmptyStateCard message={search ? t('dictionary.noResults').toUpperCase() : t('dictionary.noWords').toUpperCase()} />
       ) : (
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
           {data.entries.map((entry: DictionaryEntry) => (
@@ -100,13 +96,19 @@ export function DictionaryPage(): React.ReactElement {
               <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                 <Box>
                   <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 1.5 }}>
-                    <Box sx={{ fontSize: '14px', fontWeight: 600, color: d3roPalette.text.primary }}>{entry.word}</Box>
+                    <Box sx={{ fontSize: d3roTypo.body.size, fontWeight: d3roTypo.heading.weight, color: d3roPalette.text.primary }}>{entry.word}</Box>
                     {entry.pronunciation && (
-                      <Box sx={{ fontFamily: d3roFontMono, fontSize: '11px', color: d3roPalette.text.dimLabel }}>[{entry.pronunciation}]</Box>
+                      <Box sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.meta.size, color: d3roPalette.text.dimLabel }}>[{entry.pronunciation}]</Box>
                     )}
                   </Box>
-                  <Box sx={{ fontFamily: d3roFontMono, fontSize: '10px', color: d3roPalette.text.inactive, mt: 0.5, letterSpacing: '0.5px' }}>
-                    {entry.category.toUpperCase()} · {entry.usageCount}× USED
+                  <Box sx={{
+                    fontFamily: d3roFontMono,
+                    fontSize: d3roTypo.label.size,
+                    color: d3roPalette.text.inactive,
+                    mt: 0.5,
+                    letterSpacing: d3roTypo.label.spacing,
+                  }}>
+                    {entry.category.toUpperCase()} · {t('dictionary.used', { count: entry.usageCount })}
                   </Box>
                 </Box>
                 <Box sx={{ display: 'flex', gap: 0.5 }}>
@@ -126,14 +128,14 @@ export function DictionaryPage(): React.ReactElement {
       )}
 
       <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} maxWidth="xs" fullWidth>
-        <DialogTitle sx={{ fontWeight: 700 }}>{editId ? '단어 편집' : '단어 추가'}</DialogTitle>
+        <DialogTitle sx={{ fontWeight: 700 }}>{editId ? t('dictionary.editTitle') : t('dictionary.addTitle')}</DialogTitle>
         <DialogContent>
-          <TextField label="단어" value={formWord} onChange={(e) => setFormWord(e.target.value)} fullWidth autoFocus sx={{ mt: 1 }} />
-          <TextField label="발음 (선택)" value={formPronunciation} onChange={(e) => setFormPronunciation(e.target.value)} fullWidth sx={{ mt: 2 }} />
+          <TextField label={t('dictionary.word')} value={formWord} onChange={(e) => setFormWord(e.target.value)} fullWidth autoFocus sx={{ mt: 1 }} />
+          <TextField label={t('dictionary.pronunciation')} value={formPronunciation} onChange={(e) => setFormPronunciation(e.target.value)} fullWidth sx={{ mt: 2 }} />
         </DialogContent>
         <DialogActions sx={{ px: 3, pb: 2 }}>
-          <Button onClick={() => setDialogOpen(false)} sx={{ color: d3roPalette.text.inactive }}>취소</Button>
-          <Button onClick={handleSave} variant="contained" disabled={!formWord.trim()}>저장</Button>
+          <Button onClick={() => setDialogOpen(false)} sx={{ color: d3roPalette.text.inactive }}>{t('common.cancel')}</Button>
+          <Button onClick={handleSave} variant="contained" disabled={!formWord.trim()}>{t('common.save')}</Button>
         </DialogActions>
       </Dialog>
     </Box>