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,164 @@
+import 'package:flutter/material.dart';
+
+import '../../../core/i18n/app_locale.dart';
+import '../../../core/theme/tokens.dart';
+import '../../../core/ui/app_icons.dart';
+import '../campaign_data.dart';
+import 'campaign_gauge.dart';
+import 'campaign_style.dart';
+
+/// 공유 대상. 앞의 셋은 OS 공유 시트로, 링크는 문구 복사로 이어진다.
+enum CampaignShareTarget {
+  instagram('assets/figma/campaign-share-instagram.png'),
+  tiktok('assets/figma/campaign-share-tiktok.png'),
+  x('assets/figma/campaign-share-x.png'),
+  link('assets/figma/campaign-share-link.png');
+
+  const CampaignShareTarget(this.asset);
+  final String asset;
+
+  String get label => switch (this) {
+    instagram => appL10n.shareInstagram,
+    tiktok => appL10n.shareTiktok,
+    x => 'X',
+    link => appL10n.shareCopyLink,
+  };
+}
+
+/// 캠페인 공유 오버레이 — 시안 `480:14594`.
+///
+/// #101010 r24 카드(좌우 20 여백) 안에 닫기 · 「캠페인 공유」 25/600 · 대표 이미지 303 정사각 ·
+/// 제목 24/500 · 본문 · 기여률 카드 · 공유 원형 버튼 넷(36 · 간격 16).
+class CampaignShareDialog extends StatelessWidget {
+  const CampaignShareDialog({
+    super.key,
+    required this.card,
+    required this.raised,
+  });
+
+  final CampaignCardData card;
+  final int raised;
+
+  /// 시안은 오버레이 카드가 상태 표시줄 자리까지 올라온다(위 23 · 아래 22). [Dialog] 는
+  /// 안전 영역을 비켜 가므로 [showGeneralDialog] 로 직접 띄운다.
+  static Future<CampaignShareTarget?> show(
+    BuildContext context, {
+    required CampaignCardData card,
+    required int raised,
+  }) => showGeneralDialog<CampaignShareTarget>(
+    context: context,
+    barrierDismissible: true,
+    barrierLabel: context.l10n.commonClose,
+    barrierColor: AppColors.cosmicVoid,
+    pageBuilder: (_, _, _) => CampaignShareDialog(card: card, raised: raised),
+  );
+
+  @override
+  Widget build(BuildContext context) => Padding(
+    padding: const EdgeInsets.fromLTRB(20, 23, 20, 22),
+    child: Material(
+      color: const Color(0xFF101010),
+      borderRadius: BorderRadius.circular(24),
+      clipBehavior: Clip.antiAlias,
+      child: SingleChildScrollView(
+        padding: const EdgeInsets.fromLTRB(16, 20, 16, 20),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Align(
+              alignment: Alignment.centerRight,
+              child: InkResponse(
+                onTap: () => Navigator.of(context).pop(),
+                radius: 20,
+                child: Tooltip(
+                  message: context.l10n.commonClose,
+                  child: const ImageIcon(
+                    AppIcons.x,
+                    size: 24,
+                    color: AppColors.onCosmic,
+                  ),
+                ),
+              ),
+            ),
+            const SizedBox(height: 24),
+            Text(
+              context.l10n.campaignShareTitle,
+              textAlign: TextAlign.center,
+              style: campaignText(
+                25,
+                600,
+                AppColors.onCosmic,
+                height: 1.4,
+                spacing: 0,
+              ),
+            ),
+            const SizedBox(height: 16),
+            AspectRatio(
+              aspectRatio: 1,
+              child: Image.asset(
+                'assets/figma/campaign-sample.png',
+                fit: BoxFit.cover,
+              ),
+            ),
+            const SizedBox(height: 16),
+            Text(
+              card.title,
+              style: campaignText(24, 500, AppColors.onCosmic, height: 1.4),
+            ),
+            const SizedBox(height: 12),
+            Text(
+              card.body,
+              style: campaignText(
+                14,
+                500,
+                const Color(0xFFC2C2C2),
+                height: 1.4,
+              ),
+            ),
+            const SizedBox(height: 16),
+            CampaignGauge(raised: raised, goal: card.goalPop),
+            const SizedBox(height: 36),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                for (final (i, target)
+                    in CampaignShareTarget.values.indexed) ...[
+                  if (i > 0) const SizedBox(width: 16),
+                  Tooltip(
+                    message: target.label,
+                    child: InkResponse(
+                      onTap: () => Navigator.of(context).pop(target),
+                      radius: 22,
+                      child: _icon(target),
+                    ),
+                  ),
+                ],
+              ],
+            ),
+          ],
+        ),
+      ),
+    ),
+  );
+
+  Widget _icon(CampaignShareTarget target) => switch (target) {
+    CampaignShareTarget.x => Container(
+      width: 36,
+      height: 36,
+      decoration: const BoxDecoration(
+        color: Colors.black,
+        shape: BoxShape.circle,
+      ),
+      alignment: Alignment.center,
+      child: Image.asset(target.asset, width: 21, height: 21),
+    ),
+    _ => ClipOval(
+      child: Image.asset(
+        target.asset,
+        width: 36,
+        height: 36,
+        fit: BoxFit.cover,
+      ),
+    ),
+  };
+}