Merge pull request 'lhj' (#364) from lhj into main

Reviewed-on: http://39.117.244.52:3000/kjs/ERP-node/pulls/364

frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx

@@ -432,10 +432,20 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
 
   // 필터 영역 필드
   const filterFields = useMemo(
-    () =>
+    () => {
-      fields
+      const result = fields
         .filter((f) => f.area === "filter" && f.visible !== false)
-        .sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0)),
+        .sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0));
+      
+      console.log("🔷 [filterFields] 필터 필드 계산:", {
+        totalFields: fields.length,
+        filterFieldsCount: result.length,
+        filterFieldNames: result.map(f => f.field),
+        allFieldAreas: fields.map(f => ({ field: f.field, area: f.area, visible: f.visible })),
+      });
+      
+      return result;
+    },
     [fields]
   );
 
@@ -526,11 +536,16 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
     });
     
     return result;
-  }, [filteredData, fields, pivotState.expandedRowPaths, pivotState.expandedColumnPaths]);
+  }, [
+    filteredData, 
+    fields, 
+    JSON.stringify(pivotState.expandedRowPaths), 
+    JSON.stringify(pivotState.expandedColumnPaths)
+  ]);
   
   // 🆕 초기 로드 시 첫 레벨 자동 확장
   useEffect(() => {
-    if (pivotResult && pivotResult.flatRows.length > 0) {
+    if (pivotResult && pivotResult.flatRows.length > 0 && !isInitialExpanded) {
       console.log("🔶 피벗 결과 생성됨:", {
         flatRowsCount: pivotResult.flatRows.length,
         expandedRowPaths: pivotState.expandedRowPaths.length,
@@ -542,10 +557,10 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
       
       console.log("🔶 첫 레벨 행 (level 0, hasChildren):", firstLevelRows.map(r => ({ path: r.path, caption: r.caption })));
 
-      // 초기 확장이 안 되어 있고, 첫 레벨 행이 있으면 자동 확장
+      // 첫 레벨 행이 있으면 자동 확장
-      if (!isInitialExpanded && firstLevelRows.length > 0) {
+      if (firstLevelRows.length > 0) {
         const firstLevelPaths = firstLevelRows.map(row => row.path);
-        console.log("🔶 초기 자동 확장 실행:", firstLevelPaths);
+        console.log("🔶 초기 자동 확장 실행 (한 번만):", firstLevelPaths);
         setPivotState(prev => ({
           ...prev,
           expandedRowPaths: firstLevelPaths,
@@ -553,7 +568,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
         setIsInitialExpanded(true);
       }
     }
-  }, [pivotResult, isInitialExpanded, pivotState.expandedRowPaths.length]);
+  }, [pivotResult, isInitialExpanded]);
 
   // 조건부 서식용 전체 값 수집
   const allCellValues = useMemo(() => {
@@ -710,7 +725,15 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
   // 필드 변경
   const handleFieldsChange = useCallback(
     (newFields: PivotFieldConfig[]) => {
+      console.log("🔷 [handleFieldsChange] 필드 변경:", {
+        totalFields: newFields.length,
+        filterFields: newFields.filter(f => f.area === "filter").length,
+        filterFieldNames: newFields.filter(f => f.area === "filter").map(f => f.field),
+        changedFields: newFields.filter(f => f.area === "filter"),
+      });
+      console.log("🔷 [handleFieldsChange] setFields 호출 전");
       setFields(newFields);
+      console.log("🔷 [handleFieldsChange] setFields 호출 후");
     },
     []
   );
@@ -749,31 +772,61 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
     [onExpandChange]
   );
 
-  // 전체 확장
+  // 전체 확장 (재귀적으로 모든 레벨 확장)
   const handleExpandAll = useCallback(() => {
-    if (!pivotResult) return;
+    if (!pivotResult) {
+      console.log("❌ [handleExpandAll] pivotResult가 없음");
+      return;
+    }
 
+    // 🆕 재귀적으로 모든 가능한 경로 생성
     const allRowPaths: string[][] = [];
-    pivotResult.flatRows.forEach((row) => {
+    const rowFields = fields.filter((f) => f.area === "row" && f.visible !== false);
-      if (row.hasChildren) {
+    
-        allRowPaths.push(row.path);
+    // 데이터에서 모든 고유한 경로 추출
+    const pathSet = new Set<string>();
+    filteredData.forEach((item) => {
+      for (let depth = 1; depth <= rowFields.length; depth++) {
+        const path = rowFields.slice(0, depth).map((f) => String(item[f.field] ?? ""));
+        const pathKey = JSON.stringify(path);
+        pathSet.add(pathKey);
       }
     });
 
+    // Set을 배열로 변환
+    pathSet.forEach((pathKey) => {
+      allRowPaths.push(JSON.parse(pathKey));
+    });
+
+    console.log("🔷 [handleExpandAll] 확장할 행:", {
+      totalRows: pivotResult.flatRows.length,
+      rowsWithChildren: allRowPaths.length,
+      paths: allRowPaths.slice(0, 5), // 처음 5개만 로그
+    });
+
     setPivotState((prev) => ({
       ...prev,
       expandedRowPaths: allRowPaths,
       expandedColumnPaths: [],
     }));
-  }, [pivotResult]);
+  }, [pivotResult, fields, filteredData]);
 
   // 전체 축소
   const handleCollapseAll = useCallback(() => {
-    setPivotState((prev) => ({
+    console.log("🔷 [handleCollapseAll] 전체 축소 실행");
-      ...prev,
+    
-      expandedRowPaths: [],
+    setPivotState((prev) => {
-      expandedColumnPaths: [],
+      console.log("🔷 [handleCollapseAll] 이전 상태:", {
-    }));
+        expandedRowPaths: prev.expandedRowPaths.length,
+        expandedColumnPaths: prev.expandedColumnPaths.length,
+      });
+      
+      return {
+        ...prev,
+        expandedRowPaths: [],
+        expandedColumnPaths: [],
+      };
+    });
   }, []);
 
   // 셀 클릭
@@ -988,10 +1041,12 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
     console.log("피벗 상태가 저장되었습니다.");
   }, [saveStateToStorage]);
   
-  // 상태 초기화
+  // 상태 초기화 (확장/축소, 정렬, 필터만 초기화, 필드 설정은 유지)
   const handleResetState = useCallback(() => {
+    // 로컬 스토리지에서 상태 제거
     localStorage.removeItem(stateStorageKey);
-    setFields(initialFields);
+    
+    // 확장/축소, 정렬, 필터 상태만 초기화
     setPivotState({
       expandedRowPaths: [],
       expandedColumnPaths: [],
@@ -1002,7 +1057,10 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
     setColumnWidths({});
     setSelectedCell(null);
     setSelectionRange(null);
-  }, [stateStorageKey, initialFields]);
+    
+    // 🆕 필드 설정은 유지 (initialFields로 되돌리지 않음)
+    console.log("🔷 피벗 상태가 초기화되었습니다 (필드 설정은 유지)");
+  }, [stateStorageKey]);
   
   // 필드 숨기기/표시 상태
   const [hiddenFields, setHiddenFields] = useState<Set<string>>(new Set());
@@ -1391,8 +1449,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                 variant="ghost"
                 size="sm"
                 className="h-7 px-2"
-                onClick={handleExpandAll}
+                onClick={handleCollapseAll}
-                title="전체 확장"
+                title="전체 축소"
               >
                 <ChevronDown className="h-4 w-4" />
               </Button>
@@ -1401,8 +1459,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                 variant="ghost"
                 size="sm"
                 className="h-7 px-2"
-                onClick={handleCollapseAll}
+                onClick={handleExpandAll}
-                title="전체 축소"
+                title="전체 확장"
               >
                 <ChevronRight className="h-4 w-4" />
               </Button>
@@ -1582,19 +1640,25 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                     <button
                       className={cn(
                         "flex items-center gap-1.5 px-2 py-1 rounded text-xs",
-                        "border transition-colors",
+                        "border transition-colors max-w-xs",
                         isFiltered
                           ? "bg-orange-100 border-orange-300 text-orange-800 dark:bg-orange-900/30 dark:border-orange-700 dark:text-orange-200"
                           : "bg-background border-border hover:bg-accent"
                       )}
+                      title={isFiltered ? `${filterField.caption}: ${selectedValues.join(", ")}` : filterField.caption}
                     >
-                      <span>{filterField.caption}</span>
+                      <span className="font-medium">{filterField.caption}:</span>
-                      {isFiltered && (
+                      {isFiltered ? (
-                        <span className="bg-orange-500 text-white px-1 rounded text-[10px]">
+                        <span className="truncate">
-                          {selectedValues.length}
+                          {selectedValues.length <= 2 
+                            ? selectedValues.join(", ")
+                            : `${selectedValues.slice(0, 2).join(", ")} 외 ${selectedValues.length - 2}개`
+                          }
                         </span>
+                      ) : (
+                        <span className="text-muted-foreground">전체</span>
                       )}
-                      <ChevronDown className="h-3 w-3" />
+                      <ChevronDown className="h-3 w-3 shrink-0" />
                     </button>
                   }
                 />

frontend/lib/registry/components/pivot-grid/components/FieldPanel.tsx

@@ -25,6 +25,7 @@ import {
   horizontalListSortingStrategy,
   useSortable,
 } from "@dnd-kit/sortable";
+import { useDroppable } from "@dnd-kit/core";
 import { CSS } from "@dnd-kit/utilities";
 import { cn } from "@/lib/utils";
 import { PivotFieldConfig, PivotAreaType } from "../types";
@@ -244,22 +245,31 @@ const DroppableArea: React.FC<DroppableAreaProps> = ({
   const areaFields = fields.filter((f) => f.area === area && f.visible !== false);
   const fieldIds = areaFields.map((f) => `${area}-${f.field}`);
 
+  // 🆕 드롭 가능 영역 설정
+  const { setNodeRef, isOver: isOverDroppable } = useDroppable({
+    id: area, // "filter", "column", "row", "data"
+  });
+
+  const finalIsOver = isOver || isOverDroppable;
+
   return (
     <div
+      ref={setNodeRef}
       className={cn(
-        "flex-1 min-h-[44px] rounded border border-dashed p-1.5",
+        "flex-1 min-h-[60px] rounded border-2 border-dashed p-2",
-        "transition-colors duration-200",
+        "transition-all duration-200",
         config.color,
-        isOver && "border-primary bg-primary/5"
+        finalIsOver && "border-primary bg-primary/10 scale-[1.02]",
+        areaFields.length === 0 && "border-2" // 빈 영역일 때 테두리 강조
       )}
       data-area={area}
     >
       {/* 영역 헤더 */}
-      <div className="flex items-center gap-1 mb-1 text-[11px] font-medium text-muted-foreground">
+      <div className="flex items-center gap-1 mb-1.5 text-xs font-semibold text-muted-foreground">
         {icon}
         <span>{title}</span>
         {areaFields.length > 0 && (
-          <span className="text-[10px] bg-muted px-1 rounded">
+          <span className="text-[10px] bg-muted px-1.5 py-0.5 rounded">
             {areaFields.length}
           </span>
         )}
@@ -267,11 +277,16 @@ const DroppableArea: React.FC<DroppableAreaProps> = ({
 
       {/* 필드 목록 */}
       <SortableContext items={fieldIds} strategy={horizontalListSortingStrategy}>
-        <div className="flex flex-wrap gap-1 min-h-[22px]">
+        <div className="flex flex-wrap gap-1 min-h-[28px] relative">
           {areaFields.length === 0 ? (
-            <span className="text-[10px] text-muted-foreground/50 italic">
+            <div 
-              필드를 여기로 드래그
+              className="flex items-center justify-center w-full py-1 pointer-events-none"
-            </span>
+              style={{ pointerEvents: 'none' }}
+            >
+              <span className="text-xs text-muted-foreground/70 italic font-medium">
+                ← 필드를 여기로 드래그하세요
+              </span>
+            </div>
           ) : (
             areaFields.map((field) => (
               <SortableFieldChip
@@ -339,31 +354,67 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
       return;
     }
 
-    // 드롭 영역 감지
+    // 드롭 영역 감지 (영역 자체의 ID를 우선 확인)
     const overId = over.id as string;
+    
+    // 1. overId가 영역 자체인 경우 (filter, column, row, data)
+    if (["filter", "column", "row", "data"].includes(overId)) {
+      setOverArea(overId as PivotAreaType);
+      console.log("🔷 [handleDragOver] 영역 감지:", overId);
+      return;
+    }
+    
+    // 2. overId가 필드인 경우 (예: row-part_name)
     const targetArea = overId.split("-")[0] as PivotAreaType;
     if (["filter", "column", "row", "data"].includes(targetArea)) {
       setOverArea(targetArea);
+      console.log("🔷 [handleDragOver] 필드 영역 감지:", targetArea);
     }
   };
 
   // 드래그 종료
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
+    const currentOverArea = overArea; // handleDragOver에서 감지한 영역 저장
     setActiveId(null);
     setOverArea(null);
 
-    if (!over) return;
+    if (!over) {
+      console.log("🔷 [FieldPanel] 드롭 대상 없음");
+      return;
+    }
 
     const activeId = active.id as string;
     const overId = over.id as string;
 
+    console.log("🔷 [FieldPanel] 드래그 종료:", {
+      activeId,
+      overId,
+      detectedOverArea: currentOverArea,
+    });
+
     // 필드 정보 파싱
     const [sourceArea, sourceField] = activeId.split("-") as [
       PivotAreaType,
       string
     ];
-    const [targetArea] = overId.split("-") as [PivotAreaType, string];
+    
+    // targetArea 결정: handleDragOver에서 감지한 영역 우선 사용
+    let targetArea: PivotAreaType;
+    if (currentOverArea) {
+      targetArea = currentOverArea;
+    } else if (["filter", "column", "row", "data"].includes(overId)) {
+      targetArea = overId as PivotAreaType;
+    } else {
+      targetArea = overId.split("-")[0] as PivotAreaType;
+    }
+
+    console.log("🔷 [FieldPanel] 파싱 결과:", {
+      sourceArea,
+      sourceField,
+      targetArea,
+      usedOverArea: !!currentOverArea,
+    });
 
     // 같은 영역 내 정렬
     if (sourceArea === targetArea) {
@@ -396,6 +447,12 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
 
     // 다른 영역으로 이동
     if (["filter", "column", "row", "data"].includes(targetArea)) {
+      console.log("🔷 [FieldPanel] 영역 이동:", {
+        field: sourceField,
+        from: sourceArea,
+        to: targetArea,
+      });
+      
       const newFields = fields.map((f) => {
         if (f.field === sourceField && f.area === sourceArea) {
           return {
@@ -406,6 +463,13 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
         }
         return f;
       });
+      
+      console.log("🔷 [FieldPanel] 변경된 필드:", {
+        totalFields: newFields.length,
+        filterFields: newFields.filter(f => f.area === "filter").length,
+        changedField: newFields.find(f => f.field === sourceField),
+      });
+      
       onFieldsChange(newFields);
     }
   };