HOME 을 Figma 「홈」 구성으로 — TODAY'S QUEST · 미니맵·확장 맵(프로토타입 v6.2) · 행성 정보 박스 · 인큐베이터 · 아티스트 소식 · HOT ARCHIVE · 인기 K-INSIDE

app/lib/features/home/widgets/quest_row.dart

@@ -1,219 +1,130 @@
+import 'dart:math' as math;
+
 import 'package:flutter/material.dart';
 
-import '../../../core/theme/tokens.dart';
-import '../home_data.dart';
-import '../home_screen.dart' show formatPop;
 import '../../../core/i18n/app_locale.dart';
+import '../../../core/theme/tokens.dart';
+import '../../../core/ui/app_icons.dart';
+import '../../quest/widgets/quest_card_tile.dart'
+    show QuestIconBox, questImageFor;
 import '../../quest/widgets/time_attack_countdown.dart';
+import '../home_data.dart';
 
-/// TODAY'S QUEST 한 줄 — Figma 「오늘의 출석체크 / 출석 완료 / +{보상} / 보상받기」.
+/// 홈 「TODAY'S QUEST」 묶음 — Figma 「홈」 `2097:16428`: 343×270 · r12 안에 343×90 줄
+/// 세 개를 간격 없이 쌓는다. 앞 두 줄에 `#242424` 1 획(사본 spec) — 줄 사이 구분선으로 보인다.
 ///
-/// 보상 숫자는 Figma 의 50 이 아니라 서버 지급액과 같은 원천에서 온다.
+/// 항목은 설명 프레임 `2097:16397` 「관리자 퀘스트 1·2·3 — 최신순 최대 3개 · 클릭 시 해당
+/// 퀘스트 상세」. 사용자 생성 퀘스트는 저장소가 거른다.
+class QuestRows extends StatelessWidget {
+  const QuestRows({super.key, required this.quests, required this.onTap});
+
+  final List<QuestSummary> quests;
+  final ValueChanged<QuestSummary> onTap;
+
+  /// 시안 줄 수. 나머지는 「더 보기」(퀘스트 목록)에서 본다.
+  static const maxRows = 3;
+
+  @override
+  Widget build(BuildContext context) => ClipRRect(
+    borderRadius: BorderRadius.circular(12),
+    child: Column(
+      children: [
+        for (final (i, q) in quests.take(maxRows).indexed)
+          QuestRow(
+            quest: q,
+            divider: i < math.min(quests.length, maxRows) - 1,
+            onTap: () => onTap(q),
+          ),
+      ],
+    ),
+  );
+}
+
+/// 한 줄 — `2097:16428` 「출석체크 / 오늘의 출석체크」 행: #1A1A1C · 패딩 20 · 왼쪽 50×50
+/// #2E2E2E r16 아이콘 상자(42 이미지) · 간격 19 · 제목 18/600 + 보조 14/500(간격 4) ·
+/// 오른쪽 chevron 24 #4F4F4F.
 ///
-/// 상태별 오른쪽 버튼이 다르다. 정책 설계서 §P-05 — 조건 미충족 시 보상은
-/// 지급하지 않는다(`E-QST-01`).
+/// 보조 줄은 카테고리(사본 「오늘의 출석체크」 · 「커뮤니티」)다. 「홈」 프레임에는 보상 숫자 ·
+/// 진행 상태가 없어 그리지 않는다. 예외는 긴급 타임어택의 남은 시간 하나 — FR-QST-06
+/// 「홈 카운트다운」이 요구한다.
 class QuestRow extends StatelessWidget {
-  const QuestRow({super.key, required this.quest, this.onTap});
+  const QuestRow({
+    super.key,
+    required this.quest,
+    this.onTap,
+    this.divider = false,
+  });
 
   final QuestSummary quest;
   final VoidCallback? onTap;
 
+  /// 아래 변 `#242424` 1 획.
+  final bool divider;
+
+  static const height = 90.0;
+
   @override
   Widget build(BuildContext context) {
-    final t = Theme.of(context).textTheme;
+    final done = quest.state == QuestState.done;
     return Material(
       color: AppColors.cosmicSurfaceContainer,
-      borderRadius: BorderRadius.circular(AppRadius.md),
+      shape: divider
+          ? const Border(bottom: BorderSide(color: Color(0xFF242424)))
+          : null,
       child: InkWell(
         onTap: onTap,
-        borderRadius: BorderRadius.circular(AppRadius.md),
-        child: Padding(
-          padding: const EdgeInsets.all(AppSpace.s4),
-          child: Row(
-            children: [
-              Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text(quest.title, style: t.bodyMedium),
-                    const SizedBox(height: AppSpace.s1),
-                    Text(_subtitle(quest), style: t.bodySmall),
-                  ],
-                ),
-              ),
-              const SizedBox(width: AppSpace.s3),
-              Text(
-                _reward(quest),
-                style: t.titleMedium?.copyWith(color: AppColors.cosmicAccent),
-              ),
-              const SizedBox(width: AppSpace.s3),
-              _Action(state: quest.state, onTap: onTap),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-
-  static String _subtitle(QuestSummary q) => switch (q.state) {
-    QuestState.claimable => appL10n.questAttended,
-    QuestState.inProgress => q.progressLabel ?? appL10n.questInProgressSpaced,
-    QuestState.done => appL10n.questRewardPaid,
-  };
-}
-
-class _Action extends StatelessWidget {
-  const _Action({required this.state, this.onTap});
-
-  final QuestState state;
-  final VoidCallback? onTap;
-
-  @override
-  Widget build(BuildContext context) {
-    final t = Theme.of(context).textTheme;
-    return switch (state) {
-      QuestState.claimable => FilledButton(
-        onPressed: onTap,
-        style: FilledButton.styleFrom(
-          minimumSize: const Size(0, AppSizing.touchMinApp),
-          padding: const EdgeInsets.symmetric(horizontal: AppSpace.s4),
-          backgroundColor: AppColors.cosmicAccent,
-          foregroundColor: AppColors.onCosmicAccent,
-        ),
-        child: Text(_claimLabel),
-      ),
-      QuestState.inProgress => OutlinedButton(
-        onPressed: onTap,
-        style: OutlinedButton.styleFrom(
-          minimumSize: const Size(0, AppSizing.touchMinApp),
-          padding: const EdgeInsets.symmetric(horizontal: AppSpace.s4),
-          foregroundColor: AppColors.onCosmic,
-          side: const BorderSide(color: AppColors.cosmicOutline),
-        ),
-        child: Text(_startLabel),
-      ),
-      QuestState.done => Padding(
-        padding: const EdgeInsets.symmetric(horizontal: AppSpace.s2),
-        child: Text(_doneLabel, style: t.bodySmall),
-      ),
-    };
-  }
-}
-
-/// 사본 HOME 「TODAY'S QUEST」 버튼 문구(`252:159354` spec). 사본 HOME 에 없는 완료 상태는
-/// 퀘스트 화면(C 그룹)의 「보상 완료」와 맞춘다.
-String get _claimLabel => appL10n.questClaim;
-String get _startLabel => appL10n.questStart;
-String get _doneLabel => appL10n.questRewardDone;
-
-/// 홈 「TODAY'S QUEST」 가로 카드 — 사본 `Frame 1984081083`(196×137 · #1A1A1C · r12 ·
-/// 패딩 12 · 간격 28): 제목 16 · 상태 14 #A3A2A0 · 오른쪽 「+보상」 20 #2AC28B, 아래 37 버튼
-/// (보상 가능 = 초록 #3EB58A 흰 글자 · 진행 중 = 흰 바탕 검정 글자). 누르면 퀘스트 목록으로 간다.
-class QuestCard extends StatelessWidget {
-  const QuestCard({super.key, required this.quest, this.onTap});
-
-  final QuestSummary quest;
-  final VoidCallback? onTap;
-
-  static const width = 196.0;
-
-  @override
-  Widget build(BuildContext context) {
-    final (label, fill, ink) = switch (quest.state) {
-      QuestState.claimable => (
-        _claimLabel,
-        const Color(0xFF3EB58A),
-        AppColors.onCosmic,
-      ),
-      QuestState.inProgress => (_startLabel, AppColors.onCosmic, Colors.black),
-      QuestState.done => (
-        _doneLabel,
-        AppColors.cosmicSurfaceRaised,
-        AppColors.onCosmicMuted,
-      ),
-    };
-    return Material(
-      color: AppColors.cosmicSurfaceContainer,
-      borderRadius: BorderRadius.circular(AppRadius.md),
-      child: InkWell(
-        onTap: onTap,
-        borderRadius: BorderRadius.circular(AppRadius.md),
-        child: Padding(
-          padding: const EdgeInsets.all(AppSpace.s3),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.stretch,
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: [
-              Row(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Expanded(
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Text(
-                          quest.title,
-                          maxLines: 1,
-                          overflow: TextOverflow.ellipsis,
-                          style: const TextStyle(
-                            fontFamily: AppFonts.body,
-                            fontSize: 16,
-                            fontWeight: FontWeight.w600,
-                            height: 1.4,
-                            color: AppColors.onCosmic,
-                          ),
+        child: ConstrainedBox(
+          // 글자 확대 때는 늘어난다 — 고정하면 잘린다.
+          constraints: const BoxConstraints(minHeight: height),
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
+            child: Row(
+              children: [
+                QuestIconBox(image: questImageFor(quest.type, quest.title)),
+                const SizedBox(width: 19),
+                Expanded(
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        quest.title,
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                        style: const TextStyle(
+                          fontFamily: AppFonts.body,
+                          fontSize: 18,
+                          fontWeight: FontWeight.w600,
+                          height: 20 / 18,
+                          color: AppColors.onCosmic,
                         ),
-                        const SizedBox(height: 6),
-                        // 타임어택은 받기 전까지 남은 시간을 센다(FR-QST-06).
-                        if (quest.endsAt case final endsAt?
-                            when quest.state != QuestState.done)
-                          TimeAttackCountdown(
-                            endsAt: endsAt,
-                            builder: (context, left) => _subtitleText(
-                              left == null
-                                  ? context.l10n.questTimeAttackClosed
-                                  : context.l10n.questTimeAttackLeft(
-                                      formatLeft(left),
-                                    ),
-                            ),
-                          )
-                        else
-                          _subtitleText(QuestRow._subtitle(quest)),
-                      ],
-                    ),
-                  ),
-                  const SizedBox(width: AppSpace.s2),
-                  Text(
-                    _reward(quest),
-                    style: const TextStyle(
-                      fontFamily: AppFonts.body,
-                      fontSize: 20,
-                      fontWeight: FontWeight.w600,
-                      height: 1,
-                      color: Color(0xFF2AC28B),
-                    ),
-                  ),
-                ],
-              ),
-              Container(
-                height: 37,
-                alignment: Alignment.center,
-                decoration: BoxDecoration(
-                  color: fill,
-                  borderRadius: BorderRadius.circular(AppRadius.sm),
-                ),
-                child: Text(
-                  label,
-                  style: TextStyle(
-                    fontFamily: AppFonts.body,
-                    fontSize: 14,
-                    fontWeight: FontWeight.w600,
-                    height: 1,
-                    color: ink,
+                      ),
+                      const SizedBox(height: 4),
+                      // 타임어택은 받기 전까지 남은 시간을 센다(FR-QST-06).
+                      if (quest.endsAt case final endsAt? when !done)
+                        TimeAttackCountdown(
+                          endsAt: endsAt,
+                          builder: (context, left) => _sub(
+                            left == null
+                                ? context.l10n.questTimeAttackClosed
+                                : context.l10n.questTimeAttackLeft(
+                                    formatLeft(left),
+                                  ),
+                          ),
+                        )
+                      else
+                        _sub(quest.category ?? ''),
+                    ],
                   ),
                 ),
-              ),
-            ],
+                const SizedBox(width: AppSpace.s2),
+                const ImageIcon(
+                  AppIcons.chevronRight,
+                  size: 24,
+                  color: Color(0xFF4F4F4F),
+                ),
+              ],
+            ),
           ),
         ),
       ),
@@ -221,19 +132,15 @@ class QuestCard extends StatelessWidget {
   }
 }
 
-Widget _subtitleText(String text) => Text(
+Widget _sub(String text) => Text(
   text,
   maxLines: 1,
   overflow: TextOverflow.ellipsis,
   style: const TextStyle(
     fontFamily: AppFonts.body,
     fontSize: 14,
-    fontWeight: FontWeight.w600,
-    height: 1.4,
+    fontWeight: FontWeight.w500,
+    height: 20 / 14,
     color: AppColors.onCosmicVariant,
   ),
 );
-
-/// 운영값을 못 읽었으면 숫자를 지어내지 않는다.
-String _reward(QuestSummary quest) =>
-    quest.rewardPop == null ? 'POP' : '+${formatPop(quest.rewardPop!)}';