yunchan/d3ro-voice
1
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions

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

Browse source 
묶음 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
Download patch file Download diff file Expand all files Collapse all files

169
apps/desktop/src/main/services/CloudSyncService.ts
View file

@ -532,6 +532,175 @@ class CloudSyncService extends EventEmitter {
return applied
}, result)
// 3) meetings (V1 meeting_sessions)
result.pushed += await this._pullTable('meetings', async () => {
const { data: remoteRows, error } = await this._client!.from('meetings')
.select('*')
.gt('updated_at', sinceIso)
if (error) throw new Error(error.message)
if (!remoteRows || remoteRows.length === 0) return 0
let applied = 0
for (const remote of remoteRows as Array<Record<string, unknown>>) {
const remoteUpdated = remote.updated_at
? new Date(remote.updated_at as string).getTime()
: 0
const remoteStarted = remote.started_at
? new Date(remote.started_at as string).getTime()
: remoteUpdated
const remoteEnded = remote.ended_at
? new Date(remote.ended_at as string).getTime()
: null
const remoteCreated = remote.created_at
? new Date(remote.created_at as string).getTime()
: remoteUpdated
const existing = await db
.select()
.from(meetingSessions)
.where(eq(meetingSessions.id, remote.id as string))
.limit(1)
// V1 스키마는 minutesJson이 text (JSON 직렬화)
const minutesJsonStr = remote.minutes_json
? JSON.stringify(remote.minutes_json)
: null
const row = {
title: (remote.title as string | null) ?? null,
status: (remote.status as 'recording' | 'processing' | 'completed' | 'error'),
startedAt: remoteStarted,
endedAt: remoteEnded,
durationMs: (remote.duration_ms as number | null) ?? null,
rawTranscript: (remote.raw_transcript as string | null) ?? null,
editedTranscript: (remote.edited_transcript as string | null) ?? null,
minutesMarkdown: (remote.minutes_markdown as string | null) ?? null,
minutesJson: minutesJsonStr,
sttModel: (remote.stt_model as string | null) ?? null,
llmModel: (remote.llm_model as string | null) ?? null,
sttLatencyMs: (remote.stt_latency_ms as number | null) ?? null,
llmLatencyMs: (remote.llm_latency_ms as number | null) ?? null,
errorMessage: (remote.error_message as string | null) ?? null,
updatedAt: remoteUpdated
}
if (existing.length > 0) {
if (existing[0].updatedAt >= remoteUpdated) continue
await db
.update(meetingSessions)
.set(row)
.where(eq(meetingSessions.id, remote.id as string))
applied++
} else {
await db.insert(meetingSessions).values({
id: remote.id as string,
...row,
createdAt: remoteCreated
})
applied++
}
this.emit('sync-progress', { current: applied, total: remoteRows.length, table: 'meetings' })
}
return applied
}, result)
// 4) meeting_memos
result.pushed += await this._pullTable('meeting_memos', async () => {
const { data: remoteRows, error } = await this._client!.from('meeting_memos')
.select('*')
.gt('created_at', sinceIso)
if (error) throw new Error(error.message)
if (!remoteRows || remoteRows.length === 0) return 0
let applied = 0
for (const remote of remoteRows as Array<Record<string, unknown>>) {
const remoteCreated = remote.created_at
? new Date(remote.created_at as string).getTime()
: Date.now()
const existing = await db
.select()
.from(meetingMemos)
.where(eq(meetingMemos.id, remote.id as string))
.limit(1)
if (existing.length === 0) {
await db.insert(meetingMemos).values({
id: remote.id as string,
sessionId: remote.meeting_id as string,
content: remote.content as string,
timestampMs: remote.timestamp_ms as number,
createdAt: remoteCreated
})
applied++
}
// memo는 immutable 전제 (수정 없음), INSERT-only
this.emit('sync-progress', { current: applied, total: remoteRows.length, table: 'meeting_memos' })
}
return applied
}, result)
// 5) meeting_documents
result.pushed += await this._pullTable('meeting_documents', async () => {
const { data: remoteRows, error } = await this._client!.from('meeting_documents')
.select('*')
.gt('updated_at', sinceIso)
if (error) throw new Error(error.message)
if (!remoteRows || remoteRows.length === 0) return 0
let applied = 0
for (const remote of remoteRows as Array<Record<string, unknown>>) {
const remoteUpdated = remote.updated_at
? new Date(remote.updated_at as string).getTime()
: 0
const remoteCreated = remote.created_at
? new Date(remote.created_at as string).getTime()
: remoteUpdated
const existing = await db
.select()
.from(meetingDocuments)
.where(eq(meetingDocuments.id, remote.id as string))
.limit(1)
const row = {
sessionId: remote.meeting_id as string,
templateType: (remote.template_type as 'minutes' | 'report' | 'idea-note' | 'custom' | 'mindmap'),
title: remote.title as string,
content: (remote.content as string) ?? '',
promptUsed: (remote.prompt_used as string | null) ?? null,
llmModel: (remote.llm_model as string | null) ?? null,
llmLatencyMs: (remote.llm_latency_ms as number | null) ?? null,
updatedAt: remoteUpdated
}
if (existing.length > 0) {
if (existing[0].updatedAt >= remoteUpdated) continue
await db
.update(meetingDocuments)
.set(row)
.where(eq(meetingDocuments.id, remote.id as string))
applied++
} else {
await db.insert(meetingDocuments).values({
id: remote.id as string,
...row,
createdAt: remoteCreated
})
applied++
}
this.emit('sync-progress', {
current: applied,
total: remoteRows.length,
table: 'meeting_documents'
})
}
return applied
}, result)
this._lastSyncAt = Date.now()
logger.info(`Pull complete: applied=${result.pushed} errors=${result.errors.length}`)
this.emit('sync-complete', result)

65
apps/mobile/app/(tabs)/meetings.tsx
View file

@ -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' }
})

71
apps/mobile/app/(tabs)/profile.tsx
View file

@ -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 }
})

146
apps/mobile/app/(tabs)/record.tsx
View file

@ -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 }
})

113
apps/mobile/app/login.tsx
View file

@ -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'
}
})

45
apps/web/e2e/smoke.spec.ts Normal file
View file

@ -0,0 +1,45 @@
// apps/web/e2e/smoke.spec.ts
// 기본 스모크 테스트 — 인증 없이 접근 가능한 라우트 확인.
//
// 실행:
// npm install -D @playwright/test --workspace=@d3ro/web
// npx playwright install chromium --with-deps
// npm run test:e2e --workspace=@d3ro/web
import { test, expect } from '@playwright/test'
test.describe('Smoke: unauthenticated access', () => {
test('루트(/)는 /login으로 리다이렉트된다 (Supabase 미설정 시)', async ({ page }) => {
await page.goto('/')
await page.waitForURL(/\/login/, { timeout: 10000 })
expect(page.url()).toContain('/login')
})
test('/login 페이지가 로드되고 D3RO VOICE 로고가 표시된다', async ({ page }) => {
await page.goto('/login')
await expect(page.getByText(/D3RO VOICE/i)).toBeVisible({ timeout: 10000 })
})
test('/login에 Google/GitHub OAuth 버튼이 보인다', async ({ page }) => {
await page.goto('/login')
await expect(page.getByRole('button', { name: /Google/i })).toBeVisible()
await expect(page.getByRole('button', { name: /GitHub/i })).toBeVisible()
})
test('/dashboard는 미로그인 시 /login으로 리다이렉트', async ({ page }) => {
await page.goto('/dashboard')
await page.waitForURL(/\/login/, { timeout: 10000 })
expect(page.url()).toContain('/login')
})
test('/meetings도 미로그인 시 /login으로 리다이렉트', async ({ page }) => {
await page.goto('/meetings')
await page.waitForURL(/\/login/, { timeout: 10000 })
expect(page.url()).toContain('/login')
})
test('/accept-invite?token=bogus는 페이지 로드 (에러 메시지 표시)', async ({ page }) => {
await page.goto('/accept-invite?token=bogus')
await expect(page.getByText(/TEAM INVITE/i)).toBeVisible({ timeout: 10000 })
})
})

4
apps/web/package.json
View file

@ -8,7 +8,9 @@
"build": "next build",
"start": "next start --port 3000",
"typecheck": "tsc --noEmit",
"lint": "next lint"
"lint": "next lint",
"test:e2e": "playwright test",
"test:e2e:ui": "playwright test --ui"
},
"dependencies": {
"@d3ro/api-client": "*",

37
apps/web/playwright.config.ts Normal file
View file

@ -0,0 +1,37 @@
// apps/web/playwright.config.ts
// E2E 테스트 설정. 실제 실행을 위해 @playwright/test 설치 + browsers 설치 필요:
// npm install -D @playwright/test --workspace=@d3ro/web
// npx playwright install chromium --with-deps
import { defineConfig, devices } from '@playwright/test'
export default defineConfig({
testDir: './e2e',
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : undefined,
reporter: process.env.CI ? [['html'], ['github']] : 'html',
use: {
baseURL: process.env.E2E_BASE_URL ?? 'http://localhost:3000',
trace: 'on-first-retry',
screenshot: 'only-on-failure'
},
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] }
}
],
webServer: process.env.E2E_NO_SERVER
? undefined
: {
command: 'npm run dev',
url: 'http://localhost:3000',
reuseExistingServer: !process.env.CI,
timeout: 120 * 1000
}
})

34
apps/web/src/app/(app)/meetings/[id]/page.tsx
View file

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

183
apps/web/src/app/accept-invite/page.tsx Normal file
View 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>
)
}

112
apps/web/src/components/meetings/live-transcript-list.tsx Normal file
View file

@ -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>
)
}

194
apps/web/src/components/teams/invite-member-form.tsx
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>
</>

8
apps/web/src/lib/supabase-browser.ts
View file

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

2
apps/web/src/lib/supabase-server.ts
View file

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

2
apps/web/tsconfig.json
View file

@ -21,5 +21,5 @@
}
},
"include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
"exclude": ["node_modules", "e2e", "playwright.config.ts"]
}