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 2026-04-09 21:36:38 +09:00
parent f97dd1f28a
commit 0785374804
42 changed files with 3815 additions and 323 deletions

View file

@ -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

View file

@ -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",
@ -279,4 +289,4 @@
"settings.hfTokenHint": "Ein HuggingFace Token wird für die Sprechertrennung benötigt",
"settings.diarization": "Sprechertrennung",
"settings.diarizationHint": "Sprecher werden nach der Aufnahme automatisch identifiziert"
}
}

View file

@ -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",
@ -480,4 +490,4 @@
"settings.hfTokenHint": "A HuggingFace token is required for speaker diarization",
"settings.diarization": "Speaker Diarization",
"settings.diarizationHint": "Automatically identify speakers after recording ends"
}
}

View file

@ -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",
@ -279,4 +289,4 @@
"settings.hfTokenHint": "Se necesita un token de HuggingFace para identificar hablantes",
"settings.diarization": "Identificación de hablantes",
"settings.diarizationHint": "Identifica automáticamente los hablantes al finalizar la grabación"
}
}

View file

@ -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",
@ -279,4 +289,4 @@
"settings.hfTokenHint": "Un token HuggingFace est requis pour l'identification des locuteurs",
"settings.diarization": "Identification des locuteurs",
"settings.diarizationHint": "Identifier automatiquement les locuteurs après l'enregistrement"
}
}

View file

@ -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": "ディクテーション",
@ -279,4 +289,4 @@
"settings.hfTokenHint": "話者分離にはHuggingFaceトークンが必要です",
"settings.diarization": "話者分離",
"settings.diarizationHint": "録音終了後に自動的に話者を識別します"
}
}

View file

@ -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": "받아쓰기",

View file

@ -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",
@ -279,4 +289,4 @@
"settings.hfTokenHint": "Um token do HuggingFace é necessário para identificar oradores",
"settings.diarization": "Identificação de oradores",
"settings.diarizationHint": "Identifica automaticamente os oradores após o término da gravação"
}
}

View file

@ -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": "Диктовка",
@ -279,4 +289,4 @@
"settings.hfTokenHint": "Токен HuggingFace необходим для определения говорящих",
"settings.diarization": "Диаризация",
"settings.diarizationHint": "Автоматически определять говорящих после завершения записи"
}
}

View file

@ -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": "การบอกเล่า",
@ -279,4 +289,4 @@
"settings.hfTokenHint": "ต้องใช้โทเค็น HuggingFace สำหรับการแยกผู้พูด",
"settings.diarization": "การแยกผู้พูด",
"settings.diarizationHint": "ระบุผู้พูดโดยอัตโนมัติหลังจากการบันทึกสิ้นสุด"
}
}

View file

@ -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ả",
@ -279,4 +289,4 @@
"settings.hfTokenHint": "Cần token HuggingFace để phân tách người nói",
"settings.diarization": "Phân tách người nói",
"settings.diarizationHint": "Tự động nhận dạng người nói sau khi ghi âm kết thúc"
}
}

View file

@ -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": "聽寫",
@ -279,4 +289,4 @@
"settings.hfTokenHint": "說話人分離需要HuggingFace令牌",
"settings.diarization": "說話人分離",
"settings.diarizationHint": "錄音結束後自動識別說話人"
}
}

View file

@ -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": "听写",
@ -279,4 +289,4 @@
"settings.hfTokenHint": "说话人分离需要HuggingFace令牌",
"settings.diarization": "说话人分离",
"settings.diarizationHint": "录音结束后自动识别说话人"
}
}

View 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": "*"
}
}

View 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} />
}

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

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

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

View 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'

View 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

View file

@ -0,0 +1,10 @@
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"noEmit": true,
"jsx": "react-native",
"lib": ["ES2022"],
"types": []
},
"include": ["src/**/*"]
}