feat(V2-6/V2-7/V2-8): Mobile MVP + Teams + Billing 스캐폴딩

V2-6 — Mobile (Expo) MVP
- apps/mobile/ 신규, npm workspace에서 제외 (Expo deps 부담 회피)
- Expo SDK 51 + Expo Router + AsyncStorage Supabase 클라이언트
- 화면: index/login/(tabs)/{meetings,record,profile}
- expo-av로 녹음 → Edge Function stt-proxy 호출
- expo-web-browser + expo-linking으로 OAuth 콜백 처리
- README에 setup/EAS build 가이드
- 루트 package.json workspaces를 명시 나열로 변경 (apps/mobile 제외)

V2-7 — 팀 기능 (Web)
- apps/web/src/app/teams/page.tsx — 가입한 팀 카드 그리드
- apps/web/src/app/teams/[id]/page.tsx — 멤버 + 공유 회의
- components/teams/create-team-form.tsx — 팀 생성 + owner 자동 team_members
- components/teams/invite-member-form.tsx — user_id 직접 초대 (V2-7b에서 invite flow)
- Sidebar에 Teams/Billing 메뉴 + 아이콘
- ko.json에 nav.teams/nav.billing 키 추가
- V2-2 teams/team_members RLS 활용

V2-8 — 결제 스캐폴딩
- apps/web/src/app/billing/page.tsx — Free/Pro/Team 가격표 + 현재 구독
- components/billing/checkout-button.tsx — Edge Function 호출 후 redirect
- server/supabase/functions/stripe-checkout/index.ts:
  - JWT 인증 -> 기존 customer 조회/생성 -> Checkout Session 생성
  - subscriptions 테이블에 customer_id upsert
- server/supabase/functions/stripe-webhook/index.ts:
  - checkout.session.completed -> subscriptions tier=pro/team active
  - customer.subscription.updated/created -> status/period 업데이트
  - customer.subscription.deleted -> tier=free, status=canceled
  - signature 검증은 placeholder (V2-8b에서 정식)
- server/supabase/config.toml에 두 함수 등록 (webhook verify_jwt=false)

검증:
- desktop typecheck OK (회귀 없음)
- web typecheck OK
- web next build OK (11 라우트)
- mobile은 별도 install 필요 (workspace 제외)

memory/project_status.md 갱신 — V2 마스터 플랜 전 페이즈 로컬 완료

apps/web/src/app/billing/page.tsx

@@ -0,0 +1,159 @@
+// apps/web/src/app/billing/page.tsx
+// 구독 및 결제 페이지 — 가격표 + 현재 티어 + Stripe checkout 시작
+
+import { redirect } from 'next/navigation'
+import { Box, Grid } from '@mui/material'
+import { MetalCard, PhosphorText } from '@d3ro/ui/components/ds'
+import { d3roPalette, typoSx } from '@d3ro/ui/theme'
+import { Sidebar } from '@/components/layout/sidebar'
+import { CheckoutButton } from '@/components/billing/checkout-button'
+import { getSupabaseServerClient, isSupabaseConfiguredServer } 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> {
+  if (!isSupabaseConfiguredServer()) {
+    redirect('/login')
+  }
+  const supabase = await getSupabaseServerClient()
+  const {
+    data: { user }
+  } = await supabase.auth.getUser()
+  if (!user) redirect('/login')
+
+  const currentTier = await loadCurrentTier()
+
+  return (
+    <Box sx={{ display: 'flex', minHeight: '100vh' }}>
+      <Sidebar />
+      <Box component="main" sx={{ flex: 1, p: 4, overflow: 'auto' }}>
+        <PhosphorText variant="title" sx={{ mb: 1 }}>
+          BILLING
+        </PhosphorText>
+        <Box sx={{ color: d3roPalette.text.muted, fontSize: 13, mb: 4 }}>
+          현재 구독: <strong>{currentTier.toUpperCase()}</strong>
+        </Box>
+
+        <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>
+    </Box>
+  )
+}

apps/web/src/app/teams/[id]/page.tsx

@@ -0,0 +1,153 @@
+// apps/web/src/app/teams/[id]/page.tsx
+// 팀 상세 — 멤버 리스트 + 초대 + 회의 공유 현황
+
+import { notFound, redirect } 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 { Sidebar } from '@/components/layout/sidebar'
+import { InviteMemberForm } from '@/components/teams/invite-member-form'
+import { getSupabaseServerClient, isSupabaseConfiguredServer } from '@/lib/supabase-server'
+
+interface PageProps {
+  params: Promise<{ id: string }>
+}
+
+export default async function TeamDetailPage({ params }: PageProps): Promise<React.ReactElement> {
+  const { id } = await params
+
+  if (!isSupabaseConfiguredServer()) {
+    redirect('/login')
+  }
+
+  const supabase = await getSupabaseServerClient()
+  const {
+    data: { user }
+  } = await supabase.auth.getUser()
+  if (!user) redirect('/login')
+
+  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={{ display: 'flex', minHeight: '100vh' }}>
+      <Sidebar />
+      <Box component="main" sx={{ flex: 1, p: 4, overflow: 'auto' }}>
+        <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>
+    </Box>
+  )
+}

apps/web/src/app/teams/page.tsx

@@ -0,0 +1,122 @@
+// apps/web/src/app/teams/page.tsx
+// 팀 리스트 + 새 팀 생성
+
+import Link from 'next/link'
+import { redirect } from 'next/navigation'
+import { Box, Grid } from '@mui/material'
+import { MetalCard, PhosphorText } from '@d3ro/ui/components/ds'
+import { d3roPalette, typoSx } from '@d3ro/ui/theme'
+import { Sidebar } from '@/components/layout/sidebar'
+import { CreateTeamForm } from '@/components/teams/create-team-form'
+import {
+  getSupabaseServerClient,
+  isSupabaseConfiguredServer
+} 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> {
+  if (!isSupabaseConfiguredServer()) {
+    redirect('/login')
+  }
+  const supabase = await getSupabaseServerClient()
+  const {
+    data: { user }
+  } = await supabase.auth.getUser()
+  if (!user) redirect('/login')
+
+  const teams = await loadTeams()
+
+  return (
+    <Box sx={{ display: 'flex', minHeight: '100vh' }}>
+      <Sidebar />
+      <Box component="main" sx={{ flex: 1, p: 4, overflow: 'auto' }}>
+        <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>
+    </Box>
+  )
+}