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
270
apps/desktop/src/renderer/components/OnboardingModal.tsx
Normal file
270
apps/desktop/src/renderer/components/OnboardingModal.tsx
Normal file
|
|
@ -0,0 +1,270 @@
|
|||
// src/renderer/components/OnboardingModal.tsx
|
||||
// 첫 실행 시 마이크 + 핫키 설정 안내
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
Box,
|
||||
Typography,
|
||||
Button,
|
||||
Stack,
|
||||
Chip,
|
||||
} from '@mui/material'
|
||||
import MicIcon from '@mui/icons-material/Mic'
|
||||
import KeyboardIcon from '@mui/icons-material/Keyboard'
|
||||
import CheckCircleIcon from '@mui/icons-material/CheckCircle'
|
||||
import OpenInNewIcon from '@mui/icons-material/OpenInNew'
|
||||
import { d3roPalette, d3roFontMono, d3roShadow } from '../theme'
|
||||
import { Led } from './ds'
|
||||
import { HotkeyRecordModal } from './HotkeyRecordModal'
|
||||
import { useI18n } from '../i18n'
|
||||
import type { HotkeyBinding, AudioDevice } from '@shared/types'
|
||||
|
||||
interface OnboardingModalProps {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function OnboardingModal({ open, onClose }: OnboardingModalProps): React.ReactElement {
|
||||
const { t } = useI18n()
|
||||
const [step, setStep] = useState(0) // 0: 환영, 1: 마이크, 2: 핫키, 3: Ollama, 4: 완료
|
||||
const [devices, setDevices] = useState<AudioDevice[]>([])
|
||||
const [selectedDevice, setSelectedDevice] = useState('default')
|
||||
const [hotkeyBinding, setHotkeyBinding] = useState<HotkeyBinding | null>(null)
|
||||
const [hotkeyModalOpen, setHotkeyModalOpen] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
setStep(0)
|
||||
window.electronAPI.audio.getDevices().then((r) => {
|
||||
if (r.success) setDevices(r.data)
|
||||
})
|
||||
window.electronAPI.hotkey.getDictationShortcut().then((r) => {
|
||||
if (r.success && r.data) setHotkeyBinding(r.data)
|
||||
})
|
||||
}, [open])
|
||||
|
||||
const handleFinish = () => {
|
||||
// 온보딩 완료 플래그 저장
|
||||
window.electronAPI.config.set({ key: 'onboardingCompleted' as keyof import('@shared/types').AppConfig, value: true as never })
|
||||
onClose()
|
||||
}
|
||||
|
||||
const handleHotkeySave = (binding: HotkeyBinding) => {
|
||||
setHotkeyBinding(binding)
|
||||
window.electronAPI.hotkey.setDictationShortcut({ binding })
|
||||
window.electronAPI.hotkey.setEnabled({ enabled: true })
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog
|
||||
open={open}
|
||||
maxWidth="sm"
|
||||
fullWidth
|
||||
PaperProps={{
|
||||
sx: {
|
||||
bgcolor: d3roPalette.bg.chassis,
|
||||
backgroundImage: 'none',
|
||||
border: `1px solid ${d3roPalette.border.subtle}`,
|
||||
boxShadow: d3roShadow.chassis,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DialogContent sx={{ p: 4 }}>
|
||||
{/* Step 0: 환영 */}
|
||||
{step === 0 && (
|
||||
<Box sx={{ textAlign: 'center', py: 3 }}>
|
||||
<Led color="amber" pulse size={16} />
|
||||
<Typography
|
||||
sx={{
|
||||
fontFamily: d3roFontMono,
|
||||
fontSize: '24px',
|
||||
fontWeight: 300,
|
||||
color: d3roPalette.accent.amber,
|
||||
mt: 3,
|
||||
mb: 1,
|
||||
}}
|
||||
>
|
||||
D3RO-VOICE
|
||||
</Typography>
|
||||
<Typography sx={{ color: d3roPalette.text.secondary, mb: 4 }}>
|
||||
{t('onboarding.welcome.desc')}
|
||||
</Typography>
|
||||
<Button variant="contained" onClick={() => setStep(1)} fullWidth>
|
||||
{t('onboarding.welcome.start')}
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Step 1: 마이크 */}
|
||||
{step === 1 && (
|
||||
<Box>
|
||||
<Stack direction="row" alignItems="center" gap={1} mb={3}>
|
||||
<MicIcon sx={{ color: d3roPalette.accent.amber }} />
|
||||
<Typography sx={{ fontFamily: d3roFontMono, fontWeight: 700, fontSize: '14px' }}>
|
||||
{t('onboarding.mic.title')}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Typography variant="body2" sx={{ color: d3roPalette.text.secondary, mb: 2 }}>
|
||||
{t('onboarding.mic.desc')}
|
||||
</Typography>
|
||||
<Stack spacing={1} mb={3}>
|
||||
{devices.map((d, idx) => (
|
||||
<Box
|
||||
key={`${d.deviceId}-${idx}`}
|
||||
onClick={() => {
|
||||
setSelectedDevice(d.deviceId)
|
||||
window.electronAPI.audio.setSelectedDevice({ deviceId: d.deviceId })
|
||||
}}
|
||||
sx={{
|
||||
p: 1.5,
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
bgcolor: selectedDevice === d.deviceId ? d3roPalette.accent.amberDim : d3roPalette.bg.inset,
|
||||
border: selectedDevice === d.deviceId
|
||||
? `1px solid ${d3roPalette.accent.amber}`
|
||||
: `1px solid ${d3roPalette.border.subtle}`,
|
||||
'&:hover': { bgcolor: d3roPalette.bg.cardHover },
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ fontSize: '13px' }}>
|
||||
{d.label}{d.isDefault ? ` ${t('settings.deviceDefault')}` : ''}
|
||||
</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
<Stack direction="row" justifyContent="space-between">
|
||||
<Button onClick={() => setStep(0)} sx={{ color: d3roPalette.text.inactive }}>{t('onboarding.back')}</Button>
|
||||
<Button variant="contained" onClick={() => setStep(2)}>{t('onboarding.next')}</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Step 2: 핫키 */}
|
||||
{step === 2 && (
|
||||
<Box>
|
||||
<Stack direction="row" alignItems="center" gap={1} mb={3}>
|
||||
<KeyboardIcon sx={{ color: d3roPalette.accent.amber }} />
|
||||
<Typography sx={{ fontFamily: d3roFontMono, fontWeight: 700, fontSize: '14px' }}>
|
||||
{t('onboarding.hotkey.title')}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Typography variant="body2" sx={{ color: d3roPalette.text.secondary, mb: 2 }}>
|
||||
{t('onboarding.hotkey.desc')}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
p: 2,
|
||||
borderRadius: '10px',
|
||||
bgcolor: d3roPalette.bg.inset,
|
||||
boxShadow: d3roShadow.inset,
|
||||
textAlign: 'center',
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
{hotkeyBinding ? (
|
||||
<Stack direction="row" spacing={1} justifyContent="center" alignItems="center">
|
||||
<Led color="green" size={8} />
|
||||
{hotkeyBinding.displayLabel.split(' + ').map((key) => (
|
||||
<Chip
|
||||
key={key}
|
||||
label={key}
|
||||
sx={{
|
||||
fontFamily: d3roFontMono,
|
||||
fontWeight: 700,
|
||||
bgcolor: d3roPalette.bg.chassis,
|
||||
color: d3roPalette.text.primary,
|
||||
border: `1px solid ${d3roPalette.border.default}`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
) : (
|
||||
<Typography sx={{ color: d3roPalette.text.inactive, fontSize: '13px' }}>
|
||||
{t('onboarding.hotkey.notSet')}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onClick={() => setHotkeyModalOpen(true)}
|
||||
sx={{ mb: 3, fontFamily: d3roFontMono }}
|
||||
>
|
||||
{hotkeyBinding ? t('onboarding.hotkey.change') : t('onboarding.hotkey.set')}
|
||||
</Button>
|
||||
<Stack direction="row" justifyContent="space-between">
|
||||
<Button onClick={() => setStep(1)} sx={{ color: d3roPalette.text.inactive }}>{t('onboarding.back')}</Button>
|
||||
<Button variant="contained" onClick={() => setStep(3)}>{t('onboarding.next')}</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Step 3: Ollama 설치 */}
|
||||
{step === 3 && (
|
||||
<Box>
|
||||
<Stack direction="row" alignItems="center" gap={1} mb={3}>
|
||||
<Led color="amber" size={12} />
|
||||
<Typography sx={{ fontFamily: d3roFontMono, fontWeight: 700, fontSize: '14px' }}>
|
||||
{t('onboarding.ollama.title')}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Typography variant="body2" sx={{ color: d3roPalette.text.secondary, mb: 2 }}>
|
||||
{t('onboarding.ollama.desc')}
|
||||
</Typography>
|
||||
<Button
|
||||
variant="outlined"
|
||||
endIcon={<OpenInNewIcon sx={{ fontSize: 14 }} />}
|
||||
onClick={() => window.electronAPI.system.openExternal({ url: 'https://ollama.com/download' })}
|
||||
fullWidth
|
||||
sx={{ mb: 1.5, fontFamily: d3roFontMono }}
|
||||
>
|
||||
{t('onboarding.ollama.download')}
|
||||
</Button>
|
||||
<Box sx={{ p: 1.5, borderRadius: '8px', bgcolor: d3roPalette.bg.inset, boxShadow: d3roShadow.inset, mb: 3 }}>
|
||||
<Typography sx={{ fontFamily: d3roFontMono, fontSize: '11px', color: d3roPalette.accent.amber }}>
|
||||
$ ollama pull qwen3:4b
|
||||
</Typography>
|
||||
<Typography sx={{ fontSize: '10px', color: d3roPalette.text.inactive, mt: 0.5 }}>
|
||||
{t('onboarding.ollama.modelHint')}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack direction="row" justifyContent="space-between">
|
||||
<Button onClick={() => setStep(2)} sx={{ color: d3roPalette.text.inactive }}>{t('onboarding.back')}</Button>
|
||||
<Button variant="contained" onClick={() => setStep(4)}>{t('onboarding.next')}</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Step 4: 완료 */}
|
||||
{step === 4 && (
|
||||
<Box sx={{ textAlign: 'center', py: 3 }}>
|
||||
<CheckCircleIcon sx={{ fontSize: 48, color: d3roPalette.tag.green, mb: 2 }} />
|
||||
<Typography sx={{ fontFamily: d3roFontMono, fontSize: '18px', fontWeight: 700, mb: 1 }}>
|
||||
{t('onboarding.done.title')}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: d3roPalette.text.secondary, mb: 4 }}>
|
||||
{hotkeyBinding
|
||||
? t('onboarding.done.descWithKey', { key: hotkeyBinding.displayLabel })
|
||||
: t('onboarding.done.descNoKey')}
|
||||
</Typography>
|
||||
<Button variant="contained" onClick={handleFinish} fullWidth>
|
||||
{t('onboarding.done.start')}
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<HotkeyRecordModal
|
||||
open={hotkeyModalOpen}
|
||||
onClose={() => setHotkeyModalOpen(false)}
|
||||
onSave={handleHotkeySave}
|
||||
currentBinding={hotkeyBinding}
|
||||
title={t('hotkey.dictationTitle')}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue