Phase 5 구현: SQLite DB + History/Dictionary 서비스 + UI

- DB: better-sqlite3 + drizzle-orm (history/dictionary/stats, WAL 모드)
- HistoryService: CRUD + 검색 + 통계 + 30일 보존 정책, 세션 완료 시 자동 저장
- DictionaryService: CRUD + 검색 + 사용 횟수 추적 + STT 프롬프트 힌트
- HistoryPage: 목록 + 검색 + 삭제 + 복사 + 페이지네이션
- DictionaryPage: 목록 + 검색 + 추가 다이얼로그 + 삭제
- DashboardPage: 실데이터 통계 (총/오늘 세션, 시간, 단어수, 연속일수)
- IPC: history/dictionary/stats 핸들러 + preload API
- Bootstrap: DB 초기화 (critical) + 이력 자동 저장 연동

src/renderer/pages/HistoryPage.tsx

@@ -0,0 +1,161 @@
+// src/renderer/pages/HistoryPage.tsx
+
+import { useState, useEffect, useCallback } from 'react'
+import {
+  Box,
+  Typography,
+  TextField,
+  List,
+  ListItem,
+  ListItemText,
+  IconButton,
+  Chip,
+  Pagination,
+  Card,
+  CardContent,
+  InputAdornment
+} from '@mui/material'
+import SearchIcon from '@mui/icons-material/Search'
+import DeleteIcon from '@mui/icons-material/Delete'
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+import type { HistoryEntry, HistoryPage as HistoryPageData } from '@shared/types'
+
+const PAGE_SIZE = 20
+
+export function HistoryPage(): React.ReactElement {
+  const [data, setData] = useState<HistoryPageData | null>(null)
+  const [page, setPage] = useState(0)
+  const [search, setSearch] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  const loadData = useCallback(async () => {
+    setLoading(true)
+    const result = search.trim()
+      ? await window.electronAPI.history.search({ query: search, page, pageSize: PAGE_SIZE })
+      : await window.electronAPI.history.getAll({ page, pageSize: PAGE_SIZE })
+
+    if (result.success) {
+      setData(result.data)
+    }
+    setLoading(false)
+  }, [page, search])
+
+  useEffect(() => {
+    loadData()
+  }, [loadData])
+
+  const handleDelete = async (id: string) => {
+    await window.electronAPI.history.delete({ id })
+    loadData()
+  }
+
+  const handleCopy = (text: string) => {
+    navigator.clipboard.writeText(text)
+  }
+
+  const formatDate = (ts: number) => {
+    return new Date(ts).toLocaleString('ko-KR', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+  }
+
+  const formatDuration = (sec: number) => {
+    const m = Math.floor(sec / 60)
+    const s = Math.round(sec % 60)
+    return `${m}:${s.toString().padStart(2, '0')}`
+  }
+
+  return (
+    <Box>
+      <Typography variant="h5" sx={{ mb: 2, fontWeight: 600 }}>
+        History
+      </Typography>
+
+      <TextField
+        placeholder="Search transcriptions..."
+        value={search}
+        onChange={(e) => {
+          setSearch(e.target.value)
+          setPage(0)
+        }}
+        fullWidth
+        sx={{ mb: 2 }}
+        slotProps={{
+          input: {
+            startAdornment: (
+              <InputAdornment position="start">
+                <SearchIcon />
+              </InputAdornment>
+            )
+          }
+        }}
+      />
+
+      {loading ? (
+        <Typography color="text.secondary">Loading...</Typography>
+      ) : !data || data.entries.length === 0 ? (
+        <Card>
+          <CardContent>
+            <Typography color="text.secondary" sx={{ textAlign: 'center', py: 4 }}>
+              {search ? 'No results found.' : 'No history yet.'}
+            </Typography>
+          </CardContent>
+        </Card>
+      ) : (
+        <>
+          <List>
+            {data.entries.map((entry: HistoryEntry) => (
+              <ListItem
+                key={entry.id}
+                divider
+                secondaryAction={
+                  <Box sx={{ display: 'flex', gap: 0.5 }}>
+                    <IconButton
+                      size="small"
+                      onClick={() => handleCopy(entry.polishedText || entry.originalText)}
+                    >
+                      <ContentCopyIcon fontSize="small" />
+                    </IconButton>
+                    <IconButton size="small" onClick={() => handleDelete(entry.id)}>
+                      <DeleteIcon fontSize="small" />
+                    </IconButton>
+                  </Box>
+                }
+              >
+                <ListItemText
+                  primary={entry.polishedText || entry.originalText}
+                  secondary={
+                    <Box sx={{ display: 'flex', gap: 1, mt: 0.5, alignItems: 'center' }}>
+                      <Typography variant="caption" color="text.secondary">
+                        {formatDate(entry.createdAt)}
+                      </Typography>
+                      <Chip label={formatDuration(entry.duration)} size="small" variant="outlined" />
+                      {entry.detectedLanguage && (
+                        <Chip label={entry.detectedLanguage} size="small" variant="outlined" />
+                      )}
+                      <Chip label={entry.mode} size="small" variant="outlined" />
+                    </Box>
+                  }
+                  primaryTypographyProps={{ sx: { pr: 8 } }}
+                />
+              </ListItem>
+            ))}
+          </List>
+
+          {data.totalPages > 1 && (
+            <Box sx={{ display: 'flex', justifyContent: 'center', mt: 2 }}>
+              <Pagination
+                count={data.totalPages}
+                page={page + 1}
+                onChange={(_, p) => setPage(p - 1)}
+              />
+            </Box>
+          )}
+        </>
+      )}
+    </Box>
+  )
+}