템플릿마다 메인 대시보드 전체 테마(배경/타일/아이콘 색)가 같이 바뀌게 추가

용어 정리: 템플릿 = 상점에서 사는 색/애니메이션 상품, 테마 = 그 템플릿이 몰고 오는 화면 전체 디자인(배경색/타일색/아이콘색). 1단계로 메인 대시보드부터 적용 - 프로필 카드 그라데이션뿐 아니라 페이지 배경, 타일 카드 배경/테두리, 아이콘 동그라미 배경, 타일 아이콘 강조색, 제목/부제목 텍스트 색까지 장착한 템플릿에 맞춰 통째로 바뀐다. 잠긴/비활성 타일(NFC 미인증 등)은 기존처럼 중립 회색(sage)을 그대로 써서 상태 구분은 유지. 6개 기존 템플릿마다 직접 디자인한 테마(lib/theme/profile_themes.dart)를 새로 만들었고, 최고가 "갤럭시" 템플릿은 다른 5개와 달리 통째로 다크 테마로 디자인해 프리미엄 아이템 느낌을 살렸다. 백엔드 /api/shop/equipped가 템플릿 code를 같이 내려주도록 수정해서 프론트엔드가 code로 디자인해둔 테마를 찾아 쓸 수 있게 했다.
2026-10-01 06:13:18 +00:00
parent edf0444b71
commit 0fc80eb5c5
3 changed files with 146 additions and 45 deletions
@@ -0,0 +1,98 @@
+// 🎨 프로필 꾸미기 "템플릿"을 장착하면 프로필 카드 색뿐 아니라 화면 전체의
+// 배경/타일/아이콘 색까지 통째로 바뀌는 "테마" 데이터.
+// 템플릿은 상점에서 사는 색/애니메이션 상품, 테마는 그 템플릿이 몰고 오는
+// 화면 전체 디자인(배경색/타일색/아이콘색/모양)을 가리킨다 - 용어 구분은
+// 사장님이 정해준 것을 그대로 따른다.
+//
+// 템플릿 하나하나에 대해 직접 디자인한 고정 팔레트라서, 서버에서 내려주는
+// code(예: "lavender")로 이 맵을 찾아 쓴다. 템플릿이 늘어나면 여기도 추가해야 한다.
+import 'package:flutter/material.dart';
+
+class ProfileTheme {
+  final Color primary; // 프로필 카드 그라데이션 시작색 (템플릿 색)
+  final Color secondary; // 프로필 카드 그라데이션 끝색 (템플릿 색)
+  final Color background; // 페이지 배경
+  final Color surface; // 타일/카드 배경
+  final Color surfaceAlt; // 아이콘 동그라미 등 보조 표면
+  final Color border; // 타일 테두리/구분선
+  final Color accent; // 타일 아이콘 등 강조색
+  final Color onBackground; // 배경/타일 위에 올라가는 기본 텍스트 색
+  final bool isDark;
+
+  const ProfileTheme({
+    required this.primary,
+    required this.secondary,
+    required this.background,
+    required this.surface,
+    required this.surfaceAlt,
+    required this.border,
+    required this.accent,
+    required this.onBackground,
+    this.isDark = false,
+  });
+}
+
+const Map<String, ProfileTheme> profileThemes = {
+  'lavender': ProfileTheme(
+    primary: Color(0xFFB39DDB),
+    secondary: Color(0xFF7E57C2),
+    background: Color(0xFFF5F0FA),
+    surface: Color(0xFFFFFFFF),
+    surfaceAlt: Color(0xFFEDE4F7),
+    border: Color(0xFFDCCCEF),
+    accent: Color(0xFF7E57C2),
+    onBackground: Color(0xFF1C1C1C),
+  ),
+  'mint': ProfileTheme(
+    primary: Color(0xFF80CBC4),
+    secondary: Color(0xFF00897B),
+    background: Color(0xFFEAF6F4),
+    surface: Color(0xFFFFFFFF),
+    surfaceAlt: Color(0xFFDBF0EC),
+    border: Color(0xFFBFE3DC),
+    accent: Color(0xFF00897B),
+    onBackground: Color(0xFF1C1C1C),
+  ),
+  'sunset': ProfileTheme(
+    primary: Color(0xFFFFB74D),
+    secondary: Color(0xFFE64A19),
+    background: Color(0xFFFFF3E6),
+    surface: Color(0xFFFFFFFF),
+    surfaceAlt: Color(0xFFFFE5CC),
+    border: Color(0xFFFFD1A6),
+    accent: Color(0xFFE64A19),
+    onBackground: Color(0xFF1C1C1C),
+  ),
+  'ocean': ProfileTheme(
+    primary: Color(0xFF4FC3F7),
+    secondary: Color(0xFF01579B),
+    background: Color(0xFFEAF6FC),
+    surface: Color(0xFFFFFFFF),
+    surfaceAlt: Color(0xFFD9EEF9),
+    border: Color(0xFFBBDDF0),
+    accent: Color(0xFF01579B),
+    onBackground: Color(0xFF1C1C1C),
+  ),
+  'aurora': ProfileTheme(
+    primary: Color(0xFF81C784),
+    secondary: Color(0xFF1565C0),
+    background: Color(0xFFEDF6EF),
+    surface: Color(0xFFFFFFFF),
+    surfaceAlt: Color(0xFFDCEEE0),
+    border: Color(0xFFC3E2CA),
+    accent: Color(0xFF1565C0),
+    onBackground: Color(0xFF1C1C1C),
+  ),
+  // 🌌 최고가 템플릿 - 다른 5개와 달리 통째로 다크 테마라서 들어가자마자 확 다르게 느껴진다.
+  'galaxy': ProfileTheme(
+    primary: Color(0xFF9575CD),
+    secondary: Color(0xFF1A237E),
+    background: Color(0xFF14122B),
+    surface: Color(0xFF211F42),
+    surfaceAlt: Color(0xFF2C2A52),
+    border: Color(0xFF3A3768),
+    accent: Color(0xFFB39DDB),
+    onBackground: Color(0xFFF5F3FF),
+    isDark: true,
+  ),
+};