Phase 7~8 구현: 테스트 + 빌드 + CI/CD + SoundEffect + AutoLaunch + UI 리디자인

- vitest 41개 단위 테스트 (HistoryService, DictionaryService, CustomInstructionService, VoiceModeService, D3ROError)
- electron-builder.yml (NSIS, asarUnpack, extraResources)
- .gitlab-ci.yml (lint, typecheck, test, build, release)
- SoundEffectService: WAV 프리로드 + PowerShell 재생 + VoiceMode 연동
- AutoLaunchService: app.setLoginItemSettings + ConfigService 동기화
- TextInsertService: 간이 삽입 검증 (EditMonitor 경량)
- 번들링 인프라: SoX 다운로드 스크립트, PyInstaller 빌드, 경로 해상도 유틸
- AudioCaptureService/LocalSTTService: 번들 경로 자동 감지
- 08-design-system.md 기반 MUI 테마 (다크+라이트+auto 테마 시스템)
- 전체 UI 컴포넌트 리디자인: AppLayout, Dashboard, StatusBar, History, Dictionary, Commands, Settings
- 효과음 WAV 생성: recording-start, recording-stop, error
- EPIPE 에러 핸들링 추가

src/renderer/pages/DictionaryPage.tsx

@@ -1,31 +1,26 @@
 // src/renderer/pages/DictionaryPage.tsx
+// 08-design-system.md SSOT: 다크 카드, 앰버 악센트, 태그 시스템
 
 import { useState, useEffect, useCallback } from 'react'
 import {
-  Box,
-  Typography,
-  TextField,
-  Button,
-  List,
-  ListItem,
-  ListItemText,
-  IconButton,
-  Chip,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  Card,
-  CardContent,
-  InputAdornment
+  Box, Typography, TextField, Button, IconButton, Chip,
+  Dialog, DialogTitle, DialogContent, DialogActions,
+  Card, CardContent, 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 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',
+}
+
 export function DictionaryPage(): React.ReactElement {
   const [data, setData] = useState<DictPageData | null>(null)
   const [search, setSearch] = useState('')
@@ -39,16 +34,11 @@ export function DictionaryPage(): React.ReactElement {
     const result = search.trim()
       ? await window.electronAPI.dictionary.search({ query: search, page: 0, pageSize: PAGE_SIZE })
       : await window.electronAPI.dictionary.getAll({ page: 0, pageSize: PAGE_SIZE })
-
-    if (result.success) {
-      setData(result.data)
-    }
+    if (result.success) setData(result.data)
     setLoading(false)
   }, [search])
 
-  useEffect(() => {
-    loadData()
-  }, [loadData])
+  useEffect(() => { loadData() }, [loadData])
 
   const handleAdd = async () => {
     if (!newWord.trim()) return
@@ -68,32 +58,32 @@ export function DictionaryPage(): React.ReactElement {
   }
 
   return (
-    <Box>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
-        <Typography variant="h5" sx={{ fontWeight: 600 }}>
-          Dictionary
-        </Typography>
-        <Button
-          variant="contained"
-          startIcon={<AddIcon />}
-          onClick={() => setAddOpen(true)}
-          size="small"
-        >
+    <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
         </Button>
       </Box>
 
+      {/* Search */}
       <TextField
         placeholder="Search words..."
         value={search}
         onChange={(e) => setSearch(e.target.value)}
         fullWidth
-        sx={{ mb: 2 }}
+        sx={{ mb: 3 }}
         slotProps={{
           input: {
             startAdornment: (
               <InputAdornment position="start">
-                <SearchIcon />
+                <SearchIcon sx={{ color: d3roPalette.text.label }} />
               </InputAdornment>
             )
           }
@@ -104,46 +94,51 @@ export function DictionaryPage(): React.ReactElement {
         <Typography color="text.secondary">Loading...</Typography>
       ) : !data || data.entries.length === 0 ? (
         <Card>
-          <CardContent>
-            <Typography color="text.secondary" sx={{ textAlign: 'center', py: 4 }}>
-              {search ? 'No words found.' : 'No words yet. Add custom words for better STT accuracy.'}
+          <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>
       ) : (
-        <List>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
           {data.entries.map((entry: DictionaryEntry) => (
-            <ListItem
-              key={entry.id}
-              divider
-              secondaryAction={
-                <IconButton size="small" onClick={() => handleDelete(entry.id)}>
-                  <DeleteIcon fontSize="small" />
-                </IconButton>
-              }
-            >
-              <ListItemText
-                primary={entry.word}
-                secondary={
-                  <Box sx={{ display: 'flex', gap: 1, mt: 0.5 }}>
+            <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 }}>
+                  <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 1.5 }}>
+                    <Typography sx={{ fontSize: '14px', fontWeight: 600 }}>
+                      {entry.word}
+                    </Typography>
                     {entry.pronunciation && (
-                      <Typography variant="caption" color="text.secondary">
+                      <Typography sx={{ fontFamily: d3roFontMono, fontSize: '12px', color: d3roPalette.text.label }}>
                         [{entry.pronunciation}]
                       </Typography>
                     )}
-                    <Chip label={entry.category} size="small" variant="outlined" />
-                    <Chip label={`used ${entry.usageCount}x`} size="small" variant="outlined" />
                   </Box>
-                }
-              />
-            </ListItem>
+                  <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>
+                </Box>
+                <IconButton
+                  size="small"
+                  onClick={() => handleDelete(entry.id)}
+                  sx={{ color: d3roPalette.text.label, '&:hover': { color: d3roPalette.tag.red } }}
+                >
+                  <DeleteIcon fontSize="small" />
+                </IconButton>
+              </CardContent>
+            </Card>
           ))}
-        </List>
+        </Box>
       )}
 
       {/* Add Word Dialog */}
       <Dialog open={addOpen} onClose={() => setAddOpen(false)} maxWidth="xs" fullWidth>
-        <DialogTitle>Add Word</DialogTitle>
+        <DialogTitle sx={{ fontWeight: 700 }}>Add Word</DialogTitle>
         <DialogContent>
           <TextField
             label="Word"
@@ -161,11 +156,9 @@ export function DictionaryPage(): React.ReactElement {
             sx={{ mt: 2 }}
           />
         </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setAddOpen(false)}>Cancel</Button>
-          <Button onClick={handleAdd} variant="contained" disabled={!newWord.trim()}>
-            Add
-          </Button>
+        <DialogActions sx={{ px: 3, pb: 2 }}>
+          <Button onClick={() => setAddOpen(false)} color="secondary" variant="contained">Cancel</Button>
+          <Button onClick={handleAdd} variant="contained" disabled={!newWord.trim()}>Add</Button>
         </DialogActions>
       </Dialog>
     </Box>