feat(V2-3차): pull 확장 + invite flow + Realtime + 테스트 + mobile UI 교체

묶음 E — V2-4b pull 확장:
- CloudSyncService.pullAll()에 meetings/meeting_memos/meeting_documents 추가
- meetings: LWW, 모든 컬럼 매핑 (minutes_json JSON 직렬화)
- meeting_memos: immutable INSERT-only 전략
- meeting_documents: LWW UPDATE

묶음 F — api-client types:
- interface -> type alias 전환 (11개)
- Database 타입에 TypedTable<Row, Insert, Update> 유틸 도입
  (Row & Record<string, unknown> 교차로 GenericTable 제약 만족)
- @supabase/ssr 2.102는 supabase-js 버전 불일치로 제네릭 주입 불가 -
  다음 사이클로 이월, api-client index.ts는 types만 재수출

묶음 G — apps/mobile UI 교체:
- login.tsx: MetalCard + PhosphorText(hero/label) + PhysicalButton
- meetings.tsx: MetalCard + Led(status) + PhosphorText(body/meta)
- record.tsx: Led + PhosphorText + PhysicalButton
- profile.tsx: MetalCard + PhysicalButton(danger) + d3roNativePalette

묶음 H — V2-7b 이메일 invite flow:
- migrations/20260410000001_team_invites.sql
  - team_invites 테이블 (token, email, role, expires_at 7일)
  - RLS: 같은 팀 멤버 + 초대 이메일 소유자 SELECT,
    owner/admin만 INSERT/DELETE
  - generate_invite_token() SECURITY DEFINER RPC (service_role)
- functions/team-invite: 권한 체크 -> 토큰 생성 -> 초대 URL 반환
- functions/team-accept: 토큰 검증 -> expires_at/accepted_at/이메일 일치 ->
  team_members upsert -> 초대 accepted 표시
- config.toml에 team-invite/team-accept 함수 등록
- InviteMemberForm 재작성: 이메일 입력 + 역할 선택 -> URL 복사 UI
- /accept-invite 페이지 신규 (Suspense 내 useSearchParams + token 수락)

묶음 I — Realtime transcripts:
- apps/web/components/meetings/live-transcript-list.tsx (client)
  - supabase.channel('transcripts:meeting:${id}').on('postgres_changes')
  - INSERT -> 세그먼트 추가, UPDATE -> row 교체
  - 중복 방지 segment_index 기준
  - edited 배지 표시
- meetings/[id]/page.tsx의 transcript 섹션을 LiveTranscriptList로 교체

묶음 J — 테스트:
- packages/api-client/__tests__/client.test.ts (9 tests)
  - createD3roSupabaseClient, isClientConfigured 팩토리 검증
- packages/api-client/__tests__/types.test.ts (10 tests)
  - 모든 Row 타입 + 리터럴 union + Database keyof
- vitest.config.ts 신규
- apps/web/playwright.config.ts 신규 (baseURL, webServer dev 서버)
- apps/web/e2e/smoke.spec.ts 신규 (6 스모크 테스트)
- apps/web tsconfig exclude에 e2e/playwright.config.ts 추가
- package.json scripts: test, test:e2e, test:e2e:ui

검증:
- desktop typecheck OK
- web typecheck OK
- web next build OK (12 라우트, /accept-invite Suspense 적용)
- desktop build OK
- api-client test 19 passed

apps/mobile/app/(tabs)/meetings.tsx

@@ -1,8 +1,9 @@
 // apps/mobile/app/(tabs)/meetings.tsx
-// 회의 리스트 — Supabase에서 fetch
+// 회의 리스트 — @d3ro/ui-native 사용
 
 import { useEffect, useState } from 'react'
-import { View, Text, FlatList, Pressable, StyleSheet, ActivityIndicator, RefreshControl } from 'react-native'
+import { View, FlatList, StyleSheet, ActivityIndicator, RefreshControl, Pressable } from 'react-native'
+import { MetalCard, PhosphorText, Led, d3roNativePalette } from '@d3ro/ui-native'
 import { supabase } from '../../lib/supabase'
 
 interface Meeting {
@@ -12,6 +13,13 @@ interface Meeting {
   status: string
 }
 
+function statusLedColor(status: string): 'amber' | 'green' | 'red' | 'orange' {
+  if (status === 'recording') return 'red'
+  if (status === 'processing') return 'orange'
+  if (status === 'completed') return 'green'
+  return 'amber'
+}
+
 export default function MeetingsScreen(): React.ReactElement {
   const [meetings, setMeetings] = useState<Meeting[]>([])
   const [loading, setLoading] = useState(true)
@@ -41,7 +49,7 @@ export default function MeetingsScreen(): React.ReactElement {
   if (loading) {
     return (
       <View style={styles.center}>
-        <ActivityIndicator size="large" color="#f25b29" />
+        <ActivityIndicator size="large" color={d3roNativePalette.accent.amber} />
       </View>
     )
   }
@@ -50,7 +58,8 @@ export default function MeetingsScreen(): React.ReactElement {
     <FlatList
       data={meetings}
       keyExtractor={(item) => item.id}
-      contentContainerStyle={meetings.length === 0 ? styles.center : { padding: 16 }}
+      contentContainerStyle={meetings.length === 0 ? styles.center : styles.listContent}
+      style={styles.list}
       refreshControl={
         <RefreshControl
           refreshing={refreshing}
@@ -58,18 +67,30 @@ export default function MeetingsScreen(): React.ReactElement {
             setRefreshing(true)
             void load()
           }}
-          tintColor="#f25b29"
+          tintColor={d3roNativePalette.accent.amber}
         />
       }
       ListEmptyComponent={
-        <Text style={styles.empty}>아직 회의가 없습니다. Record 탭에서 새 녹음을 시작하세요.</Text>
+        <PhosphorText variant="small" color="muted" style={styles.empty}>
+          아직 회의가 없습니다. Record 탭에서 새 녹음을 시작하세요.
+        </PhosphorText>
       }
       renderItem={({ item }) => (
-        <Pressable style={styles.card}>
-          <Text style={styles.title}>{item.title ?? '(제목 없음)'}</Text>
-          <Text style={styles.meta}>
-            {new Date(item.started_at).toLocaleString('ko-KR')} · {item.status}
-          </Text>
+        <Pressable>
+          <MetalCard style={styles.card}>
+            <View style={styles.cardHeader}>
+              <Led color={statusLedColor(item.status)} size={8} />
+              <PhosphorText variant="label" color="label" style={{ marginLeft: 8 }}>
+                {item.status.toUpperCase()}
+              </PhosphorText>
+            </View>
+            <PhosphorText variant="body" color="primary" style={{ marginTop: 6 }}>
+              {item.title ?? '(제목 없음)'}
+            </PhosphorText>
+            <PhosphorText variant="meta" color="muted" style={{ marginTop: 4 }}>
+              {new Date(item.started_at).toLocaleString('ko-KR')}
+            </PhosphorText>
+          </MetalCard>
         </Pressable>
       )}
     />
@@ -77,16 +98,16 @@ export default function MeetingsScreen(): React.ReactElement {
 }
 
 const styles = StyleSheet.create({
-  center: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 32 },
-  empty: { color: '#8e8e93', textAlign: 'center', fontSize: 13 },
-  card: {
-    backgroundColor: '#242427',
-    padding: 16,
-    borderRadius: 12,
-    marginBottom: 12,
-    borderWidth: 1,
-    borderColor: 'rgba(255,255,255,0.04)'
+  list: { backgroundColor: d3roNativePalette.bg.app },
+  center: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 32,
+    backgroundColor: d3roNativePalette.bg.app
   },
-  title: { color: '#ffffff', fontSize: 14, fontWeight: '500', marginBottom: 4 },
-  meta: { color: '#8e8e93', fontSize: 11 }
+  listContent: { padding: 16 },
+  empty: { textAlign: 'center' },
+  card: { marginBottom: 12 },
+  cardHeader: { flexDirection: 'row', alignItems: 'center' }
 })

apps/mobile/app/(tabs)/profile.tsx

@@ -1,7 +1,8 @@
 // apps/mobile/app/(tabs)/profile.tsx
-// 프로필 — 사용자 정보 + 로그아웃
+// 프로필 — 사용자 정보 + 로그아웃. @d3ro/ui-native 사용
 
-import { View, Text, Pressable, StyleSheet, Alert } from 'react-native'
+import { View, StyleSheet, Alert, ScrollView } from 'react-native'
+import { MetalCard, PhosphorText, PhysicalButton, d3roNativePalette } from '@d3ro/ui-native'
 import { useAuth } from '../../lib/auth-context'
 import { supabase } from '../../lib/supabase'
 
@@ -22,50 +23,36 @@ export default function ProfileScreen(): React.ReactElement {
   }
 
   return (
-    <View style={styles.container}>
-      <View style={styles.section}>
-        <Text style={styles.label}>이메일</Text>
-        <Text style={styles.value}>{user?.email ?? '—'}</Text>
-      </View>
+    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+      <MetalCard style={styles.section}>
+        <PhosphorText variant="label" color="label">
+          이메일
+        </PhosphorText>
+        <PhosphorText variant="body" color="primary" style={styles.value}>
+          {user?.email ?? '—'}
+        </PhosphorText>
+      </MetalCard>
 
-      <View style={styles.section}>
-        <Text style={styles.label}>User ID</Text>
-        <Text style={styles.value}>{user?.id ?? '—'}</Text>
-      </View>
+      <MetalCard style={styles.section}>
+        <PhosphorText variant="label" color="label">
+          USER ID
+        </PhosphorText>
+        <PhosphorText variant="small" color="primary" style={styles.value}>
+          {user?.id ?? '—'}
+        </PhosphorText>
+      </MetalCard>
 
-      <Pressable style={styles.logoutButton} onPress={() => void handleLogout()}>
-        <Text style={styles.logoutText}>로그아웃</Text>
-      </Pressable>
-    </View>
+      <View style={styles.logoutWrap}>
+        <PhysicalButton label="로그아웃" variant="danger" onPress={() => void handleLogout()} />
+      </View>
+    </ScrollView>
   )
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1, padding: 24 },
-  section: {
-    backgroundColor: '#242427',
-    padding: 16,
-    borderRadius: 12,
-    marginBottom: 16,
-    borderWidth: 1,
-    borderColor: 'rgba(255,255,255,0.04)'
-  },
-  label: {
-    color: '#8e8e93',
-    fontSize: 11,
-    fontWeight: '700',
-    letterSpacing: 1.5,
-    textTransform: 'uppercase',
-    marginBottom: 4
-  },
-  value: { color: '#ffffff', fontSize: 14 },
-  logoutButton: {
-    marginTop: 16,
-    paddingVertical: 14,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: '#ef4444',
-    alignItems: 'center'
-  },
-  logoutText: { color: '#ef4444', fontSize: 14, fontWeight: '600' }
+  container: { flex: 1, backgroundColor: d3roNativePalette.bg.app },
+  content: { padding: 24 },
+  section: { marginBottom: 16 },
+  value: { marginTop: 6 },
+  logoutWrap: { marginTop: 8 }
 })

apps/mobile/app/(tabs)/record.tsx

@@ -1,11 +1,18 @@
 // apps/mobile/app/(tabs)/record.tsx
-// 녹음 — expo-av Audio.Recording 사용
+// 녹음 — expo-av + @d3ro/ui-native
 
 import { useState, useRef } from 'react'
-import { View, Text, Pressable, StyleSheet, Alert, ActivityIndicator } from 'react-native'
+import { View, StyleSheet, ActivityIndicator, ScrollView } from 'react-native'
 import { Audio } from 'expo-av'
-import { supabase, isSupabaseConfigured } from '../../lib/supabase'
 import Constants from 'expo-constants'
+import {
+  MetalCard,
+  PhosphorText,
+  PhysicalButton,
+  Led,
+  d3roNativePalette
+} from '@d3ro/ui-native'
+import { supabase, isSupabaseConfigured } from '../../lib/supabase'
 
 type RecordingState = 'idle' | 'recording' | 'processing' | 'done' | 'error'
 
@@ -62,7 +69,6 @@ export default function RecordScreen(): React.ReactElement {
         return
       }
 
-      // Edge Function 호출
       const {
         data: { session }
       } = await supabase.auth.getSession()
@@ -74,7 +80,6 @@ export default function RecordScreen(): React.ReactElement {
       }
 
       const formData = new FormData()
-      // RN의 FormData는 { uri, name, type } 형태
       formData.append('audio', {
         uri,
         name: 'recording.m4a',
@@ -116,64 +121,95 @@ export default function RecordScreen(): React.ReactElement {
     setError(null)
   }
 
+  const statusLed: 'amber' | 'red' | 'orange' | 'green' =
+    state === 'recording' ? 'red' : state === 'processing' ? 'orange' : state === 'done' ? 'green' : 'amber'
+
   return (
-    <View style={styles.container}>
-      <Text style={styles.title}>{state === 'recording' ? 'RECORDING' : state === 'processing' ? 'PROCESSING' : 'READY'}</Text>
-
-      {state === 'processing' && <ActivityIndicator size="large" color="#f25b29" style={styles.spinner} />}
-
-      {transcript && state === 'done' && (
-        <View style={styles.transcriptBox}>
-          <Text style={styles.transcript}>{transcript}</Text>
+    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+      <MetalCard style={styles.card}>
+        <View style={styles.statusRow}>
+          <Led color={statusLed} size={10} on={state !== 'idle'} />
+          <PhosphorText variant="label" color="label" style={styles.statusLabel}>
+            {state === 'recording'
+              ? 'RECORDING'
+              : state === 'processing'
+                ? 'PROCESSING'
+                : state === 'done'
+                  ? 'DONE'
+                  : state === 'error'
+                    ? 'ERROR'
+                    : 'READY'}
+          </PhosphorText>
         </View>
-      )}
 
-      {error && (
-        <View style={styles.errorBox}>
-          <Text style={styles.error}>{error}</Text>
+        <View style={styles.center}>
+          {state === 'processing' && (
+            <ActivityIndicator size="large" color={d3roNativePalette.accent.amber} />
+          )}
+
+          {transcript && state === 'done' && (
+            <View style={styles.transcriptBox}>
+              <PhosphorText variant="body" color="primary">
+                {transcript}
+              </PhosphorText>
+            </View>
+          )}
+
+          {error && (
+            <View style={styles.errorBox}>
+              <PhosphorText variant="small" color="label">
+                {error}
+              </PhosphorText>
+            </View>
+          )}
         </View>
-      )}
 
-      <View style={styles.buttons}>
-        {(state === 'idle' || state === 'done' || state === 'error') && (
-          <Pressable style={styles.bigButton} onPress={() => void startRecording()}>
-            <Text style={styles.bigButtonText}>{state === 'done' ? '새 녹음' : '녹음 시작'}</Text>
-          </Pressable>
-        )}
-        {state === 'recording' && (
-          <View style={{ gap: 12 }}>
-            <Pressable style={[styles.bigButton, styles.stop]} onPress={() => void stopRecording()}>
-              <Text style={styles.bigButtonText}>정지</Text>
-            </Pressable>
-            <Pressable style={styles.cancelButton} onPress={() => void cancelRecording()}>
-              <Text style={styles.cancelText}>취소</Text>
-            </Pressable>
-          </View>
-        )}
-      </View>
-    </View>
+        <View style={styles.buttons}>
+          {(state === 'idle' || state === 'done' || state === 'error') && (
+            <PhysicalButton
+              label={state === 'done' ? '새 녹음' : '녹음 시작'}
+              variant="primary"
+              onPress={() => void startRecording()}
+            />
+          )}
+          {state === 'recording' && (
+            <>
+              <PhysicalButton label="정지" variant="danger" onPress={() => void stopRecording()} />
+              <View style={{ height: 12 }} />
+              <PhysicalButton
+                label="취소"
+                variant="secondary"
+                onPress={() => void cancelRecording()}
+              />
+            </>
+          )}
+        </View>
+      </MetalCard>
+    </ScrollView>
   )
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1, padding: 32, alignItems: 'center', justifyContent: 'center' },
-  title: { color: '#f25b29', fontSize: 20, fontWeight: '600', letterSpacing: 2, marginBottom: 32 },
-  spinner: { marginVertical: 24 },
-  transcriptBox: { backgroundColor: '#242427', padding: 16, borderRadius: 8, marginBottom: 24, width: '100%' },
-  transcript: { color: '#ffffff', fontSize: 14, lineHeight: 20 },
-  errorBox: { borderWidth: 1, borderColor: '#ef4444', padding: 12, borderRadius: 8, marginBottom: 24 },
-  error: { color: '#ef4444', fontSize: 12 },
-  buttons: { width: '100%', alignItems: 'center' },
-  bigButton: {
-    backgroundColor: '#f25b29',
-    paddingVertical: 18,
-    paddingHorizontal: 64,
-    borderRadius: 12,
-    minWidth: 200,
-    alignItems: 'center'
+  container: { flex: 1, backgroundColor: d3roNativePalette.bg.app },
+  content: { padding: 24 },
+  card: { padding: 24 },
+  statusRow: { flexDirection: 'row', alignItems: 'center' },
+  statusLabel: { marginLeft: 8 },
+  center: { alignItems: 'center', minHeight: 140, justifyContent: 'center', marginVertical: 16 },
+  transcriptBox: {
+    backgroundColor: d3roNativePalette.bg.inset,
+    padding: 12,
+    borderRadius: 8,
+    width: '100%',
+    marginTop: 8
   },
-  bigButtonText: { color: '#ffffff', fontSize: 16, fontWeight: '600', letterSpacing: 1 },
-  stop: { backgroundColor: '#ef4444' },
-  cancelButton: { paddingVertical: 12, alignItems: 'center' },
-  cancelText: { color: '#8e8e93', fontSize: 13 }
+  errorBox: {
+    borderWidth: 1,
+    borderColor: d3roNativePalette.tag.red,
+    padding: 10,
+    borderRadius: 6,
+    width: '100%',
+    marginTop: 8
+  },
+  buttons: { marginTop: 16 }
 })

apps/mobile/app/login.tsx

@@ -1,10 +1,11 @@
 // apps/mobile/app/login.tsx
-// OAuth 로그인 화면
+// OAuth 로그인 화면 — @d3ro/ui-native 사용
 
 import { useState } from 'react'
-import { View, Text, Pressable, Alert, StyleSheet, ActivityIndicator } from 'react-native'
+import { View, StyleSheet, Alert } from 'react-native'
 import * as WebBrowser from 'expo-web-browser'
 import * as Linking from 'expo-linking'
+import { MetalCard, PhosphorText, PhysicalButton, d3roNativePalette } from '@d3ro/ui-native'
 import { supabase, isSupabaseConfigured } from '../lib/supabase'
 
 WebBrowser.maybeCompleteAuthSession()
@@ -49,33 +50,37 @@ export default function LoginScreen(): React.ReactElement {
 
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>D3RO VOICE</Text>
-      <Text style={styles.subtitle}>AI 음성 어시스턴트</Text>
+      <MetalCard style={styles.card}>
+        <View style={styles.header}>
+          <PhosphorText variant="hero">D3RO VOICE</PhosphorText>
+          <PhosphorText variant="label" color="secondary" style={styles.subtitle}>
+            AI 음성 어시스턴트
+          </PhosphorText>
+        </View>
 
-      {!configured && (
-        <Text style={styles.warning}>
-          Supabase가 설정되지 않았습니다. app.json의 extra 필드를 확인하세요.
-        </Text>
-      )}
+        {!configured && (
+          <View style={styles.warningBox}>
+            <PhosphorText variant="small" color="label">
+              Supabase가 설정되지 않았습니다. app.json의 extra 필드를 확인하세요.
+            </PhosphorText>
+          </View>
+        )}
 
-      <View style={styles.buttons}>
-        <Pressable
-          style={[styles.button, styles.google, (!configured || busy) && styles.disabled]}
-          onPress={() => void signInWithProvider('google')}
-          disabled={!configured || busy}
-        >
-          <Text style={styles.buttonText}>Google로 계속하기</Text>
-        </Pressable>
-        <Pressable
-          style={[styles.button, styles.github, (!configured || busy) && styles.disabled]}
-          onPress={() => void signInWithProvider('github')}
-          disabled={!configured || busy}
-        >
-          <Text style={styles.buttonText}>GitHub로 계속하기</Text>
-        </Pressable>
-      </View>
-
-      {busy && <ActivityIndicator size="small" color="#f25b29" style={{ marginTop: 16 }} />}
+        <View style={styles.buttons}>
+          <PhysicalButton
+            label="Google로 계속하기"
+            variant="primary"
+            disabled={!configured || busy}
+            onPress={() => void signInWithProvider('google')}
+          />
+          <PhysicalButton
+            label="GitHub로 계속하기"
+            variant="secondary"
+            disabled={!configured || busy}
+            onPress={() => void signInWithProvider('github')}
+          />
+        </View>
+      </MetalCard>
     </View>
   )
 }
@@ -83,56 +88,28 @@ export default function LoginScreen(): React.ReactElement {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#19191b',
+    backgroundColor: d3roNativePalette.bg.app,
     justifyContent: 'center',
+    padding: 24
+  },
+  card: {
     padding: 32
   },
-  title: {
-    color: '#f25b29',
-    fontSize: 36,
-    fontWeight: '300',
-    textAlign: 'center',
-    letterSpacing: 2,
-    marginBottom: 8
+  header: {
+    alignItems: 'center',
+    marginBottom: 32
   },
   subtitle: {
-    color: '#8e8e93',
-    fontSize: 14,
-    textAlign: 'center',
-    marginBottom: 48
+    marginTop: 8
   },
-  warning: {
-    color: '#f59e0b',
-    fontSize: 12,
-    textAlign: 'center',
-    marginBottom: 24,
-    padding: 12,
+  warningBox: {
     borderWidth: 1,
-    borderColor: '#f59e0b',
-    borderRadius: 8
+    borderColor: d3roNativePalette.tag.orange,
+    padding: 12,
+    borderRadius: 8,
+    marginBottom: 16
   },
   buttons: {
     gap: 12
-  },
-  button: {
-    paddingVertical: 14,
-    borderRadius: 8,
-    alignItems: 'center'
-  },
-  google: {
-    backgroundColor: '#f25b29'
-  },
-  github: {
-    backgroundColor: 'transparent',
-    borderWidth: 1,
-    borderColor: '#8e8e93'
-  },
-  disabled: {
-    opacity: 0.5
-  },
-  buttonText: {
-    color: '#ffffff',
-    fontSize: 14,
-    fontWeight: '600'
   }
 })