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/DashboardPage.tsx

@@ -1,35 +1,96 @@
 // src/renderer/pages/DashboardPage.tsx
+// 08-design-system.md 3.7 Dashboard 레이아웃.
+// hero 수치, 카드 그리드, StatusPanel, 태그 시스템.
 
 import { useState, useEffect } from 'react'
-import { Box, Card, CardContent, Typography, Grid } from '@mui/material'
+import { Box, Card, CardContent, Typography, Chip } from '@mui/material'
 import MicIcon from '@mui/icons-material/Mic'
 import TimerIcon from '@mui/icons-material/Timer'
 import TextFieldsIcon from '@mui/icons-material/TextFields'
-import TodayIcon from '@mui/icons-material/Today'
+import WhatshotIcon from '@mui/icons-material/Whatshot'
+import { d3roPalette, d3roFontMono } from '../theme'
+import { useTheme } from '@mui/material/styles'
 import type { StatsSummary } from '@shared/types'
 
+// ── StatCard 컴포넌트 ────────────────────────────────────
+
 interface StatCardProps {
-  title: string
+  label: string
   value: string
   icon: React.ReactElement
+  tag?: { text: string; color: 'primary' | 'success' | 'warning' | 'error' }
 }
 
-function StatCard({ title, value, icon }: StatCardProps): React.ReactElement {
+function StatCard({ label, value, icon, tag }: StatCardProps): React.ReactElement {
   return (
-    <Card>
-      <CardContent>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
-          <Box sx={{ color: 'primary.main' }}>{icon}</Box>
-          <Typography variant="body2" color="text.secondary">
-            {title}
+    <Card sx={{ p: 0 }}>
+      <CardContent sx={{ p: 3, '&:last-child': { pb: 3 } }}>
+        {/* Label row */}
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
+          <Typography
+            sx={{
+              fontSize: '11px',
+              fontWeight: 600,
+              letterSpacing: '0.1em',
+              textTransform: 'uppercase',
+              color: d3roPalette.text.label,
+            }}
+          >
+            {label}
+          </Typography>
+          {tag && (
+            <Chip label={tag.text} color={tag.color} size="small" />
+          )}
+        </Box>
+
+        {/* Hero value */}
+        <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 1.5 }}>
+          <Box sx={{ color: d3roPalette.accent.amber, opacity: 0.8 }}>{icon}</Box>
+          <Typography
+            sx={{
+              fontFamily: d3roFontMono,
+              fontSize: '28px',
+              fontWeight: 700,
+              lineHeight: 1.2,
+              color: d3roPalette.text.primary,
+              fontVariantNumeric: 'tabular-nums',
+            }}
+          >
+            {value}
           </Typography>
         </Box>
-        <Typography variant="h4">{value}</Typography>
       </CardContent>
     </Card>
   )
 }
 
+// ── LED 인디케이터 ───────────────────────────────────────
+
+function Led({ status }: { status: 'active' | 'warning' | 'error' | 'off' }): React.ReactElement {
+  const colors = {
+    active: { bg: d3roPalette.tag.green, shadow: d3roPalette.tag.green },
+    warning: { bg: d3roPalette.tag.orange, shadow: d3roPalette.tag.orange },
+    error: { bg: d3roPalette.tag.red, shadow: d3roPalette.tag.red },
+    off: { bg: d3roPalette.text.disabled, shadow: 'transparent' },
+  }
+  const c = colors[status]
+
+  return (
+    <Box
+      sx={{
+        width: 8,
+        height: 8,
+        borderRadius: '50%',
+        bgcolor: c.bg,
+        boxShadow: status !== 'off' ? `0 0 6px ${c.shadow}, 0 0 12px ${c.shadow}40` : 'none',
+        flexShrink: 0,
+      }}
+    />
+  )
+}
+
+// ── 유틸 ─────────────────────────────────────────────────
+
 function formatTime(ms: number): string {
   const totalSec = Math.round(ms / 1000)
   const hours = Math.floor(totalSec / 3600)
@@ -39,15 +100,21 @@ function formatTime(ms: number): string {
   return `${minutes}:${seconds.toString().padStart(2, '0')}`
 }
 
+// ── DashboardPage ────────────────────────────────────────
+
 export function DashboardPage(): React.ReactElement {
   const [stats, setStats] = useState<StatsSummary | null>(null)
+  const [ollamaConnected, setOllamaConnected] = useState(false)
 
   useEffect(() => {
     window.electronAPI.stats.getSummary().then((result) => {
       if (result.success) setStats(result.data)
     })
 
-    // 30초마다 갱신
+    window.electronAPI.llm.getStatus().then((result) => {
+      if (result.success) setOllamaConnected(result.data.connectionState === 'connected')
+    })
+
     const interval = setInterval(() => {
       window.electronAPI.stats.getSummary().then((result) => {
         if (result.success) setStats(result.data)
@@ -58,73 +125,138 @@ export function DashboardPage(): React.ReactElement {
   }, [])
 
   return (
-    <Box>
-      <Typography variant="h5" sx={{ mb: 3, fontWeight: 600 }}>
-        Dashboard
+    <Box sx={{ maxWidth: 1200, mx: 'auto', p: 5 }}>
+      {/* Header */}
+      <Box sx={{ mb: 4 }}>
+        <Typography
+          sx={{
+            fontSize: '22px',
+            fontWeight: 700,
+            color: d3roPalette.text.primary,
+          }}
+        >
+          Dashboard
+        </Typography>
+        <Typography
+          sx={{
+            fontSize: '14px',
+            color: d3roPalette.text.secondary,
+            mt: 0.5,
+          }}
+        >
+          Voice assistant overview
+        </Typography>
+      </Box>
+
+      {/* Status Panel (서비스 상태) */}
+      <Card sx={{ mb: 3, p: 0 }}>
+        <CardContent sx={{ p: 2.5, '&:last-child': { pb: 2.5 } }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <Led status="active" />
+              <Typography sx={{ fontSize: '12px', color: d3roPalette.text.secondary }}>
+                STT Ready
+              </Typography>
+            </Box>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <Led status={ollamaConnected ? 'active' : 'warning'} />
+              <Typography sx={{ fontSize: '12px', color: d3roPalette.text.secondary }}>
+                {ollamaConnected ? 'Ollama Connected' : 'Ollama Offline'}
+              </Typography>
+            </Box>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <Led status="active" />
+              <Typography sx={{ fontSize: '12px', color: d3roPalette.text.secondary }}>
+                Hotkey Active
+              </Typography>
+            </Box>
+          </Box>
+        </CardContent>
+      </Card>
+
+      {/* Stat Cards Grid */}
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
+          gap: 3,
+          mb: 4,
+        }}
+      >
+        <StatCard
+          label="Total Sessions"
+          value={String(stats?.totalSessionCount ?? 0)}
+          icon={<MicIcon />}
+        />
+        <StatCard
+          label="Total Time"
+          value={formatTime(stats?.totalRecordingTimeMs ?? 0)}
+          icon={<TimerIcon />}
+        />
+        <StatCard
+          label="Total Words"
+          value={String(stats?.totalWordCount ?? 0)}
+          icon={<TextFieldsIcon />}
+        />
+        <StatCard
+          label="Streak"
+          value={`${stats?.streakDays ?? 0}d`}
+          icon={<WhatshotIcon />}
+          tag={stats?.streakDays && stats.streakDays > 0 ? { text: 'ACTIVE', color: 'success' } : undefined}
+        />
+      </Box>
+
+      {/* Today Section */}
+      <Typography
+        sx={{
+          fontSize: '11px',
+          fontWeight: 600,
+          letterSpacing: '0.1em',
+          textTransform: 'uppercase',
+          color: d3roPalette.text.label,
+          mb: 2,
+        }}
+      >
+        Today
       </Typography>
 
-      <Grid container spacing={2}>
-        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
-          <StatCard
-            title="Total Sessions"
-            value={String(stats?.totalSessionCount ?? 0)}
-            icon={<MicIcon />}
-          />
-        </Grid>
-        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
-          <StatCard
-            title="Total Time"
-            value={formatTime(stats?.totalRecordingTimeMs ?? 0)}
-            icon={<TimerIcon />}
-          />
-        </Grid>
-        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
-          <StatCard
-            title="Total Words"
-            value={String(stats?.totalWordCount ?? 0)}
-            icon={<TextFieldsIcon />}
-          />
-        </Grid>
-        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
-          <StatCard
-            title="Streak"
-            value={`${stats?.streakDays ?? 0} days`}
-            icon={<TodayIcon />}
-          />
-        </Grid>
-      </Grid>
-
-      {/* Today's stats */}
-      <Box sx={{ mt: 3 }}>
-        <Typography variant="h6" sx={{ mb: 2 }}>
-          Today
-        </Typography>
-        <Grid container spacing={2}>
-          <Grid size={{ xs: 12, sm: 4 }}>
-            <Card>
-              <CardContent>
-                <Typography variant="body2" color="text.secondary">Sessions</Typography>
-                <Typography variant="h5">{stats?.todaySessionCount ?? 0}</Typography>
-              </CardContent>
-            </Card>
-          </Grid>
-          <Grid size={{ xs: 12, sm: 4 }}>
-            <Card>
-              <CardContent>
-                <Typography variant="body2" color="text.secondary">Time</Typography>
-                <Typography variant="h5">{formatTime(stats?.todayRecordingTimeMs ?? 0)}</Typography>
-              </CardContent>
-            </Card>
-          </Grid>
-          <Grid size={{ xs: 12, sm: 4 }}>
-            <Card>
-              <CardContent>
-                <Typography variant="body2" color="text.secondary">Words</Typography>
-                <Typography variant="h5">{stats?.todayWordCount ?? 0}</Typography>
-              </CardContent>
-            </Card>
-          </Grid>
-        </Grid>
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(3, 1fr)',
+          gap: 3,
+        }}
+      >
+        <Card sx={{ p: 0 }}>
+          <CardContent sx={{ p: 3, '&:last-child': { pb: 3 } }}>
+            <Typography sx={{ fontSize: '11px', fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: d3roPalette.text.label, mb: 1 }}>
+              Sessions
+            </Typography>
+            <Typography sx={{ fontFamily: d3roFontMono, fontSize: '28px', fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>
+              {stats?.todaySessionCount ?? 0}
+            </Typography>
+          </CardContent>
+        </Card>
+        <Card sx={{ p: 0 }}>
+          <CardContent sx={{ p: 3, '&:last-child': { pb: 3 } }}>
+            <Typography sx={{ fontSize: '11px', fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: d3roPalette.text.label, mb: 1 }}>
+              Time
+            </Typography>
+            <Typography sx={{ fontFamily: d3roFontMono, fontSize: '28px', fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>
+              {formatTime(stats?.todayRecordingTimeMs ?? 0)}
+            </Typography>
+          </CardContent>
+        </Card>
+        <Card sx={{ p: 0 }}>
+          <CardContent sx={{ p: 3, '&:last-child': { pb: 3 } }}>
+            <Typography sx={{ fontSize: '11px', fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: d3roPalette.text.label, mb: 1 }}>
+              Words
+            </Typography>
+            <Typography sx={{ fontFamily: d3roFontMono, fontSize: '28px', fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>
+              {stats?.todayWordCount ?? 0}
+            </Typography>
+          </CardContent>
+        </Card>
       </Box>
     </Box>
   )