프로필 꾸미기 테마 적용 범위 확장 - 커스텀창 → 학생/교사/관리자 대시보드 타일
1. 커스텀(상점) 화면 자체도 장착한 테마를 반영하도록 함: 배경색, 보유 캐시 바 배경, 템플릿 카드 배경/테두리/텍스트, 체험하기·장착하기 버튼 색까지 전부 테마를 따라간다. 미리보기는 기존처럼 큰 타일 하나만 별도로 바뀐다. 2. 메인 대시보드의 테마 반영 대상을 학생+관리자에서 학생+교사+관리자로 확장 - 백엔드에서 교사 계정도 템플릿을 무료로 쓸 수 있게 된 것과 짝. 같은 _tileSpecs/_buildModernCard 코드를 역할 구분 없이 공유하므로 테마 로딩 조건만 넓히면 교사/관리자 타일에도 자동으로 적용된다.
This commit is contained in:
@@ -81,7 +81,7 @@ class _MainDashboardState extends State<MainDashboard> {
|
|||||||
if (kTileEditingEnabled) {
|
if (kTileEditingEnabled) {
|
||||||
_layout.load(_tileSpecs().map((t) => t.id).toList());
|
_layout.load(_tileSpecs().map((t) => t.id).toList());
|
||||||
}
|
}
|
||||||
if (_isStudent || _isAdmin) {
|
if (_isStudent || _isTeacherOrAbove) {
|
||||||
_loadEquippedTheme();
|
_loadEquippedTheme();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -763,7 +763,9 @@ class _MainDashboardState extends State<MainDashboard> {
|
|||||||
),
|
),
|
||||||
);
|
);
|
||||||
// 상점에서 테마를 바꾸고 돌아왔을 수 있으니 다시 불러온다.
|
// 상점에서 테마를 바꾸고 돌아왔을 수 있으니 다시 불러온다.
|
||||||
if (_isStudent || _isAdmin) _loadEquippedTheme();
|
if (_isStudent || _isTeacherOrAbove) {
|
||||||
|
_loadEquippedTheme();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
child: const Padding(
|
child: const Padding(
|
||||||
padding: EdgeInsets.all(8),
|
padding: EdgeInsets.all(8),
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import '../function/profile_shop_controller.dart';
|
import '../function/profile_shop_controller.dart';
|
||||||
import '../theme/app_palette.dart';
|
import '../theme/app_palette.dart';
|
||||||
|
import '../theme/profile_themes.dart';
|
||||||
import 'app_notice.dart';
|
import 'app_notice.dart';
|
||||||
import 'title_pill.dart';
|
import 'title_pill.dart';
|
||||||
|
|
||||||
@@ -31,10 +32,15 @@ class _ProfileCustomizeScreenState extends State<ProfileCustomizeScreen> {
|
|||||||
// null = 아직 직접 고르지 않음(장착된 테마를 그대로 보여줌), -1 = "기본 모습"을 명시적으로 미리보는 중.
|
// null = 아직 직접 고르지 않음(장착된 테마를 그대로 보여줌), -1 = "기본 모습"을 명시적으로 미리보는 중.
|
||||||
int? _previewTemplateId;
|
int? _previewTemplateId;
|
||||||
|
|
||||||
|
// 🎨 지금 실제로 장착 중인 테마 - 화면 배경/상점 타일 자체를 이걸로 물들인다.
|
||||||
|
// (미리보기는 큰 타일 하나만 바뀌는 것과 별개로, 이건 "진짜 내 테마"를 화면 전체에 반영)
|
||||||
|
ProfileTheme? _equippedTheme;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void initState() {
|
void initState() {
|
||||||
super.initState();
|
super.initState();
|
||||||
_controller.loadCatalog(widget.studentId);
|
_controller.loadCatalog(widget.studentId);
|
||||||
|
_loadEquippedTheme();
|
||||||
}
|
}
|
||||||
|
|
||||||
@override
|
@override
|
||||||
@@ -43,6 +49,14 @@ class _ProfileCustomizeScreenState extends State<ProfileCustomizeScreen> {
|
|||||||
super.dispose();
|
super.dispose();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Future<void> _loadEquippedTheme() async {
|
||||||
|
final theme = await ProfileShopController.fetchEquippedTheme(
|
||||||
|
widget.studentId,
|
||||||
|
);
|
||||||
|
if (!mounted) return;
|
||||||
|
setState(() => _equippedTheme = theme);
|
||||||
|
}
|
||||||
|
|
||||||
/// 지금 큰 타일에 보여줄 테마를 고른다. 직접 미리보기를 누른 게 있으면 그걸,
|
/// 지금 큰 타일에 보여줄 테마를 고른다. 직접 미리보기를 누른 게 있으면 그걸,
|
||||||
/// 없으면 실제 장착 중인 테마를, 그마저도 없으면 null(기본 모습)을 돌려준다.
|
/// 없으면 실제 장착 중인 테마를, 그마저도 없으면 null(기본 모습)을 돌려준다.
|
||||||
ShopTemplate? _resolvePreviewTemplate() {
|
ShopTemplate? _resolvePreviewTemplate() {
|
||||||
@@ -78,6 +92,7 @@ class _ProfileCustomizeScreenState extends State<ProfileCustomizeScreen> {
|
|||||||
widget.studentId,
|
widget.studentId,
|
||||||
templateId,
|
templateId,
|
||||||
);
|
);
|
||||||
|
if (success) await _loadEquippedTheme();
|
||||||
if (!mounted) return;
|
if (!mounted) return;
|
||||||
AppNotice.show(
|
AppNotice.show(
|
||||||
context,
|
context,
|
||||||
@@ -89,7 +104,7 @@ class _ProfileCustomizeScreenState extends State<ProfileCustomizeScreen> {
|
|||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Scaffold(
|
return Scaffold(
|
||||||
backgroundColor: AppPalette.mist,
|
backgroundColor: _equippedTheme?.background ?? AppPalette.mist,
|
||||||
appBar: AppBar(
|
appBar: AppBar(
|
||||||
backgroundColor: Colors.transparent,
|
backgroundColor: Colors.transparent,
|
||||||
foregroundColor: AppPalette.ink,
|
foregroundColor: AppPalette.ink,
|
||||||
@@ -133,7 +148,7 @@ class _ProfileCustomizeScreenState extends State<ProfileCustomizeScreen> {
|
|||||||
return Container(
|
return Container(
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
|
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
color: AppPalette.ink,
|
color: _equippedTheme?.secondary ?? AppPalette.ink,
|
||||||
borderRadius: BorderRadius.circular(18),
|
borderRadius: BorderRadius.circular(18),
|
||||||
),
|
),
|
||||||
child: Row(
|
child: Row(
|
||||||
@@ -231,6 +246,7 @@ class _ProfileCustomizeScreenState extends State<ProfileCustomizeScreen> {
|
|||||||
_DefaultTemplateTile(
|
_DefaultTemplateTile(
|
||||||
equipped: !hasEquippedTemplate,
|
equipped: !hasEquippedTemplate,
|
||||||
previewing: previewId == null,
|
previewing: previewId == null,
|
||||||
|
theme: _equippedTheme,
|
||||||
onEquip: () => _handleEquip(null),
|
onEquip: () => _handleEquip(null),
|
||||||
onPreview: () => setState(() => _previewTemplateId = -1),
|
onPreview: () => setState(() => _previewTemplateId = -1),
|
||||||
),
|
),
|
||||||
@@ -239,6 +255,7 @@ class _ProfileCustomizeScreenState extends State<ProfileCustomizeScreen> {
|
|||||||
template: template,
|
template: template,
|
||||||
canAfford: _controller.cashBalance >= template.price,
|
canAfford: _controller.cashBalance >= template.price,
|
||||||
previewing: previewId == template.id,
|
previewing: previewId == template.id,
|
||||||
|
theme: _equippedTheme,
|
||||||
onPurchase: () => _handlePurchase(template),
|
onPurchase: () => _handlePurchase(template),
|
||||||
onEquip: () => _handleEquip(template.id),
|
onEquip: () => _handleEquip(template.id),
|
||||||
onPreview: () => setState(() => _previewTemplateId = template.id),
|
onPreview: () => setState(() => _previewTemplateId = template.id),
|
||||||
@@ -346,25 +363,28 @@ class _CategoryTile extends StatelessWidget {
|
|||||||
class _DefaultTemplateTile extends StatelessWidget {
|
class _DefaultTemplateTile extends StatelessWidget {
|
||||||
final bool equipped;
|
final bool equipped;
|
||||||
final bool previewing;
|
final bool previewing;
|
||||||
|
final ProfileTheme? theme;
|
||||||
final VoidCallback onEquip;
|
final VoidCallback onEquip;
|
||||||
final VoidCallback onPreview;
|
final VoidCallback onPreview;
|
||||||
|
|
||||||
const _DefaultTemplateTile({
|
const _DefaultTemplateTile({
|
||||||
required this.equipped,
|
required this.equipped,
|
||||||
required this.previewing,
|
required this.previewing,
|
||||||
|
required this.theme,
|
||||||
required this.onEquip,
|
required this.onEquip,
|
||||||
required this.onPreview,
|
required this.onPreview,
|
||||||
});
|
});
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
|
final onBackground = theme?.onBackground ?? AppPalette.ink;
|
||||||
final borderColor = equipped
|
final borderColor = equipped
|
||||||
? AppPalette.approved
|
? AppPalette.approved
|
||||||
: (previewing ? AppPalette.ink : AppPalette.sage);
|
: (previewing ? onBackground : (theme?.border ?? AppPalette.sage));
|
||||||
final borderWidth = equipped || previewing ? 2.0 : 1.0;
|
final borderWidth = equipped || previewing ? 2.0 : 1.0;
|
||||||
|
|
||||||
return Material(
|
return Material(
|
||||||
color: AppPalette.paper,
|
color: theme?.surface ?? AppPalette.paper,
|
||||||
borderRadius: BorderRadius.circular(18),
|
borderRadius: BorderRadius.circular(18),
|
||||||
child: InkWell(
|
child: InkWell(
|
||||||
borderRadius: BorderRadius.circular(18),
|
borderRadius: BorderRadius.circular(18),
|
||||||
@@ -390,7 +410,7 @@ class _DefaultTemplateTile extends StatelessWidget {
|
|||||||
const SizedBox(height: 10),
|
const SizedBox(height: 10),
|
||||||
Row(
|
Row(
|
||||||
children: [
|
children: [
|
||||||
const Expanded(
|
Expanded(
|
||||||
child: Text(
|
child: Text(
|
||||||
'기본 모습',
|
'기본 모습',
|
||||||
maxLines: 1,
|
maxLines: 1,
|
||||||
@@ -398,16 +418,17 @@ class _DefaultTemplateTile extends StatelessWidget {
|
|||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
fontWeight: FontWeight.bold,
|
fontWeight: FontWeight.bold,
|
||||||
fontSize: 13,
|
fontSize: 13,
|
||||||
|
color: onBackground,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
if (previewing && !equipped)
|
if (previewing && !equipped)
|
||||||
const Text(
|
Text(
|
||||||
'미리보기',
|
'미리보기',
|
||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
fontSize: 10,
|
fontSize: 10,
|
||||||
fontWeight: FontWeight.bold,
|
fontWeight: FontWeight.bold,
|
||||||
color: AppPalette.ink,
|
color: onBackground,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
@@ -426,6 +447,12 @@ class _DefaultTemplateTile extends StatelessWidget {
|
|||||||
)
|
)
|
||||||
: OutlinedButton(
|
: OutlinedButton(
|
||||||
onPressed: onEquip,
|
onPressed: onEquip,
|
||||||
|
style: OutlinedButton.styleFrom(
|
||||||
|
foregroundColor: theme?.accent,
|
||||||
|
side: theme == null
|
||||||
|
? null
|
||||||
|
: BorderSide(color: theme!.accent),
|
||||||
|
),
|
||||||
child: const Text('장착하기'),
|
child: const Text('장착하기'),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
@@ -441,6 +468,7 @@ class _TemplateTile extends StatelessWidget {
|
|||||||
final ShopTemplate template;
|
final ShopTemplate template;
|
||||||
final bool canAfford;
|
final bool canAfford;
|
||||||
final bool previewing;
|
final bool previewing;
|
||||||
|
final ProfileTheme? theme;
|
||||||
final VoidCallback onPurchase;
|
final VoidCallback onPurchase;
|
||||||
final VoidCallback onEquip;
|
final VoidCallback onEquip;
|
||||||
final VoidCallback onPreview;
|
final VoidCallback onPreview;
|
||||||
@@ -449,6 +477,7 @@ class _TemplateTile extends StatelessWidget {
|
|||||||
required this.template,
|
required this.template,
|
||||||
required this.canAfford,
|
required this.canAfford,
|
||||||
required this.previewing,
|
required this.previewing,
|
||||||
|
required this.theme,
|
||||||
required this.onPurchase,
|
required this.onPurchase,
|
||||||
required this.onEquip,
|
required this.onEquip,
|
||||||
required this.onPreview,
|
required this.onPreview,
|
||||||
@@ -456,13 +485,14 @@ class _TemplateTile extends StatelessWidget {
|
|||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
|
final onBackground = theme?.onBackground ?? AppPalette.ink;
|
||||||
final borderColor = template.equipped
|
final borderColor = template.equipped
|
||||||
? AppPalette.approved
|
? AppPalette.approved
|
||||||
: (previewing ? AppPalette.ink : AppPalette.sage);
|
: (previewing ? onBackground : (theme?.border ?? AppPalette.sage));
|
||||||
final borderWidth = template.equipped || previewing ? 2.0 : 1.0;
|
final borderWidth = template.equipped || previewing ? 2.0 : 1.0;
|
||||||
|
|
||||||
return Material(
|
return Material(
|
||||||
color: AppPalette.paper,
|
color: theme?.surface ?? AppPalette.paper,
|
||||||
borderRadius: BorderRadius.circular(18),
|
borderRadius: BorderRadius.circular(18),
|
||||||
child: InkWell(
|
child: InkWell(
|
||||||
borderRadius: BorderRadius.circular(18),
|
borderRadius: BorderRadius.circular(18),
|
||||||
@@ -497,19 +527,20 @@ class _TemplateTile extends StatelessWidget {
|
|||||||
template.name,
|
template.name,
|
||||||
maxLines: 1,
|
maxLines: 1,
|
||||||
overflow: TextOverflow.ellipsis,
|
overflow: TextOverflow.ellipsis,
|
||||||
style: const TextStyle(
|
style: TextStyle(
|
||||||
fontWeight: FontWeight.bold,
|
fontWeight: FontWeight.bold,
|
||||||
fontSize: 13,
|
fontSize: 13,
|
||||||
|
color: onBackground,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
if (previewing && !template.equipped)
|
if (previewing && !template.equipped)
|
||||||
const Text(
|
Text(
|
||||||
'미리보기',
|
'미리보기',
|
||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
fontSize: 10,
|
fontSize: 10,
|
||||||
fontWeight: FontWeight.bold,
|
fontWeight: FontWeight.bold,
|
||||||
color: AppPalette.ink,
|
color: onBackground,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
@@ -517,7 +548,10 @@ class _TemplateTile extends StatelessWidget {
|
|||||||
const SizedBox(height: 2),
|
const SizedBox(height: 2),
|
||||||
Text(
|
Text(
|
||||||
'${template.price} 캐시',
|
'${template.price} 캐시',
|
||||||
style: TextStyle(fontSize: 12, color: Colors.grey[600]),
|
style: TextStyle(
|
||||||
|
fontSize: 12,
|
||||||
|
color: onBackground.withValues(alpha: 0.6),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
const SizedBox(height: 8),
|
const SizedBox(height: 8),
|
||||||
if (template.equipped)
|
if (template.equipped)
|
||||||
@@ -537,6 +571,12 @@ class _TemplateTile extends StatelessWidget {
|
|||||||
width: double.infinity,
|
width: double.infinity,
|
||||||
child: OutlinedButton(
|
child: OutlinedButton(
|
||||||
onPressed: onEquip,
|
onPressed: onEquip,
|
||||||
|
style: OutlinedButton.styleFrom(
|
||||||
|
foregroundColor: theme?.accent,
|
||||||
|
side: theme == null
|
||||||
|
? null
|
||||||
|
: BorderSide(color: theme!.accent),
|
||||||
|
),
|
||||||
child: const Text('장착하기'),
|
child: const Text('장착하기'),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
@@ -546,6 +586,12 @@ class _TemplateTile extends StatelessWidget {
|
|||||||
Expanded(
|
Expanded(
|
||||||
child: OutlinedButton(
|
child: OutlinedButton(
|
||||||
onPressed: onPreview,
|
onPressed: onPreview,
|
||||||
|
style: OutlinedButton.styleFrom(
|
||||||
|
foregroundColor: theme?.accent,
|
||||||
|
side: theme == null
|
||||||
|
? null
|
||||||
|
: BorderSide(color: theme!.accent),
|
||||||
|
),
|
||||||
child: const Text('체험하기'),
|
child: const Text('체험하기'),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
@@ -554,7 +600,7 @@ class _TemplateTile extends StatelessWidget {
|
|||||||
child: ElevatedButton(
|
child: ElevatedButton(
|
||||||
onPressed: canAfford ? onPurchase : null,
|
onPressed: canAfford ? onPurchase : null,
|
||||||
style: ElevatedButton.styleFrom(
|
style: ElevatedButton.styleFrom(
|
||||||
backgroundColor: AppPalette.ink,
|
backgroundColor: theme?.secondary ?? AppPalette.ink,
|
||||||
foregroundColor: Colors.white,
|
foregroundColor: Colors.white,
|
||||||
disabledBackgroundColor: AppPalette.sage,
|
disabledBackgroundColor: AppPalette.sage,
|
||||||
),
|
),
|
||||||
|
|||||||
Reference in New Issue
Block a user