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

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

src/renderer/pages/DashboardPage.tsx

@@ -1,263 +1,182 @@
 // src/renderer/pages/DashboardPage.tsx
-// 08-design-system.md 3.7 Dashboard 레이아웃.
-// hero 수치, 카드 그리드, StatusPanel, 태그 시스템.
+// 시안 A 인스트루먼트 패널: CRT 디스플레이 + LED 클러스터 + 물리 버튼 + 통계
 
-import { useState, useEffect } from 'react'
-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 WhatshotIcon from '@mui/icons-material/Whatshot'
-import { d3roPalette, d3roFontMono } from '../theme'
-import { useTheme } from '@mui/material/styles'
+import { useState, useEffect, useCallback } from 'react'
+import { Box, Typography } from '@mui/material'
+import { CrtDisplay, InstrumentPanel, Led, PhysicalButton, MetalCard, PhosphorText } from '../components/ds'
 import type { StatsSummary } from '@shared/types'
 
-// ── StatCard 컴포넌트 ────────────────────────────────────
-
-interface StatCardProps {
-  label: string
-  value: string
-  icon: React.ReactElement
-  tag?: { text: string; color: 'primary' | 'success' | 'warning' | 'error' }
-}
-
-function StatCard({ label, value, icon, tag }: StatCardProps): React.ReactElement {
-  return (
-    <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>
-      </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)
-  const minutes = Math.floor((totalSec % 3600) / 60)
-  const seconds = totalSec % 60
-  if (hours > 0) return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
-  return `${minutes}:${seconds.toString().padStart(2, '0')}`
+  const h = Math.floor(totalSec / 3600)
+  const m = Math.floor((totalSec % 3600) / 60)
+  const s = totalSec % 60
+  if (h > 0) return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
+  return `${m}:${s.toString().padStart(2, '0')}`
 }
 
-// ── DashboardPage ────────────────────────────────────────
+type DisplayMode = 'stats' | 'voice' | 'sys'
 
 export function DashboardPage(): React.ReactElement {
   const [stats, setStats] = useState<StatsSummary | null>(null)
   const [ollamaConnected, setOllamaConnected] = useState(false)
+  const [displayMode, setDisplayMode] = useState<DisplayMode>('stats')
+  const [glitchTrigger, setGlitchTrigger] = useState(0)
 
-  useEffect(() => {
+  const loadStats = useCallback(() => {
     window.electronAPI.stats.getSummary().then((result) => {
       if (result.success) setStats(result.data)
     })
-
     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)
-      })
-    }, 30000)
-
-    return () => clearInterval(interval)
   }, [])
 
+  useEffect(() => {
+    loadStats()
+    const interval = setInterval(loadStats, 30000)
+    return () => clearInterval(interval)
+  }, [loadStats])
+
+  const switchMode = (mode: DisplayMode) => {
+    setDisplayMode(mode)
+    setGlitchTrigger((prev) => prev + 1)
+  }
+
   return (
-    <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>
+    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100%', p: 3 }}>
+      <InstrumentPanel
+        engravingLeft="D3RO-VOICE SYS."
+        engravingRight="MOD-01 / TERMINAL"
+        engravingBottom="LOCAL AI VOICE ASSISTANT"
+      >
+        <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 140px', gap: 3, minHeight: 320 }}>
+          {/* ── 좌측: CRT 디스플레이 ─────────────────── */}
+          <CrtDisplay
+            amplitude={displayMode === 'voice' ? 0.4 : 0.1}
+            frequency={displayMode === 'voice' ? 15 : 8}
+            glitchTrigger={glitchTrigger}
+            height={320}
+          >
+            {displayMode === 'stats' && (
+              <>
+                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <PhosphorText variant="label">TOTAL SESSIONS</PhosphorText>
+                  <PhosphorText variant="label">D3RO</PhosphorText>
+                </Box>
+                <Box sx={{ mt: 'auto', mb: 3 }}>
+                  <PhosphorText variant="hero">
+                    {stats?.totalSessionCount ?? 0}
+                  </PhosphorText>
+                  <PhosphorText variant="label" sx={{ mt: 1 }}>
+                    {formatTime(stats?.totalRecordingTimeMs ?? 0)} RECORDED
+                  </PhosphorText>
+                </Box>
+                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <Box>
+                    <PhosphorText variant="label">WORDS</PhosphorText>
+                    <PhosphorText variant="value">{stats?.totalWordCount ?? 0}</PhosphorText>
+                  </Box>
+                  <Box>
+                    <PhosphorText variant="label">TODAY</PhosphorText>
+                    <PhosphorText variant="value">{stats?.todaySessionCount ?? 0}</PhosphorText>
+                  </Box>
+                  <Box sx={{ textAlign: 'right' }}>
+                    <PhosphorText variant="label">STREAK</PhosphorText>
+                    <PhosphorText variant="value">
+                      {stats?.streakDays ?? 0}<PhosphorText variant="dim" component="span" sx={{ ml: 0.5 }}>D</PhosphorText>
+                    </PhosphorText>
+                  </Box>
+                </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>
+            {displayMode === 'voice' && (
+              <>
+                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <PhosphorText variant="label">VOICE MODE</PhosphorText>
+                  <PhosphorText variant="label">STANDBY</PhosphorText>
+                </Box>
+                <Box sx={{ mt: 'auto', mb: 3, textAlign: 'center' }}>
+                  <PhosphorText variant="hero">IDLE</PhosphorText>
+                  <PhosphorText variant="label" sx={{ mt: 1 }}>
+                    PRESS RIGHT ALT TO DICTATE
+                  </PhosphorText>
+                </Box>
+                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <Box>
+                    <PhosphorText variant="label">MODE</PhosphorText>
+                    <PhosphorText variant="value">DICT</PhosphorText>
+                  </Box>
+                  <Box sx={{ textAlign: 'right' }}>
+                    <PhosphorText variant="label">HOTKEY</PhosphorText>
+                    <PhosphorText variant="value">R.ALT</PhosphorText>
+                  </Box>
+                </Box>
+              </>
+            )}
+
+            {displayMode === 'sys' && (
+              <>
+                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <PhosphorText variant="label">SYSTEM STATUS</PhosphorText>
+                  <PhosphorText variant="label">DIAG</PhosphorText>
+                </Box>
+                <Box sx={{ mt: 3 }}>
+                  {[
+                    { name: 'STT ENGINE', status: 'READY' as const },
+                    { name: 'OLLAMA LLM', status: ollamaConnected ? 'CONNECTED' as const : 'OFFLINE' as const },
+                    { name: 'HOTKEY HOOK', status: 'ACTIVE' as const },
+                    { name: 'AUDIO INPUT', status: 'STANDBY' as const },
+                  ].map((item) => (
+                    <Box key={item.name} sx={{ display: 'flex', justifyContent: 'space-between', mb: 1.5 }}>
+                      <PhosphorText variant="label">{item.name}</PhosphorText>
+                      <PhosphorText
+                        variant="value"
+                        sx={{
+                          fontSize: '12px',
+                          color: item.status === 'OFFLINE' ? '#ef4444' : '#f25b29',
+                        }}
+                      >
+                        {item.status}
+                      </PhosphorText>
+                    </Box>
+                  ))}
+                </Box>
+                <Box sx={{ mt: 'auto' }}>
+                  <PhosphorText variant="label">VERSION</PhosphorText>
+                  <PhosphorText variant="value" sx={{ fontSize: '12px' }}>v1.0.0</PhosphorText>
+                </Box>
+              </>
+            )}
+          </CrtDisplay>
+
+          {/* ── 우측: 컨트롤 패널 ────────────────────── */}
+          <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
+            {/* LED 상태 클러스터 */}
+            <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, pt: 1 }}>
+              <Led color="green" pulse />
+              <Led color={ollamaConnected ? 'green' : 'red'} />
+              <Led color="amber" pulse />
             </Box>
+
+            {/* 모드 버튼 그룹 */}
+            <MetalCard inset>
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+                <PhysicalButton selected={displayMode === 'stats'} onClick={() => switchMode('stats')} fullWidth>
+                  STAT
+                </PhysicalButton>
+                <PhysicalButton selected={displayMode === 'voice'} onClick={() => switchMode('voice')} fullWidth>
+                  VOICE
+                </PhysicalButton>
+                <PhysicalButton selected={displayMode === 'sys'} onClick={() => switchMode('sys')} fullWidth>
+                  SYS
+                </PhysicalButton>
+              </Box>
+            </MetalCard>
           </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>
-
-      <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>
+      </InstrumentPanel>
     </Box>
   )
 }