App 현황 표시 UI개선

userfront/lib/features/dashboard/presentation/dashboard_screen.dart

@@ -835,136 +835,77 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
   Widget _buildActivityGrid(List<_ActivityItem> activities, bool isMobile) {
     if (activities.isEmpty) return const SizedBox.shrink();
 
-    final shouldShowToggle = activities.length > 4;
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final maxWidth = constraints.maxWidth;
         
-    // 더보기를 누르지 않은 경우: 최대 4개 노출 (Grid/Wrap)
+        // 화면 너비에 따른 컬럼 수 및 초기 표시 개수 결정
-    if (!_showAllActivities) {
+        int crossAxisCount;
-      final visibleActivities = activities.take(4).toList();
+        if (maxWidth > 1200) {
-      Widget grid;
+          crossAxisCount = 4;
-      if (isMobile) {
+        } else if (maxWidth > 800) {
-        grid = GridView.builder(
+          crossAxisCount = 3;
-          shrinkWrap: true,
-          physics: const NeverScrollableScrollPhysics(),
-          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-            crossAxisCount: 2,
-            mainAxisSpacing: 12,
-            crossAxisSpacing: 12,
-            childAspectRatio: 1.05,
-          ),
-          itemCount: visibleActivities.length,
-          itemBuilder: (context, index) => _buildActivityCard(visibleActivities[index]),
-        );
         } else {
-        grid = Wrap(
+          crossAxisCount = 2;
-          spacing: 12,
-          runSpacing: 12,
-          children: visibleActivities.map(_buildActivityCard).toList(),
-        );
         }
 
+        // 초기 표시 개수는 한 줄에 표시되는 개수와 동일하게 설정 (요청에 따라 유동적 조절 가능)
+        final int initialVisibleCount = crossAxisCount;
+        final shouldShowToggle = activities.length > initialVisibleCount;
+
+        List<_ActivityItem> visibleActivities;
+        if (_showAllActivities) {
+          visibleActivities = activities;
+        } else {
+          visibleActivities = activities.take(initialVisibleCount).toList();
+        }
+
+        // 카드의 너비를 화면 너비에 맞춰 계산 (여백 고려)
+        final double spacing = 12.0;
+        final double cardWidth = (maxWidth - (spacing * (crossAxisCount - 1))) / crossAxisCount;
+
         return Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-          grid,
+            Wrap(
+              spacing: spacing,
+              runSpacing: spacing,
+              children: visibleActivities.map((item) {
+                return SizedBox(
+                  width: cardWidth,
+                  child: _buildActivityCard(item, cardWidth: cardWidth),
+                );
+              }).toList(),
+            ),
             if (shouldShowToggle)
               Padding(
-              padding: const EdgeInsets.only(top: 12),
+                padding: const EdgeInsets.only(top: 16),
                 child: Align(
                   alignment: Alignment.centerRight,
                   child: TextButton.icon(
-                  onPressed: () => setState(() => _showAllActivities = true),
+                    onPressed: () => setState(() => _showAllActivities = !_showAllActivities),
-                  icon: const Icon(Icons.add, size: 18, color: Colors.blueAccent),
+                    icon: Icon(
-                  label: const Text('더보기', style: TextStyle(color: Colors.blueAccent, fontWeight: FontWeight.bold)),
+                      _showAllActivities ? Icons.keyboard_arrow_up : Icons.add,
+                      size: 18,
+                      color: _showAllActivities ? Colors.grey : Colors.blueAccent,
+                    ),
+                    label: Text(
+                      _showAllActivities ? '접기' : '+ 더보기',
+                      style: TextStyle(
+                        color: _showAllActivities ? Colors.grey : Colors.blueAccent,
+                        fontWeight: FontWeight.bold,
                       ),
                     ),
                   ),
-        ],
-      );
-    }
-
-    // 더보기를 누른 경우: 가로 슬라이더/캐러셀 전환
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        Stack(
-          alignment: Alignment.center,
-          children: [
-            SizedBox(
-              height: 220,
-              child: ListView.separated(
-                controller: _rpScrollController,
-                scrollDirection: Axis.horizontal,
-                itemCount: activities.length,
-                separatorBuilder: (context, index) => const SizedBox(width: 12),
-                itemBuilder: (context, index) => UnconstrainedBox(
-                  alignment: Alignment.topCenter,
-                  child: _buildActivityCard(activities[index]),
-                ),
-              ),
-            ),
-            // 왼쪽 이동 버튼
-            Positioned(
-              left: 0,
-              child: _buildScrollButton(
-                icon: Icons.chevron_left,
-                onPressed: () => _rpScrollController.animateTo(
-                  (_rpScrollController.offset - 300).clamp(0, _rpScrollController.position.maxScrollExtent),
-                  duration: const Duration(milliseconds: 300),
-                  curve: Curves.easeInOut,
-                ),
-              ),
-            ),
-            // 오른쪽 이동 버튼
-            Positioned(
-              right: 0,
-              child: _buildScrollButton(
-                icon: Icons.chevron_right,
-                onPressed: () => _rpScrollController.animateTo(
-                  (_rpScrollController.offset + 300).clamp(0, _rpScrollController.position.maxScrollExtent),
-                  duration: const Duration(milliseconds: 300),
-                  curve: Curves.easeInOut,
-                ),
-              ),
-            ),
-          ],
-        ),
-        const SizedBox(height: 12),
-        Align(
-          alignment: Alignment.centerRight,
-          child: TextButton.icon(
-            onPressed: () => setState(() {
-              _showAllActivities = false;
-              _rpScrollController.jumpTo(0); // 접을 때 위치 초기화
-            }),
-            icon: const Icon(Icons.close, size: 18, color: Colors.grey),
-            label: const Text('접기', style: TextStyle(color: Colors.grey, fontWeight: FontWeight.bold)),
                 ),
               ),
           ],
         );
-  }
+      },
-
-  Widget _buildScrollButton({required IconData icon, required VoidCallback onPressed}) {
-    return Container(
-      decoration: BoxDecoration(
-        color: Colors.white.withOpacity(0.8),
-        shape: BoxShape.circle,
-        boxShadow: [
-          BoxShadow(
-            color: Colors.black.withOpacity(0.1),
-            blurRadius: 4,
-            offset: const Offset(0, 2),
-          ),
-        ],
-      ),
-      child: IconButton(
-        icon: Icon(icon, color: _ink),
-        onPressed: onPressed,
-      ),
     );
   }
 
-  Widget _buildActivityCard(_ActivityItem item) {
+  Widget _buildActivityCard(_ActivityItem item, {double? cardWidth}) {
     final isActive = item.status == '활성';
     final statusColor = isActive ? Colors.green : Colors.grey;
     final borderColor = isActive ? Colors.green.withOpacity(0.5) : _border;
@@ -975,7 +916,7 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
 
     // 카드 컨텐츠
     final cardContent = Container(
-      width: 260,
+      width: cardWidth ?? 260,
       padding: const EdgeInsets.all(16),
       decoration: BoxDecoration(
         color: _surface,