feat: FlowWidget에 그룹핑 기능 구현

- TableListComponent와 동일한 그룹핑 기능 적용
- 다중 컬럼 선택으로 계층적 그룹화 지원
- 그룹 설정 다이얼로그 추가
- 그룹별 데이터 펼치기/접기 기능
- 그룹 헤더에 항목 개수 표시
- localStorage에 그룹 설정 저장/복원
- 그룹 해제 버튼 추가
- 그룹 표시 배지 UI

주요 기능:
- 플로우 스텝 데이터에 그룹화 적용
- filteredData와 stepData 모두 지원
- 그룹 없을 때는 기존 페이지네이션 유지
- 그룹 있을 때는 모든 그룹 데이터 표시

frontend/components/screen/widgets/FlowWidget.tsx

@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { FlowComponent } from "@/types/screen-management";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { AlertCircle, Loader2, ChevronUp, Filter, X } from "lucide-react";
+import { AlertCircle, Loader2, ChevronUp, Filter, X, Layers, ChevronDown, ChevronRight } from "lucide-react";
 import {
   getFlowById,
   getAllStepCounts,
@@ -40,6 +40,14 @@ import { Input } from "@/components/ui/input";
 import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
 import { useAuth } from "@/hooks/useAuth";
 
+// 그룹화된 데이터 인터페이스
+interface GroupedData {
+  groupKey: string;
+  groupValues: Record<string, any>;
+  items: any[];
+  count: number;
+}
+
 interface FlowWidgetProps {
   component: FlowComponent;
   onStepClick?: (stepId: number, stepName: string) => void;
@@ -106,6 +114,11 @@ export function FlowWidget({
   const [allAvailableColumns, setAllAvailableColumns] = useState<string[]>([]); // 전체 컬럼 목록
   const [filteredData, setFilteredData] = useState<any[]>([]); // 필터링된 데이터
 
+  // 🆕 그룹 설정 관련 상태
+  const [isGroupSettingOpen, setIsGroupSettingOpen] = useState(false); // 그룹 설정 다이얼로그
+  const [groupByColumns, setGroupByColumns] = useState<string[]>([]); // 그룹화할 컬럼 목록
+  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set()); // 접힌 그룹
+
   /**
    * 🆕 컬럼 표시 결정 함수
    * 1순위: 플로우 스텝 기본 설정 (displayConfig)
@@ -163,43 +176,30 @@ export function FlowWidget({
         // 초기값: 빈 필터 (사용자가 선택해야 함)
         setSearchFilterColumns(new Set());
       }
-
-      // 이전 사용자의 필터 설정 정리 (사용자 ID가 다른 키들 제거)
-      if (typeof window !== "undefined") {
-        const currentUserId = user.userId;
-        const keysToRemove: string[] = [];
-        
-        // localStorage의 모든 키를 확인
-        for (let i = 0; i < localStorage.length; i++) {
-          const key = localStorage.key(i);
-          if (key && key.startsWith("flowWidget_searchFilters_")) {
-            // 키 형식: flowWidget_searchFilters_${userId}_${flowId}_${stepId}
-            // split("_")를 하면 ["flowWidget", "searchFilters", "사용자ID", "플로우ID", "스텝ID"]
-            // 따라서 userId는 parts[2]입니다
-            const parts = key.split("_");
-            if (parts.length >= 3) {
-              const userIdFromKey = parts[2]; // flowWidget_searchFilters_ 다음이 userId
-              // 현재 사용자 ID와 다른 사용자의 설정은 제거
-              if (userIdFromKey !== currentUserId) {
-                keysToRemove.push(key);
-              }
-            }
-          }
-        }
-        
-        // 이전 사용자의 설정 제거
-        if (keysToRemove.length > 0) {
-          keysToRemove.forEach(key => {
-            localStorage.removeItem(key);
-          });
-        }
-      }
     } catch (error) {
       console.error("필터 설정 불러오기 실패:", error);
       setSearchFilterColumns(new Set());
     }
   }, [filterSettingKey, stepDataColumns, user?.userId]);
 
+  // 🆕 저장된 그룹 설정 불러오기
+  useEffect(() => {
+    if (!groupSettingKey || stepDataColumns.length === 0) return;
+
+    try {
+      const saved = localStorage.getItem(groupSettingKey);
+      if (saved) {
+        const savedGroups = JSON.parse(saved);
+        // 현재 단계에 표시되는 컬럼만 필터링
+        const validGroups = savedGroups.filter((col: string) => stepDataColumns.includes(col));
+        setGroupByColumns(validGroups);
+      }
+    } catch (error) {
+      console.error("그룹 설정 불러오기 실패:", error);
+      setGroupByColumns([]);
+    }
+  }, [groupSettingKey, stepDataColumns]);
+
   // 🆕 필터 설정 저장
   const saveFilterSettings = useCallback(() => {
     if (!filterSettingKey) return;
@@ -247,6 +247,98 @@ export function FlowWidget({
     setFilteredData([]);
   }, []);
 
+  // 🆕 그룹 설정 localStorage 키 생성
+  const groupSettingKey = useMemo(() => {
+    if (!selectedStep) return null;
+    return `flowWidget_groupSettings_step_${selectedStep}`;
+  }, [selectedStep]);
+
+  // 🆕 그룹 설정 저장
+  const saveGroupSettings = useCallback(() => {
+    if (!groupSettingKey) return;
+
+    try {
+      localStorage.setItem(groupSettingKey, JSON.stringify(groupByColumns));
+      setIsGroupSettingOpen(false);
+      toast.success("그룹 설정이 저장되었습니다");
+    } catch (error) {
+      console.error("그룹 설정 저장 실패:", error);
+      toast.error("설정 저장에 실패했습니다");
+    }
+  }, [groupSettingKey, groupByColumns]);
+
+  // 🆕 그룹 컬럼 토글
+  const toggleGroupColumn = useCallback((columnName: string) => {
+    setGroupByColumns((prev) => {
+      if (prev.includes(columnName)) {
+        return prev.filter((col) => col !== columnName);
+      } else {
+        return [...prev, columnName];
+      }
+    });
+  }, []);
+
+  // 🆕 그룹 펼치기/접기 토글
+  const toggleGroupCollapse = useCallback((groupKey: string) => {
+    setCollapsedGroups((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(groupKey)) {
+        newSet.delete(groupKey);
+      } else {
+        newSet.add(groupKey);
+      }
+      return newSet;
+    });
+  }, []);
+
+  // 🆕 그룹 해제
+  const clearGrouping = useCallback(() => {
+    setGroupByColumns([]);
+    setCollapsedGroups(new Set());
+    if (groupSettingKey) {
+      localStorage.removeItem(groupSettingKey);
+    }
+    toast.success("그룹이 해제되었습니다");
+  }, [groupSettingKey]);
+
+  // 🆕 데이터 그룹화
+  const groupedData = useMemo((): GroupedData[] => {
+    const dataToGroup = filteredData.length > 0 ? filteredData : stepData;
+    
+    if (groupByColumns.length === 0 || dataToGroup.length === 0) return [];
+
+    const grouped = new Map<string, any[]>();
+
+    dataToGroup.forEach((item) => {
+      // 그룹 키 생성: "통화:KRW > 단위:EA"
+      const keyParts = groupByColumns.map((col) => {
+        const value = item[col];
+        const label = columnLabels[col] || col;
+        return `${label}:${value !== null && value !== undefined ? value : "-"}`;
+      });
+      const groupKey = keyParts.join(" > ");
+
+      if (!grouped.has(groupKey)) {
+        grouped.set(groupKey, []);
+      }
+      grouped.get(groupKey)!.push(item);
+    });
+
+    return Array.from(grouped.entries()).map(([groupKey, items]) => {
+      const groupValues: Record<string, any> = {};
+      groupByColumns.forEach((col) => {
+        groupValues[col] = items[0]?.[col];
+      });
+
+      return {
+        groupKey,
+        groupValues,
+        items,
+        count: items.length,
+      };
+    });
+  }, [filteredData, stepData, groupByColumns, columnLabels]);
+
   // 🆕 검색 값이 변경될 때마다 자동 검색 (useEffect로 직접 처리)
   useEffect(() => {
     if (!stepData || stepData.length === 0) {
@@ -796,6 +888,7 @@ export function FlowWidget({
 
               {/* 🆕 필터 설정 버튼 */}
               {stepDataColumns.length > 0 && (
+                <div className="flex gap-2">
                   <Button
                     variant="outline"
                     size="sm"
@@ -816,9 +909,61 @@ export function FlowWidget({
                       </Badge>
                     )}
                   </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      if (isPreviewMode) {
+                        return;
+                      }
+                      setIsGroupSettingOpen(true);
+                    }}
+                    disabled={isPreviewMode}
+                    className="h-8 shrink-0 text-xs sm:text-sm"
+                  >
+                    <Layers className="mr-2 h-3 w-3 sm:h-4 sm:w-4" />
+                    그룹 설정
+                    {groupByColumns.length > 0 && (
+                      <Badge variant="secondary" className="ml-2 h-5 px-1.5 text-[10px]">
+                        {groupByColumns.length}
+                      </Badge>
+                    )}
+                  </Button>
+                </div>
               )}
             </div>
 
+            {/* 🆕 그룹 표시 배지 */}
+            {groupByColumns.length > 0 && (
+              <div className="border-b border-border bg-muted/30 px-4 py-2">
+                <div className="flex items-center gap-2 text-xs sm:text-sm">
+                  <span className="text-muted-foreground">그룹:</span>
+                  <div className="flex flex-wrap items-center gap-2">
+                    {groupByColumns.map((col, idx) => (
+                      <span key={col} className="flex items-center">
+                        {idx > 0 && <span className="text-muted-foreground mx-1">→</span>}
+                        <span className="bg-primary/10 text-primary rounded px-2 py-1 text-xs font-medium">
+                          {columnLabels[col] || col}
+                        </span>
+                      </span>
+                    ))}
+                  </div>
+                  <button
+                    onClick={() => {
+                      if (!isPreviewMode) {
+                        clearGrouping();
+                      }
+                    }}
+                    disabled={isPreviewMode}
+                    className="hover:bg-destructive/10 text-destructive ml-auto rounded p-1"
+                    title="그룹 해제"
+                  >
+                    <X className="h-4 w-4" />
+                  </button>
+                </div>
+              </div>
+            )}
+
             {/* 🆕 검색 필터 입력 영역 */}
             {searchFilterColumns.size > 0 && (
               <div className="mt-2 space-y-3 p-4">
@@ -940,7 +1085,64 @@ export function FlowWidget({
                     </TableRow>
                   </TableHeader>
                   <TableBody>
-                    {paginatedStepData.map((row, pageIndex) => {
+                    {groupByColumns.length > 0 && groupedData.length > 0 ? (
+                      // 그룹화된 렌더링
+                      groupedData.flatMap((group) => {
+                        const isCollapsed = collapsedGroups.has(group.groupKey);
+                        const groupRows = [
+                          <TableRow key={`group-${group.groupKey}`}>
+                            <TableCell
+                              colSpan={stepDataColumns.length + (allowDataMove ? 1 : 0)}
+                              className="bg-muted/50 border-b"
+                            >
+                              <div
+                                className="flex items-center gap-3 p-2 cursor-pointer hover:bg-muted"
+                                onClick={() => toggleGroupCollapse(group.groupKey)}
+                              >
+                                {isCollapsed ? (
+                                  <ChevronRight className="h-4 w-4 flex-shrink-0" />
+                                ) : (
+                                  <ChevronDown className="h-4 w-4 flex-shrink-0" />
+                                )}
+                                <span className="font-medium text-sm flex-1">{group.groupKey}</span>
+                                <span className="text-muted-foreground text-xs">({group.count}건)</span>
+                              </div>
+                            </TableCell>
+                          </TableRow>,
+                        ];
+
+                        if (!isCollapsed) {
+                          const dataRows = group.items.map((row, itemIndex) => {
+                            const actualIndex = displayData.indexOf(row);
+                            return (
+                              <TableRow
+                                key={`${group.groupKey}-${itemIndex}`}
+                                className={`h-16 transition-colors hover:bg-muted/50 ${selectedRows.has(actualIndex) ? "bg-primary/5" : ""}`}
+                              >
+                                {allowDataMove && (
+                                  <TableCell className="bg-background sticky left-0 z-10 border-b px-6 py-3 text-center">
+                                    <Checkbox
+                                      checked={selectedRows.has(actualIndex)}
+                                      onCheckedChange={() => toggleRowSelection(actualIndex)}
+                                    />
+                                  </TableCell>
+                                )}
+                                {stepDataColumns.map((col) => (
+                                  <TableCell key={col} className="h-16 border-b px-6 py-3 text-sm whitespace-nowrap">
+                                    {formatValue(row[col])}
+                                  </TableCell>
+                                ))}
+                              </TableRow>
+                            );
+                          });
+                          groupRows.push(...dataRows);
+                        }
+
+                        return groupRows;
+                      })
+                    ) : (
+                      // 일반 렌더링 (그룹 없음)
+                      paginatedStepData.map((row, pageIndex) => {
                         const actualIndex = (stepDataPage - 1) * stepDataPageSize + pageIndex;
                         return (
                           <TableRow
@@ -962,7 +1164,8 @@ export function FlowWidget({
                             ))}
                           </TableRow>
                         );
-                    })}
+                      })
+                    )}
                   </TableBody>
                 </Table>
               </div>
@@ -1162,6 +1365,63 @@ export function FlowWidget({
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* 🆕 그룹 설정 다이얼로그 */}
+      <Dialog open={isGroupSettingOpen} onOpenChange={setIsGroupSettingOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">그룹 설정</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              데이터를 그룹화할 컬럼을 선택하세요. 여러 컬럼을 선택하면 계층적으로 그룹화됩니다.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-3 sm:space-y-4">
+            {/* 컬럼 목록 */}
+            <div className="max-h-[50vh] space-y-2 overflow-y-auto rounded border p-2">
+              {stepDataColumns.map((col) => (
+                <div key={col} className="hover:bg-muted/50 flex items-center gap-3 rounded p-2">
+                  <Checkbox
+                    id={`group-${col}`}
+                    checked={groupByColumns.includes(col)}
+                    onCheckedChange={() => toggleGroupColumn(col)}
+                  />
+                  <Label htmlFor={`group-${col}`} className="flex-1 cursor-pointer text-xs font-normal sm:text-sm">
+                    {columnLabels[col] || col}
+                  </Label>
+                </div>
+              ))}
+            </div>
+
+            {/* 선택된 그룹 안내 */}
+            <div className="text-muted-foreground bg-muted/30 rounded p-3 text-xs">
+              {groupByColumns.length === 0 ? (
+                <span>그룹화할 컬럼을 선택하세요</span>
+              ) : (
+                <span>
+                  선택된 그룹:{" "}
+                  <span className="text-primary font-semibold">
+                    {groupByColumns.map((col) => columnLabels[col] || col).join(" → ")}
+                  </span>
+                </span>
+              )}
+            </div>
+          </div>
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="outline"
+              onClick={() => setIsGroupSettingOpen(false)}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              취소
+            </Button>
+            <Button onClick={saveGroupSettings} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              적용
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }