feat(desktop): two-way cloud sync with mobile and web

Rewrites the desktop mirror as services/sync/SyncEngine: a persistent outbox, per-account server-clock keyset cursors with paging, pulls that never overwrite unsent local edits, deletions both ways through sync_tombstones and per-row failure isolation. It now covers history titles and favorites, dictionary, every meeting's memos and documents, memo tags, user commands and dictation/meeting templates, and registers the desktop as a device that the phone can disconnect. Fixes shipped defects: the first pull after sign-in fetched nothing, only the first meeting's children were pushed, team meetings leaked into the personal database and lost team_id on re-push, and Realtime never connected because Electron's Node 20 has no global WebSocket (ws is now the transport). Anonymous local-mode records are imported into the first account that signs in. The settings sync section is translated and shows pending/rejected changes; synced screens reload on app:dataChanged.
2026-09-27 14:04:49 +09:00 · 2026-09-27 14:04:49 +09:00 · 0a4f5aee64
commit 0a4f5aee64
parent b5c9ff9f31
49 changed files with 3940 additions and 1033 deletions
--- a/apps/desktop/src/renderer/components/CloudSyncSection.tsx
+++ b/apps/desktop/src/renderer/components/CloudSyncSection.tsx
@ -1,72 +1,64 @@
 // src/renderer/components/CloudSyncSection.tsx
 // Phase V2-4: Settings에 표시되는 Cloud Sync 섹션
-// 로그인 상태 / Sync Now 버튼 / 마지막 동기화 / 환경변수 설정
+// 로그인 상태 / 지금 동기화 / 마지막 동기화 / 올릴 변경·거부된 변경 건수

-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { Box, Button, Stack, Alert, CircularProgress } from '@mui/material'
-import { Cloud, CloudCheck, Globe, GitBranch } from 'lucide-react'
+import { Cloud, CloudCheck, Globe, GitBranch, RefreshCw } from 'lucide-react'
 import { d3roPalette, typoSx } from '@d3ro/ui/theme'
+import { useI18n } from '@d3ro/i18n'

 interface CloudSyncState {
  authenticated: boolean
  userEmail: string | null
  lastSyncAt: number | null
  syncing: boolean
+  pendingChanges: number
+  failedChanges: number
 }

-interface SyncProgress {
-  current: number
-  total: number
-  table: string
+const INITIAL_STATE: CloudSyncState = {
+  authenticated: false,
+  userEmail: null,
+  lastSyncAt: null,
+  syncing: false,
+  pendingChanges: 0,
+  failedChanges: 0,
 }

 export function CloudSyncSection(): React.ReactElement {
-  const [state, setState] = useState<CloudSyncState>({
-    authenticated: false,
-    userEmail: null,
-    lastSyncAt: null,
-    syncing: false
-  })
-  const [progress, setProgress] = useState<SyncProgress | null>(null)
+  const { t, formatDate } = useI18n()
+  const [state, setState] = useState<CloudSyncState>(INITIAL_STATE)
  const [error, setError] = useState<string | null>(null)
  const [info, setInfo] = useState<string | null>(null)
  const [busy, setBusy] = useState(false)

+  const refreshState = useCallback(async () => {
+    const r = await window.electronAPI.cloudSync.getState()
+    if (r.success) setState(r.data)
+  }, [])
+
  // 초기 상태 로드 + 이벤트 구독
  useEffect(() => {
-    void window.electronAPI.cloudSync.getState().then((r) => {
-      if (r.success) setState(r.data)
-    })
+    void refreshState()

-    const unsubAuth = window.electronAPI.cloudSync.onAuthChanged((payload) => {
-      setState((prev) => ({
-        ...prev,
-        authenticated: payload.user !== null,
-        userEmail: payload.user?.email ?? null
-      }))
+    const unsubAuth = window.electronAPI.cloudSync.onAuthChanged(() => {
+      void refreshState()
    })
-    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 unsubComplete = window.electronAPI.cloudSync.onSyncComplete(() => {
+      void refreshState()
    })
    const unsubError = window.electronAPI.cloudSync.onSyncError((p) => {
-      setProgress(null)
      setError(p.error)
-      setBusy(false)
-      setState((prev) => ({ ...prev, syncing: false }))
+      void refreshState()
    })
    return () => {
      unsubAuth()
-      unsubProgress()
      unsubComplete()
      unsubError()
    }
-  }, [])
+  }, [refreshState])

  async function handleSignIn(provider: 'google' | 'github'): Promise<void> {
    setError(null)
@ -76,7 +68,7 @@ export function CloudSyncSection(): React.ReactElement {
      if (!r.success) {
        setError(r.error.message)
      } else {
-        setInfo('브라우저에서 로그인을 완료해주세요...')
+        setInfo(t('cloudSync.browserPending'))
      }
    } finally {
      setBusy(false)
@ -87,52 +79,54 @@ export function CloudSyncSection(): React.ReactElement {
    setBusy(true)
    try {
      await window.electronAPI.cloudSync.signOut()
-      setInfo('로그아웃되었습니다')
+      setInfo(t('cloudSync.signedOut'))
    } finally {
      setBusy(false)
+      void refreshState()
    }
  }

-  async function handleSync(): Promise<void> {
+  /** 올리기(거부된 항목 재시도 포함) → 내려받기 */
+  async function handleSyncNow(): Promise<void> {
    setError(null)
+    setInfo(null)
    setBusy(true)
-    setState((prev) => ({ ...prev, syncing: true }))
    try {
-      await window.electronAPI.cloudSync.pushAll()
+      const pushed = await window.electronAPI.cloudSync.pushAll()
+      const pulled = await window.electronAPI.cloudSync.pullAll()
+      const count = (pushed.success ? pushed.data.pushed : 0) + (pulled.success ? pulled.data.pushed : 0)
+      const errors = (pushed.success ? pushed.data.errors.length : 1) + (pulled.success ? pulled.data.errors.length : 1)
+      if (!pushed.success) setError(pushed.error.message)
+      else if (!pulled.success) setError(pulled.error.message)
+      setInfo(errors > 0 ? t('cloudSync.doneWithErrors', { count, errors }) : t('cloudSync.done', { count }))
    } finally {
-      // 완료/에러 이벤트로 setBusy(false) 처리됨
-    }
-  }
-
-  async function handlePull(): Promise<void> {
-    setError(null)
-    setBusy(true)
-    setState((prev) => ({ ...prev, syncing: true }))
-    try {
-      await window.electronAPI.cloudSync.pullAll()
-    } finally {
-      // 완료/에러 이벤트로 setBusy(false) 처리됨
+      setBusy(false)
+      void refreshState()
    }
  }

+  const syncing = busy || state.syncing
  const lastSyncText = state.lastSyncAt
-    ? new Date(state.lastSyncAt).toLocaleString('ko-KR')
-    : '없음'
+    ? formatDate(state.lastSyncAt, { dateStyle: 'medium', timeStyle: 'short' })
+    : t('cloudSync.never')

  return (
    <Box sx={{ p: 3, bgcolor: d3roPalette.bg.elevated, borderRadius: 2 }}>
-      <Stack direction="row" alignItems="center" spacing={1.5} sx={{ mb: 2 }}>
+      <Stack direction="row" alignItems="center" spacing={1.5} sx={{ mb: 1 }}>
        {state.authenticated ? (
          <CloudCheck size={24} style={{ color: d3roPalette.tag.green }} />
        ) : (
          <Cloud size={24} style={{ color: d3roPalette.text.label }} />
        )}
-        <Box sx={{ ...typoSx('heading'), color: d3roPalette.text.primary }}>Cloud Sync</Box>
+        <Box sx={{ ...typoSx('heading'), color: d3roPalette.text.primary }}>{t('cloudSync.title')}</Box>
      </Stack>
+      <Box sx={{ color: d3roPalette.text.muted, fontSize: 12, lineHeight: 1.6, mb: 2 }}>
+        {t('cloudSync.description')}
+      </Box>

      {!state.authenticated && (
-        <Stack spacing={2}>
-          <Box sx={{ ...typoSx('label'), color: d3roPalette.text.label, mb: 1 }}>OAuth 로그인</Box>
+        <Stack spacing={1}>
+          <Box sx={{ ...typoSx('label'), color: d3roPalette.text.label }}>{t('cloudSync.signIn')}</Box>
          <Stack direction="row" spacing={1}>
            <Button
              variant="contained"
@ -155,57 +149,42 @@ export function CloudSyncSection(): React.ReactElement {
      )}

      {state.authenticated && (
-        <Stack spacing={2}>
+        <Stack spacing={1.5}>
          <Box sx={{ color: d3roPalette.text.primary, fontSize: 13 }}>
-            로그인됨: <strong>{state.userEmail ?? '(이메일 없음)'}</strong>
+            {t('cloudSync.signedInAs', { email: state.userEmail ?? t('cloudSync.noEmail') })}
          </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.main,
-                    transition: 'width 200ms'
-                  }}
-                />
-              </Box>
+          <Stack spacing={0.5}>
+            <Box sx={{ color: d3roPalette.text.muted, fontSize: 12 }}>
+              {t('cloudSync.lastSync', { time: lastSyncText })}
            </Box>
-          )}
+            <Box
+              sx={{
+                fontSize: 12,
+                color: state.pendingChanges > 0 ? d3roPalette.tag.orange : d3roPalette.tag.green,
+              }}
+            >
+              {state.pendingChanges > 0
+                ? t('cloudSync.pending', { count: state.pendingChanges })
+                : t('cloudSync.upToDate')}
+            </Box>
+            {state.failedChanges > 0 && (
+              <Box sx={{ fontSize: 12, color: d3roPalette.tag.red }}>
+                {t('cloudSync.failed', { count: state.failedChanges })}
+              </Box>
+            )}
+          </Stack>

          <Stack direction="row" spacing={1}>
            <Button
              variant="contained"
-              onClick={() => void handleSync()}
-              disabled={busy || state.syncing}
-              startIcon={state.syncing ? <CircularProgress size={16} /> : null}
+              onClick={() => void handleSyncNow()}
+              disabled={syncing}
+              startIcon={syncing ? <CircularProgress size={16} /> : <RefreshCw size={16} />}
            >
-              {state.syncing ? '동기화 중...' : 'Push'}
-            </Button>
-            <Button
-              variant="outlined"
-              onClick={() => void handlePull()}
-              disabled={busy || state.syncing}
-            >
-              Pull
+              {syncing ? t('cloudSync.syncing') : t('cloudSync.syncNow')}
            </Button>
            <Button variant="outlined" onClick={() => void handleSignOut()} disabled={busy} color="warning">
-              로그아웃
+              {t('cloudSync.signOut')}
            </Button>
          </Stack>
        </Stack>
--- a/apps/desktop/src/renderer/components/TemplateSection.tsx
+++ b/apps/desktop/src/renderer/components/TemplateSection.tsx
@ -37,6 +37,15 @@ export function TemplateSection(): React.ReactElement {

  useEffect(() => { loadData() }, [loadData])

+  // 다른 기기에서 바뀐 템플릿이 반영되면 다시 불러온다.
+  useEffect(
+    () =>
+      window.electronAPI.app.onDataChanged((data) => {
+        if (data.type === 'cloud-sync' && data.entities?.includes('user_templates')) loadData()
+      }),
+    [loadData],
+  )
+
  useEffect(() => {
    const unsub = window.electronAPI.dictationTemplate.onSessionStateChanged((data) => {
      setSession(data)
--- a/apps/desktop/src/renderer/components/meeting/MeetingDetailTabs.tsx
+++ b/apps/desktop/src/renderer/components/meeting/MeetingDetailTabs.tsx
@ -134,10 +134,16 @@ export function MeetingDetailTabs({
    [detail.rawTranscript, detail.editedTranscript],
  )

-  // 템플릿 로드
+  // 템플릿 로드 (다른 기기에서 바뀐 템플릿이 반영되면 다시)
  useEffect(() => {
-    window.electronAPI.meetingDocTemplate.getAll().then((resp) => {
-      if (resp.success) setTemplates(resp.data)
+    const load = (): void => {
+      window.electronAPI.meetingDocTemplate.getAll().then((resp) => {
+        if (resp.success) setTemplates(resp.data)
+      })
+    }
+    load()
+    return window.electronAPI.app.onDataChanged((data) => {
+      if (data.type === 'cloud-sync' && data.entities?.includes('user_templates')) load()
    })
  }, [])

--- a/apps/desktop/src/renderer/components/shared/HistoryEntryCard.tsx
+++ b/apps/desktop/src/renderer/components/shared/HistoryEntryCard.tsx
@ -3,7 +3,7 @@

 import React, { useState, useEffect, useCallback } from 'react'
 import { Box, IconButton, Tooltip, Chip, Collapse } from '@mui/material'
-import { Copy, Check, Trash2, Tag, X, ScrollText, ChevronDown, Sparkles, Volume2 } from 'lucide-react'
+import { Copy, Check, Trash2, Tag, X, ScrollText, ChevronDown, Sparkles, Volume2, Star } from 'lucide-react'
 import { MetalCard, Led, TactileBadge } from '@d3ro/ui/components/ds'
 import { d3roPalette, d3roFontSans, d3roFontMono, d3roTypo, d3roRadius, d3roShadow } from '@d3ro/ui/theme'
 import { useI18n } from '@d3ro/i18n'
@ -15,6 +15,8 @@ export interface HistoryEntryCardProps {
  entry: HistoryEntry
  onCopy?: (text: string) => void
  onDelete?: (id: string) => void
+  /** 즐겨찾기 토글 — 모바일·웹과 공유되는 값 */
+  onToggleFavorite?: (entry: HistoryEntry) => void
  showTags?: boolean
  onTagClick?: (tag: string) => void
 }
@ -23,6 +25,7 @@ export function HistoryEntryCard({
  entry,
  onCopy,
  onDelete,
+  onToggleFavorite,
  showTags = false,
  onTagClick,
 }: HistoryEntryCardProps): React.ReactElement {
@ -160,6 +163,27 @@ export function HistoryEntryCard({

            {/* Quick Action Buttons */}
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }}>
+              {onToggleFavorite && (
+                <Tooltip title={entry.isFavorite ? t('history.unfavorite') : t('history.favorite')}>
+                  <IconButton
+                    size="small"
+                    aria-pressed={entry.isFavorite}
+                    aria-label={entry.isFavorite ? t('history.unfavorite') : t('history.favorite')}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      onToggleFavorite(entry)
+                    }}
+                    sx={{
+                      p: 0.6,
+                      color: entry.isFavorite ? d3roPalette.tag.orange : d3roPalette.text.inactive,
+                      bgcolor: entry.isFavorite ? d3roPalette.tag.orangeBg : 'transparent',
+                      '&:hover': { color: d3roPalette.tag.orange, bgcolor: d3roPalette.tag.orangeBg },
+                    }}
+                  >
+                    <Star size={14} fill={entry.isFavorite ? 'currentColor' : 'none'} />
+                  </IconButton>
+                </Tooltip>
+              )}
              <Tooltip title={copied ? t('common.copied') : t('common.copy')}>
                <IconButton
                  size="small"
--- a/apps/desktop/src/renderer/pages/DictionaryPage.tsx
+++ b/apps/desktop/src/renderer/pages/DictionaryPage.tsx
@ -36,6 +36,10 @@ export function DictionaryPage(): React.ReactElement {

  useEffect(() => {
    loadData()
+    // 다른 기기(모바일·웹)에서 바뀐 사전이 반영되면 다시 불러온다.
+    return window.electronAPI.app.onDataChanged((data) => {
+      if (data.type === 'cloud-sync' && data.entities?.includes('dictionary')) loadData()
+    })
  }, [loadData])

  const openAdd = () => {
--- a/apps/desktop/src/renderer/pages/HistoryPage.tsx
+++ b/apps/desktop/src/renderer/pages/HistoryPage.tsx
@ -86,6 +86,19 @@ export function HistoryPage(): React.ReactElement {
    [loadData],
  )

+  const handleToggleFavorite = useCallback(async (entry: HistoryEntry) => {
+    const next = !entry.isFavorite
+    const apply = (value: boolean): void =>
+      setData((prev) =>
+        prev
+          ? { ...prev, entries: prev.entries.map((e) => (e.id === entry.id ? { ...e, isFavorite: value } : e)) }
+          : prev,
+      )
+    apply(next)
+    const result = await window.electronAPI.history.setFavorite({ id: entry.id, isFavorite: next })
+    if (!result.success) apply(entry.isFavorite)
+  }, [])
+
  const handleTagClick = useCallback((tag: string) => {
    setActiveTag((prev) => (prev === tag ? null : tag))
    setSearch('')
@ -232,6 +245,7 @@ export function HistoryPage(): React.ReactElement {
                  entry={entry}
                  onCopy={handleCopy}
                  onDelete={handleDelete}
+                  onToggleFavorite={handleToggleFavorite}
                  showTags
                  onTagClick={handleTagClick}
                />
--- a/apps/desktop/src/renderer/pages/MeetingModePage.tsx
+++ b/apps/desktop/src/renderer/pages/MeetingModePage.tsx
@ -197,6 +197,25 @@ export function MeetingModePage(): React.ReactElement {
    if (view === 'list') loadSessions()
  }, [view, loadSessions])

+  // 다른 기기(모바일·웹)의 회의 변경이 반영되면: 목록은 다시 불러오고,
+  // 보고 있던 회의가 지워졌으면 목록으로 돌아간다(편집 중인 상세는 덮어쓰지 않는다).
+  useEffect(
+    () =>
+      window.electronAPI.app.onDataChanged((data) => {
+        if (data.type !== 'cloud-sync') return
+        const entities = data.entities ?? []
+        if (!entities.some((e) => e === 'meetings' || e === 'meeting_memos' || e === 'meeting_documents')) return
+        if (view === 'list') {
+          loadSessions()
+        } else if (view === 'detail' && detail) {
+          window.electronAPI.meetingMode.getSession({ sessionId: detail.id }).then((resp) => {
+            if (!resp.success) setView('list')
+          })
+        }
+      }),
+    [view, detail, loadSessions],
+  )
+
  // ── IPC 이벤트 구독 ──
  useEffect(() => {
    const unsubState = window.electronAPI.meetingMode.onStateChanged((info) => {