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

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>
+    </>
+  )
+}