feat(V2-1a): Monorepo 구조 전환 — apps/desktop으로 V1 이동
- npm workspaces 루트 (apps/*, packages/*) 세팅 - V1 전체를 apps/desktop/으로 git mv (src, resources, tests, sidecar, scripts, electron.vite.config.ts, electron-builder.yml, vitest.config.ts, tsconfig.node.json, tsconfig.web.json) - apps/desktop/package.json 신규 (name=@d3ro/desktop) - productName: 'd3ro-voice' 명시 — app.getName()을 고정하여 userData 경로 %APPDATA%\d3ro-voice\ 그대로 유지 (기존 DB/설정 연속성 보장) - 루트 package.json을 workspace 루트로 재구성, 공통 devDep만 유지 (typescript, eslint, prettier) - turbo.json, tsconfig.base.json 추가 (Turborepo 자체 설치는 별도 sub-phase) - memory/project_status.md 생성 (규칙 13) 검증: - npm run typecheck 통과 - npm run build 통과 (electron-vite main+preload+renderer) - npm run dev 실제 실행 → DB/핫키/Ollama 자동 실행 모두 정상
This commit is contained in:
yunchan8804
parent
3a160b9032
commit
45a580878a
178 changed files with 214 additions and 0 deletions
205
apps/desktop/src/renderer/pages/HistoryPage.tsx
Normal file
205
apps/desktop/src/renderer/pages/HistoryPage.tsx
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
// src/renderer/pages/HistoryPage.tsx
|
||||
// 인스트루먼트 미학: MetalCard + PhosphorText + Led + 날짜 그룹핑
|
||||
// Phase 10: 태그 필터링 + 태그 관리 통합
|
||||
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react'
|
||||
import { Box, Chip, IconButton, Tooltip } from '@mui/material'
|
||||
import FileDownloadIcon from '@mui/icons-material/FileDownload'
|
||||
import { PhosphorText } from '../components/ds'
|
||||
import { d3roPalette, d3roTypo, d3roFontMono, d3roRadius } from '../theme'
|
||||
import { useI18n } from '../i18n'
|
||||
import { getDateKey } from '../utils/formatters'
|
||||
import { EmptyStateCard, SearchInput, PageHeader, HistoryEntryCard } from '../components/shared'
|
||||
import type { HistoryEntry, HistoryPage as HistoryPageData, TagCount } from '@shared/types'
|
||||
|
||||
const PAGE_SIZE = 50
|
||||
|
||||
export function HistoryPage(): React.ReactElement {
|
||||
const { t, formatRelativeDate } = useI18n()
|
||||
const [data, setData] = useState<HistoryPageData | null>(null)
|
||||
const [search, setSearch] = useState('')
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [allTags, setAllTags] = useState<TagCount[]>([])
|
||||
const [activeTag, setActiveTag] = useState<string | null>(null)
|
||||
|
||||
const loadTags = useCallback(async () => {
|
||||
const result = await window.electronAPI.memo.getAllTags()
|
||||
if (result.success) setAllTags(result.data)
|
||||
}, [])
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
setLoading(true)
|
||||
let result: { success: boolean; data: HistoryPageData } | { success: false; error: unknown }
|
||||
|
||||
if (activeTag) {
|
||||
result = await window.electronAPI.memo.searchByTag({ tag: activeTag, page: 0, pageSize: PAGE_SIZE })
|
||||
} else if (search.trim()) {
|
||||
result = await window.electronAPI.history.search({ query: search, page: 0, pageSize: PAGE_SIZE })
|
||||
} else {
|
||||
result = await window.electronAPI.history.getAll({ page: 0, pageSize: PAGE_SIZE, sortOrder: 'desc' })
|
||||
}
|
||||
if (result.success) setData(result.data)
|
||||
setLoading(false)
|
||||
}, [search, activeTag])
|
||||
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
loadTags()
|
||||
const unsub = window.electronAPI.app.onDataChanged(() => { loadData(); loadTags() })
|
||||
return unsub
|
||||
}, [loadData, loadTags])
|
||||
|
||||
const groupedEntries = useMemo(() => {
|
||||
if (!data) return []
|
||||
const groups: Record<string, { label: string; entries: HistoryEntry[] }> = {}
|
||||
for (const entry of data.entries) {
|
||||
const key = getDateKey(entry.createdAt)
|
||||
if (!groups[key]) {
|
||||
groups[key] = { label: formatRelativeDate(entry.createdAt), entries: [] }
|
||||
}
|
||||
groups[key].entries.push(entry)
|
||||
}
|
||||
return Object.values(groups)
|
||||
}, [data, formatRelativeDate])
|
||||
|
||||
const handleCopy = useCallback((text: string) => {
|
||||
navigator.clipboard.writeText(text)
|
||||
}, [])
|
||||
|
||||
const handleDelete = useCallback((id: string) => {
|
||||
window.electronAPI.history.delete({ id })
|
||||
loadData()
|
||||
}, [loadData])
|
||||
|
||||
const handleTagClick = useCallback((tag: string) => {
|
||||
setActiveTag(prev => prev === tag ? null : tag)
|
||||
setSearch('')
|
||||
}, [])
|
||||
|
||||
const handleExport = useCallback(async () => {
|
||||
await window.electronAPI.memo.export({
|
||||
format: 'markdown' as const,
|
||||
tag: activeTag ?? undefined,
|
||||
})
|
||||
}, [activeTag])
|
||||
|
||||
return (
|
||||
<Box sx={{ mx: 'auto', p: 4, overflow: 'hidden' }}>
|
||||
{/* 페이지 헤더 -- 각인 스타일 */}
|
||||
<PageHeader
|
||||
title={t('history.title').toUpperCase()}
|
||||
action={
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Tooltip title={t('memo.export')} arrow>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={handleExport}
|
||||
sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}
|
||||
>
|
||||
<FileDownloadIcon sx={{ fontSize: 18 }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<PhosphorText variant="meta" sx={{ color: d3roPalette.text.dimLabel }}>
|
||||
{t('history.entries', { count: data?.total ?? 0 }).toUpperCase()}
|
||||
</PhosphorText>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* 태그 필터 바 */}
|
||||
{allTags.length > 0 && (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mb: 2 }}>
|
||||
{allTags.map(tc => (
|
||||
<Chip
|
||||
key={tc.tag}
|
||||
label={`#${tc.tag} (${tc.count})`}
|
||||
size="small"
|
||||
variant={activeTag === tc.tag ? 'filled' : 'outlined'}
|
||||
onClick={() => handleTagClick(tc.tag)}
|
||||
sx={{
|
||||
height: 22,
|
||||
fontFamily: d3roFontMono,
|
||||
fontSize: d3roTypo.micro.size,
|
||||
borderRadius: d3roRadius.small,
|
||||
borderColor: activeTag === tc.tag ? d3roPalette.accent.amber : d3roPalette.border.subtle,
|
||||
bgcolor: activeTag === tc.tag ? d3roPalette.accent.amber : 'transparent',
|
||||
color: activeTag === tc.tag ? d3roPalette.bg.card : d3roPalette.text.secondary,
|
||||
'&:hover': {
|
||||
bgcolor: activeTag === tc.tag ? d3roPalette.accent.amber : d3roPalette.bg.cardHover,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
{activeTag && (
|
||||
<Chip
|
||||
label={t('memo.clearFilter')}
|
||||
size="small"
|
||||
onClick={() => setActiveTag(null)}
|
||||
sx={{
|
||||
height: 22,
|
||||
fontFamily: d3roFontMono,
|
||||
fontSize: d3roTypo.micro.size,
|
||||
borderRadius: d3roRadius.small,
|
||||
color: d3roPalette.text.muted,
|
||||
'&:hover': { color: d3roPalette.tag.red },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{!activeTag && (
|
||||
<SearchInput
|
||||
value={search}
|
||||
onChange={setSearch}
|
||||
placeholder={t('history.search').toUpperCase()}
|
||||
/>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<PhosphorText variant="dim">{t('common.loading').toUpperCase()}</PhosphorText>
|
||||
) : !data || data.entries.length === 0 ? (
|
||||
<EmptyStateCard
|
||||
message={search ? t('history.noResults').toUpperCase() : t('history.noHistory').toUpperCase()}
|
||||
/>
|
||||
) : (
|
||||
groupedEntries.map((group) => (
|
||||
<Box key={group.label} sx={{ mb: 3 }}>
|
||||
{/* 날짜 구분자 */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1.5 }}>
|
||||
<PhosphorText variant="label" sx={{ color: d3roPalette.text.dimLabel, whiteSpace: 'nowrap' }}>
|
||||
{group.label}
|
||||
</PhosphorText>
|
||||
<Box sx={{ flex: 1, height: '1px', bgcolor: d3roPalette.border.subtle }} />
|
||||
<PhosphorText variant="dim" sx={{ fontSize: d3roTypo.label.size }}>
|
||||
{t('history.count', { count: group.entries.length })}
|
||||
</PhosphorText>
|
||||
</Box>
|
||||
|
||||
{/* 항목 — 반응형 그리드 */}
|
||||
<Box sx={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: {
|
||||
xs: '1fr',
|
||||
sm: 'repeat(2, 1fr)',
|
||||
md: 'repeat(3, 1fr)',
|
||||
},
|
||||
gap: 1.5,
|
||||
}}>
|
||||
{group.entries.map((entry: HistoryEntry) => (
|
||||
<HistoryEntryCard
|
||||
key={entry.id}
|
||||
entry={entry}
|
||||
onCopy={handleCopy}
|
||||
onDelete={handleDelete}
|
||||
showTags
|
||||
onTagClick={handleTagClick}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
))
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue