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) 그룹 반영)
- 회귀 없음

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

@@ -1,13 +1,12 @@
-// apps/web/src/app/billing/page.tsx
-// 구독 및 결제 페이지 — 가격표 + 현재 티어 + Stripe checkout 시작
+// apps/web/src/app/(app)/billing/page.tsx
+// 구독 및 결제 페이지 — auth/Sidebar는 (app)/layout.tsx가 제공
 
-import { redirect } from 'next/navigation'
-import { Box, Grid } from '@mui/material'
+import { Box, Grid, 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 { CheckoutButton } from '@/components/billing/checkout-button'
-import { getSupabaseServerClient, isSupabaseConfiguredServer } from '@/lib/supabase-server'
+import { PortalButton } from '@/components/billing/portal-button'
+import { getSupabaseServerClient } from '@/lib/supabase-server'
 
 interface Plan {
   tier: 'free' | 'pro' | 'team'
@@ -68,27 +67,21 @@ async function loadCurrentTier(): Promise<string> {
 }
 
 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 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) => {
@@ -150,9 +143,8 @@ export default async function BillingPage(): Promise<React.ReactElement> {
           })}
         </Grid>
 
-        <Box sx={{ mt: 4, color: d3roPalette.text.muted, fontSize: 11 }}>
-          결제는 Stripe로 안전하게 처리됩니다. 언제든 취소할 수 있습니다.
-        </Box>
+      <Box sx={{ mt: 4, color: d3roPalette.text.muted, fontSize: 11 }}>
+        결제는 Stripe로 안전하게 처리됩니다. 언제든 취소할 수 있습니다.
       </Box>
     </Box>
   )

apps/web/src/app/(app)/dashboard/page.tsx

@@ -57,7 +57,7 @@ export default async function DashboardPage(): Promise<React.ReactElement> {
   const { stats, recentMeetings } = await loadDashboardData()
 
   return (
-    <Box>
+    <Box sx={{ p: 4 }}>
       <PhosphorText variant="title" sx={{ mb: 4 }}>
         DASHBOARD
       </PhosphorText>

apps/web/src/app/(app)/layout.tsx

@@ -1,12 +1,13 @@
-// apps/web/src/app/dashboard/layout.tsx
-// 대시보드 섹션 레이아웃 — 인증 가드 + 사이드바
+// 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 DashboardLayout({
+export default async function AppLayout({
   children
 }: {
   children: React.ReactNode
@@ -27,7 +28,7 @@ export default async function DashboardLayout({
   return (
     <Box sx={{ display: 'flex', minHeight: '100vh' }}>
       <Sidebar />
-      <Box component="main" sx={{ flex: 1, p: 4, overflow: 'auto' }}>
+      <Box component="main" sx={{ flex: 1, overflow: 'auto' }}>
         {children}
       </Box>
     </Box>

apps/web/src/app/(app)/meetings/[id]/page.tsx

@@ -1,12 +1,11 @@
-// apps/web/src/app/meetings/[id]/page.tsx
+// apps/web/src/app/(app)/meetings/[id]/page.tsx
 // 회의록 상세 — transcripts + memos + documents
 
-import { notFound, redirect } from 'next/navigation'
+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, isSupabaseConfiguredServer } from '@/lib/supabase-server'
-import { Sidebar } from '@/components/layout/sidebar'
+import { d3roPalette, typoSx } from '@d3ro/ui/theme'
+import { getSupabaseServerClient } from '@/lib/supabase-server'
 
 interface PageProps {
   params: Promise<{ id: string }>
@@ -15,15 +14,7 @@ interface PageProps {
 export default async function MeetingDetailPage({ 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: meeting }, { data: transcripts }, { data: memos }, { data: documents }] =
     await Promise.all([
@@ -50,19 +41,17 @@ export default async function MeetingDetailPage({ params }: PageProps): Promise<
   }
 
   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">
-            {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 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}>
+      <Stack spacing={3}>
           {/* Transcript */}
           <MetalCard sx={{ p: 3 }}>
             <PhosphorText variant="heading" sx={{ mb: 2 }}>
@@ -145,9 +134,8 @@ export default async function MeetingDetailPage({ params }: PageProps): Promise<
                 ))}
               </Stack>
             )}
-          </MetalCard>
-        </Stack>
-      </Box>
+        </MetalCard>
+      </Stack>
     </Box>
   )
 }

apps/web/src/app/(app)/meetings/page.tsx

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

apps/web/src/app/(app)/record/page.tsx

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

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

@@ -1,13 +1,12 @@
-// apps/web/src/app/teams/[id]/page.tsx
-// 팀 상세 — 멤버 리스트 + 초대 + 회의 공유 현황
+// apps/web/src/app/(app)/teams/[id]/page.tsx
+// 팀 상세 — 멤버 리스트 + 초대 + 회의 공유 현황 — auth/Sidebar는 (app)/layout.tsx가 제공
 
-import { notFound, redirect } from 'next/navigation'
+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 { Sidebar } from '@/components/layout/sidebar'
 import { InviteMemberForm } from '@/components/teams/invite-member-form'
-import { getSupabaseServerClient, isSupabaseConfiguredServer } from '@/lib/supabase-server'
+import { getSupabaseServerClient } from '@/lib/supabase-server'
 
 interface PageProps {
   params: Promise<{ id: string }>
@@ -16,15 +15,10 @@ interface PageProps {
 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(),
@@ -45,18 +39,16 @@ export default async function TeamDetailPage({ params }: PageProps): Promise<Rea
   }
 
   const teamData = team as { id: string; name: string; owner_id: string; created_at: string }
-  const isOwner = teamData.owner_id === user.id
+  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 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}>
           {/* 멤버 */}
@@ -145,9 +137,8 @@ export default async function TeamDetailPage({ params }: PageProps): Promise<Rea
                 ))}
               </Stack>
             )}
-          </MetalCard>
-        </Stack>
-      </Box>
+        </MetalCard>
+      </Stack>
     </Box>
   )
 }

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

@@ -1,17 +1,12 @@
-// apps/web/src/app/teams/page.tsx
-// 팀 리스트 + 새 팀 생성
+// apps/web/src/app/(app)/teams/page.tsx
+// 팀 리스트 + 새 팀 생성 — auth/Sidebar는 (app)/layout.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'
+import { getSupabaseServerClient } from '@/lib/supabase-server'
 
 interface TeamRow {
   id: string
@@ -49,28 +44,17 @@ async function loadTeams(): Promise<TeamRow[]> {
 }
 
 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={{ p: 4 }}>
+      <PhosphorText variant="title" sx={{ mb: 4 }}>
+        TEAMS
+      </PhosphorText>
 
-        <Box sx={{ mb: 4 }}>
-          <CreateTeamForm />
-        </Box>
+      <Box sx={{ mb: 4 }}>
+        <CreateTeamForm />
+      </Box>
 
         {teams.length === 0 ? (
           <MetalCard sx={{ p: 6, textAlign: 'center', color: d3roPalette.text.muted }}>
@@ -113,10 +97,9 @@ export default async function TeamsPage(): Promise<React.ReactElement> {
                   </MetalCard>
                 </Link>
               </Grid>
-            ))}
-          </Grid>
-        )}
-      </Box>
+          ))}
+        </Grid>
+      )}
     </Box>
   )
 }

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

@@ -1,89 +0,0 @@
-// apps/web/src/app/meetings/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 { getSupabaseServerClient, isSupabaseConfiguredServer } from '@/lib/supabase-server'
-import { Sidebar } from '@/components/layout/sidebar'
-
-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> {
-  if (!isSupabaseConfiguredServer()) {
-    redirect('/login')
-  }
-  const supabase = await getSupabaseServerClient()
-  const {
-    data: { user }
-  } = await supabase.auth.getUser()
-  if (!user) redirect('/login')
-
-  const meetings = await loadMeetings()
-
-  return (
-    <Box sx={{ display: 'flex', minHeight: '100vh' }}>
-      <Sidebar />
-      <Box component="main" sx={{ flex: 1, p: 4, overflow: 'auto' }}>
-        <PhosphorText variant="title" sx={{ mb: 4 }}>
-          MEETINGS
-        </PhosphorText>
-
-        {meetings.length === 0 ? (
-          <MetalCard sx={{ p: 6, textAlign: 'center', color: d3roPalette.text.muted }}>
-            아직 회의가 없습니다. 우상단 마이크 메뉴에서 새 녹음을 시작하세요.
-          </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>
-    </Box>
-  )
-}

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

@@ -1,32 +0,0 @@
-// apps/web/src/app/record/page.tsx
-// 녹음 페이지
-
-import { redirect } from 'next/navigation'
-import { Box } from '@mui/material'
-import { PhosphorText } from '@d3ro/ui/components/ds'
-import { Sidebar } from '@/components/layout/sidebar'
-import { MicRecorder } from '@/components/record/mic-recorder'
-import { getSupabaseServerClient, isSupabaseConfiguredServer } from '@/lib/supabase-server'
-
-export default async function RecordPage(): 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, p: 4, overflow: 'auto' }}>
-        <PhosphorText variant="title" sx={{ mb: 4 }}>
-          RECORD
-        </PhosphorText>
-        <MicRecorder />
-      </Box>
-    </Box>
-  )
-}

apps/web/src/components/billing/portal-button.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+// apps/web/src/components/billing/portal-button.tsx
+// Stripe Customer Portal — 활성 구독 사용자가 결제 수단/취소 등을 관리
+
+import { useState } from 'react'
+import { Button, CircularProgress, Alert, Box } from '@mui/material'
+import SettingsIcon from '@mui/icons-material/Settings'
+import { getSupabaseBrowserClient } from '@/lib/supabase-browser'
+
+export function PortalButton(): React.ReactElement {
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleOpenPortal(): 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-portal`,
+        {
+          method: 'POST',
+          headers: {
+            Authorization: `Bearer ${session.access_token}`,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            return_url: `${window.location.origin}/billing`
+          })
+        }
+      )
+
+      if (!response.ok) {
+        const txt = await response.text()
+        throw new Error(`Portal 열기 실패: ${response.status} ${txt}`)
+      }
+
+      const data = (await response.json()) as { url?: string }
+      if (data.url) {
+        window.location.href = data.url
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unknown error')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <Box>
+      <Button
+        variant="outlined"
+        size="small"
+        startIcon={busy ? <CircularProgress size={14} /> : <SettingsIcon />}
+        onClick={() => void handleOpenPortal()}
+        disabled={busy}
+      >
+        구독 관리
+      </Button>
+      {error && (
+        <Alert severity="error" variant="outlined" sx={{ mt: 1, fontSize: 11 }}>
+          {error}
+        </Alert>
+      )}
+    </Box>
+  )
+}