From b619355763fb240cd491c11da761406281576a33 Mon Sep 17 00:00:00 2001
From: Johngreen <ramses203@naver.com>
Date: Wed, 11 Feb 2026 09:31:07 +0900
Subject: [PATCH] feat: collapsible area groups in machine list (30+
 auto-collapsed)

---
 dashboard/app/globals.css            | 16 ++++++++++++++++
 dashboard/components/MachineList.tsx | 22 ++++++++++++++++++----
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/dashboard/app/globals.css b/dashboard/app/globals.css
index c4e3398..47f5a15 100644
--- a/dashboard/app/globals.css
+++ b/dashboard/app/globals.css
@@ -2459,6 +2459,22 @@ a {
   font-weight: 400;
 }
 
+.machine-group-chevron {
+  font-size: 20px;
+  color: var(--md-on-surface-variant);
+  transition: transform 0.2s ease;
+  transform: rotate(-90deg);
+  margin-left: 4px;
+}
+
+.machine-group-chevron-open {
+  transform: rotate(0deg);
+}
+
+.machine-group-header:hover {
+  opacity: 0.85;
+}
+
 .machine-card-top {
   display: flex;
   justify-content: space-between;
diff --git a/dashboard/components/MachineList.tsx b/dashboard/components/MachineList.tsx
index 3f3108f..0f2bfaa 100644
--- a/dashboard/components/MachineList.tsx
+++ b/dashboard/components/MachineList.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useState, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import type { Machine, Criticality } from '@/lib/types';
 
@@ -73,26 +74,39 @@ export function MachineList({ machines, tenantId, onEdit, onDelete, onBatchInspe
     }
   };
 
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>(() => {
+    const init: Record<string, boolean> = {};
+    Object.keys(groupedMachines).forEach(area => {
+      init[area] = groupedMachines[area].length > 30;
+    });
+    return init;
+  });
+
+  const toggleArea = useCallback((area: string) => {
+    setCollapsed(prev => ({ ...prev, [area]: !prev[area] }));
+  }, []);
+
   return (
     <div className="machine-list-container">
       {sortedAreas.map(area => (
         <div key={area} className="machine-group">
-          <div className="machine-group-header">
+          <div className="machine-group-header" onClick={() => toggleArea(area)} style={{ cursor: 'pointer' }}>
             <h2 className="machine-group-title">
               <span className="material-symbols-outlined">location_on</span>
               {area} <span className="machine-count">({groupedMachines[area].length}대)</span>
+              <span className={`material-symbols-outlined machine-group-chevron ${collapsed[area] ? '' : 'machine-group-chevron-open'}`}>expand_more</span>
             </h2>
             {onBatchInspect && (
               <button
                 className="btn-outline btn-sm"
-                onClick={() => onBatchInspect(area, groupedMachines[area].map(m => m.id))}
+                onClick={(e) => { e.stopPropagation(); onBatchInspect(area, groupedMachines[area].map(m => m.id)); }}
               >
                 <span className="material-symbols-outlined">playlist_add_check</span>
                 구역 전체 검사
               </button>
             )}
           </div>
-          <div className="machine-grid">
+          {!collapsed[area] && <div className="machine-grid">
             {groupedMachines[area].map((machine) => (
               <div key={machine.id} className="machine-card">
                 <div
@@ -142,7 +156,7 @@ export function MachineList({ machines, tenantId, onEdit, onDelete, onBatchInspe
                 </div>
               </div>
             ))}
-          </div>
+          </div>}
         </div>
       ))}
       {sortedAreas.length === 0 && (