oh
/
iykyka
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' 

# Conflicts:
#	docs/deploy-checklist.md
This commit is contained in:
Claude 2026-08-03 02:22:45 +00:00
parent 497c0ab537 e05a0f07ce
commit be9d5be7fe
No known key found for this signature in database
18 changed files with 571 additions and 672 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/deploy-checklist.md
View File

@ -38,9 +38,12 @@ Phase 1 **A~C** 이후 실행 트랙. 작업 단위를 하나씩 처리한다.
- 앱 코드는 클로즈드 베타 직전 수준
- **`https://msn.iykyka.com` 라이브 + N3 완료 + Gemini 실초안 OK + Track A/B 완료**
- 진행 중: **N4 FCM 코드 경로** → Master 시크릿 대기 → Android UI QA
- UI: **Soft Neutral + surface hierarchy** (`553cb62`) — GitHub `main` 머지 완료.
프로덕션 web 재빌드는 이 세션에 SSH/`.env`가 없어 보류 → 서버에서
`cd ~/project/ykavu && git pull && docker compose build web && docker compose up -d web`
- **발견(2026-07-31): Track C 콘텐츠 갭** — `PRD.md` P0 대비 단톡 따라잡기·관계별 페르소나·
스팸 감지 미구현. Master 액션(FCM 시크릿, 실기기 탭)과 별개로 지금 바로 코드 착수 가능
- 실 FCM 전송·Android 실기기 탭 · 사람 PoC 실행은 남음
스팸 감지 미구현. Master 액션(FCM 시크릿, 실기기 탭, 웹 재배포)과 별개로 지금 바로 코드 착수 가능
- 실 FCM 기기 수신 · Android 실기기 탭 · 사람 PoC 실행은 남음
### NEXT 순서

15
mobile/lib/screens/autonomy_settings_screen.dart
View File

@ -66,24 +66,27 @@ class _AutonomySettingsScreenState extends State<AutonomySettingsScreen> {
body: ListView(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 32),
children: [
Card(
Container(
decoration: BoxDecoration(
color: AppTheme.glassFill(theme.brightness),
borderRadius: BorderRadius.circular(AppTheme.rPanel),
border: Border.all(color: AppTheme.glassBorder(theme.brightness)),
),
child: Column(
children: [
ListTile(
leading: const Icon(Icons.privacy_tip_outlined),
title: const Text('데이터 흐름'),
subtitle: const Text('무엇이 기기에 남고 서버로 가는지'),
trailing: const Icon(Icons.chevron_right),
trailing: const Icon(Icons.chevron_right, size: 18),
onTap: () {
Navigator.of(context).push(MaterialPageRoute(builder: (_) => const DataFlowScreen()));
},
),
const Divider(height: 1, indent: 16, endIndent: 16),
Divider(height: 1, indent: 16, endIndent: 16, color: AppTheme.glassBorder(theme.brightness)),
ListTile(
leading: const Icon(Icons.devices),
title: const Text('로그인 세션'),
subtitle: const Text('멀티 디바이스 세션 목록'),
trailing: const Icon(Icons.chevron_right),
trailing: const Icon(Icons.chevron_right, size: 18),
onTap: () {
Navigator.of(context).push(MaterialPageRoute(builder: (_) => const SessionsScreen()));
},

27
mobile/lib/screens/chat_screen.dart
View File

@ -256,10 +256,10 @@ class _ChatScreenState extends State<ChatScreen> {
if (draft.isEscalate) {
return Container(
margin: const EdgeInsets.fromLTRB(12, 0, 12, 8),
padding: const EdgeInsets.all(16),
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: theme.colorScheme.errorContainer.withOpacity(0.85),
borderRadius: BorderRadius.circular(16),
color: theme.colorScheme.errorContainer.withValues(alpha: 0.55),
borderRadius: BorderRadius.circular(AppTheme.rPanel),
border: Border.all(color: AppTheme.glassBorder(theme.brightness)),
),
child: Column(
@ -300,32 +300,27 @@ class _ChatScreenState extends State<ChatScreen> {
return Container(
margin: const EdgeInsets.fromLTRB(12, 0, 12, 8),
padding: const EdgeInsets.all(16),
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: theme.colorScheme.secondaryContainer.withOpacity(0.85),
borderRadius: BorderRadius.circular(16),
color: AppTheme.glassFill(theme.brightness),
borderRadius: BorderRadius.circular(AppTheme.rPanel),
border: Border.all(color: AppTheme.glassBorder(theme.brightness)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
children: [
Icon(Icons.auto_awesome, size: 18, color: theme.colorScheme.onSecondaryContainer),
const SizedBox(width: 6),
Expanded(
child: Text(
Text(
title,
style: theme.textTheme.titleSmall?.copyWith(color: theme.colorScheme.onSecondaryContainer),
style: theme.textTheme.titleSmall?.copyWith(
color: theme.colorScheme.onSurface,
fontWeight: FontWeight.w600,
),
),
],
),
if (isL0) ...[
const SizedBox(height: 6),
Text(
'L0에서는 와카뷰 발송이 막혀 있습니다. 초안을 입력창으로 옮긴 뒤 직접 보내거나, 메뉴 → 자율성에서 L1으로 바꾸세요.',
style: theme.textTheme.bodySmall?.copyWith(color: theme.colorScheme.onSecondaryContainer),
style: theme.textTheme.bodySmall?.copyWith(color: theme.colorScheme.onSurfaceVariant),
),
],
const SizedBox(height: 10),

17
mobile/lib/screens/contacts_screen.dart
View File

@ -299,8 +299,6 @@ class _ContactsScreenState extends State<ContactsScreen> {
padding: const EdgeInsets.symmetric(vertical: 48, horizontal: 32),
child: Column(
children: [
Icon(Icons.person_add_outlined, size: 40, color: theme.colorScheme.outline),
const SizedBox(height: 12),
Text('연락처가 없습니다', style: theme.textTheme.titleMedium),
const SizedBox(height: 8),
Text(
@ -316,16 +314,16 @@ class _ContactsScreenState extends State<ContactsScreen> {
),
),
for (final c in _contacts)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
child: ListTile(
ListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 2),
leading: CircleAvatar(
backgroundColor: theme.colorScheme.secondaryContainer,
radius: 20,
backgroundColor: theme.colorScheme.surfaceContainerHighest,
child: Text(
c.displayName.isEmpty ? '?' : c.displayName.substring(0, 1),
style: TextStyle(
color: theme.colorScheme.onSecondaryContainer,
fontWeight: FontWeight.w700,
color: theme.colorScheme.onSurfaceVariant,
fontWeight: FontWeight.w600,
),
),
),
@ -347,7 +345,7 @@ class _ContactsScreenState extends State<ContactsScreen> {
mainAxisSize: MainAxisSize.min,
children: [
if (c.contactUserId != null) ...[
FilledButton.tonal(
TextButton(
onPressed: () => _startChat(c),
child: const Text('대화'),
),
@ -376,7 +374,6 @@ class _ContactsScreenState extends State<ContactsScreen> {
}
},
),
),
const SizedBox(height: 72),
],
),

131
mobile/lib/screens/conversation_list_screen.dart
View File

@ -4,7 +4,6 @@ import 'package:provider/provider.dart';
import '../models/models.dart';
import '../services/api_client.dart';
import '../state/session_state.dart';
import '../theme/app_theme.dart';
import '../widgets/gradient_text.dart';
import '../widgets/my_user_id_chip.dart';
import 'autonomy_settings_screen.dart';
@ -155,14 +154,18 @@ class _ConversationListScreenState extends State<ConversationListScreen> {
}
Color _avatarColor(BuildContext context, int seed) {
final scheme = Theme.of(context).colorScheme;
final palette = [scheme.primaryContainer, scheme.tertiaryContainer, scheme.secondaryContainer];
final isDark = Theme.of(context).brightness == Brightness.dark;
final palette = isDark
? const [Color(0xFF1C1C1C), Color(0xFF22262E), Color(0xFF242018)]
: const [Color(0xFFF4F4F5), Color(0xFFE8EEF4), Color(0xFFF3F0EA)];
return palette[seed % palette.length];
}
Color _onAvatarColor(BuildContext context, int seed) {
final scheme = Theme.of(context).colorScheme;
final palette = [scheme.onPrimaryContainer, scheme.onTertiaryContainer, scheme.onSecondaryContainer];
final isDark = Theme.of(context).brightness == Brightness.dark;
final palette = isDark
? const [Color(0xFFA3A3A3), Color(0xFF8BB4D9), Color(0xFFC4A574)]
: const [Color(0xFF525252), Color(0xFF3B6D9B), Color(0xFF9A7B4F)];
return palette[seed % palette.length];
}
@ -220,10 +223,10 @@ class _ConversationListScreenState extends State<ConversationListScreen> {
const SizedBox(width: 4),
],
),
floatingActionButton: FloatingActionButton.extended(
floatingActionButton: FloatingActionButton(
onPressed: _createConversation,
icon: const Icon(Icons.chat),
label: const Text('새 대화'),
tooltip: '새 대화',
child: const Icon(Icons.chat_outlined),
),
body: RefreshIndicator(
onRefresh: _load,
@ -254,23 +257,6 @@ class _ConversationListScreenState extends State<ConversationListScreen> {
padding: const EdgeInsets.fromLTRB(32, 48, 32, 32),
child: Column(
children: [
Container(
width: 72,
height: 72,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: AppTheme.brandGradient,
boxShadow: [
BoxShadow(
color: const Color(0xFF6D5BD0).withValues(alpha: 0.3),
blurRadius: 24,
offset: const Offset(0, 10),
),
],
),
child: const Icon(Icons.chat_bubble_outline, size: 30, color: Colors.white),
),
const SizedBox(height: 16),
Text('대화방이 없습니다', style: theme.textTheme.titleMedium),
const SizedBox(height: 8),
Text(
@ -280,57 +266,26 @@ class _ConversationListScreenState extends State<ConversationListScreen> {
textAlign: TextAlign.center,
style: theme.textTheme.bodySmall?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
height: 1.45,
height: 1.5,
),
),
const SizedBox(height: 16),
FilledButton.tonalIcon(
const SizedBox(height: 18),
OutlinedButton(
onPressed: () async {
await Navigator.of(context).push(
MaterialPageRoute(builder: (_) => const ContactsScreen()),
);
await _load();
},
icon: const Icon(Icons.contacts_outlined),
label: const Text('연락처 열기'),
child: const Text('연락처 열기'),
),
],
),
),
for (final room in _rooms)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
child: ListTile(
leading: CircleAvatar(
backgroundColor: _avatarColor(context, room.id),
child: Icon(
room.isGroup ? Icons.groups_outlined : Icons.person_outline,
color: _onAvatarColor(context, room.id),
),
),
title: Text(
_titleFor(room, me),
style: theme.textTheme.titleSmall,
),
subtitle: Row(
children: [
if (room.twinDisabledByPeer) ...[
Icon(Icons.block, size: 13, color: theme.colorScheme.error),
const SizedBox(width: 4),
],
Expanded(
child: Text(
_subtitleFor(room, me),
style: theme.textTheme.bodySmall?.copyWith(
color: room.twinDisabledByPeer
? theme.colorScheme.error
: theme.colorScheme.onSurfaceVariant,
),
),
),
],
),
trailing: const Icon(Icons.chevron_right, size: 20),
Material(
color: Colors.transparent,
child: InkWell(
onTap: () async {
await Navigator.of(context).push(
MaterialPageRoute(
@ -342,6 +297,56 @@ class _ConversationListScreenState extends State<ConversationListScreen> {
);
await _load();
},
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Row(
children: [
CircleAvatar(
radius: 22,
backgroundColor: _avatarColor(context, room.id),
child: Icon(
room.isGroup ? Icons.groups_outlined : Icons.person_outline,
size: 20,
color: _onAvatarColor(context, room.id),
),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
_titleFor(room, me),
style: theme.textTheme.titleSmall?.copyWith(fontWeight: FontWeight.w600),
),
const SizedBox(height: 2),
Row(
children: [
if (room.twinDisabledByPeer) ...[
Icon(Icons.block, size: 13, color: theme.colorScheme.error),
const SizedBox(width: 4),
],
Expanded(
child: Text(
_subtitleFor(room, me),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: theme.textTheme.bodySmall?.copyWith(
color: room.twinDisabledByPeer
? theme.colorScheme.error
: theme.colorScheme.onSurfaceVariant,
),
),
),
],
),
],
),
),
Icon(Icons.chevron_right, size: 18, color: theme.colorScheme.onSurfaceVariant),
],
),
),
),
),
const SizedBox(height: 72),

58
mobile/lib/screens/data_flow_screen.dart
View File

@ -10,42 +10,28 @@ class DataFlowScreen extends StatelessWidget {
Widget _section(
BuildContext context, {
required IconData icon,
required Color tint,
required String title,
required String body,
}) {
final theme = Theme.of(context);
return Container(
margin: const EdgeInsets.only(bottom: 16),
margin: const EdgeInsets.only(bottom: 12),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppTheme.glassFill(theme.brightness),
borderRadius: BorderRadius.circular(16),
borderRadius: BorderRadius.circular(AppTheme.rPanel),
border: Border.all(color: AppTheme.glassBorder(theme.brightness)),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 36,
height: 36,
alignment: Alignment.center,
decoration: BoxDecoration(color: tint.withValues(alpha: 0.15), shape: BoxShape.circle),
child: Icon(icon, size: 18, color: tint),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title, style: theme.textTheme.titleSmall),
const SizedBox(height: 4),
const SizedBox(height: 6),
Text(
body,
style: theme.textTheme.bodyMedium?.copyWith(color: theme.colorScheme.onSurfaceVariant),
),
],
style: theme.textTheme.bodyMedium?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
height: 1.45,
),
),
],
@ -66,32 +52,40 @@ class DataFlowScreen extends StatelessWidget {
children: [
_section(
context,
icon: Icons.lock_outline,
tint: Colors.green.shade600,
title: '기기 안에만 둡니다',
body: '말투 샘플·온보딩 입력은 이 기기의 로컬 저장소에만 보관합니다. '
'원문 대화 전체를 서버로 올리지 않는 것이 기본 원칙입니다.',
),
Card(
margin: const EdgeInsets.only(bottom: 16),
child: ListTile(
leading: Icon(Icons.record_voice_over_outlined, color: theme.colorScheme.primary),
title: Text('말투 샘플 ${samples.length}개'),
subtitle: Text(
Container(
margin: const EdgeInsets.only(bottom: 12),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppTheme.glassFill(theme.brightness),
borderRadius: BorderRadius.circular(AppTheme.rPanel),
border: Border.all(color: AppTheme.glassBorder(theme.brightness)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('말투 샘플 ${samples.length}개', style: theme.textTheme.titleSmall),
const SizedBox(height: 6),
Text(
[
samples.isEmpty ? '(아직 없음 — 말투 샘플 화면에서 추가)' : samples.take(3).join(' · '),
session.localDbEncrypted
? '저장: drift + SQLCipher(암호화)'
: '저장: 메모리/웹 스텁(이 환경에 SQLCipher 없음 — Chrome·Linux 폴백)',
].join('\n'),
style: theme.textTheme.bodyMedium?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
height: 1.45,
),
isThreeLine: true,
),
],
),
),
_section(
context,
icon: Icons.cloud_upload_outlined,
tint: Colors.amber.shade800,
title: '서버로 보낼 수 있는 것',
body: '초안이 필요할 때: 최근 대화 몇 줄 + 말투 샘플 일부(최소 컨텍스트)\n'
'채팅 릴레이: 보낸 메시지 본문\n'
@ -100,8 +94,6 @@ class DataFlowScreen extends StatelessWidget {
),
_section(
context,
icon: Icons.block,
tint: theme.colorScheme.error,
title: '보내지 않는 것',
body: '전체 채팅 백업 업로드, 온디바이스 말투 학습 원문 코퍼스, '
'관계 메모의 자동 클라우드 분석',

74
mobile/lib/screens/inbox_screen.dart
View File

@ -4,6 +4,7 @@ import 'package:provider/provider.dart';
import '../models/models.dart';
import '../services/api_client.dart';
import '../state/session_state.dart';
import '../theme/app_theme.dart';
import 'chat_screen.dart';
/// Post-hoc notification inbox: escalation logs that need human attention.
@ -53,38 +54,30 @@ class _InboxScreenState extends State<InboxScreen> {
child: _loading
? ListView(children: const [SizedBox(height: 160), Center(child: CircularProgressIndicator())])
: ListView(
padding: const EdgeInsets.fromLTRB(12, 12, 12, 24),
padding: const EdgeInsets.fromLTRB(16, 12, 16, 24),
children: [
Padding(
padding: const EdgeInsets.fromLTRB(4, 0, 4, 12),
child: Text(
Text(
'와카뷰가 보류·차단한 내용과 에스컬레이션 기록입니다. '
'이미 보낸 와카뷰 메시지는 해당 대화방에서 되돌릴 수 있습니다.',
style: theme.textTheme.bodyMedium?.copyWith(color: theme.colorScheme.onSurfaceVariant),
),
),
const SizedBox(height: 12),
if (_error != null)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 8),
padding: const EdgeInsets.only(bottom: 8),
child: Text(_error!, style: TextStyle(color: theme.colorScheme.error)),
),
if (_logs.isEmpty)
Padding(
padding: const EdgeInsets.symmetric(vertical: 64, horizontal: 32),
child: Column(
children: [
Icon(Icons.notifications_none, size: 40, color: theme.colorScheme.outline),
const SizedBox(height: 12),
Text('새 알림이 없습니다', style: theme.textTheme.titleMedium),
],
padding: const EdgeInsets.symmetric(vertical: 56),
child: Center(
child: Text('새 알림이 없습니다', style: theme.textTheme.titleMedium),
),
),
for (final log in _logs)
Padding(
padding: const EdgeInsets.only(bottom: 8),
child: Card(
Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.circular(16),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
@ -92,34 +85,37 @@ class _InboxScreenState extends State<InboxScreen> {
),
);
},
child: Padding(
child: Container(
margin: const EdgeInsets.only(bottom: 8),
padding: const EdgeInsets.all(14),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CircleAvatar(
radius: 18,
backgroundColor: log.resolved
? theme.colorScheme.primaryContainer
: theme.colorScheme.errorContainer,
child: Icon(
log.resolved ? Icons.check_circle_outline : Icons.warning_amber_rounded,
size: 18,
color: log.resolved
? theme.colorScheme.onPrimaryContainer
: theme.colorScheme.onErrorContainer,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(AppTheme.rPanel),
border: Border.all(color: AppTheme.glassBorder(theme.brightness)),
color: AppTheme.glassFill(theme.brightness),
),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
Row(
children: [
Expanded(
child: Text(
log.reason.isEmpty ? '에스컬레이션' : log.reason,
style: theme.textTheme.titleSmall,
),
const SizedBox(height: 2),
),
Text(
log.resolved ? '처리됨' : '확인 필요',
style: theme.textTheme.labelSmall?.copyWith(
color: log.resolved
? theme.colorScheme.onSurfaceVariant
: theme.colorScheme.error,
fontWeight: FontWeight.w600,
),
),
],
),
const SizedBox(height: 4),
Text(
'대화방 #${log.conversationId}',
style: theme.textTheme.bodySmall
@ -143,10 +139,6 @@ class _InboxScreenState extends State<InboxScreen> {
],
),
),
],
),
),
),
),
),
],

50
mobile/lib/screens/onboarding_tone_screen.dart
View File

@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../state/session_state.dart';
import '../theme/app_theme.dart';
import '../widgets/primary_gradient_button.dart';
/// Phase 1 onboarding skeleton: capture a few style samples locally.
@ -62,30 +61,16 @@ class _OnboardingToneScreenState extends State<OnboardingToneScreen> {
),
body: SafeArea(
child: ListView(
padding: const EdgeInsets.all(24),
padding: const EdgeInsets.fromLTRB(24, 12, 24, 32),
children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
width: 56,
height: 56,
decoration: BoxDecoration(
gradient: AppTheme.brandGradient,
borderRadius: BorderRadius.circular(18),
boxShadow: [
BoxShadow(color: const Color(0xFF6D5BD0).withValues(alpha: 0.3), blurRadius: 18, offset: const Offset(0, 8)),
],
),
child: const Icon(Icons.record_voice_over_outlined, size: 28, color: Colors.white),
),
),
const SizedBox(height: 16),
Text('와카뷰가 따라 쓸 말투', style: theme.textTheme.headlineSmall),
const SizedBox(height: 8),
Text(
'자주 쓰는 짧은 문장을 3~4개 적어 주세요. 기기에만 저장되며, 초안 요청 시 참고로 씁니다. '
'최종 문구·수집 방식은 사람 PoC 이후에 다듬습니다.',
style: theme.textTheme.bodyMedium?.copyWith(color: scheme.onSurfaceVariant),
'자주 쓰는 짧은 문장을 3~4개 적어 주세요. 기기에만 저장되며, 초안 요청 시 참고로 씁니다.',
style: theme.textTheme.bodyMedium?.copyWith(
color: scheme.onSurfaceVariant,
height: 1.45,
),
),
const SizedBox(height: 28),
for (var i = 0; i < _samples.length; i++) ...[
@ -95,30 +80,21 @@ class _OnboardingToneScreenState extends State<OnboardingToneScreen> {
decoration: InputDecoration(
labelText: '샘플 ${i + 1}',
hintText: i == 0 ? '예: ㅇㅇ 알겠음' : null,
prefixIcon: Padding(
padding: const EdgeInsets.only(left: 4, right: 4, top: 4),
child: CircleAvatar(
radius: 12,
backgroundColor: scheme.secondaryContainer,
child: Text(
'${i + 1}',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w700,
color: scheme.onSecondaryContainer,
),
),
),
),
),
),
const SizedBox(height: 12),
],
const SizedBox(height: 12),
const SizedBox(height: 8),
PrimaryGradientButton(
label: '이 말투로 시작',
onPressed: () => _save(markDone: true),
),
const SizedBox(height: 12),
Text(
'말투는 나중에 메뉴에서 다시 수정할 수 있습니다.',
textAlign: TextAlign.center,
style: theme.textTheme.bodySmall?.copyWith(color: scheme.onSurfaceVariant),
),
],
),
),

17
mobile/lib/screens/sessions_screen.dart
View File

@ -95,20 +95,8 @@ class _SessionsScreenState extends State<SessionsScreen> {
child: Text(_error!, style: TextStyle(color: theme.colorScheme.error)),
),
for (final s in _sessions)
Padding(
padding: const EdgeInsets.symmetric(vertical: 2),
child: ListTile(
leading: CircleAvatar(
backgroundColor: s['is_current'] == true
? theme.colorScheme.primaryContainer
: theme.colorScheme.surfaceContainerHighest,
child: Icon(
s['is_current'] == true ? Icons.smartphone : Icons.devices_other,
color: s['is_current'] == true
? theme.colorScheme.onPrimaryContainer
: theme.colorScheme.onSurfaceVariant,
),
),
ListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 2),
title: Text(
s['is_current'] == true ? '이 기기 (현재)' : '세션 #${s['id']}',
style: theme.textTheme.titleSmall,
@ -120,7 +108,6 @@ class _SessionsScreenState extends State<SessionsScreen> {
onPressed: () => _revoke(s),
),
),
),
],
),
),

16
mobile/lib/screens/signup_screen.dart
View File

@ -133,19 +133,16 @@ class _DemoTestPanel extends StatelessWidget {
final brightness = theme.brightness;
return Material(
color: Colors.transparent,
borderRadius: BorderRadius.circular(16),
borderRadius: BorderRadius.circular(AppTheme.rPanel),
child: InkWell(
onTap: onFill,
borderRadius: BorderRadius.circular(16),
borderRadius: BorderRadius.circular(AppTheme.rPanel),
child: Container(
padding: const EdgeInsets.fromLTRB(16, 14, 12, 14),
decoration: BoxDecoration(
color: AppTheme.glassFill(brightness),
borderRadius: BorderRadius.circular(16),
borderRadius: BorderRadius.circular(AppTheme.rPanel),
border: Border.all(color: AppTheme.glassBorder(brightness)),
boxShadow: [
BoxShadow(color: AppTheme.glassShadow(brightness), blurRadius: 20, offset: const Offset(0, 8)),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
@ -153,8 +150,9 @@ class _DemoTestPanel extends StatelessWidget {
Text(
'테스트용 (누구나)',
style: theme.textTheme.labelLarge?.copyWith(
color: theme.colorScheme.primary,
letterSpacing: 0.4,
color: theme.colorScheme.onSurfaceVariant,
letterSpacing: 0.15,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: 6),
@ -165,7 +163,7 @@ class _DemoTestPanel extends StatelessWidget {
'초대 코드 ${AppConfig.demoInviteCode}\n표시 이름 ${AppConfig.demoDisplayName}',
style: theme.textTheme.titleSmall?.copyWith(
height: 1.45,
fontWeight: FontWeight.w700,
fontWeight: FontWeight.w600,
),
),
),

9
mobile/lib/screens/splash_screen.dart
View File

@ -33,9 +33,12 @@ class SplashScreen extends StatelessWidget {
),
const SizedBox(height: 32),
SizedBox(
width: 28,
height: 28,
child: CircularProgressIndicator(strokeWidth: 2.5, color: scheme.primary),
width: 22,
height: 22,
child: CircularProgressIndicator(
strokeWidth: 2,
color: scheme.onSurfaceVariant,
),
),
],
),

316
mobile/lib/theme/app_theme.dart
View File

@ -1,223 +1,257 @@
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
/// Central design tokens for 와카뷰 (Ykavu) — "aurora glass" direction.
/// `backgroundGradient` + the glow orbs in [GradientBackdrop] paint behind
/// every screen (wired into `MaterialApp.builder`); cards/inputs/app bars
/// are semi-transparent "glass" surfaces with a soft colored shadow so they
/// visibly lift off that background. `twinAccent` stays a separate warm
/// accent so a twin-written bubble never reads as something the human
/// actually typed (PRD §3.1 와카뷰 뱃지).
/// Soft Neutral + surface hierarchy for 와카뷰.
/// Neutrals dominate; accent is thin (mine bubbles / small links only).
/// Radii: input/button 12, bubble 18. No glow, almost no shadow.
class AppTheme {
AppTheme._();
static const _seed = Color(0xFF6D5BD0);
// Light neutrals
static const canvasLight = Color(0xFFFAFAF9);
static const surfaceLight = Color(0xFFFFFFFF);
static const inkLight = Color(0xFF171717);
static const mutedLight = Color(0xFF737373);
static const lineLight = Color(0xFFE5E5E5);
static const softFillLight = Color(0xFFF4F4F5);
/// Brand gradient used for the wordmark, brand mark and primary CTAs.
// Dark neutrals
static const canvasDark = Color(0xFF0A0A0A);
static const surfaceDark = Color(0xFF141414);
static const inkDark = Color(0xFFFAFAFA);
static const mutedDark = Color(0xFFA3A3A3);
static const lineDark = Color(0xFF262626);
static const softFillDark = Color(0xFF1C1C1C);
/// Thin accent — used for mine bubbles & primary actions, not chrome.
static const accentLight = Color(0xFF3B6D9B);
static const accentDark = Color(0xFF8BB4D9);
static const accentSoftLight = Color(0xFFE8F0F7);
static const accentSoftDark = Color(0xFF1A2836);
static const twinAmberLight = Color(0xFF9A7B4F);
static const twinAmberDark = Color(0xFFC4A574);
/// Compat for older call sites.
static const teal = accentLight;
static const tealBright = accentDark;
static const canvasDarkCompat = canvasDark;
static const brandGradient = LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Color(0xFF6D5BD0), Color(0xFFA855C9), Color(0xFFE0609A)],
colors: [accentLight, accentLight],
);
static Color twinAccent(Brightness brightness) =>
brightness == Brightness.dark ? Colors.amber.shade300 : Colors.amber.shade800;
static Color twinAccent(Brightness b) => b == Brightness.dark ? twinAmberDark : twinAmberLight;
/// Diagonal aurora gradient painted behind every screen. Light: violet →
/// sky → pink, more saturated than a "safe" pastel so it reads as
/// intentional branding rather than a default Material backdrop. Dark:
/// deep indigo → navy → plum. Paired with the blurred glow orbs in
/// [GradientBackdrop].
static LinearGradient backgroundGradient(Brightness brightness) {
if (brightness == Brightness.dark) {
return const LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Color(0xFF201A3D), Color(0xFF16213E), Color(0xFF351C3C)],
);
}
return const LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Color(0xFFDCCBFF), Color(0xFFC3E4FF), Color(0xFFFFC9E8)],
);
static LinearGradient backgroundGradient(Brightness b) {
final c = b == Brightness.dark ? canvasDark : canvasLight;
return LinearGradient(colors: [c, c]);
}
/// Soft blurred accent blobs layered over [backgroundGradient] by
/// [GradientBackdrop] for depth ("aurora glow").
static Color glowPrimary(Brightness brightness) => brightness == Brightness.dark
? const Color(0xFF8B7CF6).withValues(alpha: 0.35)
: const Color(0xFFB79CFF).withValues(alpha: 0.55);
static Color glassFill(Brightness b) => b == Brightness.dark ? surfaceDark : surfaceLight;
static Color glassBorder(Brightness b) => b == Brightness.dark ? lineDark : lineLight;
static Color glassShadow(Brightness b) => Colors.transparent;
static Color glowSecondary(Brightness brightness) => brightness == Brightness.dark
? const Color(0xFFE879C4).withValues(alpha: 0.25)
: const Color(0xFFFFA9DC).withValues(alpha: 0.50);
static Color mineBubble(Brightness b) => b == Brightness.dark ? accentSoftDark : accentLight;
static Color mineBubbleFg(Brightness b) => b == Brightness.dark ? inkDark : Colors.white;
static Color peerBubble(Brightness b) => b == Brightness.dark ? softFillDark : softFillLight;
/// "Glass" fill for cards/panels — semi-transparent so the gradient
/// behind still reads through, with a bright border for the classic
/// glassmorphism edge highlight and a tinted shadow so the surface
/// visibly lifts off the backdrop instead of blending into it.
static Color glassFill(Brightness brightness) => brightness == Brightness.dark
? Colors.white.withValues(alpha: 0.08)
: Colors.white.withValues(alpha: 0.72);
static Color glassBorder(Brightness brightness) => brightness == Brightness.dark
? Colors.white.withValues(alpha: 0.16)
: Colors.white.withValues(alpha: 0.85);
static Color glassShadow(Brightness brightness) => brightness == Brightness.dark
? Colors.black.withValues(alpha: 0.45)
: const Color(0xFF6D5BD0).withValues(alpha: 0.18);
static const rInput = 12.0;
static const rButton = 12.0;
static const rBubble = 18.0;
static const rPanel = 12.0;
static ThemeData light() => _build(Brightness.light);
static ThemeData dark() => _build(Brightness.dark);
static ThemeData _build(Brightness brightness) {
final scheme = ColorScheme.fromSeed(seedColor: _seed, brightness: brightness);
final glass = glassFill(brightness);
final glassEdge = glassBorder(brightness);
final glassShadowColor = glassShadow(brightness);
final glassShape = RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18),
side: BorderSide(color: glassEdge, width: 1),
final isDark = brightness == Brightness.dark;
final primary = isDark ? accentDark : accentLight;
final onPrimary = isDark ? canvasDark : Colors.white;
final ink = isDark ? inkDark : inkLight;
final muted = isDark ? mutedDark : mutedLight;
final line = isDark ? lineDark : lineLight;
final canvas = isDark ? canvasDark : canvasLight;
final surface = isDark ? surfaceDark : surfaceLight;
final soft = isDark ? softFillDark : softFillLight;
final scheme = ColorScheme(
brightness: brightness,
primary: primary,
onPrimary: onPrimary,
primaryContainer: isDark ? accentSoftDark : accentSoftLight,
onPrimaryContainer: primary,
secondary: isDark ? twinAmberDark : twinAmberLight,
onSecondary: isDark ? canvasDark : Colors.white,
secondaryContainer: soft,
onSecondaryContainer: muted,
tertiary: primary,
onTertiary: onPrimary,
error: isDark ? const Color(0xFFF87171) : const Color(0xFFB91C1C),
onError: Colors.white,
surface: surface,
onSurface: ink,
onSurfaceVariant: muted,
outline: line,
outlineVariant: line,
surfaceContainerHighest: soft,
surfaceContainerHigh: soft,
surfaceContainer: surface,
);
final textTheme = _textTheme(GoogleFonts.plusJakartaSansTextTheme(), ink);
return ThemeData(
useMaterial3: true,
brightness: brightness,
colorScheme: scheme,
// Transparent so the gradient painted by MaterialApp.builder shows
// through behind every Scaffold.
scaffoldBackgroundColor: Colors.transparent,
visualDensity: VisualDensity.comfortable,
textTheme: _textTheme(),
visualDensity: VisualDensity.standard,
textTheme: textTheme,
primaryTextTheme: textTheme,
appBarTheme: AppBarTheme(
backgroundColor: Colors.transparent,
foregroundColor: scheme.onSurface,
backgroundColor: canvas.withValues(alpha: 0.92),
foregroundColor: ink,
surfaceTintColor: Colors.transparent,
elevation: 0,
scrolledUnderElevation: 0,
centerTitle: false,
titleTextStyle: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w800,
color: scheme.onSurface,
letterSpacing: -0.2,
),
titleTextStyle: textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w600, letterSpacing: -0.2),
),
cardTheme: CardThemeData(
elevation: 8,
shadowColor: glassShadowColor,
color: glass,
shape: glassShape,
elevation: 0,
color: surface,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(rPanel),
side: BorderSide(color: line),
),
margin: EdgeInsets.zero,
),
listTileTheme: ListTileThemeData(
iconColor: scheme.onSurfaceVariant,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
iconColor: muted,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rPanel)),
contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 2),
minVerticalPadding: 8,
),
dividerTheme: DividerThemeData(color: scheme.outlineVariant, space: 32, thickness: 1),
dividerTheme: DividerThemeData(color: line, space: 1, thickness: 1),
inputDecorationTheme: InputDecorationTheme(
filled: true,
fillColor: glass,
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
fillColor: surface,
contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: BorderSide(color: glassEdge, width: 1),
borderRadius: BorderRadius.circular(rInput),
borderSide: BorderSide(color: line),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: BorderSide(color: glassEdge, width: 1),
borderRadius: BorderRadius.circular(rInput),
borderSide: BorderSide(color: line),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: BorderSide(color: scheme.primary, width: 1.6),
borderRadius: BorderRadius.circular(rInput),
borderSide: BorderSide(color: primary, width: 1.2),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: BorderSide(color: scheme.error, width: 1.2),
borderRadius: BorderRadius.circular(rInput),
borderSide: BorderSide(color: scheme.error),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: BorderSide(color: scheme.error, width: 1.6),
borderRadius: BorderRadius.circular(rInput),
borderSide: BorderSide(color: scheme.error, width: 1.2),
),
hintStyle: TextStyle(color: scheme.onSurfaceVariant.withValues(alpha: 0.7)),
hintStyle: TextStyle(color: muted.withValues(alpha: 0.8)),
labelStyle: TextStyle(color: muted, fontWeight: FontWeight.w500),
),
filledButtonTheme: FilledButtonThemeData(
style: FilledButton.styleFrom(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
textStyle: const TextStyle(fontWeight: FontWeight.w700),
backgroundColor: isDark ? inkDark : inkLight,
foregroundColor: isDark ? canvasDark : Colors.white,
padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 12),
minimumSize: const Size(0, 46),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rButton)),
textStyle: const TextStyle(fontWeight: FontWeight.w600, fontSize: 15),
elevation: 0,
),
),
outlinedButtonTheme: OutlinedButtonThemeData(
style: OutlinedButton.styleFrom(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
foregroundColor: ink,
padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 12),
minimumSize: const Size(0, 46),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rButton)),
side: BorderSide(color: line),
),
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
foregroundColor: primary,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
),
),
iconButtonTheme: IconButtonThemeData(
style: IconButton.styleFrom(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
),
),
segmentedButtonTheme: SegmentedButtonThemeData(
style: SegmentedButton.styleFrom(
backgroundColor: glass,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
foregroundColor: muted,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
),
),
chipTheme: ChipThemeData(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(color: glassEdge, width: 1),
),
side: BorderSide.none,
backgroundColor: glass,
labelStyle: TextStyle(color: scheme.onSurfaceVariant, fontWeight: FontWeight.w600, fontSize: 12),
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
side: BorderSide(color: line),
backgroundColor: surface,
labelStyle: TextStyle(color: muted, fontWeight: FontWeight.w500, fontSize: 12),
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
),
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: scheme.primary,
foregroundColor: scheme.onPrimary,
elevation: 4,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(18)),
backgroundColor: isDark ? inkDark : inkLight,
foregroundColor: isDark ? canvasDark : Colors.white,
elevation: 0,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rButton)),
),
snackBarTheme: SnackBarThemeData(
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
),
bannerTheme: MaterialBannerThemeData(
backgroundColor: glass,
padding: const EdgeInsets.all(16),
backgroundColor: isDark ? softFillDark : inkLight,
contentTextStyle: TextStyle(color: isDark ? inkDark : Colors.white),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rPanel)),
elevation: 0,
),
dialogTheme: DialogThemeData(
backgroundColor: brightness == Brightness.dark
? const Color(0xFF211D3D)
: Colors.white.withValues(alpha: 0.95),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
backgroundColor: surface,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
side: BorderSide(color: line),
),
),
progressIndicatorTheme: ProgressIndicatorThemeData(color: primary),
bannerTheme: MaterialBannerThemeData(backgroundColor: surface, padding: const EdgeInsets.all(16)),
segmentedButtonTheme: SegmentedButtonThemeData(
style: SegmentedButton.styleFrom(
backgroundColor: surface,
foregroundColor: muted,
selectedForegroundColor: ink,
selectedBackgroundColor: soft,
side: BorderSide(color: line),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rButton)),
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
),
),
progressIndicatorTheme: ProgressIndicatorThemeData(color: scheme.primary),
);
}
static TextTheme _textTheme() {
return const TextTheme(
displayLarge: TextStyle(fontWeight: FontWeight.w800, letterSpacing: -1.2),
displaySmall: TextStyle(fontWeight: FontWeight.w800, letterSpacing: -0.5),
headlineSmall: TextStyle(fontWeight: FontWeight.w800, letterSpacing: -0.3),
titleLarge: TextStyle(fontWeight: FontWeight.w700),
titleMedium: TextStyle(fontWeight: FontWeight.w700),
titleSmall: TextStyle(fontWeight: FontWeight.w700),
bodyLarge: TextStyle(height: 1.4),
bodyMedium: TextStyle(height: 1.4),
labelLarge: TextStyle(fontWeight: FontWeight.w700),
static TextTheme _textTheme(TextTheme base, Color ink) {
TextStyle s(TextStyle? t, {FontWeight? w, double? size, double? ls, double? h}) =>
(t ?? const TextStyle()).copyWith(color: ink, fontWeight: w, fontSize: size, letterSpacing: ls, height: h);
return base.copyWith(
displayLarge: s(base.displayLarge, w: FontWeight.w600, size: 36, ls: -1.0),
displaySmall: s(base.displaySmall, w: FontWeight.w600, size: 28, ls: -0.6),
headlineSmall: s(base.headlineSmall, w: FontWeight.w600, size: 20, ls: -0.2),
titleLarge: s(base.titleLarge, w: FontWeight.w600, size: 17, ls: -0.2),
titleMedium: s(base.titleMedium, w: FontWeight.w600, size: 15),
titleSmall: s(base.titleSmall, w: FontWeight.w600, size: 14),
bodyLarge: s(base.bodyLarge, w: FontWeight.w400, size: 15, h: 1.45),
bodyMedium: s(base.bodyMedium, w: FontWeight.w400, size: 14, h: 1.45),
bodySmall: s(base.bodySmall, w: FontWeight.w400, size: 12, h: 1.4),
labelLarge: s(base.labelLarge, w: FontWeight.w500, size: 13),
labelSmall: s(base.labelSmall, w: FontWeight.w500, size: 11),
);
}
}

27
mobile/lib/widgets/brand_mark.dart
View File

@ -2,10 +2,7 @@ import 'package:flutter/material.dart';
import '../theme/app_theme.dart';
/// The 와카뷰 app icon mark: a gradient-filled rounded badge with a bold
/// "Y" monogram and a soft brand-tinted shadow, used wherever the splash /
/// signup / onboarding screens need a small brand anchor instead of a
/// generic Material icon.
/// Soft Neutral brand mark — ink monogram, no glow or heavy tile chrome.
class BrandMark extends StatelessWidget {
const BrandMark({super.key, this.size = 64});
@ -13,29 +10,25 @@ class BrandMark extends StatelessWidget {
@override
Widget build(BuildContext context) {
final radius = size * 0.32;
final isDark = Theme.of(context).brightness == Brightness.dark;
final fill = isDark ? AppTheme.inkDark : AppTheme.inkLight;
final fg = isDark ? AppTheme.canvasDark : Colors.white;
return Container(
width: size,
height: size,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(radius),
gradient: AppTheme.brandGradient,
boxShadow: [
BoxShadow(
color: const Color(0xFF6D5BD0).withValues(alpha: 0.38),
blurRadius: size * 0.35,
offset: Offset(0, size * 0.12),
),
],
color: fill,
borderRadius: BorderRadius.circular(AppTheme.rPanel),
),
alignment: Alignment.center,
child: Text(
'Y',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w900,
fontSize: size * 0.46,
color: fg,
fontWeight: FontWeight.w700,
fontSize: size * 0.42,
height: 1,
letterSpacing: -0.5,
),
),
);

48
mobile/lib/widgets/gradient_backdrop.dart
View File

@ -1,14 +1,8 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import '../theme/app_theme.dart';
/// Paints the app-wide aurora gradient + soft blurred glow orbs behind
/// [child]. Wired into `MaterialApp.builder` so every screen gets it
/// automatically without each Scaffold needing its own background —
/// screens just need a transparent `scaffoldBackgroundColor` (set globally
/// in [AppTheme]).
/// Quiet canvas behind every screen — near-flat wash, no aurora orbs.
class GradientBackdrop extends StatelessWidget {
const GradientBackdrop({super.key, required this.child});
@ -17,43 +11,9 @@ class GradientBackdrop extends StatelessWidget {
@override
Widget build(BuildContext context) {
final brightness = Theme.of(context).brightness;
return Stack(
fit: StackFit.expand,
children: [
DecoratedBox(decoration: BoxDecoration(gradient: AppTheme.backgroundGradient(brightness))),
Positioned(
top: -90,
right: -70,
child: _Glow(color: AppTheme.glowPrimary(brightness), size: 260),
),
Positioned(
bottom: -110,
left: -90,
child: _Glow(color: AppTheme.glowSecondary(brightness), size: 320),
),
if (child != null) child!,
],
);
}
}
class _Glow extends StatelessWidget {
const _Glow({required this.color, required this.size});
final Color color;
final double size;
@override
Widget build(BuildContext context) {
return IgnorePointer(
child: ImageFiltered(
imageFilter: ImageFilter.blur(sigmaX: 60, sigmaY: 60),
child: Container(
width: size,
height: size,
decoration: BoxDecoration(shape: BoxShape.circle, color: color),
),
),
return DecoratedBox(
decoration: BoxDecoration(gradient: AppTheme.backgroundGradient(brightness)),
child: child,
);
}
}

13
mobile/lib/widgets/gradient_text.dart
View File

@ -2,9 +2,7 @@ import 'package:flutter/material.dart';
import '../theme/app_theme.dart';
/// Renders [text] filled with [AppTheme.brandGradient] instead of a flat
/// color — used for the "와카뷰" wordmark so the brand reads as designed
/// rather than default black-on-gradient body text.
/// Brand wordmark — ink weight, no rainbow gradient.
class GradientText extends StatelessWidget {
const GradientText(this.text, {super.key, this.style, this.textAlign});
@ -14,10 +12,11 @@ class GradientText extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ShaderMask(
blendMode: BlendMode.srcIn,
shaderCallback: (bounds) => AppTheme.brandGradient.createShader(Rect.fromLTWH(0, 0, bounds.width, bounds.height)),
child: Text(text, style: style, textAlign: textAlign),
final ink = Theme.of(context).brightness == Brightness.dark ? AppTheme.inkDark : AppTheme.inkLight;
return Text(
text,
textAlign: textAlign,
style: (style ?? const TextStyle()).copyWith(color: ink, fontWeight: FontWeight.w700),
);
}
}

99
mobile/lib/widgets/message_bubble.dart
View File

@ -3,8 +3,7 @@ import 'package:flutter/material.dart';
import '../models/models.dart';
import '../theme/app_theme.dart';
/// Twin messages get a dashed border + badge (PRD §3.1 와카뷰 뱃지) so an
/// auto-sent bubble never reads as something the human actually typed.
/// Twin messages get a warm thin border + label (PRD §3.1 와카뷰 뱃지).
class MessageBubble extends StatelessWidget {
const MessageBubble({
super.key,
@ -31,53 +30,59 @@ class MessageBubble extends StatelessWidget {
final twin = message.isTwin;
final retracted = message.retracted;
final accent = AppTheme.twinAccent(theme.brightness);
final brightness = theme.brightness;
final Color bg;
final Color fg;
Border? border;
if (retracted) {
bg = scheme.surfaceContainerHigh;
fg = scheme.onSurfaceVariant;
} else if (isMine) {
bg = scheme.primaryContainer;
fg = scheme.onPrimaryContainer;
} else {
bg = scheme.surfaceContainerHighest;
} else if (twin) {
bg = brightness == Brightness.dark
? const Color(0xFF221C14)
: const Color(0xFFFAF6F0);
fg = scheme.onSurface;
border = Border.all(color: accent.withValues(alpha: 0.4), width: 1);
} else if (isMine) {
bg = AppTheme.mineBubble(brightness);
fg = AppTheme.mineBubbleFg(brightness);
} else {
bg = AppTheme.peerBubble(brightness);
fg = scheme.onSurface;
border = Border.all(color: scheme.outlineVariant.withValues(alpha: 0.9));
}
final radius = BorderRadius.only(
topLeft: const Radius.circular(18),
topRight: const Radius.circular(18),
bottomLeft: Radius.circular(isMine ? 18 : 4),
bottomRight: Radius.circular(isMine ? 4 : 18),
topLeft: const Radius.circular(AppTheme.rBubble),
topRight: const Radius.circular(AppTheme.rBubble),
bottomLeft: Radius.circular(isMine ? AppTheme.rBubble : 6),
bottomRight: Radius.circular(isMine ? 6 : AppTheme.rBubble),
);
final bubble = Container(
constraints: BoxConstraints(maxWidth: MediaQuery.sizeOf(context).width * 0.76),
padding: const EdgeInsets.fromLTRB(14, 10, 14, 8),
decoration: BoxDecoration(color: bg, borderRadius: radius),
decoration: BoxDecoration(
color: bg,
borderRadius: radius,
border: border,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
if (twin)
Padding(
padding: const EdgeInsets.only(bottom: 6),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.auto_awesome, size: 13, color: accent),
const SizedBox(width: 4),
Text(
padding: const EdgeInsets.only(bottom: 4),
child: Text(
'와카뷰',
style: theme.textTheme.labelSmall?.copyWith(
color: accent,
fontWeight: FontWeight.w800,
fontWeight: FontWeight.w700,
letterSpacing: 0.2,
),
),
],
),
),
if (retracted)
Row(
@ -94,12 +99,12 @@ class MessageBubble extends StatelessWidget {
else
Text(
message.text,
style: theme.textTheme.bodyMedium?.copyWith(color: fg, height: 1.35),
style: theme.textTheme.bodyMedium?.copyWith(color: fg, height: 1.4),
),
const SizedBox(height: 4),
Text(
_time(message.createdAt),
style: theme.textTheme.labelSmall?.copyWith(color: fg.withOpacity(0.55), fontSize: 10),
style: theme.textTheme.labelSmall?.copyWith(color: fg.withValues(alpha: 0.55), fontSize: 10),
),
],
),
@ -109,12 +114,7 @@ class MessageBubble extends StatelessWidget {
crossAxisAlignment: isMine ? CrossAxisAlignment.end : CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
twin
? CustomPaint(
painter: _DashedRRectPainter(color: accent, radius: radius),
child: bubble,
)
: bubble,
bubble,
if (twin && isMine && !retracted && onRetract != null)
Padding(
padding: const EdgeInsets.only(top: 2, right: 4, left: 4),
@ -135,7 +135,7 @@ class MessageBubble extends StatelessWidget {
);
return Padding(
padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 12),
padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 12),
child: Align(
alignment: isMine ? Alignment.centerRight : Alignment.centerLeft,
child: content,
@ -143,40 +143,3 @@ class MessageBubble extends StatelessWidget {
);
}
}
class _DashedRRectPainter extends CustomPainter {
_DashedRRectPainter({required this.color, required this.radius});
final Color color;
final BorderRadius radius;
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = color
..style = PaintingStyle.stroke
..strokeWidth = 1.4;
final rrect = radius.toRRect(Rect.fromLTWH(0.7, 0.7, size.width - 1.4, size.height - 1.4));
final path = Path()..addRRect(rrect);
final dashed = _dashPath(path, dashLength: 5, gapLength: 4);
canvas.drawPath(dashed, paint);
}
Path _dashPath(Path source, {required double dashLength, required double gapLength}) {
final metrics = source.computeMetrics();
final out = Path();
for (final metric in metrics) {
var distance = 0.0;
while (distance < metric.length) {
final next = distance + dashLength;
out.addPath(metric.extractPath(distance, next.clamp(0, metric.length)), Offset.zero);
distance = next + gapLength;
}
}
return out;
}
@override
bool shouldRepaint(covariant _DashedRRectPainter oldDelegate) =>
oldDelegate.color != color || oldDelegate.radius != radius;
}

28
mobile/lib/widgets/my_user_id_chip.dart
View File

@ -1,6 +1,8 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../theme/app_theme.dart';
/// Shows the signed-in numeric user id with one-tap copy.
class MyUserIdChip extends StatelessWidget {
const MyUserIdChip({super.key, required this.userId, this.compact = false});
@ -29,18 +31,23 @@ class MyUserIdChip extends StatelessWidget {
icon: const Icon(Icons.badge_outlined),
);
}
final brightness = theme.brightness;
return Material(
color: theme.colorScheme.surfaceContainerHighest.withValues(alpha: 0.7),
borderRadius: BorderRadius.circular(12),
color: AppTheme.glassFill(brightness),
borderRadius: BorderRadius.circular(AppTheme.rPanel),
child: InkWell(
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(AppTheme.rPanel),
onTap: () => _copy(context),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(AppTheme.rPanel),
border: Border.all(color: AppTheme.glassBorder(brightness)),
),
child: Row(
children: [
Icon(Icons.badge_outlined, size: 18, color: theme.colorScheme.primary),
const SizedBox(width: 8),
Icon(Icons.badge_outlined, size: 18, color: theme.colorScheme.onSurfaceVariant),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
@ -54,17 +61,18 @@ class MyUserIdChip extends StatelessWidget {
Text(
'$userId',
style: theme.textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w700,
letterSpacing: 0.5,
fontWeight: FontWeight.w600,
letterSpacing: 0.3,
),
),
],
),
),
Text(
'탭하여 복사',
'복사',
style: theme.textTheme.labelSmall?.copyWith(
color: theme.colorScheme.primary,
fontWeight: FontWeight.w600,
),
),
const SizedBox(width: 4),

55
mobile/lib/widgets/primary_gradient_button.dart
View File

@ -2,10 +2,7 @@ import 'package:flutter/material.dart';
import '../theme/app_theme.dart';
/// Primary call-to-action button filled with [AppTheme.brandGradient] and a
/// soft brand-tinted shadow, so the one action per screen that matters most
/// (시작하기 / 이 말투로 시작 …) visibly outranks the flat glass buttons
/// around it.
/// Primary CTA — Soft Neutral ink fill (API name kept for call sites).
class PrimaryGradientButton extends StatelessWidget {
const PrimaryGradientButton({
super.key,
@ -20,40 +17,34 @@ class PrimaryGradientButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final disabled = onPressed == null;
return Opacity(
opacity: disabled ? 0.6 : 1,
child: Material(
color: Colors.transparent,
borderRadius: BorderRadius.circular(16),
child: InkWell(
borderRadius: BorderRadius.circular(16),
onTap: onPressed,
child: Container(
height: 52,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
gradient: AppTheme.brandGradient,
boxShadow: [
BoxShadow(
color: const Color(0xFF6D5BD0).withValues(alpha: 0.35),
blurRadius: 20,
offset: const Offset(0, 8),
final isDark = Theme.of(context).brightness == Brightness.dark;
final bg = isDark ? AppTheme.inkDark : AppTheme.inkLight;
final fg = isDark ? AppTheme.canvasDark : Colors.white;
final disabled = onPressed == null || loading;
return SizedBox(
height: 48,
width: double.infinity,
child: FilledButton(
onPressed: disabled && !loading ? null : onPressed,
style: FilledButton.styleFrom(
backgroundColor: bg,
foregroundColor: fg,
disabledBackgroundColor: bg.withValues(alpha: 0.35),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppTheme.rButton),
),
],
elevation: 0,
shadowColor: Colors.transparent,
),
child: loading
? const SizedBox(
height: 20,
width: 20,
child: CircularProgressIndicator(strokeWidth: 2, color: Colors.white),
? SizedBox(
height: 18,
width: 18,
child: CircularProgressIndicator(strokeWidth: 2, color: fg),
)
: Text(
label,
style: const TextStyle(color: Colors.white, fontWeight: FontWeight.w700, fontSize: 16),
),
),
style: TextStyle(color: fg, fontWeight: FontWeight.w600, fontSize: 15),
),
),
);