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/web/src/app/(app)/meetings/[id]/page.tsx

@@ -1,11 +1,15 @@
 // apps/web/src/app/(app)/meetings/[id]/page.tsx
-// 회의록 상세 — transcripts + memos + documents
+// 회의록 상세 — transcripts(Realtime) + memos + documents
 
 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 } from '@/lib/supabase-server'
+import {
+  LiveTranscriptList,
+  type TranscriptRow
+} from '@/components/meetings/live-transcript-list'
 
 interface PageProps {
   params: Promise<{ id: string }>
@@ -52,31 +56,15 @@ export default async function MeetingDetailPage({ params }: PageProps): Promise<
       </Box>
 
       <Stack spacing={3}>
-          {/* Transcript */}
+          {/* Transcript — Realtime 구독 */}
           <MetalCard sx={{ p: 3 }}>
             <PhosphorText variant="heading" sx={{ mb: 2 }}>
-              TRANSCRIPT
+              TRANSCRIPT (LIVE)
             </PhosphorText>
-            {(transcripts ?? []).length === 0 ? (
-              <Box sx={{ color: d3roPalette.text.muted, fontSize: 13 }}>
-                전사 세그먼트가 없습니다.
-              </Box>
-            ) : (
-              <Stack spacing={1.5}>
-                {(transcripts ?? []).map((seg) => (
-                  <Box key={seg.id}>
-                    <Box sx={{ color: d3roPalette.text.label, fontSize: 11, mb: 0.5 }}>
-                      {Math.floor(seg.timestamp_ms / 60000)}:
-                      {String(Math.floor((seg.timestamp_ms / 1000) % 60)).padStart(2, '0')}
-                      {seg.speaker && ` · ${seg.speaker}`}
-                    </Box>
-                    <Box sx={{ color: d3roPalette.text.primary, ...typoSx("body") }}>
-                      {seg.text}
-                    </Box>
-                  </Box>
-                ))}
-              </Stack>
-            )}
+            <LiveTranscriptList
+              meetingId={id}
+              initial={(transcripts ?? []) as unknown as TranscriptRow[]}
+            />
           </MetalCard>
 
           {/* Memos */}

apps/web/src/app/accept-invite/page.tsx

@@ -0,0 +1,183 @@
+'use client'
+
+// apps/web/src/app/accept-invite/page.tsx
+// 팀 초대 수락 페이지 — URL의 ?token=을 team-accept Edge Function으로 전달
+
+import { Suspense, useEffect, useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { Box, Stack, Alert, CircularProgress } from '@mui/material'
+import { MetalCard, PhosphorText } from '@d3ro/ui/components/ds'
+import { d3roPalette } from '@d3ro/ui/theme'
+import { getSupabaseBrowserClient, isSupabaseConfigured } from '@/lib/supabase-browser'
+
+type AcceptState = 'loading' | 'success' | 'error' | 'need_login'
+
+// useSearchParams는 Suspense boundary 필요 (Next.js 15 prerender 규칙)
+export default function AcceptInvitePage(): React.ReactElement {
+  return (
+    <Suspense
+      fallback={
+        <Box
+          sx={{
+            minHeight: '100vh',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            bgcolor: d3roPalette.bg.app
+          }}
+        >
+          <CircularProgress color="warning" />
+        </Box>
+      }
+    >
+      <AcceptInviteInner />
+    </Suspense>
+  )
+}
+
+function AcceptInviteInner(): React.ReactElement {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const token = searchParams.get('token')
+  const [state, setState] = useState<AcceptState>('loading')
+  const [message, setMessage] = useState<string>('')
+  const [teamId, setTeamId] = useState<string | null>(null)
+
+  useEffect(() => {
+    async function run(): Promise<void> {
+      if (!token) {
+        setState('error')
+        setMessage('유효하지 않은 초대 링크입니다 (토큰 누락).')
+        return
+      }
+      if (!isSupabaseConfigured()) {
+        setState('error')
+        setMessage('Supabase가 설정되지 않았습니다.')
+        return
+      }
+
+      const supabase = getSupabaseBrowserClient()
+      const {
+        data: { session }
+      } = await supabase.auth.getSession()
+
+      if (!session) {
+        setState('need_login')
+        setMessage('초대를 수락하려면 먼저 로그인해주세요.')
+        // 토큰을 sessionStorage에 저장해두고 로그인 후 돌아오도록
+        try {
+          sessionStorage.setItem('pending_invite_token', token)
+        } catch {
+          // storage 차단 시 무시
+        }
+        return
+      }
+
+      try {
+        const response = await fetch(
+          `${process.env.NEXT_PUBLIC_SUPABASE_URL}/functions/v1/team-accept`,
+          {
+            method: 'POST',
+            headers: {
+              Authorization: `Bearer ${session.access_token}`,
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ token })
+          }
+        )
+
+        if (!response.ok) {
+          const errData = (await response.json()) as { error?: string; message?: string }
+          setState('error')
+          setMessage(errData.message ?? errData.error ?? `실패: ${response.status}`)
+          return
+        }
+
+        const data = (await response.json()) as { team_id: string; role: string }
+        setTeamId(data.team_id)
+        setState('success')
+        setMessage(`팀에 가입되었습니다 (${data.role}). 잠시 후 이동합니다...`)
+
+        // 성공 시 3초 후 팀 페이지로
+        setTimeout(() => {
+          router.replace(`/teams/${data.team_id}`)
+        }, 2000)
+      } catch (e) {
+        setState('error')
+        setMessage(e instanceof Error ? e.message : 'Unknown error')
+      }
+    }
+    void run()
+  }, [token, router])
+
+  return (
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        bgcolor: d3roPalette.bg.app,
+        p: 4
+      }}
+    >
+      <MetalCard sx={{ maxWidth: 480, width: '100%', p: 4 }}>
+        <Stack spacing={3} alignItems="center">
+          <PhosphorText variant="title">TEAM INVITE</PhosphorText>
+
+          {state === 'loading' && <CircularProgress color="warning" />}
+
+          {state === 'success' && (
+            <Alert severity="success" variant="outlined" sx={{ width: '100%' }}>
+              {message}
+            </Alert>
+          )}
+
+          {state === 'error' && (
+            <>
+              <Alert severity="error" variant="outlined" sx={{ width: '100%' }}>
+                {message}
+              </Alert>
+              <Box
+                component="a"
+                href="/dashboard"
+                sx={{
+                  color: d3roPalette.accent.amber,
+                  textDecoration: 'none',
+                  fontSize: 13
+                }}
+              >
+                대시보드로 이동
+              </Box>
+            </>
+          )}
+
+          {state === 'need_login' && (
+            <>
+              <Alert severity="info" variant="outlined" sx={{ width: '100%' }}>
+                {message}
+              </Alert>
+              <Box
+                component="a"
+                href="/login"
+                sx={{
+                  color: d3roPalette.accent.amber,
+                  textDecoration: 'none',
+                  fontSize: 13
+                }}
+              >
+                로그인 페이지로 이동
+              </Box>
+            </>
+          )}
+
+          {teamId && (
+            <Box sx={{ color: d3roPalette.text.muted, fontSize: 11 }}>
+              Team ID: {teamId}
+            </Box>
+          )}
+        </Stack>
+      </MetalCard>
+    </Box>
+  )
+}

apps/web/src/components/meetings/live-transcript-list.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+// apps/web/src/components/meetings/live-transcript-list.tsx
+// 회의 세그먼트 실시간 구독 — Supabase Realtime으로 INSERT 이벤트 수신
+
+import { useEffect, useState } from 'react'
+import { Box, Stack } from '@mui/material'
+import { d3roPalette, typoSx } from '@d3ro/ui/theme'
+import { getSupabaseBrowserClient } from '@/lib/supabase-browser'
+
+export interface TranscriptRow {
+  id: string
+  segment_index: number
+  timestamp_ms: number
+  text: string
+  speaker: string | null
+  edited: boolean
+}
+
+interface LiveTranscriptListProps {
+  meetingId: string
+  initial: TranscriptRow[]
+}
+
+export function LiveTranscriptList({
+  meetingId,
+  initial
+}: LiveTranscriptListProps): React.ReactElement {
+  const [segments, setSegments] = useState<TranscriptRow[]>(initial)
+
+  useEffect(() => {
+    const supabase = getSupabaseBrowserClient()
+    // 회의별 Realtime 채널 구독. V2-2 migration에서
+    // ALTER PUBLICATION supabase_realtime ADD TABLE public.transcripts; 적용됨.
+    const channel = supabase
+      .channel(`transcripts:meeting:${meetingId}`)
+      .on(
+        'postgres_changes',
+        {
+          event: 'INSERT',
+          schema: 'public',
+          table: 'transcripts',
+          filter: `meeting_id=eq.${meetingId}`
+        },
+        (payload) => {
+          const row = payload.new as TranscriptRow
+          setSegments((prev) => {
+            // 중복 방지 (segment_index 기준)
+            if (prev.some((s) => s.segment_index === row.segment_index)) {
+              return prev
+            }
+            return [...prev, row].sort((a, b) => a.segment_index - b.segment_index)
+          })
+        }
+      )
+      .on(
+        'postgres_changes',
+        {
+          event: 'UPDATE',
+          schema: 'public',
+          table: 'transcripts',
+          filter: `meeting_id=eq.${meetingId}`
+        },
+        (payload) => {
+          const row = payload.new as TranscriptRow
+          setSegments((prev) => prev.map((s) => (s.id === row.id ? row : s)))
+        }
+      )
+      .subscribe()
+
+    return () => {
+      void supabase.removeChannel(channel)
+    }
+  }, [meetingId])
+
+  if (segments.length === 0) {
+    return (
+      <Box sx={{ color: d3roPalette.text.muted, fontSize: 13 }}>전사 세그먼트가 없습니다.</Box>
+    )
+  }
+
+  return (
+    <Stack spacing={1.5}>
+      {segments.map((seg) => (
+        <Box key={seg.id}>
+          <Box sx={{ color: d3roPalette.text.label, fontSize: 11, mb: 0.5 }}>
+            {Math.floor(seg.timestamp_ms / 60000)}:
+            {String(Math.floor((seg.timestamp_ms / 1000) % 60)).padStart(2, '0')}
+            {seg.speaker && ` · ${seg.speaker}`}
+            {seg.edited && (
+              <Box
+                component="span"
+                sx={{
+                  ml: 1,
+                  px: 0.75,
+                  py: 0.25,
+                  borderRadius: 0.5,
+                  bgcolor: d3roPalette.tag.orangeBg,
+                  color: d3roPalette.tag.orange,
+                  fontSize: 9
+                }}
+              >
+                EDITED
+              </Box>
+            )}
+          </Box>
+          <Box sx={{ color: d3roPalette.text.primary, ...typoSx('body') }}>{seg.text}</Box>
+        </Box>
+      ))}
+    </Stack>
+  )
+}

apps/web/src/components/teams/invite-member-form.tsx

@@ -1,49 +1,110 @@
 'use client'
 
 // apps/web/src/components/teams/invite-member-form.tsx
-// 팀 멤버 초대 — 이메일로 초대 (현재 MVP는 user_id 직접 입력)
-// 정식 초대 flow는 V2-7b에서 구현 (Supabase function + 이메일 발송)
+// 팀 멤버 초대 — 이메일 기반 (V2-7b).
+// Edge Function team-invite로 토큰 발급 → 초대 URL 반환 → 클라이언트가 복사/공유.
 
 import { useState } from 'react'
-import { useRouter } from 'next/navigation'
-import { Box, Button, TextField, Stack, Alert, Dialog, DialogContent, DialogTitle } from '@mui/material'
+import {
+  Box,
+  Button,
+  TextField,
+  Stack,
+  Alert,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  IconButton,
+  Tooltip
+} from '@mui/material'
 import PersonAddIcon from '@mui/icons-material/PersonAdd'
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import { getSupabaseBrowserClient } from '@/lib/supabase-browser'
 
 interface InviteMemberFormProps {
   teamId: string
 }
 
+interface InviteResult {
+  id: string
+  url: string
+  expires_at: string
+}
+
 export function InviteMemberForm({ teamId }: InviteMemberFormProps): React.ReactElement {
-  const router = useRouter()
   const [open, setOpen] = useState(false)
-  const [userId, setUserId] = useState('')
+  const [email, setEmail] = useState('')
+  const [role, setRole] = useState<'admin' | 'member'>('member')
   const [error, setError] = useState<string | null>(null)
   const [busy, setBusy] = useState(false)
+  const [result, setResult] = useState<InviteResult | null>(null)
+  const [copied, setCopied] = useState(false)
 
   async function handleInvite(): Promise<void> {
-    if (!userId.trim()) return
+    if (!email.trim()) return
     setError(null)
     setBusy(true)
     try {
       const supabase = getSupabaseBrowserClient()
-      const { error: insertErr } = await supabase
-        .from('team_members')
-        .insert({ team_id: teamId, user_id: userId.trim(), role: 'member' })
-
-      if (insertErr) {
-        setError(insertErr.message)
+      const {
+        data: { session }
+      } = await supabase.auth.getSession()
+      if (!session) {
+        setError('로그인이 필요합니다')
         return
       }
 
-      setUserId('')
-      setOpen(false)
-      router.refresh()
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_SUPABASE_URL}/functions/v1/team-invite`,
+        {
+          method: 'POST',
+          headers: {
+            Authorization: `Bearer ${session.access_token}`,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({ team_id: teamId, email: email.trim(), role })
+        }
+      )
+
+      if (!response.ok) {
+        const errData = (await response.json()) as { error?: string; message?: string }
+        setError(errData.message ?? errData.error ?? `실패: ${response.status}`)
+        return
+      }
+
+      const data = (await response.json()) as InviteResult
+      setResult(data)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unknown error')
     } finally {
       setBusy(false)
     }
   }
 
+  async function handleCopy(): Promise<void> {
+    if (!result) return
+    try {
+      await navigator.clipboard.writeText(result.url)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      // clipboard 차단 시 무시
+    }
+  }
+
+  function handleClose(): void {
+    setOpen(false)
+    setEmail('')
+    setRole('member')
+    setError(null)
+    setResult(null)
+    setCopied(false)
+  }
+
   return (
     <>
       <Button
@@ -55,41 +116,78 @@ export function InviteMemberForm({ teamId }: InviteMemberFormProps): React.React
         멤버 초대
       </Button>
 
-      <Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm" fullWidth>
+      <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
         <DialogTitle>멤버 초대</DialogTitle>
         <DialogContent>
-          <Stack spacing={2} sx={{ mt: 1 }}>
-            <Box sx={{ fontSize: 12, color: 'text.secondary' }}>
-              MVP 단계에서는 user_id를 직접 입력합니다. 정식 초대 링크 / 이메일 발송은 V2-7b에서
-              지원 예정입니다.
-            </Box>
-            <TextField
-              label="User ID (UUID)"
-              size="small"
-              value={userId}
-              onChange={(e) => setUserId(e.target.value)}
-              placeholder="00000000-0000-0000-0000-000000000000"
-              fullWidth
-              autoFocus
-            />
-            {error && (
-              <Alert severity="error" variant="outlined">
-                {error}
-              </Alert>
-            )}
-            <Stack direction="row" spacing={1} justifyContent="flex-end">
-              <Button onClick={() => setOpen(false)} disabled={busy}>
-                취소
-              </Button>
-              <Button
-                variant="contained"
-                onClick={() => void handleInvite()}
-                disabled={busy || !userId.trim()}
-              >
-                초대
-              </Button>
+          {!result ? (
+            <Stack spacing={2} sx={{ mt: 1 }}>
+              <Box sx={{ fontSize: 12, color: 'text.secondary' }}>
+                초대할 사용자의 이메일을 입력하세요. 발급된 초대 URL을 복사해서 공유할 수
+                있습니다 (자동 이메일 발송은 V2-7c에서 지원).
+              </Box>
+              <TextField
+                label="이메일"
+                type="email"
+                size="small"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="example@d3ro.dev"
+                fullWidth
+                autoFocus
+              />
+              <FormControl size="small" fullWidth>
+                <InputLabel>역할</InputLabel>
+                <Select value={role} label="역할" onChange={(e) => setRole(e.target.value as 'admin' | 'member')}>
+                  <MenuItem value="member">Member</MenuItem>
+                  <MenuItem value="admin">Admin</MenuItem>
+                </Select>
+              </FormControl>
+              {error && (
+                <Alert severity="error" variant="outlined">
+                  {error}
+                </Alert>
+              )}
+              <Stack direction="row" spacing={1} justifyContent="flex-end">
+                <Button onClick={handleClose} disabled={busy}>
+                  취소
+                </Button>
+                <Button
+                  variant="contained"
+                  onClick={() => void handleInvite()}
+                  disabled={busy || !email.trim()}
+                >
+                  초대 생성
+                </Button>
+              </Stack>
             </Stack>
-          </Stack>
+          ) : (
+            <Stack spacing={2} sx={{ mt: 1 }}>
+              <Alert severity="success" variant="outlined">
+                초대 생성 완료. 아래 링크를 공유하세요.
+              </Alert>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <TextField
+                  size="small"
+                  value={result.url}
+                  fullWidth
+                  slotProps={{
+                    input: { readOnly: true }
+                  }}
+                />
+                <Tooltip title={copied ? '복사됨' : '링크 복사'}>
+                  <IconButton onClick={() => void handleCopy()}>
+                    <ContentCopyIcon fontSize="small" />
+                  </IconButton>
+                </Tooltip>
+              </Box>
+              <Box sx={{ fontSize: 11, color: 'text.secondary' }}>
+                만료: {new Date(result.expires_at).toLocaleString('ko-KR')}
+              </Box>
+              <Stack direction="row" spacing={1} justifyContent="flex-end">
+                <Button onClick={handleClose}>닫기</Button>
+              </Stack>
+            </Stack>
+          )}
         </DialogContent>
       </Dialog>
     </>

apps/web/src/lib/supabase-browser.ts

@@ -3,10 +3,12 @@
 
 'use client'
 
-import { createBrowserClient } from '@supabase/ssr'
+// apps/web/src/lib/supabase-browser.ts
+// V2-3 MVP: Database 제네릭 없이 동작. @supabase/ssr와 supabase-js의 내부 타입
+// 경로 불일치(@supabase/supabase-js/dist/module/lib/types)로 인해 제네릭 주입 불가.
+// 다음 사이클에서 supabase-js/ssr 버전 정합 맞춘 후 Database 제네릭 복원 예정.
 
-// V2-3 MVP: Database 제네릭 없이 동작. V2-4에서 `supabase gen types typescript`로
-// 자동 생성된 Database 타입을 주입하여 select/insert에 타입 안전성 추가 예정.
+import { createBrowserClient } from '@supabase/ssr'
 
 let cachedClient: ReturnType<typeof createBrowserClient> | null = null
 

apps/web/src/lib/supabase-server.ts

@@ -1,6 +1,6 @@
 // apps/web/src/lib/supabase-server.ts
 // RSC/route handler용 Supabase 클라이언트 (쿠키 기반 세션).
-// V2-3 MVP: Database 제네릭 없이 동작. V2-4에서 자동 생성 Database 타입 주입 예정.
+// Database 제네릭은 @supabase/ssr 내부 경로 이슈로 현재 미적용 (다음 사이클 복원).
 
 import { cookies } from 'next/headers'
 import { createServerClient, type CookieOptions } from '@supabase/ssr'