yunchan/d3ro-voice
1
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions 2

feat(mobile): Phase M-1 모바일 프로젝트 기반 + V3 마스터 플랜

Browse source 
- V3 모바일 마스터 플랜 작성 (docs/v3/00-mobile-master-plan.md)
  11개 Phase, 5주 로드맵, 전략 결정사항 확정
- 7개 디자인 HTML 레퍼런스 저장 (docs/v3/designs/)
- app.json → app.config.ts 전환 + 환경변수 체계
- 5탭 네비게이션 (DASH/HIST/REC FAB/TALK/SET)
- metro.config.js monorepo 격리 (root RN 0.84 충돌 해결)
- ui-native 테마 디자인 목업 색상 동기화
- SafeArea 적용 (useSafeAreaInsets)
- DEV 로그인 우회 (__DEV__ 전용)
- Supabase .env 연동
- iOS 시뮬레이터 검증 완료
This commit is contained in:
윤찬 2026-04-13 03:22:15 +09:00
parent ffca07d120
commit 211673bc6c
30 changed files with 15010 additions and 525 deletions
Download patch file Download diff file Expand all files Collapse all files

150
docs/v3/designs/upgrade.html Normal file
View file

@ -0,0 +1,150 @@
<html lang="ko" vid="0"><head vid="1">
<meta charset="UTF-8" vid="2">
<meta name="viewport" content="width=device-width, initial-scale=1.0" vid="3">
<title vid="4">D3RO-VOICE Mobile - Upgrade</title>
<script src="https://cdn.tailwindcss.com/3.4.17" vid="5"></script>
<script vid="6">
tailwind.config = {
theme: {
extend: {
colors: {
appBg: '#19191b',
panelBg: '#242427',
insetBg: '#0f0f11',
brandOrange: '#ff5c35',
brandGreen: '#4ade80',
textMuted: '#71717a',
textMain: '#d4d4d8',
borderColor: '#2e2e32'
},
fontFamily: {
sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', "Liberation Mono", "Courier New", 'monospace'],
}
}
}
}
</script>
<style vid="7">
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-black min-h-screen flex items-center justify-center p-4" vid="8">
<div class="relative w-[375px] h-[812px] bg-appBg rounded-[40px] shadow-[0_0_50px_rgba(0,0,0,0.5)] overflow-hidden border-[8px] border-[#222] flex flex-col font-sans text-textMain" vid="9">
<div class="h-12 w-full flex justify-between items-end px-6 pb-2 text-[11px] font-medium text-white/90 z-20" vid="10">
<span vid="11">9:41</span>
<div class="flex items-center gap-1.5" vid="12">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" vid="13"><path d="M12 20V10" vid="14"></path><path d="M18 20V4" vid="15"></path><path d="M6 20v-4" vid="16"></path></svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" vid="17"><path d="M5 12.55a11 11 0 0 1 14.08 0" vid="18"></path><path d="M1.42 9a16 16 0 0 1 21.16 0" vid="19"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0" vid="20"></path><line x1="12" y1="20" x2="12.01" y2="20" vid="21"></line></svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" vid="22"><path d="M2 12C2 7.02944 6.02944 3 11 3H13C17.9706 3 22 7.02944 22 12C22 16.9706 17.9706 21 13 21H11C6.02944 21 2 16.9706 2 12Z" vid="23"></path></svg>
</div>
</div>
<header class="px-5 py-3 flex justify-between items-center z-10" vid="24">
<div class="flex items-center gap-2" vid="25">
<div class="w-2 h-2 rounded-full bg-brandOrange shadow-[0_0_8px_#ff5c35]" vid="26"></div>
<span class="text-[10px] tracking-[0.2em] font-mono text-textMuted" vid="27">SUBSCRIPTION</span>
</div>
<button class="w-8 h-8 flex items-center justify-center bg-panelBg border border-borderColor rounded-full text-textMuted hover:text-textMain transition-colors" vid="28">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="29"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" vid="30"></path></svg>
</button>
</header>
<main class="flex-1 overflow-y-auto no-scrollbar px-5 pb-24" vid="31">
<div class="text-center mt-4 mb-8" vid="32">
<h1 class="text-2xl font-semibold text-white mb-2 tracking-tight" vid="33">Unlock Full Potential</h1>
<p class="text-xs text-textMuted" vid="34">업그레이드하고 프리미엄 AI 모델을 무제한으로 사용하세요.</p>
</div>
<div class="bg-panelBg border border-borderColor rounded-2xl p-5 mb-4 relative overflow-hidden" vid="35">
<div class="flex justify-between items-start mb-4" vid="36">
<div vid="37">
<span class="text-[10px] font-mono text-textMuted mb-1 block" vid="38">CURRENT PLAN</span>
<h2 class="text-xl font-bold text-white tracking-tight" vid="39">FREE</h2>
</div>
<span class="text-xs font-mono text-textMuted" vid="40">$0 / mo</span>
</div>
<div class="space-y-4" vid="41">
<div class="flex flex-col gap-1.5" vid="42">
<div class="flex justify-between items-center text-xs" vid="43">
<span class="text-textMuted" vid="44">기본 음성 인식</span>
<span class="text-brandOrange font-mono" vid="45">무제한</span>
</div>
</div>
<div class="flex flex-col gap-1.5" vid="46">
<div class="flex justify-between items-center text-xs" vid="47">
<span class="text-textMuted" vid="48">로컬 AI (Gemma)</span>
<span class="text-brandOrange font-mono" vid="49">무제한</span>
</div>
</div>
<div class="flex flex-col gap-1.5 pt-2 border-t border-borderColor" vid="50">
<div class="flex justify-between items-center text-[11px] mb-1" vid="51">
<span class="text-brandGreen font-medium" vid="52">프리미엄 쿼터 (Haiku)</span>
<span class="text-white font-mono" vid="53">250 / 500</span>
</div>
<div class="h-1.5 w-full bg-insetBg rounded-full overflow-hidden" vid="54">
<div class="h-full bg-brandGreen rounded-full" style="width: 50%" vid="55"></div>
</div>
</div>
</div>
</div>
<div class="bg-insetBg border border-brandOrange/30 rounded-2xl p-5 relative overflow-hidden shadow-[inset_0_0_30px_rgba(255,92,53,0.05)]" vid="56">
<div class="absolute top-0 right-0 w-32 h-32 bg-brandOrange/10 blur-[40px] rounded-full -translate-y-1/2 translate-x-1/4" vid="57"></div>
<div class="relative z-10 flex justify-between items-start mb-4" vid="58">
<div vid="59">
<span class="text-[10px] font-mono text-brandOrange mb-1 block" vid="60">UPGRADE PLAN</span>
<h2 class="text-xl font-bold text-white tracking-tight" vid="61">PREMIUM</h2>
</div>
<div class="text-right" vid="62">
<span class="text-lg font-mono text-white" vid="63">$15</span>
<span class="text-[10px] font-mono text-textMuted" vid="64"> / mo</span>
</div>
</div>
<ul class="space-y-3 relative z-10 mb-6" vid="65">
<li class="flex items-start gap-2.5 text-xs text-textMain" vid="66">
<svg class="w-4 h-4 text-brandOrange shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="67"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" vid="68"></path></svg>
<span vid="69">Claude 3.5 Sonnet / Opus 무제한 사용</span>
</li>
<li class="flex items-start gap-2.5 text-xs text-textMain" vid="70">
<svg class="w-4 h-4 text-brandOrange shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="71"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" vid="72"></path></svg>
<span vid="73">GPT-4o 및 외부 API 연동 완벽 지원</span>
</li>
<li class="flex items-start gap-2.5 text-xs text-textMain" vid="74">
<svg class="w-4 h-4 text-brandOrange shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="75"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" vid="76"></path></svg>
<span vid="77">클라우드 세션 동기화 및 무제한 히스토리</span>
</li>
<li class="flex items-start gap-2.5 text-xs text-textMain" vid="78">
<svg class="w-4 h-4 text-brandOrange shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="79"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" vid="80"></path></svg>
<span vid="81">초정밀 오디오 향상 필터 적용</span>
</li>
</ul>
<button class="relative z-10 w-full bg-brandOrange hover:bg-[#ff7554] text-appBg font-bold py-3.5 rounded-xl transition-colors shadow-[0_0_15px_rgba(255,92,53,0.3)]" vid="82">
UPGRADE NOW
</button>
</div>
<div class="mt-6 text-center" vid="83">
<a href="#" class="text-[10px] text-textMuted underline underline-offset-2 hover:text-textMain transition-colors" vid="84">이용 약관 및 환불 정책 보기</a>
</div>
</main>
<div class="absolute bottom-2 left-1/2 -translate-x-1/2 w-[120px] h-1 bg-white/30 rounded-full z-40" vid="85"></div>
</div>
</body></html>