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
parent
37f3f4d5bd
commit
c167737198
26 changed files with 1530 additions and 374 deletions
183
apps/web/src/app/accept-invite/page.tsx
Normal file
183
apps/web/src/app/accept-invite/page.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue