sihoo
f6be60ef46
구조색 4종(mist/paper/linen/sage)을 const에서 뺀 뒤 AppPalette.applyTemplateTheme() 으로 템플릿 장착/해제 시 한 번에 바꿔치기하게 했다. 이 4개는 전부 "배경/카드/ 구분선" 용도로만 쓰이던 색이라, 장착 즉시 거의 모든 화면(백품타 포함, AppPalette.mist/ paper/sage를 쓰는 화면이면 코드 수정 없이 자동 반영)의 배경·카드·테두리가 테마를 따라간다. ink는 텍스트/버튼 등 너무 광범위하게 쓰여서 그대로 고정. 제목 알약(TitlePill, 24개 화면이 공유)은 ink를 직접 바꾸면 안 되므로 별도로 globalProfileTheme(ValueNotifier) 하나를 구독해서 배경을 theme.secondary로 바꾸게 했다 - 이 위젯 하나만 고쳐서 모든 화면의 제목 배경에 한 번에 적용. 백품타(study_timer_screen)는 시작/재개 버튼과 큰 타이머 숫자처럼 "중립" 요소만 테마 강조색(accent)으로 바꾸고, 일시정지(warning)/종료(danger) 같은 경고성 색은 의미가 있어서 그대로 뒀다. main_dashboard/profile_customize_screen은 실제로 장착이 바뀔 때마다 applyGlobalProfileTheme()을 호출해 위 두 전역 상태를 동기화한다. 구조색을 const에서 빼면서 기존에 const로 선언돼 있던 지점 몇 곳 (app_notice, device_checkout_ledger_page, group_detail_screen, main_dashboard, teacher_attendance_page)에서 const 컴파일 에러가 나서 해당 const 키워드만 제거해 수정했다.
645 lines
22 KiB
Dart
645 lines
22 KiB
Dart
// 🎨 프로필 커스텀 화면 (UI 전용). 공부시간으로 적립한 캐시로 프로필 카드 테마를
|
|
// 구매/장착하는 상점. 서버 통신/상태는 lib/function/profile_shop_controller.dart가 담당한다.
|
|
import 'package:flutter/material.dart';
|
|
import '../function/profile_shop_controller.dart';
|
|
import '../theme/app_palette.dart';
|
|
import '../theme/profile_themes.dart';
|
|
import '../theme/theme_sync.dart';
|
|
import 'app_notice.dart';
|
|
import 'title_pill.dart';
|
|
|
|
class ProfileCustomizeScreen extends StatefulWidget {
|
|
final String studentId;
|
|
final String studentName;
|
|
|
|
const ProfileCustomizeScreen({
|
|
super.key,
|
|
required this.studentId,
|
|
required this.studentName,
|
|
});
|
|
|
|
@override
|
|
State<ProfileCustomizeScreen> createState() => _ProfileCustomizeScreenState();
|
|
}
|
|
|
|
class _ProfileCustomizeScreenState extends State<ProfileCustomizeScreen> {
|
|
final ProfileShopController _controller = ProfileShopController();
|
|
|
|
// 🚧 첫 버전은 "기본 프로필 꾸미기"만 실제로 동작한다. 나머지 두 카테고리는
|
|
// 와이어프레임 자리만 잡아둔 준비중 상태.
|
|
String _selectedCategory = 'basic_profile';
|
|
|
|
// 👀 사기 전에도 눌러보면 바로 위 큰 타일이 그 테마로 바뀌어 보이는 미리보기 상태.
|
|
// null = 아직 직접 고르지 않음(장착된 테마를 그대로 보여줌), -1 = "기본 모습"을 명시적으로 미리보는 중.
|
|
int? _previewTemplateId;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_initialize();
|
|
}
|
|
|
|
/// 상점 화면을 열 때마다 서버의 실제 장착 상태로 전역 테마를 다시 맞춰둔다
|
|
/// (딴 데서 장착 상태가 바뀌었을 수도 있는 엣지 케이스 보호용).
|
|
Future<void> _initialize() async {
|
|
await _controller.loadCatalog(widget.studentId);
|
|
if (!mounted) return;
|
|
for (final t in _controller.templates) {
|
|
if (t.equipped) {
|
|
_syncGlobalTheme(t.id);
|
|
return;
|
|
}
|
|
}
|
|
_syncGlobalTheme(null);
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_controller.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
/// 지금 큰 타일에 보여줄 템플릿을 고른다. 직접 미리보기를 누른 게 있으면 그걸,
|
|
/// 없으면 실제 장착 중인 템플릿을, 그마저도 없으면 null(기본 모습)을 돌려준다.
|
|
ShopTemplate? _resolvePreviewTemplate() {
|
|
if (_previewTemplateId == -1) return null;
|
|
if (_previewTemplateId != null) {
|
|
for (final t in _controller.templates) {
|
|
if (t.id == _previewTemplateId) return t;
|
|
}
|
|
}
|
|
for (final t in _controller.templates) {
|
|
if (t.equipped) return t;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
/// 🎨 지금 "체험하기/미리보기" 중인 테마로 화면 전체(배경/타일/버튼)를 물들인다.
|
|
/// 아무것도 직접 고르지 않았으면 실제 장착된 테마가 그대로 나오고, "기본 모습"을
|
|
/// 고르면 null이 되어 화면이 원래 모습으로 돌아간다 - 체험하기를 누르면 바로
|
|
/// 커스텀 화면 전체에 반영되는 효과를 _resolvePreviewTemplate() 하나로 처리한다.
|
|
ProfileTheme? get _displayTheme {
|
|
final preview = _resolvePreviewTemplate();
|
|
return preview == null ? null : profileThemes[preview.code];
|
|
}
|
|
|
|
Future<void> _handlePurchase(ShopTemplate template) async {
|
|
setState(() => _previewTemplateId = template.id);
|
|
final (success, message) = await _controller.purchase(
|
|
widget.studentId,
|
|
template.id,
|
|
);
|
|
if (!mounted) return;
|
|
AppNotice.show(
|
|
context,
|
|
message,
|
|
color: success ? AppPalette.success : AppPalette.danger,
|
|
);
|
|
}
|
|
|
|
Future<void> _handleEquip(int? templateId) async {
|
|
setState(() => _previewTemplateId = templateId ?? -1);
|
|
final (success, message) = await _controller.equip(
|
|
widget.studentId,
|
|
templateId,
|
|
);
|
|
if (success) _syncGlobalTheme(templateId);
|
|
if (!mounted) return;
|
|
AppNotice.show(
|
|
context,
|
|
message,
|
|
color: success ? AppPalette.approved : AppPalette.danger,
|
|
);
|
|
}
|
|
|
|
/// 💡 커스텀창 안에서의 "미리보기"와 달리, 실제로 장착이 끝난 뒤에는 앱 전체
|
|
/// (TitlePill, 다른 화면의 배경/카드색)도 같이 바뀌도록 전역에 반영한다.
|
|
void _syncGlobalTheme(int? equippedTemplateId) {
|
|
if (equippedTemplateId == null) {
|
|
applyGlobalProfileTheme(null);
|
|
return;
|
|
}
|
|
for (final t in _controller.templates) {
|
|
if (t.id == equippedTemplateId) {
|
|
applyGlobalProfileTheme(profileThemes[t.code]);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: _displayTheme?.background ?? AppPalette.mist,
|
|
appBar: AppBar(
|
|
backgroundColor: Colors.transparent,
|
|
foregroundColor: AppPalette.ink,
|
|
elevation: 0,
|
|
centerTitle: true,
|
|
title: const TitlePill('프로필 꾸미기'),
|
|
),
|
|
body: ListenableBuilder(
|
|
listenable: _controller,
|
|
builder: (context, _) {
|
|
return Center(
|
|
child: ConstrainedBox(
|
|
constraints: const BoxConstraints(maxWidth: 720),
|
|
child: RefreshIndicator(
|
|
onRefresh: () => _controller.loadCatalog(widget.studentId),
|
|
child: ListView(
|
|
padding: const EdgeInsets.all(20),
|
|
children: [
|
|
_buildCashBalance(),
|
|
const SizedBox(height: 20),
|
|
_buildCategoryTiles(),
|
|
const SizedBox(height: 24),
|
|
if (_controller.isLoading)
|
|
const Padding(
|
|
padding: EdgeInsets.symmetric(vertical: 40),
|
|
child: Center(child: CircularProgressIndicator()),
|
|
)
|
|
else
|
|
_buildTemplateGrid(),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildCashBalance() {
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
|
|
decoration: BoxDecoration(
|
|
color: _displayTheme?.secondary ?? AppPalette.ink,
|
|
borderRadius: BorderRadius.circular(18),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
const Icon(Icons.savings_rounded, color: Colors.white, size: 22),
|
|
const SizedBox(width: 10),
|
|
const Text(
|
|
'보유 캐시',
|
|
style: TextStyle(color: Colors.white70, fontSize: 13),
|
|
),
|
|
const Spacer(),
|
|
Text(
|
|
'${_controller.cashBalance} 캐시',
|
|
style: const TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildCategoryTiles() {
|
|
final previewTemplate = _resolvePreviewTemplate();
|
|
// 📏 ListView(스크롤 영역) 안에서는 높이가 정해져 있지 않아 Row에
|
|
// stretch 정렬만 주면 자식 크기 계산이 깨진다. SizedBox로 높이를 못박아둔다.
|
|
return SizedBox(
|
|
height: 210,
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
Expanded(
|
|
flex: 3,
|
|
child: _CategoryTile(
|
|
title: '기본 프로필 꾸미기',
|
|
icon: Icons.person_rounded,
|
|
selected: _selectedCategory == 'basic_profile',
|
|
enabled: true,
|
|
onTap: () => setState(() => _selectedCategory = 'basic_profile'),
|
|
previewPrimary: previewTemplate?.primaryColor,
|
|
previewSecondary: previewTemplate?.secondaryColor,
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
flex: 4,
|
|
child: Column(
|
|
children: [
|
|
Expanded(
|
|
child: _CategoryTile(
|
|
title: '랭킹 · 친구창 배경',
|
|
subtitle: '준비중',
|
|
icon: Icons.leaderboard_rounded,
|
|
selected: false,
|
|
enabled: false,
|
|
onTap: null,
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
Expanded(
|
|
child: _CategoryTile(
|
|
title: '출석 · 그룹창 표시',
|
|
subtitle: '준비중',
|
|
icon: Icons.groups_rounded,
|
|
selected: false,
|
|
enabled: false,
|
|
onTap: null,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildTemplateGrid() {
|
|
final templates = _controller.templates
|
|
.where((t) => t.category == _selectedCategory)
|
|
.toList();
|
|
final hasEquippedTemplate = templates.any((t) => t.equipped);
|
|
final previewId = _resolvePreviewTemplate()?.id; // null이면 "기본 모습"을 미리보는 중.
|
|
|
|
return GridView.count(
|
|
crossAxisCount: 2,
|
|
shrinkWrap: true,
|
|
physics: const NeverScrollableScrollPhysics(),
|
|
mainAxisSpacing: 12,
|
|
crossAxisSpacing: 12,
|
|
childAspectRatio: 1.15,
|
|
children: [
|
|
_DefaultTemplateTile(
|
|
equipped: !hasEquippedTemplate,
|
|
previewing: previewId == null,
|
|
theme: _displayTheme,
|
|
onEquip: () => _handleEquip(null),
|
|
onPreview: () => setState(() => _previewTemplateId = -1),
|
|
),
|
|
for (final template in templates)
|
|
_TemplateTile(
|
|
template: template,
|
|
canAfford: _controller.cashBalance >= template.price,
|
|
previewing: previewId == template.id,
|
|
theme: _displayTheme,
|
|
onPurchase: () => _handlePurchase(template),
|
|
onEquip: () => _handleEquip(template.id),
|
|
onPreview: () => setState(() => _previewTemplateId = template.id),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _CategoryTile extends StatelessWidget {
|
|
final String title;
|
|
final String? subtitle;
|
|
final IconData icon;
|
|
final bool selected;
|
|
final bool enabled;
|
|
final VoidCallback? onTap;
|
|
// 👀 미리보기 중인 테마 색상 - selected일 때만 의미가 있다 (기본 프로필 타일 전용).
|
|
final Color? previewPrimary;
|
|
final Color? previewSecondary;
|
|
|
|
const _CategoryTile({
|
|
required this.title,
|
|
this.subtitle,
|
|
required this.icon,
|
|
required this.selected,
|
|
required this.enabled,
|
|
required this.onTap,
|
|
this.previewPrimary,
|
|
this.previewSecondary,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final bool hasPreview = selected && previewPrimary != null;
|
|
return Material(
|
|
color: hasPreview
|
|
? Colors.transparent
|
|
: (selected
|
|
? AppPalette.ink
|
|
: (enabled ? AppPalette.paper : AppPalette.linen)),
|
|
borderRadius: BorderRadius.circular(20),
|
|
child: InkWell(
|
|
borderRadius: BorderRadius.circular(20),
|
|
onTap: onTap,
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(20),
|
|
gradient: hasPreview
|
|
? LinearGradient(
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
colors: [previewPrimary!, previewSecondary!],
|
|
)
|
|
: null,
|
|
border: Border.all(
|
|
color: hasPreview
|
|
? previewSecondary!
|
|
: (selected ? AppPalette.ink : AppPalette.sage),
|
|
width: hasPreview ? 2 : 1,
|
|
),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(
|
|
icon,
|
|
size: 22,
|
|
color: selected
|
|
? Colors.white
|
|
: (enabled ? AppPalette.ink : Colors.grey),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
title,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 13,
|
|
color: selected
|
|
? Colors.white
|
|
: (enabled ? AppPalette.ink : Colors.grey[600]),
|
|
),
|
|
),
|
|
if (subtitle != null) ...[
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
subtitle!,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(fontSize: 10, color: Colors.grey[500]),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _DefaultTemplateTile extends StatelessWidget {
|
|
final bool equipped;
|
|
final bool previewing;
|
|
final ProfileTheme? theme;
|
|
final VoidCallback onEquip;
|
|
final VoidCallback onPreview;
|
|
|
|
const _DefaultTemplateTile({
|
|
required this.equipped,
|
|
required this.previewing,
|
|
required this.theme,
|
|
required this.onEquip,
|
|
required this.onPreview,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final onBackground = theme?.onBackground ?? AppPalette.ink;
|
|
final borderColor = equipped
|
|
? AppPalette.approved
|
|
: (previewing ? onBackground : (theme?.border ?? AppPalette.sage));
|
|
final borderWidth = equipped || previewing ? 2.0 : 1.0;
|
|
|
|
return Material(
|
|
color: theme?.surface ?? AppPalette.paper,
|
|
borderRadius: BorderRadius.circular(18),
|
|
child: InkWell(
|
|
borderRadius: BorderRadius.circular(18),
|
|
onTap: onPreview,
|
|
child: Container(
|
|
padding: const EdgeInsets.all(14),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(18),
|
|
border: Border.all(color: borderColor, width: borderWidth),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Expanded(
|
|
child: Container(
|
|
width: double.infinity,
|
|
decoration: BoxDecoration(
|
|
color: AppPalette.ink,
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 10),
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
child: Text(
|
|
'기본 모습',
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 13,
|
|
color: onBackground,
|
|
),
|
|
),
|
|
),
|
|
if (previewing && !equipped)
|
|
Text(
|
|
'미리보기',
|
|
style: TextStyle(
|
|
fontSize: 10,
|
|
fontWeight: FontWeight.bold,
|
|
color: onBackground,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 8),
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: equipped
|
|
? OutlinedButton(
|
|
onPressed: null,
|
|
style: OutlinedButton.styleFrom(
|
|
foregroundColor: AppPalette.approved,
|
|
side: const BorderSide(color: AppPalette.approved),
|
|
),
|
|
child: const Text('장착중'),
|
|
)
|
|
: OutlinedButton(
|
|
onPressed: onEquip,
|
|
style: OutlinedButton.styleFrom(
|
|
foregroundColor: theme?.accent,
|
|
side: theme == null
|
|
? null
|
|
: BorderSide(color: theme!.accent),
|
|
),
|
|
child: const Text('장착하기'),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _TemplateTile extends StatelessWidget {
|
|
final ShopTemplate template;
|
|
final bool canAfford;
|
|
final bool previewing;
|
|
final ProfileTheme? theme;
|
|
final VoidCallback onPurchase;
|
|
final VoidCallback onEquip;
|
|
final VoidCallback onPreview;
|
|
|
|
const _TemplateTile({
|
|
required this.template,
|
|
required this.canAfford,
|
|
required this.previewing,
|
|
required this.theme,
|
|
required this.onPurchase,
|
|
required this.onEquip,
|
|
required this.onPreview,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final onBackground = theme?.onBackground ?? AppPalette.ink;
|
|
final borderColor = template.equipped
|
|
? AppPalette.approved
|
|
: (previewing ? onBackground : (theme?.border ?? AppPalette.sage));
|
|
final borderWidth = template.equipped || previewing ? 2.0 : 1.0;
|
|
|
|
return Material(
|
|
color: theme?.surface ?? AppPalette.paper,
|
|
borderRadius: BorderRadius.circular(18),
|
|
child: InkWell(
|
|
borderRadius: BorderRadius.circular(18),
|
|
onTap: onPreview,
|
|
child: Container(
|
|
padding: const EdgeInsets.all(14),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(18),
|
|
border: Border.all(color: borderColor, width: borderWidth),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Expanded(
|
|
child: Container(
|
|
width: double.infinity,
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
colors: [template.primaryColor, template.secondaryColor],
|
|
),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 10),
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
child: Text(
|
|
template.name,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 13,
|
|
color: onBackground,
|
|
),
|
|
),
|
|
),
|
|
if (previewing && !template.equipped)
|
|
Text(
|
|
'미리보기',
|
|
style: TextStyle(
|
|
fontSize: 10,
|
|
fontWeight: FontWeight.bold,
|
|
color: onBackground,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
'${template.price} 캐시',
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: onBackground.withValues(alpha: 0.6),
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
if (template.equipped)
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: OutlinedButton(
|
|
onPressed: null,
|
|
style: OutlinedButton.styleFrom(
|
|
foregroundColor: AppPalette.approved,
|
|
side: const BorderSide(color: AppPalette.approved),
|
|
),
|
|
child: const Text('장착중'),
|
|
),
|
|
)
|
|
else if (template.owned)
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: OutlinedButton(
|
|
onPressed: onEquip,
|
|
style: OutlinedButton.styleFrom(
|
|
foregroundColor: theme?.accent,
|
|
side: theme == null
|
|
? null
|
|
: BorderSide(color: theme!.accent),
|
|
),
|
|
child: const Text('장착하기'),
|
|
),
|
|
)
|
|
else
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
child: OutlinedButton(
|
|
onPressed: onPreview,
|
|
style: OutlinedButton.styleFrom(
|
|
foregroundColor: theme?.accent,
|
|
side: theme == null
|
|
? null
|
|
: BorderSide(color: theme!.accent),
|
|
),
|
|
child: const Text('체험하기'),
|
|
),
|
|
),
|
|
const SizedBox(width: 8),
|
|
Expanded(
|
|
child: ElevatedButton(
|
|
onPressed: canAfford ? onPurchase : null,
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: theme?.secondary ?? AppPalette.ink,
|
|
foregroundColor: Colors.white,
|
|
disabledBackgroundColor: AppPalette.sage,
|
|
),
|
|
child: const Text('구매하기'),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|