feat(V2-4): 데스크톱 ↔ Supabase 동기화 (push only MVP)
CloudSyncService (싱글톤 + EventEmitter): - Supabase 클라이언트 lazy init (configGet으로 url/key) - safeStorage 기반 refresh token 영속화 (cloud-sync.token) - startSignIn(provider): OAuth URL 발급 후 shell.openExternal로 외부 브라우저 - handleAuthCallback(code): code -> session 교환 - pushAll(): history/dictionary/meetings/meeting_memos/meeting_documents 를 last_sync_at 이후 변경분만 upsert (onConflict: id) - 이벤트: auth-changed / sync-progress / sync-complete / sync-error Deep link (d3ro-voice://auth-callback): - main/index.ts에 setAsDefaultProtocolClient - macOS open-url 핸들러 - Windows second-instance argv 검사 - handleDeepLink로 URL 파싱 후 CloudSyncService로 전달 IPC: - @d3ro/core/ipc-channels에 CLOUD_SYNC 채널 추가 - ipc/cloud-sync-handlers.ts (configure/signIn/signOut/pushAll/state) - preload index.ts에 cloudSync 노출 - bootstrap의 cloud-sync 단계 추가 Renderer: - CloudSyncSection 컴포넌트 신규 - 미설정: Supabase URL/Key 입력 폼 - 미로그인: Google/GitHub OAuth 버튼 - 로그인: 사용자 이메일 + Sync Now + 진행 바 + 로그아웃 - d3roPalette/typoSx로 SSOT 준수, useI18n 사용 ConfigService 키 5종 추가: - hfToken, diarizationEnabled (Phase 15.5 누락분 보충) - supabaseUrl, supabaseAnonKey, cloudSyncLastAt (V2-4) - packages/core types.ts AppConfig에도 동일하게 추가 검증: - desktop typecheck OK - desktop build OK - 실제 Supabase 동기화는 사용자가 V2-2 배포 + 설정 입력 후 검증
This commit is contained in:
yunchan8804
parent
d0c33ca259
commit
5c0f4a2b98
13 changed files with 1069 additions and 1 deletions
263
apps/desktop/src/renderer/components/CloudSyncSection.tsx
Normal file
263
apps/desktop/src/renderer/components/CloudSyncSection.tsx
Normal file
|
|
@ -0,0 +1,263 @@
|
|||
// src/renderer/components/CloudSyncSection.tsx
|
||||
// Phase V2-4: Settings에 표시되는 Cloud Sync 섹션
|
||||
// 로그인 상태 / Sync Now 버튼 / 마지막 동기화 / 환경변수 설정
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Box, Button, Stack, TextField, Alert, CircularProgress } from '@mui/material'
|
||||
import CloudIcon from '@mui/icons-material/Cloud'
|
||||
import CloudDoneIcon from '@mui/icons-material/CloudDone'
|
||||
import GoogleIcon from '@mui/icons-material/Google'
|
||||
import GitHubIcon from '@mui/icons-material/GitHub'
|
||||
import { d3roPalette, typoSx } from '@d3ro/ui/theme'
|
||||
import { useI18n } from '@d3ro/i18n'
|
||||
|
||||
interface CloudSyncState {
|
||||
authenticated: boolean
|
||||
userEmail: string | null
|
||||
lastSyncAt: number | null
|
||||
syncing: boolean
|
||||
}
|
||||
|
||||
interface SyncProgress {
|
||||
current: number
|
||||
total: number
|
||||
table: string
|
||||
}
|
||||
|
||||
export function CloudSyncSection(): React.ReactElement {
|
||||
const { t: _t } = useI18n()
|
||||
const [state, setState] = useState<CloudSyncState>({
|
||||
authenticated: false,
|
||||
userEmail: null,
|
||||
lastSyncAt: null,
|
||||
syncing: false
|
||||
})
|
||||
const [supabaseUrl, setSupabaseUrl] = useState('')
|
||||
const [anonKey, setAnonKey] = useState('')
|
||||
const [progress, setProgress] = useState<SyncProgress | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [info, setInfo] = useState<string | null>(null)
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
// 초기 상태 로드 + 이벤트 구독
|
||||
useEffect(() => {
|
||||
void window.electronAPI.cloudSync.getState().then((r) => {
|
||||
if (r.success) setState(r.data)
|
||||
})
|
||||
// 저장된 supabase 설정 로드
|
||||
void window.electronAPI.config.get({ key: 'supabaseUrl' as never }).then((r) => {
|
||||
if (r.success && typeof r.data === 'string') setSupabaseUrl(r.data)
|
||||
})
|
||||
void window.electronAPI.config.get({ key: 'supabaseAnonKey' as never }).then((r) => {
|
||||
if (r.success && typeof r.data === 'string') setAnonKey(r.data)
|
||||
})
|
||||
|
||||
const unsubAuth = window.electronAPI.cloudSync.onAuthChanged((payload) => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
authenticated: payload.user !== null,
|
||||
userEmail: payload.user?.email ?? null
|
||||
}))
|
||||
})
|
||||
const unsubProgress = window.electronAPI.cloudSync.onSyncProgress((p) => {
|
||||
setProgress(p)
|
||||
})
|
||||
const unsubComplete = window.electronAPI.cloudSync.onSyncComplete((p) => {
|
||||
setProgress(null)
|
||||
setInfo(`동기화 완료: ${p.pushed}건${p.errors.length > 0 ? ` (오류 ${p.errors.length})` : ''}`)
|
||||
setBusy(false)
|
||||
setState((prev) => ({ ...prev, syncing: false, lastSyncAt: Date.now() }))
|
||||
})
|
||||
const unsubError = window.electronAPI.cloudSync.onSyncError((p) => {
|
||||
setProgress(null)
|
||||
setError(p.error)
|
||||
setBusy(false)
|
||||
setState((prev) => ({ ...prev, syncing: false }))
|
||||
})
|
||||
return () => {
|
||||
unsubAuth()
|
||||
unsubProgress()
|
||||
unsubComplete()
|
||||
unsubError()
|
||||
}
|
||||
}, [])
|
||||
|
||||
async function handleConfigure(): Promise<void> {
|
||||
setError(null)
|
||||
setBusy(true)
|
||||
try {
|
||||
const r = await window.electronAPI.cloudSync.configure({ url: supabaseUrl, anonKey })
|
||||
if (!r.success) {
|
||||
setError(r.error.message)
|
||||
} else {
|
||||
setInfo('Supabase 연결 설정 저장됨')
|
||||
}
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSignIn(provider: 'google' | 'github'): Promise<void> {
|
||||
setError(null)
|
||||
setBusy(true)
|
||||
try {
|
||||
const r = await window.electronAPI.cloudSync.signIn({ provider })
|
||||
if (!r.success) {
|
||||
setError(r.error.message)
|
||||
} else {
|
||||
setInfo('브라우저에서 로그인을 완료해주세요...')
|
||||
}
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSignOut(): Promise<void> {
|
||||
setBusy(true)
|
||||
try {
|
||||
await window.electronAPI.cloudSync.signOut()
|
||||
setInfo('로그아웃되었습니다')
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSync(): Promise<void> {
|
||||
setError(null)
|
||||
setBusy(true)
|
||||
setState((prev) => ({ ...prev, syncing: true }))
|
||||
try {
|
||||
await window.electronAPI.cloudSync.pushAll()
|
||||
} finally {
|
||||
// 완료/에러 이벤트로 setBusy(false) 처리됨
|
||||
}
|
||||
}
|
||||
|
||||
const lastSyncText = state.lastSyncAt
|
||||
? new Date(state.lastSyncAt).toLocaleString('ko-KR')
|
||||
: '없음'
|
||||
|
||||
return (
|
||||
<Box sx={{ p: 3, bgcolor: d3roPalette.bg.elevated, borderRadius: 2 }}>
|
||||
<Stack direction="row" alignItems="center" spacing={1.5} sx={{ mb: 2 }}>
|
||||
{state.authenticated ? (
|
||||
<CloudDoneIcon sx={{ color: d3roPalette.tag.green }} />
|
||||
) : (
|
||||
<CloudIcon sx={{ color: d3roPalette.text.label }} />
|
||||
)}
|
||||
<Box sx={{ ...typoSx('heading'), color: d3roPalette.text.primary }}>Cloud Sync</Box>
|
||||
</Stack>
|
||||
|
||||
{!state.authenticated && (
|
||||
<Stack spacing={2}>
|
||||
<Box sx={{ ...typoSx('label'), color: d3roPalette.text.label }}>
|
||||
SUPABASE 설정 (env 미설정 시 직접 입력)
|
||||
</Box>
|
||||
<TextField
|
||||
label="Supabase URL"
|
||||
size="small"
|
||||
value={supabaseUrl}
|
||||
onChange={(e) => setSupabaseUrl(e.target.value)}
|
||||
placeholder="https://your-project.supabase.co"
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
label="Anon Key"
|
||||
size="small"
|
||||
value={anonKey}
|
||||
onChange={(e) => setAnonKey(e.target.value)}
|
||||
placeholder="eyJ..."
|
||||
type="password"
|
||||
fullWidth
|
||||
/>
|
||||
<Button variant="outlined" onClick={() => void handleConfigure()} disabled={busy}>
|
||||
저장
|
||||
</Button>
|
||||
|
||||
<Box sx={{ borderTop: `1px solid ${d3roPalette.border.subtle}`, pt: 2 }}>
|
||||
<Box sx={{ ...typoSx('label'), color: d3roPalette.text.label, mb: 1 }}>OAuth 로그인</Box>
|
||||
<Stack direction="row" spacing={1}>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<GoogleIcon />}
|
||||
onClick={() => void handleSignIn('google')}
|
||||
disabled={busy || !supabaseUrl || !anonKey}
|
||||
>
|
||||
Google
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<GitHubIcon />}
|
||||
onClick={() => void handleSignIn('github')}
|
||||
disabled={busy || !supabaseUrl || !anonKey}
|
||||
>
|
||||
GitHub
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{state.authenticated && (
|
||||
<Stack spacing={2}>
|
||||
<Box sx={{ color: d3roPalette.text.primary, fontSize: 13 }}>
|
||||
로그인됨: <strong>{state.userEmail ?? '(이메일 없음)'}</strong>
|
||||
</Box>
|
||||
<Box sx={{ color: d3roPalette.text.muted, fontSize: 12 }}>
|
||||
마지막 동기화: {lastSyncText}
|
||||
</Box>
|
||||
|
||||
{progress && (
|
||||
<Box>
|
||||
<Box sx={{ color: d3roPalette.text.label, fontSize: 12, mb: 0.5 }}>
|
||||
{progress.table}: {progress.current}/{progress.total}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
height: 4,
|
||||
bgcolor: d3roPalette.bg.inset,
|
||||
borderRadius: 2,
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
height: '100%',
|
||||
width: `${progress.total > 0 ? (progress.current / progress.total) * 100 : 0}%`,
|
||||
bgcolor: d3roPalette.accent.amber,
|
||||
transition: 'width 200ms'
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Stack direction="row" spacing={1}>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() => void handleSync()}
|
||||
disabled={busy || state.syncing}
|
||||
startIcon={state.syncing ? <CircularProgress size={16} /> : null}
|
||||
>
|
||||
{state.syncing ? '동기화 중...' : 'Sync Now'}
|
||||
</Button>
|
||||
<Button variant="outlined" onClick={() => void handleSignOut()} disabled={busy}>
|
||||
로그아웃
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mt: 2 }} variant="outlined">
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
{info && !error && (
|
||||
<Alert severity="info" sx={{ mt: 2 }} variant="outlined">
|
||||
{info}
|
||||
</Alert>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue