WIP: 인스트루먼트 UI 시도 (DS 컴포넌트 + CRT 셰이더)

- DS 컴포넌트: CrtDisplay, InstrumentPanel, Led, PhysicalButton, MetalCard, PhosphorText
- Dashboard: CRT WebGL 셰이더 + 물리 버튼 + LED 클러스터
- 사이드바: 72px 미니 네비게이션
- 문제: SSOT 위반(매직넘버 41곳), 시안 A 정체성 부족, 모달/팝업 방치
- 다음: 디자인 근본 재설계 필요

src/renderer/pages/DictionaryPage.tsx

@@ -1,25 +1,16 @@
 // src/renderer/pages/DictionaryPage.tsx
-// 08-design-system.md SSOT: 다크 카드, 앰버 악센트, 태그 시스템
+// 인스트루먼트 미학: MetalCard + PhosphorText
 
 import { useState, useEffect, useCallback } from 'react'
-import {
-  Box, Typography, TextField, Button, IconButton, Chip,
-  Dialog, DialogTitle, DialogContent, DialogActions,
-  Card, CardContent, InputAdornment
-} from '@mui/material'
+import { Box, TextField, Button, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, InputAdornment } from '@mui/material'
 import AddIcon from '@mui/icons-material/Add'
 import DeleteIcon from '@mui/icons-material/Delete'
 import SearchIcon from '@mui/icons-material/Search'
-import { d3roPalette, d3roFontMono } from '../theme'
+import { MetalCard, PhosphorText, PhysicalButton } from '../components/ds'
 import type { DictionaryEntry, DictionaryPage as DictPageData } from '@shared/types'
 
 const PAGE_SIZE = 50
-
-const CATEGORY_COLOR: Record<string, 'primary' | 'secondary' | 'warning'> = {
-  user: 'primary',
-  auto: 'warning',
-  technical: 'secondary',
-}
+const MONO = 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace'
 
 export function DictionaryPage(): React.ReactElement {
   const [data, setData] = useState<DictPageData | null>(null)
@@ -42,119 +33,69 @@ export function DictionaryPage(): React.ReactElement {
 
   const handleAdd = async () => {
     if (!newWord.trim()) return
-    await window.electronAPI.dictionary.add({
-      word: newWord.trim(),
-      pronunciation: newPronunciation.trim() || undefined
-    })
-    setNewWord('')
-    setNewPronunciation('')
-    setAddOpen(false)
-    loadData()
-  }
-
-  const handleDelete = async (id: string) => {
-    await window.electronAPI.dictionary.delete({ id })
-    loadData()
+    await window.electronAPI.dictionary.add({ word: newWord.trim(), pronunciation: newPronunciation.trim() || undefined })
+    setNewWord(''); setNewPronunciation(''); setAddOpen(false); loadData()
   }
 
   return (
-    <Box sx={{ maxWidth: 1200, mx: 'auto', p: 5 }}>
-      {/* Header */}
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
-        <Box>
-          <Typography sx={{ fontSize: '22px', fontWeight: 700 }}>Dictionary</Typography>
-          <Typography sx={{ fontSize: '14px', color: 'text.secondary', mt: 0.5 }}>
-            Custom words for better STT accuracy
-          </Typography>
-        </Box>
-        <Button variant="contained" startIcon={<AddIcon />} onClick={() => setAddOpen(true)}>
-          Add Word
+    <Box sx={{ maxWidth: 900, mx: 'auto', p: 4 }}>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+        <PhosphorText variant="label" sx={{ color: '#77797c' }}>
+          CUSTOM DICTIONARY — {data?.total ?? 0} WORDS
+        </PhosphorText>
+        <Button variant="contained" startIcon={<AddIcon />} onClick={() => setAddOpen(true)} size="small">
+          ADD
         </Button>
       </Box>
 
-      {/* Search */}
       <TextField
-        placeholder="Search words..."
+        placeholder="SEARCH..."
         value={search}
         onChange={(e) => setSearch(e.target.value)}
         fullWidth
-        sx={{ mb: 3 }}
-        slotProps={{
-          input: {
-            startAdornment: (
-              <InputAdornment position="start">
-                <SearchIcon sx={{ color: d3roPalette.text.label }} />
-              </InputAdornment>
-            )
-          }
-        }}
+        sx={{ mb: 3, '& .MuiInputBase-input': { fontFamily: MONO, fontSize: '12px', letterSpacing: '0.5px' } }}
+        slotProps={{ input: { startAdornment: <InputAdornment position="start"><SearchIcon sx={{ color: '#77797c', fontSize: 18 }} /></InputAdornment> } }}
       />
 
       {loading ? (
-        <Typography color="text.secondary">Loading...</Typography>
+        <PhosphorText variant="dim">LOADING...</PhosphorText>
       ) : !data || data.entries.length === 0 ? (
-        <Card>
-          <CardContent sx={{ py: 6, textAlign: 'center' }}>
-            <Typography color="text.secondary">
-              {search ? 'No words found.' : 'No words yet. Add custom words to improve recognition.'}
-            </Typography>
-          </CardContent>
-        </Card>
+        <MetalCard>
+          <Box sx={{ py: 6, textAlign: 'center' }}>
+            <PhosphorText variant="dim">{search ? 'NO RESULTS' : 'NO WORDS — ADD CUSTOM WORDS FOR BETTER STT'}</PhosphorText>
+          </Box>
+        </MetalCard>
       ) : (
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
           {data.entries.map((entry: DictionaryEntry) => (
-            <Card key={entry.id} sx={{ p: 0 }}>
-              <CardContent sx={{ p: 2, '&:last-child': { pb: 2 }, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                <Box sx={{ flex: 1 }}>
+            <MetalCard key={entry.id}>
+              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <Box>
                   <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 1.5 }}>
-                    <Typography sx={{ fontSize: '14px', fontWeight: 600 }}>
-                      {entry.word}
-                    </Typography>
+                    <Box sx={{ fontSize: '14px', fontWeight: 600, color: '#fff' }}>{entry.word}</Box>
                     {entry.pronunciation && (
-                      <Typography sx={{ fontFamily: d3roFontMono, fontSize: '12px', color: d3roPalette.text.label }}>
-                        [{entry.pronunciation}]
-                      </Typography>
+                      <Box sx={{ fontFamily: MONO, fontSize: '11px', color: '#5c2615' }}>[{entry.pronunciation}]</Box>
                     )}
                   </Box>
-                  <Box sx={{ display: 'flex', gap: 1, mt: 1 }}>
-                    <Chip label={entry.category.toUpperCase()} size="small" color={CATEGORY_COLOR[entry.category] ?? 'primary'} />
-                    <Typography sx={{ fontFamily: d3roFontMono, fontSize: '11px', color: d3roPalette.text.label, alignSelf: 'center' }}>
-                      {entry.usageCount}× used
-                    </Typography>
+                  <Box sx={{ fontFamily: MONO, fontSize: '10px', color: '#77797c', mt: 0.5, letterSpacing: '0.5px' }}>
+                    {entry.category.toUpperCase()} · {entry.usageCount}× USED
                   </Box>
                 </Box>
-                <IconButton
-                  size="small"
-                  onClick={() => handleDelete(entry.id)}
-                  sx={{ color: d3roPalette.text.label, '&:hover': { color: d3roPalette.tag.red } }}
-                >
-                  <DeleteIcon fontSize="small" />
+                <IconButton size="small" onClick={() => { window.electronAPI.dictionary.delete({ id: entry.id }); loadData() }}
+                  sx={{ color: '#77797c', '&:hover': { color: '#ef4444' } }}>
+                  <DeleteIcon sx={{ fontSize: 16 }} />
                 </IconButton>
-              </CardContent>
-            </Card>
+              </Box>
+            </MetalCard>
           ))}
         </Box>
       )}
 
-      {/* Add Word Dialog */}
       <Dialog open={addOpen} onClose={() => setAddOpen(false)} maxWidth="xs" fullWidth>
         <DialogTitle sx={{ fontWeight: 700 }}>Add Word</DialogTitle>
         <DialogContent>
-          <TextField
-            label="Word"
-            value={newWord}
-            onChange={(e) => setNewWord(e.target.value)}
-            fullWidth
-            autoFocus
-            sx={{ mt: 1 }}
-          />
-          <TextField
-            label="Pronunciation (optional)"
-            value={newPronunciation}
-            onChange={(e) => setNewPronunciation(e.target.value)}
-            fullWidth
-            sx={{ mt: 2 }}
-          />
+          <TextField label="Word" value={newWord} onChange={(e) => setNewWord(e.target.value)} fullWidth autoFocus sx={{ mt: 1 }} />
+          <TextField label="Pronunciation (optional)" value={newPronunciation} onChange={(e) => setNewPronunciation(e.target.value)} fullWidth sx={{ mt: 2 }} />
         </DialogContent>
         <DialogActions sx={{ px: 3, pb: 2 }}>
           <Button onClick={() => setAddOpen(false)} color="secondary" variant="contained">Cancel</Button>