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

apps/mobile/package.json

@@ -11,6 +11,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@d3ro/ui-native": "file:../../packages/ui-native",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@supabase/supabase-js": "^2.45.0",
     "expo": "~51.0.0",

apps/web/src/app/(app)/billing/page.tsx

@@ -1,13 +1,12 @@
-// apps/web/src/app/billing/page.tsx
-// 구독 및 결제 페이지 — 가격표 + 현재 티어 + Stripe checkout 시작
+// apps/web/src/app/(app)/billing/page.tsx
+// 구독 및 결제 페이지 — auth/Sidebar는 (app)/layout.tsx가 제공
 
-import { redirect } from 'next/navigation'
-import { Box, Grid } from '@mui/material'
+import { Box, Grid, Stack } from '@mui/material'
 import { MetalCard, PhosphorText } from '@d3ro/ui/components/ds'
 import { d3roPalette, typoSx } from '@d3ro/ui/theme'
-import { Sidebar } from '@/components/layout/sidebar'
 import { CheckoutButton } from '@/components/billing/checkout-button'
-import { getSupabaseServerClient, isSupabaseConfiguredServer } from '@/lib/supabase-server'
+import { PortalButton } from '@/components/billing/portal-button'
+import { getSupabaseServerClient } from '@/lib/supabase-server'
 
 interface Plan {
   tier: 'free' | 'pro' | 'team'
@@ -68,27 +67,21 @@ async function loadCurrentTier(): Promise<string> {
 }
 
 export default async function BillingPage(): Promise<React.ReactElement> {
-  if (!isSupabaseConfiguredServer()) {
-    redirect('/login')
-  }
-  const supabase = await getSupabaseServerClient()
-  const {
-    data: { user }
-  } = await supabase.auth.getUser()
-  if (!user) redirect('/login')
-
   const currentTier = await loadCurrentTier()
 
   return (
-    <Box sx={{ display: 'flex', minHeight: '100vh' }}>
-      <Sidebar />
-      <Box component="main" sx={{ flex: 1, p: 4, overflow: 'auto' }}>
-        <PhosphorText variant="title" sx={{ mb: 1 }}>
-          BILLING
-        </PhosphorText>
-        <Box sx={{ color: d3roPalette.text.muted, fontSize: 13, mb: 4 }}>
-          현재 구독: <strong>{currentTier.toUpperCase()}</strong>
+    <Box sx={{ p: 4 }}>
+      <Stack direction="row" alignItems="flex-end" justifyContent="space-between" sx={{ mb: 4 }}>
+        <Box>
+          <PhosphorText variant="title" sx={{ mb: 1 }}>
+            BILLING
+          </PhosphorText>
+          <Box sx={{ color: d3roPalette.text.muted, fontSize: 13 }}>
+            현재 구독: <strong>{currentTier.toUpperCase()}</strong>
+          </Box>
         </Box>
+        {currentTier !== 'free' && <PortalButton />}
+      </Stack>
 
         <Grid container spacing={3}>
           {PLANS.map((plan) => {
@@ -150,9 +143,8 @@ export default async function BillingPage(): Promise<React.ReactElement> {
           })}
         </Grid>
 
-        <Box sx={{ mt: 4, color: d3roPalette.text.muted, fontSize: 11 }}>
-          결제는 Stripe로 안전하게 처리됩니다. 언제든 취소할 수 있습니다.
-        </Box>
+      <Box sx={{ mt: 4, color: d3roPalette.text.muted, fontSize: 11 }}>
+        결제는 Stripe로 안전하게 처리됩니다. 언제든 취소할 수 있습니다.
       </Box>
     </Box>
   )

apps/web/src/app/(app)/dashboard/page.tsx

@@ -57,7 +57,7 @@ export default async function DashboardPage(): Promise<React.ReactElement> {
   const { stats, recentMeetings } = await loadDashboardData()
 
   return (
-    <Box>
+    <Box sx={{ p: 4 }}>
       <PhosphorText variant="title" sx={{ mb: 4 }}>
         DASHBOARD
       </PhosphorText>

apps/web/src/app/(app)/layout.tsx

@@ -1,12 +1,13 @@
-// apps/web/src/app/dashboard/layout.tsx
-// 대시보드 섹션 레이아웃 — 인증 가드 + 사이드바
+// apps/web/src/app/(app)/layout.tsx
+// 공유 레이아웃 — auth 가드 + Sidebar
+// route group `(app)`은 URL에 영향을 주지 않고 하위 모든 라우트에 적용.
 
 import { redirect } from 'next/navigation'
 import { Box } from '@mui/material'
 import { Sidebar } from '@/components/layout/sidebar'
 import { getSupabaseServerClient, isSupabaseConfiguredServer } from '@/lib/supabase-server'
 
-export default async function DashboardLayout({
+export default async function AppLayout({
   children
 }: {
   children: React.ReactNode
@@ -27,7 +28,7 @@ export default async function DashboardLayout({
   return (
     <Box sx={{ display: 'flex', minHeight: '100vh' }}>
       <Sidebar />
-      <Box component="main" sx={{ flex: 1, p: 4, overflow: 'auto' }}>
+      <Box component="main" sx={{ flex: 1, overflow: 'auto' }}>
         {children}
       </Box>
     </Box>

apps/web/src/app/(app)/meetings/[id]/page.tsx

@@ -1,12 +1,11 @@
-// apps/web/src/app/meetings/[id]/page.tsx
+// apps/web/src/app/(app)/meetings/[id]/page.tsx
 // 회의록 상세 — transcripts + memos + documents
 
-import { notFound, redirect } from 'next/navigation'
+import { notFound } from 'next/navigation'
 import { Box, Stack } from '@mui/material'
 import { MetalCard, PhosphorText } from '@d3ro/ui/components/ds'
-import { d3roPalette, typoSx } from "@d3ro/ui/theme"
-import { getSupabaseServerClient, isSupabaseConfiguredServer } from '@/lib/supabase-server'
-import { Sidebar } from '@/components/layout/sidebar'
+import { d3roPalette, typoSx } from '@d3ro/ui/theme'
+import { getSupabaseServerClient } from '@/lib/supabase-server'
 
 interface PageProps {
   params: Promise<{ id: string }>
@@ -15,15 +14,7 @@ interface PageProps {
 export default async function MeetingDetailPage({ params }: PageProps): Promise<React.ReactElement> {
   const { id } = await params
 
-  if (!isSupabaseConfiguredServer()) {
-    redirect('/login')
-  }
-
   const supabase = await getSupabaseServerClient()
-  const {
-    data: { user }
-  } = await supabase.auth.getUser()
-  if (!user) redirect('/login')
 
   const [{ data: meeting }, { data: transcripts }, { data: memos }, { data: documents }] =
     await Promise.all([
@@ -50,19 +41,17 @@ export default async function MeetingDetailPage({ params }: PageProps): Promise<
   }
 
   return (
-    <Box sx={{ display: 'flex', minHeight: '100vh' }}>
-      <Sidebar />
-      <Box component="main" sx={{ flex: 1, p: 4, overflow: 'auto' }}>
-        <Box sx={{ mb: 4 }}>
-          <PhosphorText variant="title">
-            {meeting.title ?? '(제목 없음)'}
-          </PhosphorText>
-          <Box sx={{ color: d3roPalette.text.muted, fontSize: 12, mt: 1 }}>
-            {new Date(meeting.started_at).toLocaleString('ko-KR')} · {meeting.status}
-          </Box>
+    <Box sx={{ p: 4 }}>
+      <Box sx={{ mb: 4 }}>
+        <PhosphorText variant="title">
+          {meeting.title ?? '(제목 없음)'}
+        </PhosphorText>
+        <Box sx={{ color: d3roPalette.text.muted, fontSize: 12, mt: 1 }}>
+          {new Date(meeting.started_at).toLocaleString('ko-KR')} · {meeting.status}
         </Box>
+      </Box>
 
-        <Stack spacing={3}>
+      <Stack spacing={3}>
           {/* Transcript */}
           <MetalCard sx={{ p: 3 }}>
             <PhosphorText variant="heading" sx={{ mb: 2 }}>
@@ -145,9 +134,8 @@ export default async function MeetingDetailPage({ params }: PageProps): Promise<
                 ))}
               </Stack>
             )}
-          </MetalCard>
-        </Stack>
-      </Box>
+        </MetalCard>
+      </Stack>
     </Box>
   )
 }

apps/web/src/app/(app)/meetings/page.tsx

@@ -0,0 +1,75 @@
+// apps/web/src/app/(app)/meetings/page.tsx
+// 회의록 리스트 — auth/Sidebar는 (app)/layout.tsx가 제공
+
+import Link from 'next/link'
+import { Box, Grid } from '@mui/material'
+import { MetalCard, PhosphorText } from '@d3ro/ui/components/ds'
+import { d3roPalette, typoSx } from '@d3ro/ui/theme'
+import { getSupabaseServerClient } from '@/lib/supabase-server'
+
+async function loadMeetings(): Promise<Array<{ id: string; title: string; started_at: string; status: string }>> {
+  try {
+    const supabase = await getSupabaseServerClient()
+    const { data } = await supabase
+      .from('meetings')
+      .select('id, title, started_at, status')
+      .order('started_at', { ascending: false })
+      .limit(100)
+    return (data ?? []).map((m) => ({
+      id: m.id,
+      title: m.title ?? '(제목 없음)',
+      started_at: m.started_at,
+      status: m.status
+    }))
+  } catch {
+    return []
+  }
+}
+
+export default async function MeetingsPage(): Promise<React.ReactElement> {
+  const meetings = await loadMeetings()
+
+  return (
+    <Box sx={{ p: 4 }}>
+      <PhosphorText variant="title" sx={{ mb: 4 }}>
+        MEETINGS
+      </PhosphorText>
+
+      {meetings.length === 0 ? (
+        <MetalCard sx={{ p: 6, textAlign: 'center', color: d3roPalette.text.muted }}>
+          아직 회의가 없습니다. Record 탭에서 새 녹음을 시작하세요.
+        </MetalCard>
+      ) : (
+        <Grid container spacing={3}>
+          {meetings.map((meeting) => (
+            <Grid size={{ xs: 12, sm: 6, md: 4 }} key={meeting.id}>
+              <Link href={`/meetings/${meeting.id}`} style={{ textDecoration: 'none' }}>
+                <MetalCard sx={{ p: 3, cursor: 'pointer', minHeight: 140 }}>
+                  <Box sx={{ ...typoSx('body'), color: d3roPalette.text.primary, mb: 1 }}>
+                    {meeting.title}
+                  </Box>
+                  <Box sx={{ color: d3roPalette.text.muted, fontSize: 12, mb: 2 }}>
+                    {new Date(meeting.started_at).toLocaleString('ko-KR')}
+                  </Box>
+                  <Box
+                    sx={{
+                      display: 'inline-block',
+                      px: 1.5,
+                      py: 0.5,
+                      borderRadius: 1,
+                      fontSize: 11,
+                      bgcolor: d3roPalette.bg.inset,
+                      color: d3roPalette.text.label
+                    }}
+                  >
+                    {meeting.status}
+                  </Box>
+                </MetalCard>
+              </Link>
+            </Grid>
+          ))}
+        </Grid>
+      )}
+    </Box>
+  )
+}

apps/web/src/app/(app)/record/page.tsx

@@ -0,0 +1,17 @@
+// apps/web/src/app/(app)/record/page.tsx
+// 녹음 페이지 — auth/Sidebar는 (app)/layout.tsx가 제공
+
+import { Box } from '@mui/material'
+import { PhosphorText } from '@d3ro/ui/components/ds'
+import { MicRecorder } from '@/components/record/mic-recorder'
+
+export default function RecordPage(): React.ReactElement {
+  return (
+    <Box sx={{ p: 4 }}>
+      <PhosphorText variant="title" sx={{ mb: 4 }}>
+        RECORD
+      </PhosphorText>
+      <MicRecorder />
+    </Box>
+  )
+}

apps/web/src/app/(app)/teams/[id]/page.tsx

@@ -1,13 +1,12 @@
-// apps/web/src/app/teams/[id]/page.tsx
-// 팀 상세 — 멤버 리스트 + 초대 + 회의 공유 현황
+// apps/web/src/app/(app)/teams/[id]/page.tsx
+// 팀 상세 — 멤버 리스트 + 초대 + 회의 공유 현황 — auth/Sidebar는 (app)/layout.tsx가 제공
 
-import { notFound, redirect } from 'next/navigation'
+import { notFound } from 'next/navigation'
 import { Box, Stack } from '@mui/material'
 import { MetalCard, PhosphorText } from '@d3ro/ui/components/ds'
 import { d3roPalette, typoSx } from '@d3ro/ui/theme'
-import { Sidebar } from '@/components/layout/sidebar'
 import { InviteMemberForm } from '@/components/teams/invite-member-form'
-import { getSupabaseServerClient, isSupabaseConfiguredServer } from '@/lib/supabase-server'
+import { getSupabaseServerClient } from '@/lib/supabase-server'
 
 interface PageProps {
   params: Promise<{ id: string }>
@@ -16,15 +15,10 @@ interface PageProps {
 export default async function TeamDetailPage({ params }: PageProps): Promise<React.ReactElement> {
   const { id } = await params
 
-  if (!isSupabaseConfiguredServer()) {
-    redirect('/login')
-  }
-
   const supabase = await getSupabaseServerClient()
   const {
     data: { user }
   } = await supabase.auth.getUser()
-  if (!user) redirect('/login')
 
   const [{ data: team }, { data: members }, { data: meetings }] = await Promise.all([
     supabase.from('teams').select('id, name, owner_id, created_at').eq('id', id).maybeSingle(),
@@ -45,18 +39,16 @@ export default async function TeamDetailPage({ params }: PageProps): Promise<Rea
   }
 
   const teamData = team as { id: string; name: string; owner_id: string; created_at: string }
-  const isOwner = teamData.owner_id === user.id
+  const isOwner = teamData.owner_id === user?.id
 
   return (
-    <Box sx={{ display: 'flex', minHeight: '100vh' }}>
-      <Sidebar />
-      <Box component="main" sx={{ flex: 1, p: 4, overflow: 'auto' }}>
-        <Box sx={{ mb: 4 }}>
-          <PhosphorText variant="title">{teamData.name}</PhosphorText>
-          <Box sx={{ color: d3roPalette.text.muted, fontSize: 12, mt: 1 }}>
-            생성 {new Date(teamData.created_at).toLocaleDateString('ko-KR')}
-          </Box>
+    <Box sx={{ p: 4 }}>
+      <Box sx={{ mb: 4 }}>
+        <PhosphorText variant="title">{teamData.name}</PhosphorText>
+        <Box sx={{ color: d3roPalette.text.muted, fontSize: 12, mt: 1 }}>
+          생성 {new Date(teamData.created_at).toLocaleDateString('ko-KR')}
         </Box>
+      </Box>
 
         <Stack spacing={3}>
           {/* 멤버 */}
@@ -145,9 +137,8 @@ export default async function TeamDetailPage({ params }: PageProps): Promise<Rea
                 ))}
               </Stack>
             )}
-          </MetalCard>
-        </Stack>
-      </Box>
+        </MetalCard>
+      </Stack>
     </Box>
   )
 }

apps/web/src/app/(app)/teams/page.tsx

@@ -1,17 +1,12 @@
-// apps/web/src/app/teams/page.tsx
-// 팀 리스트 + 새 팀 생성
+// apps/web/src/app/(app)/teams/page.tsx
+// 팀 리스트 + 새 팀 생성 — auth/Sidebar는 (app)/layout.tsx가 제공
 
 import Link from 'next/link'
-import { redirect } from 'next/navigation'
 import { Box, Grid } from '@mui/material'
 import { MetalCard, PhosphorText } from '@d3ro/ui/components/ds'
 import { d3roPalette, typoSx } from '@d3ro/ui/theme'
-import { Sidebar } from '@/components/layout/sidebar'
 import { CreateTeamForm } from '@/components/teams/create-team-form'
-import {
-  getSupabaseServerClient,
-  isSupabaseConfiguredServer
-} from '@/lib/supabase-server'
+import { getSupabaseServerClient } from '@/lib/supabase-server'
 
 interface TeamRow {
   id: string
@@ -49,28 +44,17 @@ async function loadTeams(): Promise<TeamRow[]> {
 }
 
 export default async function TeamsPage(): Promise<React.ReactElement> {
-  if (!isSupabaseConfiguredServer()) {
-    redirect('/login')
-  }
-  const supabase = await getSupabaseServerClient()
-  const {
-    data: { user }
-  } = await supabase.auth.getUser()
-  if (!user) redirect('/login')
-
   const teams = await loadTeams()
 
   return (
-    <Box sx={{ display: 'flex', minHeight: '100vh' }}>
-      <Sidebar />
-      <Box component="main" sx={{ flex: 1, p: 4, overflow: 'auto' }}>
-        <PhosphorText variant="title" sx={{ mb: 4 }}>
-          TEAMS
-        </PhosphorText>
+    <Box sx={{ p: 4 }}>
+      <PhosphorText variant="title" sx={{ mb: 4 }}>
+        TEAMS
+      </PhosphorText>
 
-        <Box sx={{ mb: 4 }}>
-          <CreateTeamForm />
-        </Box>
+      <Box sx={{ mb: 4 }}>
+        <CreateTeamForm />
+      </Box>
 
         {teams.length === 0 ? (
           <MetalCard sx={{ p: 6, textAlign: 'center', color: d3roPalette.text.muted }}>
@@ -113,10 +97,9 @@ export default async function TeamsPage(): Promise<React.ReactElement> {
                   </MetalCard>
                 </Link>
               </Grid>
-            ))}
-          </Grid>
-        )}
-      </Box>
+          ))}
+        </Grid>
+      )}
     </Box>
   )
 }

apps/web/src/app/meetings/page.tsx

@@ -1,89 +0,0 @@
-// apps/web/src/app/meetings/page.tsx
-// 회의록 리스트
-
-import Link from 'next/link'
-import { redirect } from 'next/navigation'
-import { Box, Grid } from '@mui/material'
-import { MetalCard, PhosphorText } from '@d3ro/ui/components/ds'
-import { d3roPalette, typoSx } from "@d3ro/ui/theme"
-import { getSupabaseServerClient, isSupabaseConfiguredServer } from '@/lib/supabase-server'
-import { Sidebar } from '@/components/layout/sidebar'
-
-async function loadMeetings(): Promise<Array<{ id: string; title: string; started_at: string; status: string }>> {
-  try {
-    const supabase = await getSupabaseServerClient()
-    const { data } = await supabase
-      .from('meetings')
-      .select('id, title, started_at, status')
-      .order('started_at', { ascending: false })
-      .limit(100)
-    return (data ?? []).map((m) => ({
-      id: m.id,
-      title: m.title ?? '(제목 없음)',
-      started_at: m.started_at,
-      status: m.status
-    }))
-  } catch {
-    return []
-  }
-}
-
-export default async function MeetingsPage(): Promise<React.ReactElement> {
-  if (!isSupabaseConfiguredServer()) {
-    redirect('/login')
-  }
-  const supabase = await getSupabaseServerClient()
-  const {
-    data: { user }
-  } = await supabase.auth.getUser()
-  if (!user) redirect('/login')
-
-  const meetings = await loadMeetings()
-
-  return (
-    <Box sx={{ display: 'flex', minHeight: '100vh' }}>
-      <Sidebar />
-      <Box component="main" sx={{ flex: 1, p: 4, overflow: 'auto' }}>
-        <PhosphorText variant="title" sx={{ mb: 4 }}>
-          MEETINGS
-        </PhosphorText>
-
-        {meetings.length === 0 ? (
-          <MetalCard sx={{ p: 6, textAlign: 'center', color: d3roPalette.text.muted }}>
-            아직 회의가 없습니다. 우상단 마이크 메뉴에서 새 녹음을 시작하세요.
-          </MetalCard>
-        ) : (
-          <Grid container spacing={3}>
-            {meetings.map((meeting) => (
-              <Grid size={{ xs: 12, sm: 6, md: 4 }} key={meeting.id}>
-                <Link href={`/meetings/${meeting.id}`} style={{ textDecoration: 'none' }}>
-                  <MetalCard sx={{ p: 3, cursor: 'pointer', minHeight: 140 }}>
-                    <Box sx={{ ...typoSx("body"), color: d3roPalette.text.primary, mb: 1 }}>
-                      {meeting.title}
-                    </Box>
-                    <Box sx={{ color: d3roPalette.text.muted, fontSize: 12, mb: 2 }}>
-                      {new Date(meeting.started_at).toLocaleString('ko-KR')}
-                    </Box>
-                    <Box
-                      sx={{
-                        display: 'inline-block',
-                        px: 1.5,
-                        py: 0.5,
-                        borderRadius: 1,
-                        fontSize: 11,
-                        bgcolor: d3roPalette.bg.inset,
-                        color: d3roPalette.text.label
-                      }}
-                    >
-                      {meeting.status}
-                    </Box>
-                  </MetalCard>
-                </Link>
-              </Grid>
-            ))}
-          </Grid>
-        )}
-      </Box>
-    </Box>
-  )
-}

apps/web/src/app/record/page.tsx

@@ -1,32 +0,0 @@
-// apps/web/src/app/record/page.tsx
-// 녹음 페이지
-
-import { redirect } from 'next/navigation'
-import { Box } from '@mui/material'
-import { PhosphorText } from '@d3ro/ui/components/ds'
-import { Sidebar } from '@/components/layout/sidebar'
-import { MicRecorder } from '@/components/record/mic-recorder'
-import { getSupabaseServerClient, isSupabaseConfiguredServer } from '@/lib/supabase-server'
-
-export default async function RecordPage(): Promise<React.ReactElement> {
-  if (!isSupabaseConfiguredServer()) {
-    redirect('/login')
-  }
-  const supabase = await getSupabaseServerClient()
-  const {
-    data: { user }
-  } = await supabase.auth.getUser()
-  if (!user) redirect('/login')
-
-  return (
-    <Box sx={{ display: 'flex', minHeight: '100vh' }}>
-      <Sidebar />
-      <Box component="main" sx={{ flex: 1, p: 4, overflow: 'auto' }}>
-        <PhosphorText variant="title" sx={{ mb: 4 }}>
-          RECORD
-        </PhosphorText>
-        <MicRecorder />
-      </Box>
-    </Box>
-  )
-}

apps/web/src/components/billing/portal-button.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+// apps/web/src/components/billing/portal-button.tsx
+// Stripe Customer Portal — 활성 구독 사용자가 결제 수단/취소 등을 관리
+
+import { useState } from 'react'
+import { Button, CircularProgress, Alert, Box } from '@mui/material'
+import SettingsIcon from '@mui/icons-material/Settings'
+import { getSupabaseBrowserClient } from '@/lib/supabase-browser'
+
+export function PortalButton(): React.ReactElement {
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleOpenPortal(): Promise<void> {
+    setError(null)
+    setBusy(true)
+    try {
+      const supabase = getSupabaseBrowserClient()
+      const {
+        data: { session }
+      } = await supabase.auth.getSession()
+
+      if (!session) {
+        setError('로그인이 필요합니다')
+        return
+      }
+
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_SUPABASE_URL}/functions/v1/stripe-portal`,
+        {
+          method: 'POST',
+          headers: {
+            Authorization: `Bearer ${session.access_token}`,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            return_url: `${window.location.origin}/billing`
+          })
+        }
+      )
+
+      if (!response.ok) {
+        const txt = await response.text()
+        throw new Error(`Portal 열기 실패: ${response.status} ${txt}`)
+      }
+
+      const data = (await response.json()) as { url?: string }
+      if (data.url) {
+        window.location.href = data.url
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unknown error')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <Box>
+      <Button
+        variant="outlined"
+        size="small"
+        startIcon={busy ? <CircularProgress size={14} /> : <SettingsIcon />}
+        onClick={() => void handleOpenPortal()}
+        disabled={busy}
+      >
+        구독 관리
+      </Button>
+      {error && (
+        <Alert severity="error" variant="outlined" sx={{ mt: 1, fontSize: 11 }}>
+          {error}
+        </Alert>
+      )}
+    </Box>
+  )
+}

packages/core/src/ipc-channels.ts

@@ -375,6 +375,7 @@ export const IPC_CHANNELS = {
     SIGN_IN: 'cloudSync:signIn',
     SIGN_OUT: 'cloudSync:signOut',
     PUSH_ALL: 'cloudSync:pushAll',
+    PULL_ALL: 'cloudSync:pullAll',
     HANDLE_CALLBACK: 'cloudSync:handleCallback',
     CONFIGURE: 'cloudSync:configure',
     // events

packages/i18n/src/locales/de.json

@@ -6,6 +6,15 @@
   "nav.dictionary": "Wörterbuch",
   "nav.commands": "Befehle",
   "nav.settings": "Einstellungen",
+  "nav.meetings": "Meetings",
+  "nav.record": "Aufnehmen",
+  "nav.teams": "Teams",
+  "nav.billing": "Abrechnung",
+  "nav.logout": "Abmelden",
+  "login.subtitle": "KI-Sprachassistent",
+  "login.google": "Mit Google fortfahren",
+  "login.github": "Mit GitHub fortfahren",
+  "login.terms": "Durch Fortfahren stimmen Sie den Nutzungsbedingungen und der Datenschutzrichtlinie zu.",
   "dashboard.sessionOverview": "Sitzungsübersicht",
   "dashboard.systemStatus": "Systemstatus",
   "dashboard.sessionsToday": "Sitzungen heute",
@@ -62,6 +71,7 @@
   "settings.tabs.audio": "Audio",
   "settings.tabs.stt": "STT",
   "settings.tabs.llm": "LLM",
+  "settings.tabs.cloud": "Cloud",
   "settings.tabs.about": "Über",
   "settings.shortcuts": "Tastenkürzel",
   "settings.dictation": "Diktat",
@@ -279,4 +289,4 @@
   "settings.hfTokenHint": "Ein HuggingFace Token wird für die Sprechertrennung benötigt",
   "settings.diarization": "Sprechertrennung",
   "settings.diarizationHint": "Sprecher werden nach der Aufnahme automatisch identifiziert"
-}
+}

packages/i18n/src/locales/en.json

@@ -6,6 +6,15 @@
   "nav.dictionary": "Dictionary",
   "nav.commands": "Commands",
   "nav.settings": "Settings",
+  "nav.meetings": "Meetings",
+  "nav.record": "Record",
+  "nav.teams": "Teams",
+  "nav.billing": "Billing",
+  "nav.logout": "Logout",
+  "login.subtitle": "AI Voice Assistant",
+  "login.google": "Continue with Google",
+  "login.github": "Continue with GitHub",
+  "login.terms": "By continuing, you agree to the Terms of Service and Privacy Policy.",
   "dashboard.sessionOverview": "Session Overview",
   "dashboard.systemStatus": "System Status",
   "dashboard.sessionsToday": "Today's Sessions",
@@ -62,6 +71,7 @@
   "settings.tabs.audio": "Audio",
   "settings.tabs.stt": "STT",
   "settings.tabs.llm": "LLM",
+  "settings.tabs.cloud": "Cloud",
   "settings.tabs.about": "About",
   "settings.shortcuts": "Shortcuts",
   "settings.dictation": "Dictation",
@@ -480,4 +490,4 @@
   "settings.hfTokenHint": "A HuggingFace token is required for speaker diarization",
   "settings.diarization": "Speaker Diarization",
   "settings.diarizationHint": "Automatically identify speakers after recording ends"
-}
+}

packages/i18n/src/locales/es.json

@@ -6,6 +6,15 @@
   "nav.dictionary": "Diccionario",
   "nav.commands": "Comandos",
   "nav.settings": "Ajustes",
+  "nav.meetings": "Reuniones",
+  "nav.record": "Grabar",
+  "nav.teams": "Equipos",
+  "nav.billing": "Facturación",
+  "nav.logout": "Cerrar sesión",
+  "login.subtitle": "Asistente de voz con IA",
+  "login.google": "Continuar con Google",
+  "login.github": "Continuar con GitHub",
+  "login.terms": "Al continuar, aceptas los Términos de servicio y la Política de privacidad.",
   "dashboard.sessionOverview": "Resumen de sesión",
   "dashboard.systemStatus": "Estado del sistema",
   "dashboard.sessionsToday": "Sesiones hoy",
@@ -62,6 +71,7 @@
   "settings.tabs.audio": "Audio",
   "settings.tabs.stt": "STT",
   "settings.tabs.llm": "LLM",
+  "settings.tabs.cloud": "Nube",
   "settings.tabs.about": "Acerca de",
   "settings.shortcuts": "Atajos",
   "settings.dictation": "Dictado",
@@ -279,4 +289,4 @@
   "settings.hfTokenHint": "Se necesita un token de HuggingFace para identificar hablantes",
   "settings.diarization": "Identificación de hablantes",
   "settings.diarizationHint": "Identifica automáticamente los hablantes al finalizar la grabación"
-}
+}

packages/i18n/src/locales/fr.json

@@ -6,6 +6,15 @@
   "nav.dictionary": "Dictionnaire",
   "nav.commands": "Commandes",
   "nav.settings": "Paramètres",
+  "nav.meetings": "Réunions",
+  "nav.record": "Enregistrer",
+  "nav.teams": "Équipes",
+  "nav.billing": "Facturation",
+  "nav.logout": "Déconnexion",
+  "login.subtitle": "Assistant vocal IA",
+  "login.google": "Continuer avec Google",
+  "login.github": "Continuer avec GitHub",
+  "login.terms": "En continuant, vous acceptez les Conditions d'utilisation et la Politique de confidentialité.",
   "dashboard.sessionOverview": "Aperçu de session",
   "dashboard.systemStatus": "État du système",
   "dashboard.sessionsToday": "Sessions aujourd'hui",
@@ -62,6 +71,7 @@
   "settings.tabs.audio": "Audio",
   "settings.tabs.stt": "STT",
   "settings.tabs.llm": "LLM",
+  "settings.tabs.cloud": "Cloud",
   "settings.tabs.about": "À propos",
   "settings.shortcuts": "Raccourcis",
   "settings.dictation": "Dictée",
@@ -279,4 +289,4 @@
   "settings.hfTokenHint": "Un token HuggingFace est requis pour l'identification des locuteurs",
   "settings.diarization": "Identification des locuteurs",
   "settings.diarizationHint": "Identifier automatiquement les locuteurs après l'enregistrement"
-}
+}

packages/i18n/src/locales/ja.json

@@ -6,6 +6,15 @@
   "nav.dictionary": "辞書",
   "nav.commands": "コマンド",
   "nav.settings": "設定",
+  "nav.meetings": "会議",
+  "nav.record": "録音",
+  "nav.teams": "チーム",
+  "nav.billing": "支払い",
+  "nav.logout": "ログアウト",
+  "login.subtitle": "AI音声アシスタント",
+  "login.google": "Googleで続ける",
+  "login.github": "GitHubで続ける",
+  "login.terms": "続行すると、利用規約およびプライバシーポリシーに同意したものとみなされます。",
   "dashboard.sessionOverview": "セッション概要",
   "dashboard.systemStatus": "システム状態",
   "dashboard.sessionsToday": "本日のセッション",
@@ -62,6 +71,7 @@
   "settings.tabs.audio": "オーディオ",
   "settings.tabs.stt": "STT",
   "settings.tabs.llm": "LLM",
+  "settings.tabs.cloud": "クラウド",
   "settings.tabs.about": "情報",
   "settings.shortcuts": "ショートカット",
   "settings.dictation": "ディクテーション",
@@ -279,4 +289,4 @@
   "settings.hfTokenHint": "話者分離にはHuggingFaceトークンが必要です",
   "settings.diarization": "話者分離",
   "settings.diarizationHint": "録音終了後に自動的に話者を識別します"
-}
+}

packages/i18n/src/locales/ko.json

@@ -71,6 +71,7 @@
   "settings.tabs.audio": "오디오",
   "settings.tabs.stt": "STT",
   "settings.tabs.llm": "LLM",
+  "settings.tabs.cloud": "클라우드",
   "settings.tabs.about": "정보",
   "settings.shortcuts": "단축키",
   "settings.dictation": "받아쓰기",

packages/i18n/src/locales/pt.json

@@ -6,6 +6,15 @@
   "nav.dictionary": "Dicionário",
   "nav.commands": "Comandos",
   "nav.settings": "Configurações",
+  "nav.meetings": "Reuniões",
+  "nav.record": "Gravar",
+  "nav.teams": "Equipes",
+  "nav.billing": "Faturamento",
+  "nav.logout": "Sair",
+  "login.subtitle": "Assistente de voz com IA",
+  "login.google": "Continuar com Google",
+  "login.github": "Continuar com GitHub",
+  "login.terms": "Ao continuar, você concorda com os Termos de Serviço e Política de Privacidade.",
   "dashboard.sessionOverview": "Visão geral da sessão",
   "dashboard.systemStatus": "Status do sistema",
   "dashboard.sessionsToday": "Sessões hoje",
@@ -62,6 +71,7 @@
   "settings.tabs.audio": "Áudio",
   "settings.tabs.stt": "STT",
   "settings.tabs.llm": "LLM",
+  "settings.tabs.cloud": "Nuvem",
   "settings.tabs.about": "Sobre",
   "settings.shortcuts": "Atalhos",
   "settings.dictation": "Ditado",
@@ -279,4 +289,4 @@
   "settings.hfTokenHint": "Um token do HuggingFace é necessário para identificar oradores",
   "settings.diarization": "Identificação de oradores",
   "settings.diarizationHint": "Identifica automaticamente os oradores após o término da gravação"
-}
+}

packages/i18n/src/locales/ru.json

@@ -6,6 +6,15 @@
   "nav.dictionary": "Словарь",
   "nav.commands": "Команды",
   "nav.settings": "Настройки",
+  "nav.meetings": "Встречи",
+  "nav.record": "Запись",
+  "nav.teams": "Команды",
+  "nav.billing": "Оплата",
+  "nav.logout": "Выйти",
+  "login.subtitle": "ИИ голосовой помощник",
+  "login.google": "Продолжить с Google",
+  "login.github": "Продолжить с GitHub",
+  "login.terms": "Продолжая, вы соглашаетесь с условиями использования и политикой конфиденциальности.",
   "dashboard.sessionOverview": "Обзор сессий",
   "dashboard.systemStatus": "Состояние системы",
   "dashboard.sessionsToday": "Сессий сегодня",
@@ -62,6 +71,7 @@
   "settings.tabs.audio": "Аудио",
   "settings.tabs.stt": "STT",
   "settings.tabs.llm": "LLM",
+  "settings.tabs.cloud": "Облако",
   "settings.tabs.about": "О программе",
   "settings.shortcuts": "Горячие клавиши",
   "settings.dictation": "Диктовка",
@@ -279,4 +289,4 @@
   "settings.hfTokenHint": "Токен HuggingFace необходим для определения говорящих",
   "settings.diarization": "Диаризация",
   "settings.diarizationHint": "Автоматически определять говорящих после завершения записи"
-}
+}

packages/i18n/src/locales/th.json

@@ -6,6 +6,15 @@
   "nav.dictionary": "พจนานุกรม",
   "nav.commands": "คำสั่ง",
   "nav.settings": "การตั้งค่า",
+  "nav.meetings": "การประชุม",
+  "nav.record": "บันทึกเสียง",
+  "nav.teams": "ทีม",
+  "nav.billing": "การเรียกเก็บเงิน",
+  "nav.logout": "ออกจากระบบ",
+  "login.subtitle": "ผู้ช่วย AI สำหรับเสียง",
+  "login.google": "ดำเนินการต่อด้วย Google",
+  "login.github": "ดำเนินการต่อด้วย GitHub",
+  "login.terms": "การดำเนินการต่อ ถือว่าคุณยอมรับข้อกำหนดในการให้บริการและนโยบายความเป็นส่วนตัว",
   "dashboard.sessionOverview": "ภาพรวมเซสชัน",
   "dashboard.systemStatus": "สถานะระบบ",
   "dashboard.sessionsToday": "เซสชันวันนี้",
@@ -62,6 +71,7 @@
   "settings.tabs.audio": "เสียง",
   "settings.tabs.stt": "STT",
   "settings.tabs.llm": "LLM",
+  "settings.tabs.cloud": "คลาวด์",
   "settings.tabs.about": "เกี่ยวกับ",
   "settings.shortcuts": "ปุ่มลัด",
   "settings.dictation": "การบอกเล่า",
@@ -279,4 +289,4 @@
   "settings.hfTokenHint": "ต้องใช้โทเค็น HuggingFace สำหรับการแยกผู้พูด",
   "settings.diarization": "การแยกผู้พูด",
   "settings.diarizationHint": "ระบุผู้พูดโดยอัตโนมัติหลังจากการบันทึกสิ้นสุด"
-}
+}

packages/i18n/src/locales/vi.json

@@ -6,6 +6,15 @@
   "nav.dictionary": "Từ điển",
   "nav.commands": "Lệnh",
   "nav.settings": "Cài đặt",
+  "nav.meetings": "Cuộc họp",
+  "nav.record": "Ghi âm",
+  "nav.teams": "Nhóm",
+  "nav.billing": "Thanh toán",
+  "nav.logout": "Đăng xuất",
+  "login.subtitle": "Trợ lý giọng nói AI",
+  "login.google": "Tiếp tục với Google",
+  "login.github": "Tiếp tục với GitHub",
+  "login.terms": "Bằng cách tiếp tục, bạn đồng ý với Điều khoản Dịch vụ và Chính sách Bảo mật.",
   "dashboard.sessionOverview": "Tổng quan phiên",
   "dashboard.systemStatus": "Trạng thái hệ thống",
   "dashboard.sessionsToday": "Phiên hôm nay",
@@ -62,6 +71,7 @@
   "settings.tabs.audio": "Âm thanh",
   "settings.tabs.stt": "STT",
   "settings.tabs.llm": "LLM",
+  "settings.tabs.cloud": "Đám mây",
   "settings.tabs.about": "Giới thiệu",
   "settings.shortcuts": "Phím tắt",
   "settings.dictation": "Chính tả",
@@ -279,4 +289,4 @@
   "settings.hfTokenHint": "Cần token HuggingFace để phân tách người nói",
   "settings.diarization": "Phân tách người nói",
   "settings.diarizationHint": "Tự động nhận dạng người nói sau khi ghi âm kết thúc"
-}
+}

packages/i18n/src/locales/zh-TW.json

@@ -6,6 +6,15 @@
   "nav.dictionary": "辭典",
   "nav.commands": "指令",
   "nav.settings": "設定",
+  "nav.meetings": "會議",
+  "nav.record": "錄音",
+  "nav.teams": "團隊",
+  "nav.billing": "帳單",
+  "nav.logout": "登出",
+  "login.subtitle": "AI語音助理",
+  "login.google": "使用Google繼續",
+  "login.github": "使用GitHub繼續",
+  "login.terms": "繼續即表示您同意服務條款與隱私政策。",
   "dashboard.sessionOverview": "工作階段總覽",
   "dashboard.systemStatus": "系統狀態",
   "dashboard.sessionsToday": "今日工作階段",
@@ -62,6 +71,7 @@
   "settings.tabs.audio": "音訊",
   "settings.tabs.stt": "STT",
   "settings.tabs.llm": "LLM",
+  "settings.tabs.cloud": "雲端",
   "settings.tabs.about": "關於",
   "settings.shortcuts": "快速鍵",
   "settings.dictation": "聽寫",
@@ -279,4 +289,4 @@
   "settings.hfTokenHint": "說話人分離需要HuggingFace令牌",
   "settings.diarization": "說話人分離",
   "settings.diarizationHint": "錄音結束後自動識別說話人"
-}
+}

packages/i18n/src/locales/zh.json

@@ -6,6 +6,15 @@
   "nav.dictionary": "词典",
   "nav.commands": "命令",
   "nav.settings": "设置",
+  "nav.meetings": "会议",
+  "nav.record": "录音",
+  "nav.teams": "团队",
+  "nav.billing": "账单",
+  "nav.logout": "登出",
+  "login.subtitle": "AI语音助手",
+  "login.google": "使用Google继续",
+  "login.github": "使用GitHub继续",
+  "login.terms": "继续即表示您同意服务条款和隐私政策。",
   "dashboard.sessionOverview": "会话概览",
   "dashboard.systemStatus": "系统状态",
   "dashboard.sessionsToday": "今日会话",
@@ -62,6 +71,7 @@
   "settings.tabs.audio": "音频",
   "settings.tabs.stt": "STT",
   "settings.tabs.llm": "LLM",
+  "settings.tabs.cloud": "云",
   "settings.tabs.about": "关于",
   "settings.shortcuts": "快捷键",
   "settings.dictation": "听写",
@@ -279,4 +289,4 @@
   "settings.hfTokenHint": "说话人分离需要HuggingFace令牌",
   "settings.diarization": "说话人分离",
   "settings.diarizationHint": "录音结束后自动识别说话人"
-}
+}

packages/ui-native/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@d3ro/ui-native",
+  "version": "1.0.0",
+  "private": true,
+  "description": "D3RO Voice React Native용 디자인 시스템 — MetalCard/PhosphorText/Led 등 (MUI 없음)",
+  "license": "MIT",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./theme": {
+      "types": "./src/theme.ts",
+      "default": "./src/theme.ts"
+    }
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@types/react": "*"
+  }
+}

packages/ui-native/src/components/Led.tsx

@@ -0,0 +1,35 @@
+// packages/ui-native/src/components/Led.tsx
+// RN용 Led — 작은 발광 원
+
+import { View, type ViewStyle } from 'react-native'
+import { d3roNativePalette } from '../theme'
+
+export interface LedProps {
+  color?: 'amber' | 'green' | 'red' | 'orange' | 'blue'
+  on?: boolean
+  size?: number
+}
+
+const COLOR_MAP: Record<string, string> = {
+  amber: d3roNativePalette.accent.amber,
+  green: d3roNativePalette.tag.green,
+  red: d3roNativePalette.tag.red,
+  orange: d3roNativePalette.tag.orange,
+  blue: d3roNativePalette.tag.blue
+}
+
+export function Led({ color = 'amber', on = true, size = 8 }: LedProps): React.ReactElement {
+  const c = COLOR_MAP[color] ?? d3roNativePalette.accent.amber
+  const style: ViewStyle = {
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+    backgroundColor: on ? c : d3roNativePalette.led.off,
+    shadowColor: c,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: on ? 0.8 : 0,
+    shadowRadius: on ? 4 : 0,
+    elevation: on ? 2 : 0
+  }
+  return <View style={style} />
+}

packages/ui-native/src/components/MetalCard.tsx

@@ -0,0 +1,33 @@
+// packages/ui-native/src/components/MetalCard.tsx
+// RN용 MetalCard — View + 섀시 스타일
+
+import { View, type ViewProps, type ViewStyle, type StyleProp } from 'react-native'
+import { d3roNativePalette, d3roNativeRadius } from '../theme'
+
+export interface MetalCardProps extends ViewProps {
+  inset?: boolean
+  style?: StyleProp<ViewStyle>
+}
+
+export function MetalCard({ children, inset = false, style, ...rest }: MetalCardProps): React.ReactElement {
+  const baseStyle: ViewStyle = {
+    backgroundColor: inset ? d3roNativePalette.bg.inset : d3roNativePalette.bg.card,
+    borderRadius: inset ? d3roNativeRadius.inner : d3roNativeRadius.card,
+    padding: inset ? 6 : 16,
+    borderWidth: inset ? 0 : 1,
+    borderColor: d3roNativePalette.border.subtle,
+    overflow: 'hidden',
+    // RN 그림자
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: inset ? 0 : 0.25,
+    shadowRadius: inset ? 0 : 8,
+    elevation: inset ? 0 : 4
+  }
+
+  return (
+    <View style={[baseStyle, style]} {...rest}>
+      {children}
+    </View>
+  )
+}

packages/ui-native/src/components/PhosphorText.tsx

@@ -0,0 +1,52 @@
+// packages/ui-native/src/components/PhosphorText.tsx
+// RN용 PhosphorText — Text + 앰버 glow (textShadowColor)
+
+import { Text, type TextProps, type TextStyle, type StyleProp } from 'react-native'
+import { d3roNativePalette, d3roNativeTypo, type D3roNativeTypoKey } from '../theme'
+
+export type PhosphorVariant = D3roNativeTypoKey
+
+export interface PhosphorTextProps extends TextProps {
+  variant?: PhosphorVariant
+  color?: 'amber' | 'primary' | 'secondary' | 'label' | 'muted'
+  style?: StyleProp<TextStyle>
+}
+
+export function PhosphorText({
+  children,
+  variant = 'body',
+  color,
+  style,
+  ...rest
+}: PhosphorTextProps): React.ReactElement {
+  const typo = d3roNativeTypo[variant]
+  const isAmberVariant = variant === 'hero' || variant === 'title' || variant === 'value'
+
+  const resolvedColor: string = (() => {
+    if (color === 'amber') return d3roNativePalette.accent.amber
+    if (color === 'primary') return d3roNativePalette.text.primary
+    if (color === 'secondary') return d3roNativePalette.text.secondary
+    if (color === 'label') return d3roNativePalette.text.label
+    if (color === 'muted') return d3roNativePalette.text.muted
+    return isAmberVariant ? d3roNativePalette.accent.amber : d3roNativePalette.text.primary
+  })()
+
+  const baseStyle: TextStyle = {
+    ...typo,
+    color: resolvedColor,
+    fontFamily: 'monospace',
+    ...(isAmberVariant
+      ? {
+          textShadowColor: d3roNativePalette.accent.amberGlow,
+          textShadowOffset: { width: 0, height: 0 },
+          textShadowRadius: 6
+        }
+      : {})
+  }
+
+  return (
+    <Text style={[baseStyle, style]} {...rest}>
+      {children}
+    </Text>
+  )
+}

packages/ui-native/src/components/PhysicalButton.tsx

@@ -0,0 +1,79 @@
+// packages/ui-native/src/components/PhysicalButton.tsx
+// RN용 PhysicalButton — Pressable 기반 누르는 느낌
+
+import { useState } from 'react'
+import {
+  Pressable,
+  Text,
+  type PressableProps,
+  type ViewStyle,
+  type TextStyle,
+  type StyleProp
+} from 'react-native'
+import { d3roNativePalette, d3roNativeRadius, d3roNativeTypo } from '../theme'
+
+export interface PhysicalButtonProps extends Omit<PressableProps, 'children' | 'style'> {
+  label: string
+  variant?: 'primary' | 'secondary' | 'danger'
+  disabled?: boolean
+  style?: StyleProp<ViewStyle>
+}
+
+export function PhysicalButton({
+  label,
+  variant = 'primary',
+  disabled = false,
+  style,
+  onPress,
+  ...rest
+}: PhysicalButtonProps): React.ReactElement {
+  const [pressed, setPressed] = useState(false)
+
+  const bgColor =
+    variant === 'primary'
+      ? d3roNativePalette.accent.amber
+      : variant === 'danger'
+        ? d3roNativePalette.tag.red
+        : 'transparent'
+
+  const borderColor =
+    variant === 'secondary' ? d3roNativePalette.border.strong : 'transparent'
+
+  const textColor =
+    variant === 'primary' || variant === 'danger'
+      ? d3roNativePalette.text.primary
+      : d3roNativePalette.text.secondary
+
+  const containerStyle: ViewStyle = {
+    backgroundColor: bgColor,
+    borderColor,
+    borderWidth: variant === 'secondary' ? 1 : 0,
+    borderRadius: d3roNativeRadius.button,
+    paddingVertical: 14,
+    paddingHorizontal: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+    opacity: disabled ? 0.4 : pressed ? 0.75 : 1,
+    transform: [{ translateY: pressed && !disabled ? 1 : 0 }]
+  }
+
+  const textStyle: TextStyle = {
+    ...d3roNativeTypo.heading,
+    color: textColor,
+    textTransform: 'uppercase',
+    letterSpacing: 1.5
+  }
+
+  return (
+    <Pressable
+      onPress={onPress}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      disabled={disabled}
+      style={[containerStyle, style]}
+      {...rest}
+    >
+      <Text style={textStyle}>{label}</Text>
+    </Pressable>
+  )
+}

packages/ui-native/src/index.ts

@@ -0,0 +1,12 @@
+// packages/ui-native — RN용 DS 컴포넌트 barrel
+// apps/mobile이 file: 의존성으로 참조
+
+export * from './theme'
+export { MetalCard, type MetalCardProps } from './components/MetalCard'
+export {
+  PhosphorText,
+  type PhosphorTextProps,
+  type PhosphorVariant
+} from './components/PhosphorText'
+export { Led, type LedProps } from './components/Led'
+export { PhysicalButton, type PhysicalButtonProps } from './components/PhysicalButton'

packages/ui-native/src/theme.ts

@@ -0,0 +1,65 @@
+// packages/ui-native/src/theme.ts
+// RN용 테마 토큰 — MUI 없이 순수 색상/타이포/그림자 값
+// packages/ui의 d3roPalette와 의도적으로 동기화 (RN은 CSS var 불가, 정적 값)
+
+export const d3roNativePalette = {
+  bg: {
+    app: '#19191b',
+    card: '#242427',
+    cardHover: '#2a2a2d',
+    elevated: '#2e2e32',
+    sidebar: '#1e1f21',
+    inset: '#1b1c1e',
+    chassis: '#242528'
+  },
+  text: {
+    primary: '#ffffff',
+    secondary: '#8e8e93',
+    label: '#7c7c82',
+    disabled: '#4a4a4e',
+    inactive: '#77797c',
+    muted: '#3a3b3f'
+  },
+  accent: {
+    amber: '#f25b29',
+    amberDim: 'rgba(242, 91, 41, 0.15)',
+    amberGlow: 'rgba(242, 91, 41, 0.6)'
+  },
+  border: {
+    subtle: 'rgba(255,255,255,0.04)',
+    default: 'rgba(255,255,255,0.08)',
+    strong: 'rgba(255,255,255,0.12)'
+  },
+  tag: {
+    purple: '#b854f5',
+    orange: '#f59e0b',
+    red: '#ef4444',
+    green: '#22c55e',
+    blue: '#3b82f6'
+  },
+  led: {
+    off: '#111111'
+  }
+} as const
+
+export const d3roNativeTypo = {
+  hero: { fontSize: 42, fontWeight: '300' as const, letterSpacing: -2, lineHeight: 42 },
+  title: { fontSize: 28, fontWeight: '300' as const, letterSpacing: -1, lineHeight: 34 },
+  value: { fontSize: 20, fontWeight: '400' as const, letterSpacing: 0.4, lineHeight: 20 },
+  heading: { fontSize: 16, fontWeight: '600' as const, letterSpacing: 0.32, lineHeight: 22 },
+  body: { fontSize: 14, fontWeight: '400' as const, letterSpacing: 0.14, lineHeight: 21 },
+  small: { fontSize: 12, fontWeight: '600' as const, letterSpacing: 0.36, lineHeight: 17 },
+  meta: { fontSize: 11, fontWeight: '600' as const, letterSpacing: 0.55, lineHeight: 14 },
+  label: { fontSize: 10, fontWeight: '700' as const, letterSpacing: 2, lineHeight: 12 }
+} as const
+
+export const d3roNativeRadius = {
+  card: 22,
+  inner: 12,
+  button: 8,
+  small: 6,
+  pill: 999
+} as const
+
+export type D3roNativePaletteKey = keyof typeof d3roNativePalette
+export type D3roNativeTypoKey = keyof typeof d3roNativeTypo

packages/ui-native/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "jsx": "react-native",
+    "lib": ["ES2022"],
+    "types": []
+  },
+  "include": ["src/**/*"]
+}

server/supabase/config.toml

@@ -87,6 +87,9 @@ verify_jwt = true
 [functions.stripe-checkout]
 verify_jwt = true
 
+[functions.stripe-portal]
+verify_jwt = true
+
 [functions.stripe-webhook]
 verify_jwt = false
 

server/supabase/functions/stripe-portal/index.ts

@@ -0,0 +1,91 @@
+// server/supabase/functions/stripe-portal/index.ts
+// Stripe Customer Portal 세션 생성 — 로그인한 사용자가 자신의 구독을 관리할 수 있도록.
+// 응답: { url } → 클라이언트가 redirect.
+
+import { corsHeaders, handleCorsPreflightRequest } from '../_shared/cors.ts'
+import { requireUser, authErrorResponse, type AuthError } from '../_shared/auth.ts'
+import { createServiceRoleClient } from '../_shared/quota.ts'
+
+interface PortalRequest {
+  return_url: string
+}
+
+// @ts-expect-error — Deno 런타임 전역
+Deno.serve(async (req: Request) => {
+  const preflight = handleCorsPreflightRequest(req)
+  if (preflight) return preflight
+
+  if (req.method !== 'POST') {
+    return new Response(JSON.stringify({ error: 'Method not allowed' }), {
+      status: 405,
+      headers: { ...corsHeaders, 'Content-Type': 'application/json' }
+    })
+  }
+
+  try {
+    const user = await requireUser(req)
+    const body = (await req.json()) as PortalRequest
+
+    // @ts-expect-error — Deno.env
+    const stripeKey = Deno.env.get('STRIPE_SECRET_KEY') ?? ''
+    if (!stripeKey) {
+      return new Response(
+        JSON.stringify({ error: 'stripe_not_configured' }),
+        { status: 503, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
+      )
+    }
+
+    // 기존 customer_id 조회
+    const serviceClient = createServiceRoleClient()
+    const { data: sub } = await serviceClient
+      .from('subscriptions')
+      .select('stripe_customer_id')
+      .eq('user_id', user.id)
+      .maybeSingle()
+
+    const customerId = (sub?.stripe_customer_id as string | null | undefined) ?? null
+    if (!customerId) {
+      return new Response(
+        JSON.stringify({
+          error: 'no_customer',
+          message: '활성 구독이 없습니다. 먼저 업그레이드하세요.'
+        }),
+        { status: 404, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
+      )
+    }
+
+    // Portal session 생성
+    const portalResp = await fetch('https://api.stripe.com/v1/billing_portal/sessions', {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${stripeKey}`,
+        'Content-Type': 'application/x-www-form-urlencoded'
+      },
+      body: new URLSearchParams({
+        customer: customerId,
+        return_url: body.return_url
+      })
+    })
+
+    if (!portalResp.ok) {
+      const errText = await portalResp.text()
+      throw new Error(`Portal 세션 생성 실패: ${errText}`)
+    }
+
+    const data = (await portalResp.json()) as { url: string }
+
+    return new Response(JSON.stringify({ url: data.url }), {
+      status: 200,
+      headers: { ...corsHeaders, 'Content-Type': 'application/json' }
+    })
+  } catch (err) {
+    if (err && typeof err === 'object' && 'status' in err && 'message' in err) {
+      return authErrorResponse(err as AuthError, corsHeaders)
+    }
+    const message = err instanceof Error ? err.message : 'Unknown error'
+    return new Response(JSON.stringify({ error: message }), {
+      status: 500,
+      headers: { ...corsHeaders, 'Content-Type': 'application/json' }
+    })
+  }
+})

server/supabase/functions/stripe-webhook/index.ts

@@ -17,12 +17,71 @@ interface StripeEvent {
   }
 }
 
-async function verifyStripeSignature(payload: string, signature: string, secret: string): Promise<boolean> {
-  // 단순화: 본 스캐폴딩에서는 signature 검증 logic placeholder.
-  // 정식 구현은 Stripe SDK의 stripe.webhooks.constructEvent 사용 또는
-  // HMAC-SHA256으로 직접 검증.
-  // https://stripe.com/docs/webhooks/signatures
-  return Boolean(signature && secret && payload)
+/**
+ * Stripe webhook signature 검증 — Web Crypto API 기반 HMAC-SHA256.
+ *
+ * Stripe-Signature 헤더 형식: "t=TIMESTAMP,v1=SIG,v1=SIG2,..."
+ * 검증 방식: HMAC_SHA256(secret, `${timestamp}.${payload}`) 를 16진수로 인코딩하여
+ * v1 시그니처 중 하나와 일치하면 valid.
+ *
+ * 또한 timestamp가 tolerance(5분) 이상 벗어나면 reject (replay 공격 방지).
+ *
+ * 참고: https://stripe.com/docs/webhooks/signatures
+ */
+async function verifyStripeSignature(
+  payload: string,
+  signatureHeader: string,
+  secret: string,
+  toleranceSec = 300
+): Promise<boolean> {
+  if (!signatureHeader || !secret || !payload) return false
+
+  // 헤더 파싱
+  const parts = signatureHeader.split(',').map((p) => p.trim())
+  const timestampEntry = parts.find((p) => p.startsWith('t='))
+  const v1Signatures = parts.filter((p) => p.startsWith('v1=')).map((p) => p.slice(3))
+
+  if (!timestampEntry || v1Signatures.length === 0) return false
+
+  const timestamp = Number(timestampEntry.slice(2))
+  if (!Number.isFinite(timestamp)) return false
+
+  // Replay 방지: 5분 이상 오래된 요청 거부
+  const nowSec = Math.floor(Date.now() / 1000)
+  if (Math.abs(nowSec - timestamp) > toleranceSec) {
+    return false
+  }
+
+  // HMAC-SHA256 계산
+  const signedPayload = `${timestamp}.${payload}`
+  const key = await crypto.subtle.importKey(
+    'raw',
+    new TextEncoder().encode(secret),
+    { name: 'HMAC', hash: 'SHA-256' },
+    false,
+    ['sign']
+  )
+  const sigBuffer = await crypto.subtle.sign('HMAC', key, new TextEncoder().encode(signedPayload))
+  const expectedHex = Array.from(new Uint8Array(sigBuffer))
+    .map((b) => b.toString(16).padStart(2, '0'))
+    .join('')
+
+  // 타이밍 공격 방지: constant-time 비교
+  for (const v1 of v1Signatures) {
+    if (constantTimeEqual(v1, expectedHex)) {
+      return true
+    }
+  }
+  return false
+}
+
+function constantTimeEqual(a: string, b: string): boolean {
+  if (a.length !== b.length) return false
+  let mismatch = 0
+  for (let i = 0; i < a.length; i++) {
+    mismatch |= a.charCodeAt(i) ^ b.charCodeAt(i)
+  }
+  return mismatch === 0
 }
 
 // @ts-expect-error — Deno 런타임 전역