QUEST · CAMPAIGN 화면 — 퀘스트 참여·생성·인증 · 캠페인 목록·상세·후원·랭킹

2026-09-29 17:06:48 +09:00
parent 5de04ac281
commit 18afc9cb98
25 changed files with 9368 additions and 0 deletions
@@ -0,0 +1,161 @@
+import 'package:flutter/material.dart';
+
+import '../../../core/i18n/app_locale.dart';
+import '../../../core/theme/tokens.dart';
+import '../../home/home_screen.dart' show formatPop;
+import 'campaign_style.dart';
+
+/// 캠페인 기여률 카드 — 시안 `272:245738`(상세) · `480:14594`(공유) 공용.
+///
+/// #1a1a1c r12 안쪽 12/16. 라벨 12/500 · 「92%」(ABeeZee 32 + % 20) · 10 두께 막대
+/// (바탕 #000 30%, 채움 그라디언트) · 0 / 목표. 채움 끝 위에 누적 POP 말풍선(100 폭)이 뜬다.
+class CampaignGauge extends StatelessWidget {
+  const CampaignGauge({super.key, required this.raised, required this.goal});
+
+  final int raised;
+  final int goal;
+
+  @override
+  Widget build(BuildContext context) {
+    final ratio = goal == 0 ? 0.0 : (raised / goal).clamp(0.0, 1.0);
+    final percent = goal == 0 ? 0 : ((raised / goal) * 100).round();
+    final axis = campaignText(
+      12,
+      400,
+      const Color(0xFFCDCDCD),
+      height: 1,
+      spacing: 0,
+      family: AppFonts.display,
+    );
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+      decoration: BoxDecoration(
+        color: AppColors.cosmicSurfaceContainer,
+        borderRadius: BorderRadius.circular(AppRadius.md),
+      ),
+      child: LayoutBuilder(
+        builder: (context, box) {
+          final fill = box.maxWidth * ratio;
+          return Stack(
+            clipBehavior: Clip.none,
+            children: [
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    context.l10n.campaignGaugeLabel,
+                    style: campaignText(
+                      12,
+                      500,
+                      AppColors.onCosmicVariant,
+                      height: 20 / 12,
+                      spacing: 0,
+                    ),
+                  ),
+                  Text.rich(
+                    TextSpan(
+                      text: '$percent',
+                      children: [
+                        TextSpan(
+                          text: '%',
+                          style: TextStyle(fontSize: 20, letterSpacing: -0.5),
+                        ),
+                      ],
+                    ),
+                    style: campaignText(
+                      32,
+                      400,
+                      AppColors.onCosmic,
+                      height: 1.4,
+                      family: AppFonts.display,
+                    ),
+                  ),
+                  const SizedBox(height: 12),
+                  Stack(
+                    children: [
+                      Container(
+                        height: 10,
+                        decoration: BoxDecoration(
+                          color: Colors.black.withValues(alpha: 0.3),
+                          borderRadius: BorderRadius.circular(AppRadius.full),
+                        ),
+                      ),
+                      Container(
+                        width: fill,
+                        height: 10,
+                        decoration: BoxDecoration(
+                          gradient: campaignGradient,
+                          borderRadius: BorderRadius.circular(AppRadius.full),
+                        ),
+                      ),
+                    ],
+                  ),
+                  const SizedBox(height: 12),
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      Text('0', style: axis),
+                      Text(formatPop(goal), style: axis),
+                    ],
+                  ),
+                ],
+              ),
+              Positioned(
+                top: 31.5,
+                left: (fill - 50).clamp(0.0, box.maxWidth - 100),
+                child: _Bubble(label: formatPop(raised)),
+              ),
+            ],
+          );
+        },
+      ),
+    );
+  }
+}
+
+/// 누적 POP 말풍선 — 그라디언트 알약 100×32 + 아래 꼬리.
+class _Bubble extends StatelessWidget {
+  const _Bubble({required this.label});
+
+  final String label;
+
+  @override
+  Widget build(BuildContext context) => SizedBox(
+    width: 100,
+    height: 38,
+    child: Stack(
+      alignment: Alignment.topCenter,
+      children: [
+        Positioned(
+          bottom: 0,
+          child: Transform.rotate(
+            angle: 0.785398,
+            child: Container(
+              width: 8,
+              height: 8,
+              color: const Color(0xFF5388CF),
+            ),
+          ),
+        ),
+        Container(
+          height: 32,
+          alignment: Alignment.center,
+          decoration: BoxDecoration(
+            gradient: campaignGradient,
+            borderRadius: BorderRadius.circular(AppRadius.full),
+          ),
+          child: Text(
+            label,
+            style: campaignText(
+              12,
+              500,
+              AppColors.onCosmic,
+              height: 1,
+              spacing: 0,
+            ),
+          ),
+        ),
+      ],
+    ),
+  );
+}