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
This commit is contained in:
yunchan8804 2026-04-10 08:34:52 +09:00
parent 37f3f4d5bd
commit c167737198
26 changed files with 1530 additions and 374 deletions

View file

@ -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>
</>