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