diff --git a/docs/deploy-checklist.md b/docs/deploy-checklist.md index 2e2ab3c..c8dc8fa 100644 --- a/docs/deploy-checklist.md +++ b/docs/deploy-checklist.md @@ -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 순서 diff --git a/mobile/lib/screens/autonomy_settings_screen.dart b/mobile/lib/screens/autonomy_settings_screen.dart index 310533d..fa4412d 100644 --- a/mobile/lib/screens/autonomy_settings_screen.dart +++ b/mobile/lib/screens/autonomy_settings_screen.dart @@ -66,24 +66,27 @@ class _AutonomySettingsScreenState extends State { 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())); }, diff --git a/mobile/lib/screens/chat_screen.dart b/mobile/lib/screens/chat_screen.dart index 02f418b..52b5299 100644 --- a/mobile/lib/screens/chat_screen.dart +++ b/mobile/lib/screens/chat_screen.dart @@ -256,10 +256,10 @@ class _ChatScreenState extends State { 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 { 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( - title, - style: theme.textTheme.titleSmall?.copyWith(color: theme.colorScheme.onSecondaryContainer), - ), - ), - ], + Text( + title, + 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), diff --git a/mobile/lib/screens/contacts_screen.dart b/mobile/lib/screens/contacts_screen.dart index afd8dc9..30d24ac 100644 --- a/mobile/lib/screens/contacts_screen.dart +++ b/mobile/lib/screens/contacts_screen.dart @@ -299,8 +299,6 @@ class _ContactsScreenState extends State { 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,66 +314,65 @@ class _ContactsScreenState extends State { ), ), for (final c in _contacts) - Padding( - padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2), - child: ListTile( - leading: CircleAvatar( - backgroundColor: theme.colorScheme.secondaryContainer, - child: Text( - c.displayName.isEmpty ? '?' : c.displayName.substring(0, 1), - style: TextStyle( - color: theme.colorScheme.onSecondaryContainer, - fontWeight: FontWeight.w700, - ), + ListTile( + contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 2), + leading: CircleAvatar( + radius: 20, + backgroundColor: theme.colorScheme.surfaceContainerHighest, + child: Text( + c.displayName.isEmpty ? '?' : c.displayName.substring(0, 1), + style: TextStyle( + color: theme.colorScheme.onSurfaceVariant, + fontWeight: FontWeight.w600, ), ), - title: Text(c.displayName, style: theme.textTheme.titleSmall), - subtitle: Text( - c.contactUserId == null - ? '사용자 ID 없음 — 대화 불가 (다시 추가 필요)' - : [ - '사용자 #${c.contactUserId}', - if (c.relationshipNote.isNotEmpty) c.relationshipNote, - ].join(' · '), - style: theme.textTheme.bodySmall?.copyWith( - color: c.contactUserId == null - ? theme.colorScheme.error - : theme.colorScheme.onSurfaceVariant, - ), - ), - trailing: Row( - mainAxisSize: MainAxisSize.min, - children: [ - if (c.contactUserId != null) ...[ - FilledButton.tonal( - onPressed: () => _startChat(c), - child: const Text('대화'), - ), - IconButton( - tooltip: '수정', - icon: const Icon(Icons.edit_outlined, size: 20), - onPressed: () => _editContact(c), - ), - ] else - FilledButton( - onPressed: () => _editContact(c), - child: const Text('ID 입력'), - ), - IconButton( - tooltip: '삭제', - icon: const Icon(Icons.delete_outline, size: 20), - onPressed: () => _delete(c), - ), - ], - ), - onTap: () { - if (c.contactUserId == null) { - _editContact(c); - } else { - _startChat(c); - } - }, ), + title: Text(c.displayName, style: theme.textTheme.titleSmall), + subtitle: Text( + c.contactUserId == null + ? '사용자 ID 없음 — 대화 불가 (다시 추가 필요)' + : [ + '사용자 #${c.contactUserId}', + if (c.relationshipNote.isNotEmpty) c.relationshipNote, + ].join(' · '), + style: theme.textTheme.bodySmall?.copyWith( + color: c.contactUserId == null + ? theme.colorScheme.error + : theme.colorScheme.onSurfaceVariant, + ), + ), + trailing: Row( + mainAxisSize: MainAxisSize.min, + children: [ + if (c.contactUserId != null) ...[ + TextButton( + onPressed: () => _startChat(c), + child: const Text('대화'), + ), + IconButton( + tooltip: '수정', + icon: const Icon(Icons.edit_outlined, size: 20), + onPressed: () => _editContact(c), + ), + ] else + FilledButton( + onPressed: () => _editContact(c), + child: const Text('ID 입력'), + ), + IconButton( + tooltip: '삭제', + icon: const Icon(Icons.delete_outline, size: 20), + onPressed: () => _delete(c), + ), + ], + ), + onTap: () { + if (c.contactUserId == null) { + _editContact(c); + } else { + _startChat(c); + } + }, ), const SizedBox(height: 72), ], diff --git a/mobile/lib/screens/conversation_list_screen.dart b/mobile/lib/screens/conversation_list_screen.dart index ba3f3e1..611de4a 100644 --- a/mobile/lib/screens/conversation_list_screen.dart +++ b/mobile/lib/screens/conversation_list_screen.dart @@ -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 { } 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 { 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 { 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 { 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 { ); 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), diff --git a/mobile/lib/screens/data_flow_screen.dart b/mobile/lib/screens/data_flow_screen.dart index 7692fab..94dadf4 100644 --- a/mobile/lib/screens/data_flow_screen.dart +++ b/mobile/lib/screens/data_flow_screen.dart @@ -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( + child: Column( 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), - Text( - body, - style: theme.textTheme.bodyMedium?.copyWith(color: theme.colorScheme.onSurfaceVariant), - ), - ], + Text(title, style: theme.textTheme.titleSmall), + const SizedBox(height: 6), + Text( + body, + 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( - [ - samples.isEmpty ? '(아직 없음 — 말투 샘플 화면에서 추가)' : samples.take(3).join(' · '), - session.localDbEncrypted - ? '저장: drift + SQLCipher(암호화)' - : '저장: 메모리/웹 스텁(이 환경에 SQLCipher 없음 — Chrome·Linux 폴백)', - ].join('\n'), - ), - isThreeLine: true, + 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, + ), + ), + ], ), ), _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: '전체 채팅 백업 업로드, 온디바이스 말투 학습 원문 코퍼스, ' '관계 메모의 자동 클라우드 분석', diff --git a/mobile/lib/screens/inbox_screen.dart b/mobile/lib/screens/inbox_screen.dart index 25125d8..9930ed2 100644 --- a/mobile/lib/screens/inbox_screen.dart +++ b/mobile/lib/screens/inbox_screen.dart @@ -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,98 +54,89 @@ class _InboxScreenState extends State { 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( - '와카뷰가 보류·차단한 내용과 에스컬레이션 기록입니다. ' - '이미 보낸 와카뷰 메시지는 해당 대화방에서 되돌릴 수 있습니다.', - style: theme.textTheme.bodyMedium?.copyWith(color: theme.colorScheme.onSurfaceVariant), - ), + 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( - child: InkWell( - borderRadius: BorderRadius.circular(16), - onTap: () { - Navigator.of(context).push( - MaterialPageRoute( - builder: (_) => ChatScreen(conversationId: log.conversationId), + Material( + color: Colors.transparent, + child: InkWell( + onTap: () { + Navigator.of(context).push( + MaterialPageRoute( + builder: (_) => ChatScreen(conversationId: log.conversationId), + ), + ); + }, + child: Container( + margin: const EdgeInsets.only(bottom: 8), + padding: const EdgeInsets.all(14), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(AppTheme.rPanel), + border: Border.all(color: AppTheme.glassBorder(theme.brightness)), + color: AppTheme.glassFill(theme.brightness), + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + children: [ + Expanded( + child: Text( + log.reason.isEmpty ? '에스컬레이션' : log.reason, + style: theme.textTheme.titleSmall, + ), + ), + Text( + log.resolved ? '처리됨' : '확인 필요', + style: theme.textTheme.labelSmall?.copyWith( + color: log.resolved + ? theme.colorScheme.onSurfaceVariant + : theme.colorScheme.error, + fontWeight: FontWeight.w600, + ), + ), + ], ), - ); - }, - child: Padding( - 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, - ), - ), - const SizedBox(width: 12), - Expanded( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - log.reason.isEmpty ? '에스컬레이션' : log.reason, - style: theme.textTheme.titleSmall, - ), - const SizedBox(height: 2), - Text( - '대화방 #${log.conversationId}', - style: theme.textTheme.bodySmall - ?.copyWith(color: theme.colorScheme.onSurfaceVariant), - ), - if (log.messageSnippet.isNotEmpty) ...[ - const SizedBox(height: 6), - Text( - log.messageSnippet, - maxLines: 2, - overflow: TextOverflow.ellipsis, - style: theme.textTheme.bodyMedium, - ), - ], - const SizedBox(height: 6), - Text( - log.createdAt.toLocal().toString().split('.').first, - style: theme.textTheme.labelSmall - ?.copyWith(color: theme.colorScheme.outline), - ), - ], - ), + const SizedBox(height: 4), + Text( + '대화방 #${log.conversationId}', + style: theme.textTheme.bodySmall + ?.copyWith(color: theme.colorScheme.onSurfaceVariant), + ), + if (log.messageSnippet.isNotEmpty) ...[ + const SizedBox(height: 6), + Text( + log.messageSnippet, + maxLines: 2, + overflow: TextOverflow.ellipsis, + style: theme.textTheme.bodyMedium, ), ], - ), + const SizedBox(height: 6), + Text( + log.createdAt.toLocal().toString().split('.').first, + style: theme.textTheme.labelSmall + ?.copyWith(color: theme.colorScheme.outline), + ), + ], ), ), ), diff --git a/mobile/lib/screens/onboarding_tone_screen.dart b/mobile/lib/screens/onboarding_tone_screen.dart index 92ff912..b0d7e91 100644 --- a/mobile/lib/screens/onboarding_tone_screen.dart +++ b/mobile/lib/screens/onboarding_tone_screen.dart @@ -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 { ), 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 { 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), + ), ], ), ), diff --git a/mobile/lib/screens/sessions_screen.dart b/mobile/lib/screens/sessions_screen.dart index 64355fe..493a77c 100644 --- a/mobile/lib/screens/sessions_screen.dart +++ b/mobile/lib/screens/sessions_screen.dart @@ -95,30 +95,17 @@ class _SessionsScreenState extends State { 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, - ), - ), - title: Text( - s['is_current'] == true ? '이 기기 (현재)' : '세션 #${s['id']}', - style: theme.textTheme.titleSmall, - ), - subtitle: Text('만료: ${s['expires_at'] ?? ''}', style: theme.textTheme.bodySmall), - trailing: IconButton( - tooltip: '세션 종료', - icon: const Icon(Icons.logout), - onPressed: () => _revoke(s), - ), + ListTile( + contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 2), + title: Text( + s['is_current'] == true ? '이 기기 (현재)' : '세션 #${s['id']}', + style: theme.textTheme.titleSmall, + ), + subtitle: Text('만료: ${s['expires_at'] ?? ''}', style: theme.textTheme.bodySmall), + trailing: IconButton( + tooltip: '세션 종료', + icon: const Icon(Icons.logout), + onPressed: () => _revoke(s), ), ), ], diff --git a/mobile/lib/screens/signup_screen.dart b/mobile/lib/screens/signup_screen.dart index 879c289..cbcb2ae 100644 --- a/mobile/lib/screens/signup_screen.dart +++ b/mobile/lib/screens/signup_screen.dart @@ -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, ), ), ), diff --git a/mobile/lib/screens/splash_screen.dart b/mobile/lib/screens/splash_screen.dart index 3d11e2d..e43ad4a 100644 --- a/mobile/lib/screens/splash_screen.dart +++ b/mobile/lib/screens/splash_screen.dart @@ -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, + ), ), ], ), diff --git a/mobile/lib/theme/app_theme.dart b/mobile/lib/theme/app_theme.dart index aeeac39..878bd6e 100644 --- a/mobile/lib/theme/app_theme.dart +++ b/mobile/lib/theme/app_theme.dart @@ -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), ); } } diff --git a/mobile/lib/widgets/brand_mark.dart b/mobile/lib/widgets/brand_mark.dart index 2d726ba..962226c 100644 --- a/mobile/lib/widgets/brand_mark.dart +++ b/mobile/lib/widgets/brand_mark.dart @@ -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, ), ), ); diff --git a/mobile/lib/widgets/gradient_backdrop.dart b/mobile/lib/widgets/gradient_backdrop.dart index 0d8cce2..d9cb8ed 100644 --- a/mobile/lib/widgets/gradient_backdrop.dart +++ b/mobile/lib/widgets/gradient_backdrop.dart @@ -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, ); } } diff --git a/mobile/lib/widgets/gradient_text.dart b/mobile/lib/widgets/gradient_text.dart index 568773f..c1b3d90 100644 --- a/mobile/lib/widgets/gradient_text.dart +++ b/mobile/lib/widgets/gradient_text.dart @@ -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), ); } } diff --git a/mobile/lib/widgets/message_bubble.dart b/mobile/lib/widgets/message_bubble.dart index b888e5f..8ef3a4f 100644 --- a/mobile/lib/widgets/message_bubble.dart +++ b/mobile/lib/widgets/message_bubble.dart @@ -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,52 +30,58 @@ 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( - '와카뷰', - style: theme.textTheme.labelSmall?.copyWith( - color: accent, - fontWeight: FontWeight.w800, - letterSpacing: 0.2, - ), - ), - ], + padding: const EdgeInsets.only(bottom: 4), + child: Text( + '와카뷰', + style: theme.textTheme.labelSmall?.copyWith( + color: accent, + fontWeight: FontWeight.w700, + letterSpacing: 0.2, + ), ), ), if (retracted) @@ -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; -} diff --git a/mobile/lib/widgets/my_user_id_chip.dart b/mobile/lib/widgets/my_user_id_chip.dart index aa602d6..fd88bca 100644 --- a/mobile/lib/widgets/my_user_id_chip.dart +++ b/mobile/lib/widgets/my_user_id_chip.dart @@ -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), diff --git a/mobile/lib/widgets/primary_gradient_button.dart b/mobile/lib/widgets/primary_gradient_button.dart index b808778..7e9519c 100644 --- a/mobile/lib/widgets/primary_gradient_button.dart +++ b/mobile/lib/widgets/primary_gradient_button.dart @@ -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,41 +17,35 @@ 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), - ), - ], - ), - child: loading - ? const SizedBox( - height: 20, - width: 20, - child: CircularProgressIndicator(strokeWidth: 2, color: Colors.white), - ) - : Text( - label, - style: const TextStyle(color: Colors.white, fontWeight: FontWeight.w700, fontSize: 16), - ), + 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 + ? SizedBox( + height: 18, + width: 18, + child: CircularProgressIndicator(strokeWidth: 2, color: fg), + ) + : Text( + label, + style: TextStyle(color: fg, fontWeight: FontWeight.w600, fontSize: 15), + ), ), ); }