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
|
|
@ -95,6 +95,16 @@ export function registerCloudSyncHandlers(): void {
|
|||
}
|
||||
})
|
||||
|
||||
ipcMain.handle(IPC_CHANNELS.CLOUD_SYNC.PULL_ALL, async () => {
|
||||
try {
|
||||
const result = await sync.pullAll()
|
||||
configSet('cloudSyncLastAt' as never, Date.now() as never)
|
||||
return ok(result)
|
||||
} catch (e) {
|
||||
return fail(e)
|
||||
}
|
||||
})
|
||||
|
||||
// 이벤트 → renderer 브로드캐스트
|
||||
function broadcast(channel: string, payload: unknown): void {
|
||||
BrowserWindow.getAllWindows().forEach((win) => {
|
||||
|
|
|
|||
|
|
@ -372,8 +372,199 @@ class CloudSyncService extends EventEmitter {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 원격 변경을 로컬 SQLite로 가져온다 (pull).
|
||||
*
|
||||
* Local-first + last-write-wins 충돌 해결:
|
||||
* - 로컬에 이미 있는 행: remote.updated_at > local.updated_at인 경우에만 UPDATE
|
||||
* - 로컬에 없는 행: INSERT
|
||||
* - 로컬에만 있는 행: 그대로 유지 (다음 push에서 원격으로 올라감)
|
||||
*
|
||||
* since: null이면 전체, 아니면 해당 epoch ms 이후의 원격 updated_at만
|
||||
*/
|
||||
async pullAll(): Promise<SyncResult> {
|
||||
if (!this._client || !this._session) {
|
||||
throw new D3ROError(ErrorCode.LLMServerUnreachable, '로그인이 필요합니다')
|
||||
}
|
||||
if (this._syncing) {
|
||||
throw new D3ROError(ErrorCode.LLMProcessingFailed, '이미 동기화 중입니다')
|
||||
}
|
||||
|
||||
this._syncing = true
|
||||
const result: SyncResult = { pushed: 0, errors: [] }
|
||||
const since = this._lastSyncAt ?? 0
|
||||
const sinceIso = new Date(since).toISOString()
|
||||
const db = getDatabase()
|
||||
|
||||
try {
|
||||
// 1) history
|
||||
result.pushed += await this._pullTable('history', async () => {
|
||||
const { data: remoteRows, error } = await this._client!.from('history')
|
||||
.select('*')
|
||||
.gt('updated_at', sinceIso)
|
||||
|
||||
if (error) throw new Error(error.message)
|
||||
if (!remoteRows || remoteRows.length === 0) return 0
|
||||
|
||||
let applied = 0
|
||||
for (const remote of remoteRows as Array<Record<string, unknown>>) {
|
||||
const remoteUpdated = remote.updated_at ? new Date(remote.updated_at as string).getTime() : 0
|
||||
const remoteCreated = remote.created_at ? new Date(remote.created_at as string).getTime() : remoteUpdated
|
||||
|
||||
// 로컬에 있는지 확인
|
||||
const existing = await db
|
||||
.select()
|
||||
.from(history)
|
||||
.where(eq(history.id, remote.id as string))
|
||||
.limit(1)
|
||||
|
||||
if (existing.length > 0) {
|
||||
// LWW: 로컬이 더 새로우면 skip
|
||||
if (existing[0].updatedAt >= remoteUpdated) continue
|
||||
await db
|
||||
.update(history)
|
||||
.set({
|
||||
title: (remote.title as string | null) ?? null,
|
||||
originalText: remote.original_text as string,
|
||||
polishedText: (remote.polished_text as string | null) ?? null,
|
||||
mode: (remote.mode as 'dictation' | 'translate' | 'command' | 'caption' | 'file-transcription'),
|
||||
status: (remote.status as 'completed' | 'cancelled' | 'error'),
|
||||
duration: (remote.duration as number),
|
||||
detectedLanguage: (remote.detected_language as string | null) ?? null,
|
||||
micDevice: (remote.mic_device as string | null) ?? null,
|
||||
wordCount: (remote.word_count as number) ?? 0,
|
||||
sttModel: (remote.stt_model as string | null) ?? null,
|
||||
llmModel: (remote.llm_model as string | null) ?? null,
|
||||
sttLatencyMs: (remote.stt_latency_ms as number | null) ?? null,
|
||||
llmLatencyMs: (remote.llm_latency_ms as number | null) ?? null,
|
||||
appVersion: (remote.app_version as string) ?? '1.0.0',
|
||||
summaryText: (remote.summary_text as string | null) ?? null,
|
||||
updatedAt: remoteUpdated
|
||||
})
|
||||
.where(eq(history.id, remote.id as string))
|
||||
applied++
|
||||
} else {
|
||||
await db.insert(history).values({
|
||||
id: remote.id as string,
|
||||
title: (remote.title as string | null) ?? null,
|
||||
originalText: remote.original_text as string,
|
||||
polishedText: (remote.polished_text as string | null) ?? null,
|
||||
focusedApp: null,
|
||||
focusedAppName: null,
|
||||
focusedAppWindowTitle: null,
|
||||
mode: (remote.mode as 'dictation' | 'translate' | 'command' | 'caption' | 'file-transcription'),
|
||||
status: (remote.status as 'completed' | 'cancelled' | 'error'),
|
||||
errorCode: null,
|
||||
audioLocalPath: null,
|
||||
duration: (remote.duration as number),
|
||||
detectedLanguage: (remote.detected_language as string | null) ?? null,
|
||||
micDevice: (remote.mic_device as string | null) ?? null,
|
||||
wordCount: (remote.word_count as number) ?? 0,
|
||||
sttModel: (remote.stt_model as string | null) ?? null,
|
||||
llmModel: (remote.llm_model as string | null) ?? null,
|
||||
sttLatencyMs: (remote.stt_latency_ms as number | null) ?? null,
|
||||
llmLatencyMs: (remote.llm_latency_ms as number | null) ?? null,
|
||||
createdAt: remoteCreated,
|
||||
updatedAt: remoteUpdated,
|
||||
appVersion: (remote.app_version as string) ?? '1.0.0',
|
||||
summaryText: (remote.summary_text as string | null) ?? null
|
||||
})
|
||||
applied++
|
||||
}
|
||||
this.emit('sync-progress', { current: applied, total: remoteRows.length, table: 'history' })
|
||||
}
|
||||
return applied
|
||||
}, result)
|
||||
|
||||
// 2) dictionary (동일 패턴)
|
||||
result.pushed += await this._pullTable('dictionary', async () => {
|
||||
const { data: remoteRows, error } = await this._client!.from('dictionary')
|
||||
.select('*')
|
||||
.gt('updated_at', sinceIso)
|
||||
|
||||
if (error) throw new Error(error.message)
|
||||
if (!remoteRows || remoteRows.length === 0) return 0
|
||||
|
||||
let applied = 0
|
||||
for (const remote of remoteRows as Array<Record<string, unknown>>) {
|
||||
const remoteUpdated = remote.updated_at ? new Date(remote.updated_at as string).getTime() : 0
|
||||
const remoteCreated = remote.created_at ? new Date(remote.created_at as string).getTime() : remoteUpdated
|
||||
|
||||
const existing = await db
|
||||
.select()
|
||||
.from(dictionary)
|
||||
.where(eq(dictionary.id, remote.id as string))
|
||||
.limit(1)
|
||||
|
||||
if (existing.length > 0) {
|
||||
if (existing[0].updatedAt >= remoteUpdated) continue
|
||||
await db
|
||||
.update(dictionary)
|
||||
.set({
|
||||
word: remote.word as string,
|
||||
pronunciation: (remote.pronunciation as string | null) ?? null,
|
||||
category: (remote.category as 'user' | 'auto' | 'technical') ?? 'user',
|
||||
usageCount: (remote.usage_count as number) ?? 0,
|
||||
lastUsedAt: remote.last_used_at ? new Date(remote.last_used_at as string).getTime() : null,
|
||||
updatedAt: remoteUpdated
|
||||
})
|
||||
.where(eq(dictionary.id, remote.id as string))
|
||||
applied++
|
||||
} else {
|
||||
await db.insert(dictionary).values({
|
||||
id: remote.id as string,
|
||||
word: remote.word as string,
|
||||
pronunciation: (remote.pronunciation as string | null) ?? null,
|
||||
category: (remote.category as 'user' | 'auto' | 'technical') ?? 'user',
|
||||
usageCount: (remote.usage_count as number) ?? 0,
|
||||
lastUsedAt: remote.last_used_at ? new Date(remote.last_used_at as string).getTime() : null,
|
||||
createdAt: remoteCreated,
|
||||
updatedAt: remoteUpdated
|
||||
})
|
||||
applied++
|
||||
}
|
||||
this.emit('sync-progress', {
|
||||
current: applied,
|
||||
total: remoteRows.length,
|
||||
table: 'dictionary'
|
||||
})
|
||||
}
|
||||
return applied
|
||||
}, result)
|
||||
|
||||
this._lastSyncAt = Date.now()
|
||||
logger.info(`Pull complete: applied=${result.pushed} errors=${result.errors.length}`)
|
||||
this.emit('sync-complete', result)
|
||||
return result
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : String(err)
|
||||
result.errors.push(message)
|
||||
logger.error(`Pull failed: ${message}`)
|
||||
this.emit('sync-error', { error: message })
|
||||
return result
|
||||
} finally {
|
||||
this._syncing = false
|
||||
}
|
||||
}
|
||||
|
||||
// ── 내부 헬퍼 ──────────────────────────────────────────
|
||||
|
||||
private async _pullTable(
|
||||
table: string,
|
||||
runner: () => Promise<number>,
|
||||
result: SyncResult
|
||||
): Promise<number> {
|
||||
this.emit('sync-progress', { current: 0, total: 0, table })
|
||||
try {
|
||||
return await runner()
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : String(err)
|
||||
result.errors.push(`${table}: ${message}`)
|
||||
logger.error(`Pull ${table} failed: ${message}`)
|
||||
return 0
|
||||
}
|
||||
}
|
||||
|
||||
private async _pushTable(
|
||||
table: string,
|
||||
total: number,
|
||||
|
|
|
|||
|
|
@ -692,6 +692,8 @@ const electronAPI = {
|
|||
signOut: () => invoke<unknown>(IPC_CHANNELS.CLOUD_SYNC.SIGN_OUT),
|
||||
pushAll: () =>
|
||||
invoke<{ pushed: number; errors: string[] }>(IPC_CHANNELS.CLOUD_SYNC.PUSH_ALL),
|
||||
pullAll: () =>
|
||||
invoke<{ pushed: number; errors: string[] }>(IPC_CHANNELS.CLOUD_SYNC.PULL_ALL),
|
||||
onAuthChanged: (callback: (data: { user: { id: string; email: string | null } | null }) => void) =>
|
||||
on<{ user: { id: string; email: string | null } | null }>(
|
||||
IPC_CHANNELS.CLOUD_SYNC.AUTH_CHANGED,
|
||||
|
|
|
|||
|
|
@ -133,6 +133,17 @@ export function CloudSyncSection(): React.ReactElement {
|
|||
}
|
||||
}
|
||||
|
||||
async function handlePull(): Promise<void> {
|
||||
setError(null)
|
||||
setBusy(true)
|
||||
setState((prev) => ({ ...prev, syncing: true }))
|
||||
try {
|
||||
await window.electronAPI.cloudSync.pullAll()
|
||||
} finally {
|
||||
// 완료/에러 이벤트로 setBusy(false) 처리됨
|
||||
}
|
||||
}
|
||||
|
||||
const lastSyncText = state.lastSyncAt
|
||||
? new Date(state.lastSyncAt).toLocaleString('ko-KR')
|
||||
: '없음'
|
||||
|
|
@ -239,9 +250,16 @@ export function CloudSyncSection(): React.ReactElement {
|
|||
disabled={busy || state.syncing}
|
||||
startIcon={state.syncing ? <CircularProgress size={16} /> : null}
|
||||
>
|
||||
{state.syncing ? '동기화 중...' : 'Sync Now'}
|
||||
{state.syncing ? '동기화 중...' : 'Push'}
|
||||
</Button>
|
||||
<Button variant="outlined" onClick={() => void handleSignOut()} disabled={busy}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => void handlePull()}
|
||||
disabled={busy || state.syncing}
|
||||
>
|
||||
Pull
|
||||
</Button>
|
||||
<Button variant="outlined" onClick={() => void handleSignOut()} disabled={busy} color="warning">
|
||||
로그아웃
|
||||
</Button>
|
||||
</Stack>
|
||||
|
|
|
|||
|
|
@ -29,11 +29,13 @@ import KeyboardIcon from '@mui/icons-material/Keyboard'
|
|||
import EditIcon from '@mui/icons-material/Edit'
|
||||
import MicIcon from '@mui/icons-material/Mic'
|
||||
import LockIcon from '@mui/icons-material/Lock'
|
||||
import CloudIcon from '@mui/icons-material/Cloud'
|
||||
import CheckCircleIcon from '@mui/icons-material/CheckCircle'
|
||||
import CancelIcon from '@mui/icons-material/Cancel'
|
||||
import { d3roPalette, d3roFontMono, d3roShadow } from '@d3ro/ui/theme'
|
||||
import { HotkeyRecordModal } from './HotkeyRecordModal'
|
||||
import { LicenseTab } from './LicenseTab'
|
||||
import { CloudSyncSection } from './CloudSyncSection'
|
||||
import { useI18n, LOCALE_META } from '@d3ro/i18n'
|
||||
import type { Locale } from '@d3ro/i18n'
|
||||
import type { ThemeMode, AppConfig, HotkeyBinding, AudioDevice } from '@d3ro/core/types'
|
||||
|
|
@ -372,6 +374,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
|
|||
<Tab label={t('settings.tabs.stt')} />
|
||||
<Tab label={t('settings.tabs.llm')} />
|
||||
<Tab label={t('license.nav')} icon={<LockIcon sx={{ fontSize: 14 }} />} iconPosition="start" />
|
||||
<Tab label={t('settings.tabs.cloud') ?? 'Cloud'} icon={<CloudIcon sx={{ fontSize: 14 }} />} iconPosition="start" />
|
||||
<Tab label={t('settings.tabs.about')} />
|
||||
</Tabs>
|
||||
<Box sx={{ p: 3 }}>
|
||||
|
|
@ -807,8 +810,13 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
|
|||
<LicenseTab />
|
||||
</TabPanel>
|
||||
|
||||
{/* ── 정보 탭 ──────────────────────────────── */}
|
||||
{/* ── Cloud Sync 탭 ──────────────────────────── */}
|
||||
<TabPanel value={activeTab} index={5}>
|
||||
<CloudSyncSection />
|
||||
</TabPanel>
|
||||
|
||||
{/* ── 정보 탭 ──────────────────────────────── */}
|
||||
<TabPanel value={activeTab} index={6}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2.5 }}>
|
||||
<Typography variant="overline" sx={{ color: d3roPalette.text.label, letterSpacing: '1.5px' }}>
|
||||
D3RO-VOICE
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@d3ro/ui-native": "file:../../packages/ui-native",
|
||||
"@react-native-async-storage/async-storage": "1.23.1",
|
||||
"@supabase/supabase-js": "^2.45.0",
|
||||
"expo": "~51.0.0",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
75
apps/web/src/app/(app)/meetings/page.tsx
Normal file
75
apps/web/src/app/(app)/meetings/page.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
17
apps/web/src/app/(app)/record/page.tsx
Normal file
17
apps/web/src/app/(app)/record/page.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
77
apps/web/src/components/billing/portal-button.tsx
Normal file
77
apps/web/src/components/billing/portal-button.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
2826
package-lock.json
generated
2826
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -375,6 +375,7 @@ export const IPC_CHANNELS = {
|
|||
SIGN_IN: 'cloudSync:signIn',
|
||||
SIGN_OUT: 'cloudSync:signOut',
|
||||
PUSH_ALL: 'cloudSync:pushAll',
|
||||
PULL_ALL: 'cloudSync:pullAll',
|
||||
HANDLE_CALLBACK: 'cloudSync:handleCallback',
|
||||
CONFIGURE: 'cloudSync:configure',
|
||||
// events
|
||||
|
|
|
|||
|
|
@ -6,6 +6,15 @@
|
|||
"nav.dictionary": "Wörterbuch",
|
||||
"nav.commands": "Befehle",
|
||||
"nav.settings": "Einstellungen",
|
||||
"nav.meetings": "Meetings",
|
||||
"nav.record": "Aufnehmen",
|
||||
"nav.teams": "Teams",
|
||||
"nav.billing": "Abrechnung",
|
||||
"nav.logout": "Abmelden",
|
||||
"login.subtitle": "KI-Sprachassistent",
|
||||
"login.google": "Mit Google fortfahren",
|
||||
"login.github": "Mit GitHub fortfahren",
|
||||
"login.terms": "Durch Fortfahren stimmen Sie den Nutzungsbedingungen und der Datenschutzrichtlinie zu.",
|
||||
"dashboard.sessionOverview": "Sitzungsübersicht",
|
||||
"dashboard.systemStatus": "Systemstatus",
|
||||
"dashboard.sessionsToday": "Sitzungen heute",
|
||||
|
|
@ -62,6 +71,7 @@
|
|||
"settings.tabs.audio": "Audio",
|
||||
"settings.tabs.stt": "STT",
|
||||
"settings.tabs.llm": "LLM",
|
||||
"settings.tabs.cloud": "Cloud",
|
||||
"settings.tabs.about": "Über",
|
||||
"settings.shortcuts": "Tastenkürzel",
|
||||
"settings.dictation": "Diktat",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,15 @@
|
|||
"nav.dictionary": "Dictionary",
|
||||
"nav.commands": "Commands",
|
||||
"nav.settings": "Settings",
|
||||
"nav.meetings": "Meetings",
|
||||
"nav.record": "Record",
|
||||
"nav.teams": "Teams",
|
||||
"nav.billing": "Billing",
|
||||
"nav.logout": "Logout",
|
||||
"login.subtitle": "AI Voice Assistant",
|
||||
"login.google": "Continue with Google",
|
||||
"login.github": "Continue with GitHub",
|
||||
"login.terms": "By continuing, you agree to the Terms of Service and Privacy Policy.",
|
||||
"dashboard.sessionOverview": "Session Overview",
|
||||
"dashboard.systemStatus": "System Status",
|
||||
"dashboard.sessionsToday": "Today's Sessions",
|
||||
|
|
@ -62,6 +71,7 @@
|
|||
"settings.tabs.audio": "Audio",
|
||||
"settings.tabs.stt": "STT",
|
||||
"settings.tabs.llm": "LLM",
|
||||
"settings.tabs.cloud": "Cloud",
|
||||
"settings.tabs.about": "About",
|
||||
"settings.shortcuts": "Shortcuts",
|
||||
"settings.dictation": "Dictation",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,15 @@
|
|||
"nav.dictionary": "Diccionario",
|
||||
"nav.commands": "Comandos",
|
||||
"nav.settings": "Ajustes",
|
||||
"nav.meetings": "Reuniones",
|
||||
"nav.record": "Grabar",
|
||||
"nav.teams": "Equipos",
|
||||
"nav.billing": "Facturación",
|
||||
"nav.logout": "Cerrar sesión",
|
||||
"login.subtitle": "Asistente de voz con IA",
|
||||
"login.google": "Continuar con Google",
|
||||
"login.github": "Continuar con GitHub",
|
||||
"login.terms": "Al continuar, aceptas los Términos de servicio y la Política de privacidad.",
|
||||
"dashboard.sessionOverview": "Resumen de sesión",
|
||||
"dashboard.systemStatus": "Estado del sistema",
|
||||
"dashboard.sessionsToday": "Sesiones hoy",
|
||||
|
|
@ -62,6 +71,7 @@
|
|||
"settings.tabs.audio": "Audio",
|
||||
"settings.tabs.stt": "STT",
|
||||
"settings.tabs.llm": "LLM",
|
||||
"settings.tabs.cloud": "Nube",
|
||||
"settings.tabs.about": "Acerca de",
|
||||
"settings.shortcuts": "Atajos",
|
||||
"settings.dictation": "Dictado",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,15 @@
|
|||
"nav.dictionary": "Dictionnaire",
|
||||
"nav.commands": "Commandes",
|
||||
"nav.settings": "Paramètres",
|
||||
"nav.meetings": "Réunions",
|
||||
"nav.record": "Enregistrer",
|
||||
"nav.teams": "Équipes",
|
||||
"nav.billing": "Facturation",
|
||||
"nav.logout": "Déconnexion",
|
||||
"login.subtitle": "Assistant vocal IA",
|
||||
"login.google": "Continuer avec Google",
|
||||
"login.github": "Continuer avec GitHub",
|
||||
"login.terms": "En continuant, vous acceptez les Conditions d'utilisation et la Politique de confidentialité.",
|
||||
"dashboard.sessionOverview": "Aperçu de session",
|
||||
"dashboard.systemStatus": "État du système",
|
||||
"dashboard.sessionsToday": "Sessions aujourd'hui",
|
||||
|
|
@ -62,6 +71,7 @@
|
|||
"settings.tabs.audio": "Audio",
|
||||
"settings.tabs.stt": "STT",
|
||||
"settings.tabs.llm": "LLM",
|
||||
"settings.tabs.cloud": "Cloud",
|
||||
"settings.tabs.about": "À propos",
|
||||
"settings.shortcuts": "Raccourcis",
|
||||
"settings.dictation": "Dictée",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,15 @@
|
|||
"nav.dictionary": "辞書",
|
||||
"nav.commands": "コマンド",
|
||||
"nav.settings": "設定",
|
||||
"nav.meetings": "会議",
|
||||
"nav.record": "録音",
|
||||
"nav.teams": "チーム",
|
||||
"nav.billing": "支払い",
|
||||
"nav.logout": "ログアウト",
|
||||
"login.subtitle": "AI音声アシスタント",
|
||||
"login.google": "Googleで続ける",
|
||||
"login.github": "GitHubで続ける",
|
||||
"login.terms": "続行すると、利用規約およびプライバシーポリシーに同意したものとみなされます。",
|
||||
"dashboard.sessionOverview": "セッション概要",
|
||||
"dashboard.systemStatus": "システム状態",
|
||||
"dashboard.sessionsToday": "本日のセッション",
|
||||
|
|
@ -62,6 +71,7 @@
|
|||
"settings.tabs.audio": "オーディオ",
|
||||
"settings.tabs.stt": "STT",
|
||||
"settings.tabs.llm": "LLM",
|
||||
"settings.tabs.cloud": "クラウド",
|
||||
"settings.tabs.about": "情報",
|
||||
"settings.shortcuts": "ショートカット",
|
||||
"settings.dictation": "ディクテーション",
|
||||
|
|
|
|||
|
|
@ -71,6 +71,7 @@
|
|||
"settings.tabs.audio": "오디오",
|
||||
"settings.tabs.stt": "STT",
|
||||
"settings.tabs.llm": "LLM",
|
||||
"settings.tabs.cloud": "클라우드",
|
||||
"settings.tabs.about": "정보",
|
||||
"settings.shortcuts": "단축키",
|
||||
"settings.dictation": "받아쓰기",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,15 @@
|
|||
"nav.dictionary": "Dicionário",
|
||||
"nav.commands": "Comandos",
|
||||
"nav.settings": "Configurações",
|
||||
"nav.meetings": "Reuniões",
|
||||
"nav.record": "Gravar",
|
||||
"nav.teams": "Equipes",
|
||||
"nav.billing": "Faturamento",
|
||||
"nav.logout": "Sair",
|
||||
"login.subtitle": "Assistente de voz com IA",
|
||||
"login.google": "Continuar com Google",
|
||||
"login.github": "Continuar com GitHub",
|
||||
"login.terms": "Ao continuar, você concorda com os Termos de Serviço e Política de Privacidade.",
|
||||
"dashboard.sessionOverview": "Visão geral da sessão",
|
||||
"dashboard.systemStatus": "Status do sistema",
|
||||
"dashboard.sessionsToday": "Sessões hoje",
|
||||
|
|
@ -62,6 +71,7 @@
|
|||
"settings.tabs.audio": "Áudio",
|
||||
"settings.tabs.stt": "STT",
|
||||
"settings.tabs.llm": "LLM",
|
||||
"settings.tabs.cloud": "Nuvem",
|
||||
"settings.tabs.about": "Sobre",
|
||||
"settings.shortcuts": "Atalhos",
|
||||
"settings.dictation": "Ditado",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,15 @@
|
|||
"nav.dictionary": "Словарь",
|
||||
"nav.commands": "Команды",
|
||||
"nav.settings": "Настройки",
|
||||
"nav.meetings": "Встречи",
|
||||
"nav.record": "Запись",
|
||||
"nav.teams": "Команды",
|
||||
"nav.billing": "Оплата",
|
||||
"nav.logout": "Выйти",
|
||||
"login.subtitle": "ИИ голосовой помощник",
|
||||
"login.google": "Продолжить с Google",
|
||||
"login.github": "Продолжить с GitHub",
|
||||
"login.terms": "Продолжая, вы соглашаетесь с условиями использования и политикой конфиденциальности.",
|
||||
"dashboard.sessionOverview": "Обзор сессий",
|
||||
"dashboard.systemStatus": "Состояние системы",
|
||||
"dashboard.sessionsToday": "Сессий сегодня",
|
||||
|
|
@ -62,6 +71,7 @@
|
|||
"settings.tabs.audio": "Аудио",
|
||||
"settings.tabs.stt": "STT",
|
||||
"settings.tabs.llm": "LLM",
|
||||
"settings.tabs.cloud": "Облако",
|
||||
"settings.tabs.about": "О программе",
|
||||
"settings.shortcuts": "Горячие клавиши",
|
||||
"settings.dictation": "Диктовка",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,15 @@
|
|||
"nav.dictionary": "พจนานุกรม",
|
||||
"nav.commands": "คำสั่ง",
|
||||
"nav.settings": "การตั้งค่า",
|
||||
"nav.meetings": "การประชุม",
|
||||
"nav.record": "บันทึกเสียง",
|
||||
"nav.teams": "ทีม",
|
||||
"nav.billing": "การเรียกเก็บเงิน",
|
||||
"nav.logout": "ออกจากระบบ",
|
||||
"login.subtitle": "ผู้ช่วย AI สำหรับเสียง",
|
||||
"login.google": "ดำเนินการต่อด้วย Google",
|
||||
"login.github": "ดำเนินการต่อด้วย GitHub",
|
||||
"login.terms": "การดำเนินการต่อ ถือว่าคุณยอมรับข้อกำหนดในการให้บริการและนโยบายความเป็นส่วนตัว",
|
||||
"dashboard.sessionOverview": "ภาพรวมเซสชัน",
|
||||
"dashboard.systemStatus": "สถานะระบบ",
|
||||
"dashboard.sessionsToday": "เซสชันวันนี้",
|
||||
|
|
@ -62,6 +71,7 @@
|
|||
"settings.tabs.audio": "เสียง",
|
||||
"settings.tabs.stt": "STT",
|
||||
"settings.tabs.llm": "LLM",
|
||||
"settings.tabs.cloud": "คลาวด์",
|
||||
"settings.tabs.about": "เกี่ยวกับ",
|
||||
"settings.shortcuts": "ปุ่มลัด",
|
||||
"settings.dictation": "การบอกเล่า",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,15 @@
|
|||
"nav.dictionary": "Từ điển",
|
||||
"nav.commands": "Lệnh",
|
||||
"nav.settings": "Cài đặt",
|
||||
"nav.meetings": "Cuộc họp",
|
||||
"nav.record": "Ghi âm",
|
||||
"nav.teams": "Nhóm",
|
||||
"nav.billing": "Thanh toán",
|
||||
"nav.logout": "Đăng xuất",
|
||||
"login.subtitle": "Trợ lý giọng nói AI",
|
||||
"login.google": "Tiếp tục với Google",
|
||||
"login.github": "Tiếp tục với GitHub",
|
||||
"login.terms": "Bằng cách tiếp tục, bạn đồng ý với Điều khoản Dịch vụ và Chính sách Bảo mật.",
|
||||
"dashboard.sessionOverview": "Tổng quan phiên",
|
||||
"dashboard.systemStatus": "Trạng thái hệ thống",
|
||||
"dashboard.sessionsToday": "Phiên hôm nay",
|
||||
|
|
@ -62,6 +71,7 @@
|
|||
"settings.tabs.audio": "Âm thanh",
|
||||
"settings.tabs.stt": "STT",
|
||||
"settings.tabs.llm": "LLM",
|
||||
"settings.tabs.cloud": "Đám mây",
|
||||
"settings.tabs.about": "Giới thiệu",
|
||||
"settings.shortcuts": "Phím tắt",
|
||||
"settings.dictation": "Chính tả",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,15 @@
|
|||
"nav.dictionary": "辭典",
|
||||
"nav.commands": "指令",
|
||||
"nav.settings": "設定",
|
||||
"nav.meetings": "會議",
|
||||
"nav.record": "錄音",
|
||||
"nav.teams": "團隊",
|
||||
"nav.billing": "帳單",
|
||||
"nav.logout": "登出",
|
||||
"login.subtitle": "AI語音助理",
|
||||
"login.google": "使用Google繼續",
|
||||
"login.github": "使用GitHub繼續",
|
||||
"login.terms": "繼續即表示您同意服務條款與隱私政策。",
|
||||
"dashboard.sessionOverview": "工作階段總覽",
|
||||
"dashboard.systemStatus": "系統狀態",
|
||||
"dashboard.sessionsToday": "今日工作階段",
|
||||
|
|
@ -62,6 +71,7 @@
|
|||
"settings.tabs.audio": "音訊",
|
||||
"settings.tabs.stt": "STT",
|
||||
"settings.tabs.llm": "LLM",
|
||||
"settings.tabs.cloud": "雲端",
|
||||
"settings.tabs.about": "關於",
|
||||
"settings.shortcuts": "快速鍵",
|
||||
"settings.dictation": "聽寫",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,15 @@
|
|||
"nav.dictionary": "词典",
|
||||
"nav.commands": "命令",
|
||||
"nav.settings": "设置",
|
||||
"nav.meetings": "会议",
|
||||
"nav.record": "录音",
|
||||
"nav.teams": "团队",
|
||||
"nav.billing": "账单",
|
||||
"nav.logout": "登出",
|
||||
"login.subtitle": "AI语音助手",
|
||||
"login.google": "使用Google继续",
|
||||
"login.github": "使用GitHub继续",
|
||||
"login.terms": "继续即表示您同意服务条款和隐私政策。",
|
||||
"dashboard.sessionOverview": "会话概览",
|
||||
"dashboard.systemStatus": "系统状态",
|
||||
"dashboard.sessionsToday": "今日会话",
|
||||
|
|
@ -62,6 +71,7 @@
|
|||
"settings.tabs.audio": "音频",
|
||||
"settings.tabs.stt": "STT",
|
||||
"settings.tabs.llm": "LLM",
|
||||
"settings.tabs.cloud": "云",
|
||||
"settings.tabs.about": "关于",
|
||||
"settings.shortcuts": "快捷键",
|
||||
"settings.dictation": "听写",
|
||||
|
|
|
|||
26
packages/ui-native/package.json
Normal file
26
packages/ui-native/package.json
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"name": "@d3ro/ui-native",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"description": "D3RO Voice React Native용 디자인 시스템 — MetalCard/PhosphorText/Led 등 (MUI 없음)",
|
||||
"license": "MIT",
|
||||
"main": "./src/index.ts",
|
||||
"types": "./src/index.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./src/index.ts",
|
||||
"default": "./src/index.ts"
|
||||
},
|
||||
"./theme": {
|
||||
"types": "./src/theme.ts",
|
||||
"default": "./src/theme.ts"
|
||||
}
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
}
|
||||
35
packages/ui-native/src/components/Led.tsx
Normal file
35
packages/ui-native/src/components/Led.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
// packages/ui-native/src/components/Led.tsx
|
||||
// RN용 Led — 작은 발광 원
|
||||
|
||||
import { View, type ViewStyle } from 'react-native'
|
||||
import { d3roNativePalette } from '../theme'
|
||||
|
||||
export interface LedProps {
|
||||
color?: 'amber' | 'green' | 'red' | 'orange' | 'blue'
|
||||
on?: boolean
|
||||
size?: number
|
||||
}
|
||||
|
||||
const COLOR_MAP: Record<string, string> = {
|
||||
amber: d3roNativePalette.accent.amber,
|
||||
green: d3roNativePalette.tag.green,
|
||||
red: d3roNativePalette.tag.red,
|
||||
orange: d3roNativePalette.tag.orange,
|
||||
blue: d3roNativePalette.tag.blue
|
||||
}
|
||||
|
||||
export function Led({ color = 'amber', on = true, size = 8 }: LedProps): React.ReactElement {
|
||||
const c = COLOR_MAP[color] ?? d3roNativePalette.accent.amber
|
||||
const style: ViewStyle = {
|
||||
width: size,
|
||||
height: size,
|
||||
borderRadius: size / 2,
|
||||
backgroundColor: on ? c : d3roNativePalette.led.off,
|
||||
shadowColor: c,
|
||||
shadowOffset: { width: 0, height: 0 },
|
||||
shadowOpacity: on ? 0.8 : 0,
|
||||
shadowRadius: on ? 4 : 0,
|
||||
elevation: on ? 2 : 0
|
||||
}
|
||||
return <View style={style} />
|
||||
}
|
||||
33
packages/ui-native/src/components/MetalCard.tsx
Normal file
33
packages/ui-native/src/components/MetalCard.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
// packages/ui-native/src/components/MetalCard.tsx
|
||||
// RN용 MetalCard — View + 섀시 스타일
|
||||
|
||||
import { View, type ViewProps, type ViewStyle, type StyleProp } from 'react-native'
|
||||
import { d3roNativePalette, d3roNativeRadius } from '../theme'
|
||||
|
||||
export interface MetalCardProps extends ViewProps {
|
||||
inset?: boolean
|
||||
style?: StyleProp<ViewStyle>
|
||||
}
|
||||
|
||||
export function MetalCard({ children, inset = false, style, ...rest }: MetalCardProps): React.ReactElement {
|
||||
const baseStyle: ViewStyle = {
|
||||
backgroundColor: inset ? d3roNativePalette.bg.inset : d3roNativePalette.bg.card,
|
||||
borderRadius: inset ? d3roNativeRadius.inner : d3roNativeRadius.card,
|
||||
padding: inset ? 6 : 16,
|
||||
borderWidth: inset ? 0 : 1,
|
||||
borderColor: d3roNativePalette.border.subtle,
|
||||
overflow: 'hidden',
|
||||
// RN 그림자
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: inset ? 0 : 0.25,
|
||||
shadowRadius: inset ? 0 : 8,
|
||||
elevation: inset ? 0 : 4
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[baseStyle, style]} {...rest}>
|
||||
{children}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
52
packages/ui-native/src/components/PhosphorText.tsx
Normal file
52
packages/ui-native/src/components/PhosphorText.tsx
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
// packages/ui-native/src/components/PhosphorText.tsx
|
||||
// RN용 PhosphorText — Text + 앰버 glow (textShadowColor)
|
||||
|
||||
import { Text, type TextProps, type TextStyle, type StyleProp } from 'react-native'
|
||||
import { d3roNativePalette, d3roNativeTypo, type D3roNativeTypoKey } from '../theme'
|
||||
|
||||
export type PhosphorVariant = D3roNativeTypoKey
|
||||
|
||||
export interface PhosphorTextProps extends TextProps {
|
||||
variant?: PhosphorVariant
|
||||
color?: 'amber' | 'primary' | 'secondary' | 'label' | 'muted'
|
||||
style?: StyleProp<TextStyle>
|
||||
}
|
||||
|
||||
export function PhosphorText({
|
||||
children,
|
||||
variant = 'body',
|
||||
color,
|
||||
style,
|
||||
...rest
|
||||
}: PhosphorTextProps): React.ReactElement {
|
||||
const typo = d3roNativeTypo[variant]
|
||||
const isAmberVariant = variant === 'hero' || variant === 'title' || variant === 'value'
|
||||
|
||||
const resolvedColor: string = (() => {
|
||||
if (color === 'amber') return d3roNativePalette.accent.amber
|
||||
if (color === 'primary') return d3roNativePalette.text.primary
|
||||
if (color === 'secondary') return d3roNativePalette.text.secondary
|
||||
if (color === 'label') return d3roNativePalette.text.label
|
||||
if (color === 'muted') return d3roNativePalette.text.muted
|
||||
return isAmberVariant ? d3roNativePalette.accent.amber : d3roNativePalette.text.primary
|
||||
})()
|
||||
|
||||
const baseStyle: TextStyle = {
|
||||
...typo,
|
||||
color: resolvedColor,
|
||||
fontFamily: 'monospace',
|
||||
...(isAmberVariant
|
||||
? {
|
||||
textShadowColor: d3roNativePalette.accent.amberGlow,
|
||||
textShadowOffset: { width: 0, height: 0 },
|
||||
textShadowRadius: 6
|
||||
}
|
||||
: {})
|
||||
}
|
||||
|
||||
return (
|
||||
<Text style={[baseStyle, style]} {...rest}>
|
||||
{children}
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
79
packages/ui-native/src/components/PhysicalButton.tsx
Normal file
79
packages/ui-native/src/components/PhysicalButton.tsx
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
// packages/ui-native/src/components/PhysicalButton.tsx
|
||||
// RN용 PhysicalButton — Pressable 기반 누르는 느낌
|
||||
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Pressable,
|
||||
Text,
|
||||
type PressableProps,
|
||||
type ViewStyle,
|
||||
type TextStyle,
|
||||
type StyleProp
|
||||
} from 'react-native'
|
||||
import { d3roNativePalette, d3roNativeRadius, d3roNativeTypo } from '../theme'
|
||||
|
||||
export interface PhysicalButtonProps extends Omit<PressableProps, 'children' | 'style'> {
|
||||
label: string
|
||||
variant?: 'primary' | 'secondary' | 'danger'
|
||||
disabled?: boolean
|
||||
style?: StyleProp<ViewStyle>
|
||||
}
|
||||
|
||||
export function PhysicalButton({
|
||||
label,
|
||||
variant = 'primary',
|
||||
disabled = false,
|
||||
style,
|
||||
onPress,
|
||||
...rest
|
||||
}: PhysicalButtonProps): React.ReactElement {
|
||||
const [pressed, setPressed] = useState(false)
|
||||
|
||||
const bgColor =
|
||||
variant === 'primary'
|
||||
? d3roNativePalette.accent.amber
|
||||
: variant === 'danger'
|
||||
? d3roNativePalette.tag.red
|
||||
: 'transparent'
|
||||
|
||||
const borderColor =
|
||||
variant === 'secondary' ? d3roNativePalette.border.strong : 'transparent'
|
||||
|
||||
const textColor =
|
||||
variant === 'primary' || variant === 'danger'
|
||||
? d3roNativePalette.text.primary
|
||||
: d3roNativePalette.text.secondary
|
||||
|
||||
const containerStyle: ViewStyle = {
|
||||
backgroundColor: bgColor,
|
||||
borderColor,
|
||||
borderWidth: variant === 'secondary' ? 1 : 0,
|
||||
borderRadius: d3roNativeRadius.button,
|
||||
paddingVertical: 14,
|
||||
paddingHorizontal: 24,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
opacity: disabled ? 0.4 : pressed ? 0.75 : 1,
|
||||
transform: [{ translateY: pressed && !disabled ? 1 : 0 }]
|
||||
}
|
||||
|
||||
const textStyle: TextStyle = {
|
||||
...d3roNativeTypo.heading,
|
||||
color: textColor,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 1.5
|
||||
}
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
onPress={onPress}
|
||||
onPressIn={() => setPressed(true)}
|
||||
onPressOut={() => setPressed(false)}
|
||||
disabled={disabled}
|
||||
style={[containerStyle, style]}
|
||||
{...rest}
|
||||
>
|
||||
<Text style={textStyle}>{label}</Text>
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
12
packages/ui-native/src/index.ts
Normal file
12
packages/ui-native/src/index.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
// packages/ui-native — RN용 DS 컴포넌트 barrel
|
||||
// apps/mobile이 file: 의존성으로 참조
|
||||
|
||||
export * from './theme'
|
||||
export { MetalCard, type MetalCardProps } from './components/MetalCard'
|
||||
export {
|
||||
PhosphorText,
|
||||
type PhosphorTextProps,
|
||||
type PhosphorVariant
|
||||
} from './components/PhosphorText'
|
||||
export { Led, type LedProps } from './components/Led'
|
||||
export { PhysicalButton, type PhysicalButtonProps } from './components/PhysicalButton'
|
||||
65
packages/ui-native/src/theme.ts
Normal file
65
packages/ui-native/src/theme.ts
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
// packages/ui-native/src/theme.ts
|
||||
// RN용 테마 토큰 — MUI 없이 순수 색상/타이포/그림자 값
|
||||
// packages/ui의 d3roPalette와 의도적으로 동기화 (RN은 CSS var 불가, 정적 값)
|
||||
|
||||
export const d3roNativePalette = {
|
||||
bg: {
|
||||
app: '#19191b',
|
||||
card: '#242427',
|
||||
cardHover: '#2a2a2d',
|
||||
elevated: '#2e2e32',
|
||||
sidebar: '#1e1f21',
|
||||
inset: '#1b1c1e',
|
||||
chassis: '#242528'
|
||||
},
|
||||
text: {
|
||||
primary: '#ffffff',
|
||||
secondary: '#8e8e93',
|
||||
label: '#7c7c82',
|
||||
disabled: '#4a4a4e',
|
||||
inactive: '#77797c',
|
||||
muted: '#3a3b3f'
|
||||
},
|
||||
accent: {
|
||||
amber: '#f25b29',
|
||||
amberDim: 'rgba(242, 91, 41, 0.15)',
|
||||
amberGlow: 'rgba(242, 91, 41, 0.6)'
|
||||
},
|
||||
border: {
|
||||
subtle: 'rgba(255,255,255,0.04)',
|
||||
default: 'rgba(255,255,255,0.08)',
|
||||
strong: 'rgba(255,255,255,0.12)'
|
||||
},
|
||||
tag: {
|
||||
purple: '#b854f5',
|
||||
orange: '#f59e0b',
|
||||
red: '#ef4444',
|
||||
green: '#22c55e',
|
||||
blue: '#3b82f6'
|
||||
},
|
||||
led: {
|
||||
off: '#111111'
|
||||
}
|
||||
} as const
|
||||
|
||||
export const d3roNativeTypo = {
|
||||
hero: { fontSize: 42, fontWeight: '300' as const, letterSpacing: -2, lineHeight: 42 },
|
||||
title: { fontSize: 28, fontWeight: '300' as const, letterSpacing: -1, lineHeight: 34 },
|
||||
value: { fontSize: 20, fontWeight: '400' as const, letterSpacing: 0.4, lineHeight: 20 },
|
||||
heading: { fontSize: 16, fontWeight: '600' as const, letterSpacing: 0.32, lineHeight: 22 },
|
||||
body: { fontSize: 14, fontWeight: '400' as const, letterSpacing: 0.14, lineHeight: 21 },
|
||||
small: { fontSize: 12, fontWeight: '600' as const, letterSpacing: 0.36, lineHeight: 17 },
|
||||
meta: { fontSize: 11, fontWeight: '600' as const, letterSpacing: 0.55, lineHeight: 14 },
|
||||
label: { fontSize: 10, fontWeight: '700' as const, letterSpacing: 2, lineHeight: 12 }
|
||||
} as const
|
||||
|
||||
export const d3roNativeRadius = {
|
||||
card: 22,
|
||||
inner: 12,
|
||||
button: 8,
|
||||
small: 6,
|
||||
pill: 999
|
||||
} as const
|
||||
|
||||
export type D3roNativePaletteKey = keyof typeof d3roNativePalette
|
||||
export type D3roNativeTypoKey = keyof typeof d3roNativeTypo
|
||||
10
packages/ui-native/tsconfig.json
Normal file
10
packages/ui-native/tsconfig.json
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"noEmit": true,
|
||||
"jsx": "react-native",
|
||||
"lib": ["ES2022"],
|
||||
"types": []
|
||||
},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
|
|
@ -87,6 +87,9 @@ verify_jwt = true
|
|||
[functions.stripe-checkout]
|
||||
verify_jwt = true
|
||||
|
||||
[functions.stripe-portal]
|
||||
verify_jwt = true
|
||||
|
||||
[functions.stripe-webhook]
|
||||
verify_jwt = false
|
||||
|
||||
|
|
|
|||
91
server/supabase/functions/stripe-portal/index.ts
Normal file
91
server/supabase/functions/stripe-portal/index.ts
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
// server/supabase/functions/stripe-portal/index.ts
|
||||
// Stripe Customer Portal 세션 생성 — 로그인한 사용자가 자신의 구독을 관리할 수 있도록.
|
||||
// 응답: { url } → 클라이언트가 redirect.
|
||||
|
||||
import { corsHeaders, handleCorsPreflightRequest } from '../_shared/cors.ts'
|
||||
import { requireUser, authErrorResponse, type AuthError } from '../_shared/auth.ts'
|
||||
import { createServiceRoleClient } from '../_shared/quota.ts'
|
||||
|
||||
interface PortalRequest {
|
||||
return_url: string
|
||||
}
|
||||
|
||||
// @ts-expect-error — Deno 런타임 전역
|
||||
Deno.serve(async (req: Request) => {
|
||||
const preflight = handleCorsPreflightRequest(req)
|
||||
if (preflight) return preflight
|
||||
|
||||
if (req.method !== 'POST') {
|
||||
return new Response(JSON.stringify({ error: 'Method not allowed' }), {
|
||||
status: 405,
|
||||
headers: { ...corsHeaders, 'Content-Type': 'application/json' }
|
||||
})
|
||||
}
|
||||
|
||||
try {
|
||||
const user = await requireUser(req)
|
||||
const body = (await req.json()) as PortalRequest
|
||||
|
||||
// @ts-expect-error — Deno.env
|
||||
const stripeKey = Deno.env.get('STRIPE_SECRET_KEY') ?? ''
|
||||
if (!stripeKey) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'stripe_not_configured' }),
|
||||
{ status: 503, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
|
||||
)
|
||||
}
|
||||
|
||||
// 기존 customer_id 조회
|
||||
const serviceClient = createServiceRoleClient()
|
||||
const { data: sub } = await serviceClient
|
||||
.from('subscriptions')
|
||||
.select('stripe_customer_id')
|
||||
.eq('user_id', user.id)
|
||||
.maybeSingle()
|
||||
|
||||
const customerId = (sub?.stripe_customer_id as string | null | undefined) ?? null
|
||||
if (!customerId) {
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
error: 'no_customer',
|
||||
message: '활성 구독이 없습니다. 먼저 업그레이드하세요.'
|
||||
}),
|
||||
{ status: 404, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
|
||||
)
|
||||
}
|
||||
|
||||
// Portal session 생성
|
||||
const portalResp = await fetch('https://api.stripe.com/v1/billing_portal/sessions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Authorization: `Bearer ${stripeKey}`,
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
body: new URLSearchParams({
|
||||
customer: customerId,
|
||||
return_url: body.return_url
|
||||
})
|
||||
})
|
||||
|
||||
if (!portalResp.ok) {
|
||||
const errText = await portalResp.text()
|
||||
throw new Error(`Portal 세션 생성 실패: ${errText}`)
|
||||
}
|
||||
|
||||
const data = (await portalResp.json()) as { url: string }
|
||||
|
||||
return new Response(JSON.stringify({ url: data.url }), {
|
||||
status: 200,
|
||||
headers: { ...corsHeaders, 'Content-Type': 'application/json' }
|
||||
})
|
||||
} catch (err) {
|
||||
if (err && typeof err === 'object' && 'status' in err && 'message' in err) {
|
||||
return authErrorResponse(err as AuthError, corsHeaders)
|
||||
}
|
||||
const message = err instanceof Error ? err.message : 'Unknown error'
|
||||
return new Response(JSON.stringify({ error: message }), {
|
||||
status: 500,
|
||||
headers: { ...corsHeaders, 'Content-Type': 'application/json' }
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -17,12 +17,71 @@ interface StripeEvent {
|
|||
}
|
||||
}
|
||||
|
||||
async function verifyStripeSignature(payload: string, signature: string, secret: string): Promise<boolean> {
|
||||
// 단순화: 본 스캐폴딩에서는 signature 검증 logic placeholder.
|
||||
// 정식 구현은 Stripe SDK의 stripe.webhooks.constructEvent 사용 또는
|
||||
// HMAC-SHA256으로 직접 검증.
|
||||
// https://stripe.com/docs/webhooks/signatures
|
||||
return Boolean(signature && secret && payload)
|
||||
/**
|
||||
* Stripe webhook signature 검증 — Web Crypto API 기반 HMAC-SHA256.
|
||||
*
|
||||
* Stripe-Signature 헤더 형식: "t=TIMESTAMP,v1=SIG,v1=SIG2,..."
|
||||
* 검증 방식: HMAC_SHA256(secret, `${timestamp}.${payload}`) 를 16진수로 인코딩하여
|
||||
* v1 시그니처 중 하나와 일치하면 valid.
|
||||
*
|
||||
* 또한 timestamp가 tolerance(5분) 이상 벗어나면 reject (replay 공격 방지).
|
||||
*
|
||||
* 참고: https://stripe.com/docs/webhooks/signatures
|
||||
*/
|
||||
async function verifyStripeSignature(
|
||||
payload: string,
|
||||
signatureHeader: string,
|
||||
secret: string,
|
||||
toleranceSec = 300
|
||||
): Promise<boolean> {
|
||||
if (!signatureHeader || !secret || !payload) return false
|
||||
|
||||
// 헤더 파싱
|
||||
const parts = signatureHeader.split(',').map((p) => p.trim())
|
||||
const timestampEntry = parts.find((p) => p.startsWith('t='))
|
||||
const v1Signatures = parts.filter((p) => p.startsWith('v1=')).map((p) => p.slice(3))
|
||||
|
||||
if (!timestampEntry || v1Signatures.length === 0) return false
|
||||
|
||||
const timestamp = Number(timestampEntry.slice(2))
|
||||
if (!Number.isFinite(timestamp)) return false
|
||||
|
||||
// Replay 방지: 5분 이상 오래된 요청 거부
|
||||
const nowSec = Math.floor(Date.now() / 1000)
|
||||
if (Math.abs(nowSec - timestamp) > toleranceSec) {
|
||||
return false
|
||||
}
|
||||
|
||||
// HMAC-SHA256 계산
|
||||
const signedPayload = `${timestamp}.${payload}`
|
||||
const key = await crypto.subtle.importKey(
|
||||
'raw',
|
||||
new TextEncoder().encode(secret),
|
||||
{ name: 'HMAC', hash: 'SHA-256' },
|
||||
false,
|
||||
['sign']
|
||||
)
|
||||
const sigBuffer = await crypto.subtle.sign('HMAC', key, new TextEncoder().encode(signedPayload))
|
||||
const expectedHex = Array.from(new Uint8Array(sigBuffer))
|
||||
.map((b) => b.toString(16).padStart(2, '0'))
|
||||
.join('')
|
||||
|
||||
// 타이밍 공격 방지: constant-time 비교
|
||||
for (const v1 of v1Signatures) {
|
||||
if (constantTimeEqual(v1, expectedHex)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
function constantTimeEqual(a: string, b: string): boolean {
|
||||
if (a.length !== b.length) return false
|
||||
let mismatch = 0
|
||||
for (let i = 0; i < a.length; i++) {
|
||||
mismatch |= a.charCodeAt(i) ^ b.charCodeAt(i)
|
||||
}
|
||||
return mismatch === 0
|
||||
}
|
||||
|
||||
// @ts-expect-error — Deno 런타임 전역
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue