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) 그룹 반영)
- 회귀 없음

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