feat(V2-X-b): UI 정리 + pull 동기화 + Stripe 서명 검증 + ui-native 패키지
묶음 A — UI 정리 + i18n 완성: [A1] desktop SettingsModal에 CloudSyncSection 통합 (탭 6번째) - CloudIcon import, settings.tabs.cloud 키 추가 - 기존 about 탭은 index 5 -> 6 [A2] apps/web Sidebar 공유 layout 리팩터링 - app/(app)/layout.tsx 신규 (route group) - dashboard/meetings/record/teams/billing을 (app)/ 아래로 git mv - app/(app)/layout.tsx에 auth 가드 + Sidebar 통합 - 기존 개별 page.tsx에서 Sidebar/auth 중복 제거 - app/(app)/dashboard/layout.tsx 제거 (루트 layout이 처리) [A3] 11개 locale에 V2 새 키 추가 (en/ja/zh/zh-TW/es/fr/de/pt/ru/vi/th) - nav.meetings/record/teams/billing/logout - login.subtitle/google/github/terms - settings.tabs.cloud 묶음 B — V2-4b pull 동기화: - CloudSyncService.pullAll() 신규 - history/dictionary 테이블 원격에서 fetch - last_sync_at 이후 updated_at만 필터 - Last-Write-Wins 충돌 해결 (remote.updated_at > local.updated_at) - 로컬에 없는 행은 INSERT, 있는 행은 UPDATE (구체적 컬럼 지정) - IPC CLOUD_SYNC.PULL_ALL 채널 + handler + preload api - CloudSyncSection에 Pull 버튼 추가 (Push 옆에 위치) 묶음 C — V2-8b Stripe webhook 서명 검증: - stripe-webhook Edge Function에 Web Crypto API 기반 HMAC-SHA256 검증 - Stripe-Signature 헤더 파싱 (t=, v1= 엔트리) - Replay 방지 (timestamp tolerance 300초) - constantTimeEqual로 타이밍 공격 방지 - crypto.subtle.importKey/sign으로 HMAC 계산 - stripe-portal Edge Function 신규 (Customer Portal) - JWT 인증 -> 기존 customer_id 조회 -> billing_portal/sessions 생성 - return_url 지원 - apps/web/components/billing/portal-button.tsx (구독 관리 버튼) - billing 페이지에 Free 외 tier 사용자에게 PortalButton 표시 - config.toml에 stripe-portal 함수 등록 (verify_jwt=true) 묶음 D — V2-6b packages/ui-native: - @d3ro/ui-native 신규 패키지 (React Native 전용 DS) - theme.ts: d3roNativePalette/Typo/Radius (MUI 없는 정적 값) - components/MetalCard.tsx: View + 섀시 섀도우 - components/PhosphorText.tsx: Text + 앰버 glow (textShadow) - components/Led.tsx: View 원 + glow - components/PhysicalButton.tsx: Pressable + 누름 느낌 - React/React-Native는 peerDependencies - apps/mobile/package.json에 @d3ro/ui-native를 file: 의존성으로 추가 (mobile은 npm workspace 제외이므로 file path 필요) 검증: - desktop typecheck OK - web typecheck OK - web next build OK (11 라우트, (app) 그룹 반영) - 회귀 없음
This commit is contained in:
yunchan8804
parent
f97dd1f28a
commit
0785374804
42 changed files with 3815 additions and 323 deletions
151
apps/web/src/app/(app)/billing/page.tsx
Normal file
151
apps/web/src/app/(app)/billing/page.tsx
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
// apps/web/src/app/(app)/billing/page.tsx
|
||||
// 구독 및 결제 페이지 — auth/Sidebar는 (app)/layout.tsx가 제공
|
||||
|
||||
import { Box, Grid, Stack } from '@mui/material'
|
||||
import { MetalCard, PhosphorText } from '@d3ro/ui/components/ds'
|
||||
import { d3roPalette, typoSx } from '@d3ro/ui/theme'
|
||||
import { CheckoutButton } from '@/components/billing/checkout-button'
|
||||
import { PortalButton } from '@/components/billing/portal-button'
|
||||
import { getSupabaseServerClient } from '@/lib/supabase-server'
|
||||
|
||||
interface Plan {
|
||||
tier: 'free' | 'pro' | 'team'
|
||||
name: string
|
||||
price: string
|
||||
features: string[]
|
||||
highlight?: boolean
|
||||
}
|
||||
|
||||
const PLANS: Plan[] = [
|
||||
{
|
||||
tier: 'free',
|
||||
name: 'Free',
|
||||
price: '$0',
|
||||
features: [
|
||||
'월 5시간 전사',
|
||||
'월 50회 LLM 처리',
|
||||
'1기기 동기화',
|
||||
'로컬 모델 (데스크톱)'
|
||||
]
|
||||
},
|
||||
{
|
||||
tier: 'pro',
|
||||
name: 'Pro',
|
||||
price: '$10/월',
|
||||
highlight: true,
|
||||
features: [
|
||||
'무제한 전사',
|
||||
'무제한 LLM 처리',
|
||||
'5기기 동기화',
|
||||
'Sonnet 모델 사용',
|
||||
'우선 지원'
|
||||
]
|
||||
},
|
||||
{
|
||||
tier: 'team',
|
||||
name: 'Team',
|
||||
price: '$20/인/월',
|
||||
features: [
|
||||
'Pro 모든 기능',
|
||||
'무제한 멤버',
|
||||
'팀 회의 공유',
|
||||
'관리자 대시보드',
|
||||
'Opus 모델 사용',
|
||||
'SSO/SAML (V2-8b)'
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
async function loadCurrentTier(): Promise<string> {
|
||||
try {
|
||||
const supabase = await getSupabaseServerClient()
|
||||
const { data } = await supabase.from('subscriptions').select('tier').maybeSingle()
|
||||
return ((data as { tier?: string } | null)?.tier as string) ?? 'free'
|
||||
} catch {
|
||||
return 'free'
|
||||
}
|
||||
}
|
||||
|
||||
export default async function BillingPage(): Promise<React.ReactElement> {
|
||||
const currentTier = await loadCurrentTier()
|
||||
|
||||
return (
|
||||
<Box sx={{ p: 4 }}>
|
||||
<Stack direction="row" alignItems="flex-end" justifyContent="space-between" sx={{ mb: 4 }}>
|
||||
<Box>
|
||||
<PhosphorText variant="title" sx={{ mb: 1 }}>
|
||||
BILLING
|
||||
</PhosphorText>
|
||||
<Box sx={{ color: d3roPalette.text.muted, fontSize: 13 }}>
|
||||
현재 구독: <strong>{currentTier.toUpperCase()}</strong>
|
||||
</Box>
|
||||
</Box>
|
||||
{currentTier !== 'free' && <PortalButton />}
|
||||
</Stack>
|
||||
|
||||
<Grid container spacing={3}>
|
||||
{PLANS.map((plan) => {
|
||||
const active = currentTier === plan.tier
|
||||
return (
|
||||
<Grid size={{ xs: 12, md: 4 }} key={plan.tier}>
|
||||
<MetalCard
|
||||
sx={{
|
||||
p: 4,
|
||||
height: '100%',
|
||||
border: active
|
||||
? `2px solid ${d3roPalette.accent.amber}`
|
||||
: plan.highlight
|
||||
? `2px solid ${d3roPalette.tag.purple}`
|
||||
: undefined
|
||||
}}
|
||||
>
|
||||
<Box sx={{ ...typoSx('label'), color: d3roPalette.text.label, mb: 1 }}>
|
||||
{plan.tier.toUpperCase()}
|
||||
</Box>
|
||||
<PhosphorText variant="title" sx={{ mb: 1 }}>
|
||||
{plan.name}
|
||||
</PhosphorText>
|
||||
<Box sx={{ ...typoSx('value'), color: d3roPalette.text.primary, mb: 3 }}>
|
||||
{plan.price}
|
||||
</Box>
|
||||
|
||||
<Box component="ul" sx={{ pl: 2, mb: 3, color: d3roPalette.text.secondary }}>
|
||||
{plan.features.map((f) => (
|
||||
<Box component="li" key={f} sx={{ fontSize: 13, mb: 0.5 }}>
|
||||
{f}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
{active ? (
|
||||
<Box
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
p: 1.5,
|
||||
bgcolor: d3roPalette.bg.inset,
|
||||
borderRadius: 1,
|
||||
color: d3roPalette.accent.amber,
|
||||
...typoSx('label')
|
||||
}}
|
||||
>
|
||||
현재 구독 중
|
||||
</Box>
|
||||
) : plan.tier === 'free' ? (
|
||||
<Box sx={{ textAlign: 'center', color: d3roPalette.text.muted, fontSize: 12 }}>
|
||||
기본 플랜
|
||||
</Box>
|
||||
) : (
|
||||
<CheckoutButton tier={plan.tier} />
|
||||
)}
|
||||
</MetalCard>
|
||||
</Grid>
|
||||
)
|
||||
})}
|
||||
</Grid>
|
||||
|
||||
<Box sx={{ mt: 4, color: d3roPalette.text.muted, fontSize: 11 }}>
|
||||
결제는 Stripe로 안전하게 처리됩니다. 언제든 취소할 수 있습니다.
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
104
apps/web/src/app/(app)/dashboard/page.tsx
Normal file
104
apps/web/src/app/(app)/dashboard/page.tsx
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
// apps/web/src/app/dashboard/page.tsx
|
||||
// 대시보드 — 요약 카드 4개 + 최근 회의
|
||||
|
||||
import { Box, Grid, 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'
|
||||
|
||||
interface Stat {
|
||||
label: string
|
||||
value: string
|
||||
hint?: string
|
||||
}
|
||||
|
||||
async function loadDashboardData(): Promise<{ stats: Stat[]; recentMeetings: Array<{ id: string; title: string; started_at: string }> }> {
|
||||
try {
|
||||
const supabase = await getSupabaseServerClient()
|
||||
|
||||
const [{ count: meetingCount }, { data: recent }] = await Promise.all([
|
||||
supabase.from('meetings').select('*', { count: 'exact', head: true }),
|
||||
supabase
|
||||
.from('meetings')
|
||||
.select('id, title, started_at')
|
||||
.order('started_at', { ascending: false })
|
||||
.limit(5)
|
||||
])
|
||||
|
||||
const stats: Stat[] = [
|
||||
{ label: '총 회의', value: String(meetingCount ?? 0), hint: '전체 기간' },
|
||||
{ label: '이번 주', value: '—', hint: '7일간' },
|
||||
{ label: '구독 티어', value: 'Free', hint: '업그레이드 가능' },
|
||||
{ label: '쿼터 사용', value: '0 / 50', hint: '오늘' }
|
||||
]
|
||||
|
||||
return {
|
||||
stats,
|
||||
recentMeetings: (recent ?? []).map((m) => ({
|
||||
id: m.id,
|
||||
title: m.title ?? '(제목 없음)',
|
||||
started_at: m.started_at
|
||||
}))
|
||||
}
|
||||
} catch {
|
||||
return {
|
||||
stats: [
|
||||
{ label: '총 회의', value: '—' },
|
||||
{ label: '이번 주', value: '—' },
|
||||
{ label: '구독 티어', value: '—' },
|
||||
{ label: '쿼터 사용', value: '—' }
|
||||
],
|
||||
recentMeetings: []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default async function DashboardPage(): Promise<React.ReactElement> {
|
||||
const { stats, recentMeetings } = await loadDashboardData()
|
||||
|
||||
return (
|
||||
<Box sx={{ p: 4 }}>
|
||||
<PhosphorText variant="title" sx={{ mb: 4 }}>
|
||||
DASHBOARD
|
||||
</PhosphorText>
|
||||
|
||||
<Grid container spacing={3} sx={{ mb: 4 }}>
|
||||
{stats.map((stat) => (
|
||||
<Grid size={{ xs: 12, sm: 6, md: 3 }} key={stat.label}>
|
||||
<MetalCard sx={{ p: 3, height: '100%' }}>
|
||||
<Box sx={{ color: d3roPalette.text.label, ...typoSx("label"), mb: 1 }}>
|
||||
{stat.label}
|
||||
</Box>
|
||||
<PhosphorText variant="title">
|
||||
{stat.value}
|
||||
</PhosphorText>
|
||||
{stat.hint && (
|
||||
<Box sx={{ mt: 1, color: d3roPalette.text.muted, fontSize: 11 }}>{stat.hint}</Box>
|
||||
)}
|
||||
</MetalCard>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
<PhosphorText variant="heading" sx={{ mb: 2 }}>
|
||||
RECENT MEETINGS
|
||||
</PhosphorText>
|
||||
<Stack spacing={2}>
|
||||
{recentMeetings.length === 0 ? (
|
||||
<MetalCard sx={{ p: 4, textAlign: 'center', color: d3roPalette.text.muted }}>
|
||||
아직 회의가 없습니다.
|
||||
</MetalCard>
|
||||
) : (
|
||||
recentMeetings.map((meeting) => (
|
||||
<MetalCard key={meeting.id} sx={{ p: 3 }}>
|
||||
<Box sx={{ color: d3roPalette.text.primary, ...typoSx("body") }}>{meeting.title}</Box>
|
||||
<Box sx={{ color: d3roPalette.text.muted, fontSize: 12, mt: 0.5 }}>
|
||||
{new Date(meeting.started_at).toLocaleString('ko-KR')}
|
||||
</Box>
|
||||
</MetalCard>
|
||||
))
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
36
apps/web/src/app/(app)/layout.tsx
Normal file
36
apps/web/src/app/(app)/layout.tsx
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
// apps/web/src/app/(app)/layout.tsx
|
||||
// 공유 레이아웃 — auth 가드 + Sidebar
|
||||
// route group `(app)`은 URL에 영향을 주지 않고 하위 모든 라우트에 적용.
|
||||
|
||||
import { redirect } from 'next/navigation'
|
||||
import { Box } from '@mui/material'
|
||||
import { Sidebar } from '@/components/layout/sidebar'
|
||||
import { getSupabaseServerClient, isSupabaseConfiguredServer } from '@/lib/supabase-server'
|
||||
|
||||
export default async function AppLayout({
|
||||
children
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}): Promise<React.ReactElement> {
|
||||
if (!isSupabaseConfiguredServer()) {
|
||||
redirect('/login')
|
||||
}
|
||||
|
||||
const supabase = await getSupabaseServerClient()
|
||||
const {
|
||||
data: { user }
|
||||
} = await supabase.auth.getUser()
|
||||
|
||||
if (!user) {
|
||||
redirect('/login')
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', minHeight: '100vh' }}>
|
||||
<Sidebar />
|
||||
<Box component="main" sx={{ flex: 1, overflow: 'auto' }}>
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
141
apps/web/src/app/(app)/meetings/[id]/page.tsx
Normal file
141
apps/web/src/app/(app)/meetings/[id]/page.tsx
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
// apps/web/src/app/(app)/meetings/[id]/page.tsx
|
||||
// 회의록 상세 — transcripts + 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'
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ id: string }>
|
||||
}
|
||||
|
||||
export default async function MeetingDetailPage({ params }: PageProps): Promise<React.ReactElement> {
|
||||
const { id } = await params
|
||||
|
||||
const supabase = await getSupabaseServerClient()
|
||||
|
||||
const [{ data: meeting }, { data: transcripts }, { data: memos }, { data: documents }] =
|
||||
await Promise.all([
|
||||
supabase.from('meetings').select('*').eq('id', id).maybeSingle(),
|
||||
supabase
|
||||
.from('transcripts')
|
||||
.select('*')
|
||||
.eq('meeting_id', id)
|
||||
.order('segment_index', { ascending: true }),
|
||||
supabase
|
||||
.from('meeting_memos')
|
||||
.select('*')
|
||||
.eq('meeting_id', id)
|
||||
.order('timestamp_ms', { ascending: true }),
|
||||
supabase
|
||||
.from('meeting_documents')
|
||||
.select('*')
|
||||
.eq('meeting_id', id)
|
||||
.order('created_at', { ascending: true })
|
||||
])
|
||||
|
||||
if (!meeting) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ p: 4 }}>
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<PhosphorText variant="title">
|
||||
{meeting.title ?? '(제목 없음)'}
|
||||
</PhosphorText>
|
||||
<Box sx={{ color: d3roPalette.text.muted, fontSize: 12, mt: 1 }}>
|
||||
{new Date(meeting.started_at).toLocaleString('ko-KR')} · {meeting.status}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Stack spacing={3}>
|
||||
{/* Transcript */}
|
||||
<MetalCard sx={{ p: 3 }}>
|
||||
<PhosphorText variant="heading" sx={{ mb: 2 }}>
|
||||
TRANSCRIPT
|
||||
</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>
|
||||
)}
|
||||
</MetalCard>
|
||||
|
||||
{/* Memos */}
|
||||
<MetalCard sx={{ p: 3 }}>
|
||||
<PhosphorText variant="heading" sx={{ mb: 2 }}>
|
||||
MEMOS
|
||||
</PhosphorText>
|
||||
{(memos ?? []).length === 0 ? (
|
||||
<Box sx={{ color: d3roPalette.text.muted, fontSize: 13 }}>메모가 없습니다.</Box>
|
||||
) : (
|
||||
<Stack spacing={1}>
|
||||
{(memos ?? []).map((memo) => (
|
||||
<Box
|
||||
key={memo.id}
|
||||
sx={{
|
||||
p: 1.5,
|
||||
borderLeft: `3px solid ${d3roPalette.accent.amber}`,
|
||||
bgcolor: d3roPalette.bg.inset
|
||||
}}
|
||||
>
|
||||
<Box sx={{ color: d3roPalette.text.primary, fontSize: 13 }}>{memo.content}</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</MetalCard>
|
||||
|
||||
{/* Documents */}
|
||||
<MetalCard sx={{ p: 3 }}>
|
||||
<PhosphorText variant="heading" sx={{ mb: 2 }}>
|
||||
DOCUMENTS
|
||||
</PhosphorText>
|
||||
{(documents ?? []).length === 0 ? (
|
||||
<Box sx={{ color: d3roPalette.text.muted, fontSize: 13 }}>
|
||||
생성된 문서가 없습니다.
|
||||
</Box>
|
||||
) : (
|
||||
<Stack spacing={1}>
|
||||
{(documents ?? []).map((doc) => (
|
||||
<Box
|
||||
key={doc.id}
|
||||
sx={{
|
||||
p: 2,
|
||||
bgcolor: d3roPalette.bg.inset,
|
||||
borderRadius: 1
|
||||
}}
|
||||
>
|
||||
<Box sx={{ ...typoSx("body"), color: d3roPalette.text.primary, mb: 0.5 }}>
|
||||
{doc.title}
|
||||
</Box>
|
||||
<Box sx={{ color: d3roPalette.text.label, fontSize: 11 }}>
|
||||
{doc.template_type} · {new Date(doc.created_at).toLocaleDateString('ko-KR')}
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</MetalCard>
|
||||
</Stack>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
75
apps/web/src/app/(app)/meetings/page.tsx
Normal file
75
apps/web/src/app/(app)/meetings/page.tsx
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
// apps/web/src/app/(app)/meetings/page.tsx
|
||||
// 회의록 리스트 — auth/Sidebar는 (app)/layout.tsx가 제공
|
||||
|
||||
import Link from 'next/link'
|
||||
import { Box, Grid } from '@mui/material'
|
||||
import { MetalCard, PhosphorText } from '@d3ro/ui/components/ds'
|
||||
import { d3roPalette, typoSx } from '@d3ro/ui/theme'
|
||||
import { getSupabaseServerClient } from '@/lib/supabase-server'
|
||||
|
||||
async function loadMeetings(): Promise<Array<{ id: string; title: string; started_at: string; status: string }>> {
|
||||
try {
|
||||
const supabase = await getSupabaseServerClient()
|
||||
const { data } = await supabase
|
||||
.from('meetings')
|
||||
.select('id, title, started_at, status')
|
||||
.order('started_at', { ascending: false })
|
||||
.limit(100)
|
||||
return (data ?? []).map((m) => ({
|
||||
id: m.id,
|
||||
title: m.title ?? '(제목 없음)',
|
||||
started_at: m.started_at,
|
||||
status: m.status
|
||||
}))
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
export default async function MeetingsPage(): Promise<React.ReactElement> {
|
||||
const meetings = await loadMeetings()
|
||||
|
||||
return (
|
||||
<Box sx={{ p: 4 }}>
|
||||
<PhosphorText variant="title" sx={{ mb: 4 }}>
|
||||
MEETINGS
|
||||
</PhosphorText>
|
||||
|
||||
{meetings.length === 0 ? (
|
||||
<MetalCard sx={{ p: 6, textAlign: 'center', color: d3roPalette.text.muted }}>
|
||||
아직 회의가 없습니다. Record 탭에서 새 녹음을 시작하세요.
|
||||
</MetalCard>
|
||||
) : (
|
||||
<Grid container spacing={3}>
|
||||
{meetings.map((meeting) => (
|
||||
<Grid size={{ xs: 12, sm: 6, md: 4 }} key={meeting.id}>
|
||||
<Link href={`/meetings/${meeting.id}`} style={{ textDecoration: 'none' }}>
|
||||
<MetalCard sx={{ p: 3, cursor: 'pointer', minHeight: 140 }}>
|
||||
<Box sx={{ ...typoSx('body'), color: d3roPalette.text.primary, mb: 1 }}>
|
||||
{meeting.title}
|
||||
</Box>
|
||||
<Box sx={{ color: d3roPalette.text.muted, fontSize: 12, mb: 2 }}>
|
||||
{new Date(meeting.started_at).toLocaleString('ko-KR')}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'inline-block',
|
||||
px: 1.5,
|
||||
py: 0.5,
|
||||
borderRadius: 1,
|
||||
fontSize: 11,
|
||||
bgcolor: d3roPalette.bg.inset,
|
||||
color: d3roPalette.text.label
|
||||
}}
|
||||
>
|
||||
{meeting.status}
|
||||
</Box>
|
||||
</MetalCard>
|
||||
</Link>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
17
apps/web/src/app/(app)/record/page.tsx
Normal file
17
apps/web/src/app/(app)/record/page.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
// apps/web/src/app/(app)/record/page.tsx
|
||||
// 녹음 페이지 — auth/Sidebar는 (app)/layout.tsx가 제공
|
||||
|
||||
import { Box } from '@mui/material'
|
||||
import { PhosphorText } from '@d3ro/ui/components/ds'
|
||||
import { MicRecorder } from '@/components/record/mic-recorder'
|
||||
|
||||
export default function RecordPage(): React.ReactElement {
|
||||
return (
|
||||
<Box sx={{ p: 4 }}>
|
||||
<PhosphorText variant="title" sx={{ mb: 4 }}>
|
||||
RECORD
|
||||
</PhosphorText>
|
||||
<MicRecorder />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
144
apps/web/src/app/(app)/teams/[id]/page.tsx
Normal file
144
apps/web/src/app/(app)/teams/[id]/page.tsx
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
// apps/web/src/app/(app)/teams/[id]/page.tsx
|
||||
// 팀 상세 — 멤버 리스트 + 초대 + 회의 공유 현황 — auth/Sidebar는 (app)/layout.tsx가 제공
|
||||
|
||||
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 { InviteMemberForm } from '@/components/teams/invite-member-form'
|
||||
import { getSupabaseServerClient } from '@/lib/supabase-server'
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ id: string }>
|
||||
}
|
||||
|
||||
export default async function TeamDetailPage({ params }: PageProps): Promise<React.ReactElement> {
|
||||
const { id } = await params
|
||||
|
||||
const supabase = await getSupabaseServerClient()
|
||||
const {
|
||||
data: { user }
|
||||
} = await supabase.auth.getUser()
|
||||
|
||||
const [{ data: team }, { data: members }, { data: meetings }] = await Promise.all([
|
||||
supabase.from('teams').select('id, name, owner_id, created_at').eq('id', id).maybeSingle(),
|
||||
supabase
|
||||
.from('team_members')
|
||||
.select('user_id, role, joined_at, profiles(id, name, avatar_url)')
|
||||
.eq('team_id', id),
|
||||
supabase
|
||||
.from('meetings')
|
||||
.select('id, title, started_at, status')
|
||||
.eq('team_id', id)
|
||||
.order('started_at', { ascending: false })
|
||||
.limit(20)
|
||||
])
|
||||
|
||||
if (!team) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
const teamData = team as { id: string; name: string; owner_id: string; created_at: string }
|
||||
const isOwner = teamData.owner_id === user?.id
|
||||
|
||||
return (
|
||||
<Box sx={{ p: 4 }}>
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<PhosphorText variant="title">{teamData.name}</PhosphorText>
|
||||
<Box sx={{ color: d3roPalette.text.muted, fontSize: 12, mt: 1 }}>
|
||||
생성 {new Date(teamData.created_at).toLocaleDateString('ko-KR')}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Stack spacing={3}>
|
||||
{/* 멤버 */}
|
||||
<MetalCard sx={{ p: 3 }}>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
sx={{ mb: 2 }}
|
||||
>
|
||||
<PhosphorText variant="heading">MEMBERS</PhosphorText>
|
||||
{isOwner && <InviteMemberForm teamId={teamData.id} />}
|
||||
</Stack>
|
||||
|
||||
<Stack spacing={1}>
|
||||
{((members ?? []) as Array<{
|
||||
user_id: string
|
||||
role: string
|
||||
joined_at: string
|
||||
profiles: { id: string; name: string | null; avatar_url: string | null } | null
|
||||
}>).map((m) => (
|
||||
<Box
|
||||
key={m.user_id}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
p: 1.5,
|
||||
bgcolor: d3roPalette.bg.inset,
|
||||
borderRadius: 1
|
||||
}}
|
||||
>
|
||||
<Box sx={{ color: d3roPalette.text.primary, fontSize: 13 }}>
|
||||
{m.profiles?.name ?? m.user_id.slice(0, 8)}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
...typoSx('label'),
|
||||
color:
|
||||
m.role === 'owner'
|
||||
? d3roPalette.tag.purple
|
||||
: m.role === 'admin'
|
||||
? d3roPalette.tag.orange
|
||||
: d3roPalette.tag.green
|
||||
}}
|
||||
>
|
||||
{m.role}
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
</MetalCard>
|
||||
|
||||
{/* 팀 회의 */}
|
||||
<MetalCard sx={{ p: 3 }}>
|
||||
<PhosphorText variant="heading" sx={{ mb: 2 }}>
|
||||
SHARED MEETINGS
|
||||
</PhosphorText>
|
||||
{(meetings ?? []).length === 0 ? (
|
||||
<Box sx={{ color: d3roPalette.text.muted, fontSize: 13 }}>
|
||||
팀과 공유된 회의가 없습니다.
|
||||
</Box>
|
||||
) : (
|
||||
<Stack spacing={1}>
|
||||
{((meetings ?? []) as Array<{
|
||||
id: string
|
||||
title: string | null
|
||||
started_at: string
|
||||
status: string
|
||||
}>).map((meeting) => (
|
||||
<Box
|
||||
key={meeting.id}
|
||||
sx={{
|
||||
p: 2,
|
||||
bgcolor: d3roPalette.bg.inset,
|
||||
borderRadius: 1
|
||||
}}
|
||||
>
|
||||
<Box sx={{ color: d3roPalette.text.primary, fontSize: 13 }}>
|
||||
{meeting.title ?? '(제목 없음)'}
|
||||
</Box>
|
||||
<Box sx={{ color: d3roPalette.text.muted, fontSize: 11, mt: 0.5 }}>
|
||||
{new Date(meeting.started_at).toLocaleString('ko-KR')} · {meeting.status}
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</MetalCard>
|
||||
</Stack>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
105
apps/web/src/app/(app)/teams/page.tsx
Normal file
105
apps/web/src/app/(app)/teams/page.tsx
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
// apps/web/src/app/(app)/teams/page.tsx
|
||||
// 팀 리스트 + 새 팀 생성 — auth/Sidebar는 (app)/layout.tsx가 제공
|
||||
|
||||
import Link from 'next/link'
|
||||
import { Box, Grid } from '@mui/material'
|
||||
import { MetalCard, PhosphorText } from '@d3ro/ui/components/ds'
|
||||
import { d3roPalette, typoSx } from '@d3ro/ui/theme'
|
||||
import { CreateTeamForm } from '@/components/teams/create-team-form'
|
||||
import { getSupabaseServerClient } from '@/lib/supabase-server'
|
||||
|
||||
interface TeamRow {
|
||||
id: string
|
||||
name: string
|
||||
avatar_url: string | null
|
||||
member_count: number
|
||||
role: 'owner' | 'admin' | 'member'
|
||||
}
|
||||
|
||||
async function loadTeams(): Promise<TeamRow[]> {
|
||||
try {
|
||||
const supabase = await getSupabaseServerClient()
|
||||
// 본인이 속한 팀만 RLS로 자동 필터링
|
||||
const { data: members } = await supabase
|
||||
.from('team_members')
|
||||
.select('team_id, role, teams(id, name, avatar_url)')
|
||||
|
||||
if (!members) return []
|
||||
|
||||
return members
|
||||
.filter((m: { teams: unknown }) => m.teams !== null)
|
||||
.map((m: { team_id: string; role: string; teams: unknown }) => {
|
||||
const team = m.teams as { id: string; name: string; avatar_url: string | null }
|
||||
return {
|
||||
id: team.id,
|
||||
name: team.name,
|
||||
avatar_url: team.avatar_url,
|
||||
member_count: 0, // count는 별도 query 필요. MVP에서는 생략
|
||||
role: m.role as 'owner' | 'admin' | 'member'
|
||||
}
|
||||
})
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
export default async function TeamsPage(): Promise<React.ReactElement> {
|
||||
const teams = await loadTeams()
|
||||
|
||||
return (
|
||||
<Box sx={{ p: 4 }}>
|
||||
<PhosphorText variant="title" sx={{ mb: 4 }}>
|
||||
TEAMS
|
||||
</PhosphorText>
|
||||
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<CreateTeamForm />
|
||||
</Box>
|
||||
|
||||
{teams.length === 0 ? (
|
||||
<MetalCard sx={{ p: 6, textAlign: 'center', color: d3roPalette.text.muted }}>
|
||||
아직 가입한 팀이 없습니다. 위에서 새 팀을 만들거나, 다른 팀에서 초대를 받아보세요.
|
||||
</MetalCard>
|
||||
) : (
|
||||
<Grid container spacing={3}>
|
||||
{teams.map((team) => (
|
||||
<Grid size={{ xs: 12, sm: 6, md: 4 }} key={team.id}>
|
||||
<Link href={`/teams/${team.id}`} style={{ textDecoration: 'none' }}>
|
||||
<MetalCard sx={{ p: 3, cursor: 'pointer', minHeight: 140 }}>
|
||||
<Box sx={{ ...typoSx('value'), color: d3roPalette.text.primary, mb: 1 }}>
|
||||
{team.name}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'inline-block',
|
||||
px: 1.5,
|
||||
py: 0.5,
|
||||
borderRadius: 1,
|
||||
fontSize: 10,
|
||||
bgcolor:
|
||||
team.role === 'owner'
|
||||
? d3roPalette.tag.purpleBg
|
||||
: team.role === 'admin'
|
||||
? d3roPalette.tag.orangeBg
|
||||
: d3roPalette.tag.greenBg,
|
||||
color:
|
||||
team.role === 'owner'
|
||||
? d3roPalette.tag.purple
|
||||
: team.role === 'admin'
|
||||
? d3roPalette.tag.orange
|
||||
: d3roPalette.tag.green,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '1px'
|
||||
}}
|
||||
>
|
||||
{team.role}
|
||||
</Box>
|
||||
</MetalCard>
|
||||
</Link>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue