feat(V2-X-b): UI 정리 + pull 동기화 + Stripe 서명 검증 + ui-native 패키지

묶음 A — UI 정리 + i18n 완성:
[A1] desktop SettingsModal에 CloudSyncSection 통합 (탭 6번째)
  - CloudIcon import, settings.tabs.cloud 키 추가
  - 기존 about 탭은 index 5 -> 6

[A2] apps/web Sidebar 공유 layout 리팩터링
  - app/(app)/layout.tsx 신규 (route group)
  - dashboard/meetings/record/teams/billing을 (app)/ 아래로 git mv
  - app/(app)/layout.tsx에 auth 가드 + Sidebar 통합
  - 기존 개별 page.tsx에서 Sidebar/auth 중복 제거
  - app/(app)/dashboard/layout.tsx 제거 (루트 layout이 처리)

[A3] 11개 locale에 V2 새 키 추가 (en/ja/zh/zh-TW/es/fr/de/pt/ru/vi/th)
  - nav.meetings/record/teams/billing/logout
  - login.subtitle/google/github/terms
  - settings.tabs.cloud

묶음 B — V2-4b pull 동기화:
- CloudSyncService.pullAll() 신규
  - history/dictionary 테이블 원격에서 fetch
  - last_sync_at 이후 updated_at만 필터
  - Last-Write-Wins 충돌 해결 (remote.updated_at > local.updated_at)
  - 로컬에 없는 행은 INSERT, 있는 행은 UPDATE (구체적 컬럼 지정)
- IPC CLOUD_SYNC.PULL_ALL 채널 + handler + preload api
- CloudSyncSection에 Pull 버튼 추가 (Push 옆에 위치)

묶음 C — V2-8b Stripe webhook 서명 검증:
- stripe-webhook Edge Function에 Web Crypto API 기반 HMAC-SHA256 검증
  - Stripe-Signature 헤더 파싱 (t=, v1= 엔트리)
  - Replay 방지 (timestamp tolerance 300초)
  - constantTimeEqual로 타이밍 공격 방지
  - crypto.subtle.importKey/sign으로 HMAC 계산
- stripe-portal Edge Function 신규 (Customer Portal)
  - JWT 인증 -> 기존 customer_id 조회 -> billing_portal/sessions 생성
  - return_url 지원
- apps/web/components/billing/portal-button.tsx (구독 관리 버튼)
- billing 페이지에 Free 외 tier 사용자에게 PortalButton 표시
- config.toml에 stripe-portal 함수 등록 (verify_jwt=true)

묶음 D — V2-6b packages/ui-native:
- @d3ro/ui-native 신규 패키지 (React Native 전용 DS)
  - theme.ts: d3roNativePalette/Typo/Radius (MUI 없는 정적 값)
  - components/MetalCard.tsx: View + 섀시 섀도우
  - components/PhosphorText.tsx: Text + 앰버 glow (textShadow)
  - components/Led.tsx: View 원 + glow
  - components/PhysicalButton.tsx: Pressable + 누름 느낌
- React/React-Native는 peerDependencies
- apps/mobile/package.json에 @d3ro/ui-native를 file: 의존성으로 추가
  (mobile은 npm workspace 제외이므로 file path 필요)

검증:
- desktop typecheck OK
- web typecheck OK
- web next build OK (11 라우트, (app) 그룹 반영)
- 회귀 없음

apps/desktop/src/main/ipc/cloud-sync-handlers.ts

@@ -95,6 +95,16 @@ export function registerCloudSyncHandlers(): void {
     }
   })
 
+  ipcMain.handle(IPC_CHANNELS.CLOUD_SYNC.PULL_ALL, async () => {
+    try {
+      const result = await sync.pullAll()
+      configSet('cloudSyncLastAt' as never, Date.now() as never)
+      return ok(result)
+    } catch (e) {
+      return fail(e)
+    }
+  })
+
   // 이벤트 → renderer 브로드캐스트
   function broadcast(channel: string, payload: unknown): void {
     BrowserWindow.getAllWindows().forEach((win) => {

apps/desktop/src/main/services/CloudSyncService.ts

@@ -372,8 +372,199 @@ class CloudSyncService extends EventEmitter {
     }
   }
 
+  /**
+   * 원격 변경을 로컬 SQLite로 가져온다 (pull).
+   *
+   * Local-first + last-write-wins 충돌 해결:
+   * - 로컬에 이미 있는 행: remote.updated_at > local.updated_at인 경우에만 UPDATE
+   * - 로컬에 없는 행: INSERT
+   * - 로컬에만 있는 행: 그대로 유지 (다음 push에서 원격으로 올라감)
+   *
+   * since: null이면 전체, 아니면 해당 epoch ms 이후의 원격 updated_at만
+   */
+  async pullAll(): Promise<SyncResult> {
+    if (!this._client || !this._session) {
+      throw new D3ROError(ErrorCode.LLMServerUnreachable, '로그인이 필요합니다')
+    }
+    if (this._syncing) {
+      throw new D3ROError(ErrorCode.LLMProcessingFailed, '이미 동기화 중입니다')
+    }
+
+    this._syncing = true
+    const result: SyncResult = { pushed: 0, errors: [] }
+    const since = this._lastSyncAt ?? 0
+    const sinceIso = new Date(since).toISOString()
+    const db = getDatabase()
+
+    try {
+      // 1) history
+      result.pushed += await this._pullTable('history', async () => {
+        const { data: remoteRows, error } = await this._client!.from('history')
+          .select('*')
+          .gt('updated_at', sinceIso)
+
+        if (error) throw new Error(error.message)
+        if (!remoteRows || remoteRows.length === 0) return 0
+
+        let applied = 0
+        for (const remote of remoteRows as Array<Record<string, unknown>>) {
+          const remoteUpdated = remote.updated_at ? new Date(remote.updated_at as string).getTime() : 0
+          const remoteCreated = remote.created_at ? new Date(remote.created_at as string).getTime() : remoteUpdated
+
+          // 로컬에 있는지 확인
+          const existing = await db
+            .select()
+            .from(history)
+            .where(eq(history.id, remote.id as string))
+            .limit(1)
+
+          if (existing.length > 0) {
+            // LWW: 로컬이 더 새로우면 skip
+            if (existing[0].updatedAt >= remoteUpdated) continue
+            await db
+              .update(history)
+              .set({
+                title: (remote.title as string | null) ?? null,
+                originalText: remote.original_text as string,
+                polishedText: (remote.polished_text as string | null) ?? null,
+                mode: (remote.mode as 'dictation' | 'translate' | 'command' | 'caption' | 'file-transcription'),
+                status: (remote.status as 'completed' | 'cancelled' | 'error'),
+                duration: (remote.duration as number),
+                detectedLanguage: (remote.detected_language as string | null) ?? null,
+                micDevice: (remote.mic_device as string | null) ?? null,
+                wordCount: (remote.word_count as number) ?? 0,
+                sttModel: (remote.stt_model as string | null) ?? null,
+                llmModel: (remote.llm_model as string | null) ?? null,
+                sttLatencyMs: (remote.stt_latency_ms as number | null) ?? null,
+                llmLatencyMs: (remote.llm_latency_ms as number | null) ?? null,
+                appVersion: (remote.app_version as string) ?? '1.0.0',
+                summaryText: (remote.summary_text as string | null) ?? null,
+                updatedAt: remoteUpdated
+              })
+              .where(eq(history.id, remote.id as string))
+            applied++
+          } else {
+            await db.insert(history).values({
+              id: remote.id as string,
+              title: (remote.title as string | null) ?? null,
+              originalText: remote.original_text as string,
+              polishedText: (remote.polished_text as string | null) ?? null,
+              focusedApp: null,
+              focusedAppName: null,
+              focusedAppWindowTitle: null,
+              mode: (remote.mode as 'dictation' | 'translate' | 'command' | 'caption' | 'file-transcription'),
+              status: (remote.status as 'completed' | 'cancelled' | 'error'),
+              errorCode: null,
+              audioLocalPath: null,
+              duration: (remote.duration as number),
+              detectedLanguage: (remote.detected_language as string | null) ?? null,
+              micDevice: (remote.mic_device as string | null) ?? null,
+              wordCount: (remote.word_count as number) ?? 0,
+              sttModel: (remote.stt_model as string | null) ?? null,
+              llmModel: (remote.llm_model as string | null) ?? null,
+              sttLatencyMs: (remote.stt_latency_ms as number | null) ?? null,
+              llmLatencyMs: (remote.llm_latency_ms as number | null) ?? null,
+              createdAt: remoteCreated,
+              updatedAt: remoteUpdated,
+              appVersion: (remote.app_version as string) ?? '1.0.0',
+              summaryText: (remote.summary_text as string | null) ?? null
+            })
+            applied++
+          }
+          this.emit('sync-progress', { current: applied, total: remoteRows.length, table: 'history' })
+        }
+        return applied
+      }, result)
+
+      // 2) dictionary (동일 패턴)
+      result.pushed += await this._pullTable('dictionary', async () => {
+        const { data: remoteRows, error } = await this._client!.from('dictionary')
+          .select('*')
+          .gt('updated_at', sinceIso)
+
+        if (error) throw new Error(error.message)
+        if (!remoteRows || remoteRows.length === 0) return 0
+
+        let applied = 0
+        for (const remote of remoteRows as Array<Record<string, unknown>>) {
+          const remoteUpdated = remote.updated_at ? new Date(remote.updated_at as string).getTime() : 0
+          const remoteCreated = remote.created_at ? new Date(remote.created_at as string).getTime() : remoteUpdated
+
+          const existing = await db
+            .select()
+            .from(dictionary)
+            .where(eq(dictionary.id, remote.id as string))
+            .limit(1)
+
+          if (existing.length > 0) {
+            if (existing[0].updatedAt >= remoteUpdated) continue
+            await db
+              .update(dictionary)
+              .set({
+                word: remote.word as string,
+                pronunciation: (remote.pronunciation as string | null) ?? null,
+                category: (remote.category as 'user' | 'auto' | 'technical') ?? 'user',
+                usageCount: (remote.usage_count as number) ?? 0,
+                lastUsedAt: remote.last_used_at ? new Date(remote.last_used_at as string).getTime() : null,
+                updatedAt: remoteUpdated
+              })
+              .where(eq(dictionary.id, remote.id as string))
+            applied++
+          } else {
+            await db.insert(dictionary).values({
+              id: remote.id as string,
+              word: remote.word as string,
+              pronunciation: (remote.pronunciation as string | null) ?? null,
+              category: (remote.category as 'user' | 'auto' | 'technical') ?? 'user',
+              usageCount: (remote.usage_count as number) ?? 0,
+              lastUsedAt: remote.last_used_at ? new Date(remote.last_used_at as string).getTime() : null,
+              createdAt: remoteCreated,
+              updatedAt: remoteUpdated
+            })
+            applied++
+          }
+          this.emit('sync-progress', {
+            current: applied,
+            total: remoteRows.length,
+            table: 'dictionary'
+          })
+        }
+        return applied
+      }, result)
+
+      this._lastSyncAt = Date.now()
+      logger.info(`Pull complete: applied=${result.pushed} errors=${result.errors.length}`)
+      this.emit('sync-complete', result)
+      return result
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err)
+      result.errors.push(message)
+      logger.error(`Pull failed: ${message}`)
+      this.emit('sync-error', { error: message })
+      return result
+    } finally {
+      this._syncing = false
+    }
+  }
+
   // ── 내부 헬퍼 ──────────────────────────────────────────
 
+  private async _pullTable(
+    table: string,
+    runner: () => Promise<number>,
+    result: SyncResult
+  ): Promise<number> {
+    this.emit('sync-progress', { current: 0, total: 0, table })
+    try {
+      return await runner()
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err)
+      result.errors.push(`${table}: ${message}`)
+      logger.error(`Pull ${table} failed: ${message}`)
+      return 0
+    }
+  }
+
   private async _pushTable(
     table: string,
     total: number,

apps/desktop/src/preload/index.ts

@@ -692,6 +692,8 @@ const electronAPI = {
     signOut: () => invoke<unknown>(IPC_CHANNELS.CLOUD_SYNC.SIGN_OUT),
     pushAll: () =>
       invoke<{ pushed: number; errors: string[] }>(IPC_CHANNELS.CLOUD_SYNC.PUSH_ALL),
+    pullAll: () =>
+      invoke<{ pushed: number; errors: string[] }>(IPC_CHANNELS.CLOUD_SYNC.PULL_ALL),
     onAuthChanged: (callback: (data: { user: { id: string; email: string | null } | null }) => void) =>
       on<{ user: { id: string; email: string | null } | null }>(
         IPC_CHANNELS.CLOUD_SYNC.AUTH_CHANGED,

apps/desktop/src/renderer/components/CloudSyncSection.tsx

@@ -133,6 +133,17 @@ export function CloudSyncSection(): React.ReactElement {
     }
   }
 
+  async function handlePull(): Promise<void> {
+    setError(null)
+    setBusy(true)
+    setState((prev) => ({ ...prev, syncing: true }))
+    try {
+      await window.electronAPI.cloudSync.pullAll()
+    } finally {
+      // 완료/에러 이벤트로 setBusy(false) 처리됨
+    }
+  }
+
   const lastSyncText = state.lastSyncAt
     ? new Date(state.lastSyncAt).toLocaleString('ko-KR')
     : '없음'
@@ -239,9 +250,16 @@ export function CloudSyncSection(): React.ReactElement {
               disabled={busy || state.syncing}
               startIcon={state.syncing ? <CircularProgress size={16} /> : null}
             >
-              {state.syncing ? '동기화 중...' : 'Sync Now'}
+              {state.syncing ? '동기화 중...' : 'Push'}
             </Button>
-            <Button variant="outlined" onClick={() => void handleSignOut()} disabled={busy}>
+            <Button
+              variant="outlined"
+              onClick={() => void handlePull()}
+              disabled={busy || state.syncing}
+            >
+              Pull
+            </Button>
+            <Button variant="outlined" onClick={() => void handleSignOut()} disabled={busy} color="warning">
               로그아웃
             </Button>
           </Stack>

apps/desktop/src/renderer/components/SettingsModal.tsx

@@ -29,11 +29,13 @@ import KeyboardIcon from '@mui/icons-material/Keyboard'
 import EditIcon from '@mui/icons-material/Edit'
 import MicIcon from '@mui/icons-material/Mic'
 import LockIcon from '@mui/icons-material/Lock'
+import CloudIcon from '@mui/icons-material/Cloud'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 import CancelIcon from '@mui/icons-material/Cancel'
 import { d3roPalette, d3roFontMono, d3roShadow } from '@d3ro/ui/theme'
 import { HotkeyRecordModal } from './HotkeyRecordModal'
 import { LicenseTab } from './LicenseTab'
+import { CloudSyncSection } from './CloudSyncSection'
 import { useI18n, LOCALE_META } from '@d3ro/i18n'
 import type { Locale } from '@d3ro/i18n'
 import type { ThemeMode, AppConfig, HotkeyBinding, AudioDevice } from '@d3ro/core/types'
@@ -372,6 +374,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
             <Tab label={t('settings.tabs.stt')} />
             <Tab label={t('settings.tabs.llm')} />
             <Tab label={t('license.nav')} icon={<LockIcon sx={{ fontSize: 14 }} />} iconPosition="start" />
+            <Tab label={t('settings.tabs.cloud') ?? 'Cloud'} icon={<CloudIcon sx={{ fontSize: 14 }} />} iconPosition="start" />
             <Tab label={t('settings.tabs.about')} />
           </Tabs>
           <Box sx={{ p: 3 }}>
@@ -807,8 +810,13 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
             <LicenseTab />
           </TabPanel>
 
-          {/* ── 정보 탭 ──────────────────────────────── */}
+          {/* ── Cloud Sync 탭 ──────────────────────────── */}
           <TabPanel value={activeTab} index={5}>
+            <CloudSyncSection />
+          </TabPanel>
+
+          {/* ── 정보 탭 ──────────────────────────────── */}
+          <TabPanel value={activeTab} index={6}>
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2.5 }}>
               <Typography variant="overline" sx={{ color: d3roPalette.text.label, letterSpacing: '1.5px' }}>
                 D3RO-VOICE