고치기 완료

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]
   );
 
@@ -715,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 호출 후");
     },
     []
   );
@@ -1023,10 +1041,12 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
     console.log("피벗 상태가 저장되었습니다.");
   }, [saveStateToStorage]);
   
-  // 상태 초기화
+  // 상태 초기화 (확장/축소, 정렬, 필터만 초기화, 필드 설정은 유지)
   const handleResetState = useCallback(() => {
+    // 로컬 스토리지에서 상태 제거
     localStorage.removeItem(stateStorageKey);
-    setFields(initialFields);
+    
+    // 확장/축소, 정렬, 필터 상태만 초기화
     setPivotState({
       expandedRowPaths: [],
       expandedColumnPaths: [],
@@ -1037,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());
@@ -1617,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>
-                      {isFiltered && (
-                        <span className="bg-orange-500 text-white px-1 rounded text-[10px]">
-                          {selectedValues.length}
+                      <span className="font-medium">{filterField.caption}:</span>
+                      {isFiltered ? (
+                        <span className="truncate">
+                          {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>
                   }
                 />