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
272
apps/desktop/src/renderer/components/FileDropZone.tsx
Normal file
272
apps/desktop/src/renderer/components/FileDropZone.tsx
Normal file
|
|
@ -0,0 +1,272 @@
|
|||
// src/renderer/components/FileDropZone.tsx
|
||||
// Phase 12.1: 파일 전사 드래그앤드롭 UI
|
||||
|
||||
import { useState, useEffect, useCallback, useRef } from 'react'
|
||||
import { Box, LinearProgress, IconButton, Tooltip } from '@mui/material'
|
||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy'
|
||||
import CloseIcon from '@mui/icons-material/Close'
|
||||
import UploadFileIcon from '@mui/icons-material/UploadFile'
|
||||
import { MetalCard, PhosphorText, Led } from './ds'
|
||||
import { d3roPalette, d3roTypo } from '../theme'
|
||||
import { useI18n } from '../i18n'
|
||||
import type {
|
||||
FileTranscriptionProgress,
|
||||
FileTranscriptionResult,
|
||||
FileTranscriptionState,
|
||||
} from '@shared/types'
|
||||
|
||||
const SUPPORTED_EXTENSIONS = [
|
||||
'.mp3', '.wav', '.m4a', '.ogg', '.flac', '.wma', '.aac',
|
||||
'.mp4', '.mkv', '.webm', '.avi', '.mov',
|
||||
]
|
||||
|
||||
export function FileDropZone(): React.ReactElement {
|
||||
const { t } = useI18n()
|
||||
const [dragging, setDragging] = useState(false)
|
||||
const [state, setState] = useState<FileTranscriptionState>('idle')
|
||||
const [progress, setProgress] = useState<FileTranscriptionProgress | null>(null)
|
||||
const [result, setResult] = useState<FileTranscriptionResult | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [copied, setCopied] = useState(false)
|
||||
const dropRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const unsubProgress = window.electronAPI.fileTranscription.onProgress((data) => {
|
||||
setProgress(data)
|
||||
setState('transcribing')
|
||||
})
|
||||
const unsubComplete = window.electronAPI.fileTranscription.onComplete((data) => {
|
||||
setResult(data)
|
||||
setState('completed')
|
||||
setProgress(null)
|
||||
})
|
||||
const unsubError = window.electronAPI.fileTranscription.onError((data) => {
|
||||
setError(data.message)
|
||||
setState('error')
|
||||
setProgress(null)
|
||||
})
|
||||
|
||||
return () => {
|
||||
unsubProgress()
|
||||
unsubComplete()
|
||||
unsubError()
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleDrop = useCallback(async (e: React.DragEvent) => {
|
||||
e.preventDefault()
|
||||
setDragging(false)
|
||||
|
||||
const file = e.dataTransfer.files[0]
|
||||
if (!file) return
|
||||
|
||||
const ext = '.' + file.name.split('.').pop()?.toLowerCase()
|
||||
if (!SUPPORTED_EXTENSIONS.includes(ext)) {
|
||||
setError(t('fileTranscription.error.invalidFormat'))
|
||||
setState('error')
|
||||
return
|
||||
}
|
||||
|
||||
setState('converting')
|
||||
setError(null)
|
||||
setResult(null)
|
||||
|
||||
const filePath = (file as unknown as { path: string }).path
|
||||
const resp = await window.electronAPI.fileTranscription.start({ filePath })
|
||||
if (!resp.success) {
|
||||
setError(resp.error.message)
|
||||
setState('error')
|
||||
}
|
||||
}, [t])
|
||||
|
||||
const handleBrowse = useCallback(async () => {
|
||||
setState('converting')
|
||||
setError(null)
|
||||
setResult(null)
|
||||
|
||||
const resp = await window.electronAPI.fileTranscription.start({ filePath: '' })
|
||||
if (!resp.success) {
|
||||
if (resp.error.message.includes('cancelled')) {
|
||||
setState('idle')
|
||||
} else {
|
||||
setError(resp.error.message)
|
||||
setState('error')
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleCancel = useCallback(async () => {
|
||||
await window.electronAPI.fileTranscription.cancel()
|
||||
setState('idle')
|
||||
setProgress(null)
|
||||
}, [])
|
||||
|
||||
const handleCopy = useCallback(() => {
|
||||
if (result?.fullText) {
|
||||
navigator.clipboard.writeText(result.fullText)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
}
|
||||
}, [result])
|
||||
|
||||
const handleReset = useCallback(() => {
|
||||
setState('idle')
|
||||
setResult(null)
|
||||
setError(null)
|
||||
setProgress(null)
|
||||
}, [])
|
||||
|
||||
// ── idle: 드래그 존 ──
|
||||
if (state === 'idle') {
|
||||
return (
|
||||
<MetalCard>
|
||||
<Box
|
||||
ref={dropRef}
|
||||
onDragOver={(e) => { e.preventDefault(); setDragging(true) }}
|
||||
onDragLeave={() => setDragging(false)}
|
||||
onDrop={handleDrop}
|
||||
onClick={handleBrowse}
|
||||
sx={{
|
||||
p: 4,
|
||||
textAlign: 'center',
|
||||
border: `2px dashed ${dragging ? d3roPalette.accent.amber : d3roPalette.border.subtle}`,
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
transition: 'border-color 0.2s',
|
||||
'&:hover': { borderColor: d3roPalette.accent.amber },
|
||||
}}
|
||||
>
|
||||
<UploadFileIcon sx={{ fontSize: 40, color: d3roPalette.text.inactive, mb: 1 }} />
|
||||
<PhosphorText variant="body" sx={{ color: d3roPalette.text.secondary }}>
|
||||
{t('fileTranscription.dropZone')}
|
||||
</PhosphorText>
|
||||
<PhosphorText variant="dim" sx={{ mt: 0.5 }}>
|
||||
{t('fileTranscription.dropZoneHint')}
|
||||
</PhosphorText>
|
||||
</Box>
|
||||
</MetalCard>
|
||||
)
|
||||
}
|
||||
|
||||
// ── converting / transcribing: 진행률 ──
|
||||
if (state === 'converting' || state === 'transcribing') {
|
||||
return (
|
||||
<MetalCard>
|
||||
<Box sx={{ p: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Led color="amber" pulse />
|
||||
<PhosphorText variant="body">
|
||||
{state === 'converting'
|
||||
? t('fileTranscription.converting')
|
||||
: t('fileTranscription.processing')}
|
||||
</PhosphorText>
|
||||
</Box>
|
||||
<PhysicalButton size="small" onClick={handleCancel}>
|
||||
{t('fileTranscription.cancel')}
|
||||
</PhysicalButton>
|
||||
</Box>
|
||||
|
||||
{progress && (
|
||||
<>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={progress.percent}
|
||||
sx={{
|
||||
mb: 1,
|
||||
height: 6,
|
||||
borderRadius: 3,
|
||||
bgcolor: d3roPalette.bg.inset,
|
||||
'& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.amber },
|
||||
}}
|
||||
/>
|
||||
<PhosphorText variant="dim">
|
||||
{t('fileTranscription.progress', {
|
||||
current: String(progress.currentChunk),
|
||||
total: String(progress.totalChunks),
|
||||
})}
|
||||
</PhosphorText>
|
||||
{progress.currentText && (
|
||||
<PhosphorText variant="compact" sx={{ mt: 1, opacity: 0.7, fontStyle: 'italic' }}>
|
||||
{progress.currentText.slice(0, 100)}...
|
||||
</PhosphorText>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</MetalCard>
|
||||
)
|
||||
}
|
||||
|
||||
// ── completed: 결과 ──
|
||||
if (state === 'completed' && result) {
|
||||
return (
|
||||
<MetalCard>
|
||||
<Box sx={{ p: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Led color="green" />
|
||||
<PhosphorText variant="body">
|
||||
{t('fileTranscription.complete')}
|
||||
</PhosphorText>
|
||||
<PhosphorText variant="dim">
|
||||
({result.fileName})
|
||||
</PhosphorText>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
||||
<Tooltip title={copied ? 'Copied!' : t('fileTranscription.copyAll')}>
|
||||
<IconButton size="small" onClick={handleCopy}>
|
||||
<ContentCopyIcon sx={{ fontSize: 16, color: copied ? d3roPalette.accent.amber : d3roPalette.text.inactive }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<IconButton size="small" onClick={handleReset}>
|
||||
<CloseIcon sx={{ fontSize: 16, color: d3roPalette.text.inactive }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
maxHeight: 200,
|
||||
overflow: 'auto',
|
||||
p: 2,
|
||||
bgcolor: d3roPalette.bg.inset,
|
||||
borderRadius: '6px',
|
||||
fontSize: d3roTypo.compact.size,
|
||||
lineHeight: d3roTypo.compact.line,
|
||||
color: d3roPalette.text.primary,
|
||||
whiteSpace: 'pre-wrap',
|
||||
}}
|
||||
>
|
||||
{result.fullText}
|
||||
</Box>
|
||||
|
||||
<PhosphorText variant="dim" sx={{ mt: 1 }}>
|
||||
{Math.round(result.totalDurationSec)}s audio / {Math.round(result.processingTimeMs / 1000)}s processing
|
||||
</PhosphorText>
|
||||
</Box>
|
||||
</MetalCard>
|
||||
)
|
||||
}
|
||||
|
||||
// ── error ──
|
||||
if (state === 'error') {
|
||||
return (
|
||||
<MetalCard>
|
||||
<Box sx={{ p: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
|
||||
<Led color="red" />
|
||||
<PhosphorText variant="body" sx={{ color: d3roPalette.tag.red }}>
|
||||
{error ?? t('fileTranscription.error.unknown')}
|
||||
</PhosphorText>
|
||||
</Box>
|
||||
<PhysicalButton size="small" onClick={handleReset}>
|
||||
{t('fileTranscription.retry')}
|
||||
</PhysicalButton>
|
||||
</Box>
|
||||
</MetalCard>
|
||||
)
|
||||
}
|
||||
|
||||
return <></>
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue