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/components/billing/checkout-button.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+// apps/web/src/components/billing/checkout-button.tsx
+// Stripe Checkout 시작 — Edge Function stripe-checkout 호출
+
+import { useState } from 'react'
+import { Button, CircularProgress, Alert, Box } from '@mui/material'
+import { getSupabaseBrowserClient } from '@/lib/supabase-browser'
+
+interface CheckoutButtonProps {
+  tier: 'pro' | 'team'
+}
+
+export function CheckoutButton({ tier }: CheckoutButtonProps): React.ReactElement {
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleCheckout(): Promise<void> {
+    setError(null)
+    setBusy(true)
+    try {
+      const supabase = getSupabaseBrowserClient()
+      const {
+        data: { session }
+      } = await supabase.auth.getSession()
+
+      if (!session) {
+        setError('로그인이 필요합니다')
+        return
+      }
+
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_SUPABASE_URL}/functions/v1/stripe-checkout`,
+        {
+          method: 'POST',
+          headers: {
+            Authorization: `Bearer ${session.access_token}`,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            tier,
+            success_url: `${window.location.origin}/billing?success=1`,
+            cancel_url: `${window.location.origin}/billing?canceled=1`
+          })
+        }
+      )
+
+      if (!response.ok) {
+        const txt = await response.text()
+        throw new Error(`Checkout 시작 실패: ${response.status} ${txt}`)
+      }
+
+      const data = (await response.json()) as { url?: string }
+      if (data.url) {
+        window.location.href = data.url
+      } else {
+        setError('Checkout URL을 받지 못했습니다')
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unknown error')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <Box>
+      <Button
+        fullWidth
+        variant="contained"
+        size="large"
+        onClick={() => void handleCheckout()}
+        disabled={busy}
+        startIcon={busy ? <CircularProgress size={16} color="inherit" /> : null}
+      >
+        업그레이드
+      </Button>
+      {error && (
+        <Alert severity="error" variant="outlined" sx={{ mt: 1, fontSize: 11 }}>
+          {error}
+        </Alert>
+      )}
+    </Box>
+  )
+}

apps/web/src/components/layout/sidebar.tsx

@@ -8,6 +8,8 @@ import { Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from
 import DashboardIcon from '@mui/icons-material/Dashboard'
 import MeetingRoomIcon from '@mui/icons-material/MeetingRoom'
 import MicIcon from '@mui/icons-material/Mic'
+import GroupsIcon from '@mui/icons-material/Groups'
+import PaymentIcon from '@mui/icons-material/Payment'
 import LogoutIcon from '@mui/icons-material/Logout'
 import { PhosphorText } from '@d3ro/ui/components/ds'
 import { d3roPalette } from '@d3ro/ui/theme'
@@ -44,6 +46,18 @@ export function Sidebar(): React.ReactElement {
       path: '/record',
       label: t('nav.record') ?? 'Record',
       icon: <MicIcon />
+    },
+    {
+      key: 'teams',
+      path: '/teams',
+      label: t('nav.teams') ?? 'Teams',
+      icon: <GroupsIcon />
+    },
+    {
+      key: 'billing',
+      path: '/billing',
+      label: t('nav.billing') ?? 'Billing',
+      icon: <PaymentIcon />
     }
   ]
 

apps/web/src/components/teams/create-team-form.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+// apps/web/src/components/teams/create-team-form.tsx
+// 새 팀 생성 폼
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { Box, Button, TextField, Stack, Alert } from '@mui/material'
+import AddIcon from '@mui/icons-material/Add'
+import { MetalCard } from '@d3ro/ui/components/ds'
+import { d3roPalette, typoSx } from '@d3ro/ui/theme'
+import { getSupabaseBrowserClient } from '@/lib/supabase-browser'
+
+export function CreateTeamForm(): React.ReactElement {
+  const router = useRouter()
+  const [name, setName] = useState('')
+  const [open, setOpen] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+
+  async function handleCreate(): Promise<void> {
+    if (!name.trim()) return
+    setError(null)
+    setBusy(true)
+    try {
+      const supabase = getSupabaseBrowserClient()
+      const {
+        data: { user }
+      } = await supabase.auth.getUser()
+      if (!user) {
+        setError('로그인이 필요합니다')
+        return
+      }
+
+      // teams 테이블 INSERT
+      const { data: team, error: teamErr } = await supabase
+        .from('teams')
+        .insert({ name: name.trim(), owner_id: user.id })
+        .select('id')
+        .single()
+
+      if (teamErr || !team) {
+        setError(teamErr?.message ?? '팀 생성 실패')
+        return
+      }
+
+      // owner를 team_members에 추가 (RLS owner 권한)
+      const { error: memberErr } = await supabase
+        .from('team_members')
+        .insert({ team_id: (team as { id: string }).id, user_id: user.id, role: 'owner' })
+
+      if (memberErr) {
+        setError(`멤버 등록 실패: ${memberErr.message}`)
+        return
+      }
+
+      setName('')
+      setOpen(false)
+      router.refresh()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  if (!open) {
+    return (
+      <Button variant="outlined" startIcon={<AddIcon />} onClick={() => setOpen(true)}>
+        새 팀 만들기
+      </Button>
+    )
+  }
+
+  return (
+    <MetalCard sx={{ p: 3, maxWidth: 480 }}>
+      <Box sx={{ ...typoSx('label'), color: d3roPalette.text.label, mb: 1 }}>새 팀 생성</Box>
+      <Stack spacing={2}>
+        <TextField
+          autoFocus
+          label="팀 이름"
+          size="small"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          fullWidth
+          disabled={busy}
+        />
+        {error && (
+          <Alert severity="error" variant="outlined">
+            {error}
+          </Alert>
+        )}
+        <Stack direction="row" spacing={1}>
+          <Button variant="contained" onClick={() => void handleCreate()} disabled={busy || !name.trim()}>
+            생성
+          </Button>
+          <Button
+            variant="outlined"
+            onClick={() => {
+              setOpen(false)
+              setName('')
+              setError(null)
+            }}
+            disabled={busy}
+          >
+            취소
+          </Button>
+        </Stack>
+      </Stack>
+    </MetalCard>
+  )
+}

apps/web/src/components/teams/invite-member-form.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+// apps/web/src/components/teams/invite-member-form.tsx
+// 팀 멤버 초대 — 이메일로 초대 (현재 MVP는 user_id 직접 입력)
+// 정식 초대 flow는 V2-7b에서 구현 (Supabase function + 이메일 발송)
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { Box, Button, TextField, Stack, Alert, Dialog, DialogContent, DialogTitle } from '@mui/material'
+import PersonAddIcon from '@mui/icons-material/PersonAdd'
+import { getSupabaseBrowserClient } from '@/lib/supabase-browser'
+
+interface InviteMemberFormProps {
+  teamId: string
+}
+
+export function InviteMemberForm({ teamId }: InviteMemberFormProps): React.ReactElement {
+  const router = useRouter()
+  const [open, setOpen] = useState(false)
+  const [userId, setUserId] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+
+  async function handleInvite(): Promise<void> {
+    if (!userId.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)
+        return
+      }
+
+      setUserId('')
+      setOpen(false)
+      router.refresh()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <>
+      <Button
+        variant="outlined"
+        size="small"
+        startIcon={<PersonAddIcon />}
+        onClick={() => setOpen(true)}
+      >
+        멤버 초대
+      </Button>
+
+      <Dialog open={open} onClose={() => setOpen(false)} 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>
+            </Stack>
+          </Stack>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}