[agent-pipeline] pipe-20260311182531-f443 round-6

frontend/components/v2/config-panels/V2PivotGridConfigPanel.tsx

@@ -27,6 +27,7 @@ import type {
   PivotAreaType,
   AggregationType,
   FieldDataType,
+  ConditionalFormatRule,
 } from "@/lib/registry/components/v2-pivot-grid/types";
 
 interface TableInfo {
@@ -179,6 +180,13 @@ const AreaDropZone: React.FC<AreaDropZoneProps> = ({
   );
 };
 
+const STYLE_DEFAULTS: { theme: "default"; headerStyle: "default"; cellPadding: "normal"; borderStyle: "light" } = {
+  theme: "default",
+  headerStyle: "default",
+  cellPadding: "normal",
+  borderStyle: "light",
+};
+
 /* ─── 메인 컴포넌트 ─── */
 
 export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
@@ -239,7 +247,15 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
 
   const updateConfig = useCallback(
     (updates: Partial<PivotGridComponentConfig>) => {
-      onChange({ ...config, ...updates });
+      const newConfig = { ...config, ...updates };
+      onChange(newConfig);
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(
+          new CustomEvent("componentConfigChanged", {
+            detail: { config: newConfig },
+          })
+        );
+      }
     },
     [config, onChange]
   );
@@ -540,7 +556,7 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
                 <Switch
                   checked={config.style?.alternateRowColors !== false}
                   onCheckedChange={(v) =>
-                    updateConfig({ style: { ...config.style, alternateRowColors: v } })
+                    updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, alternateRowColors: v } })
                   }
                 />
               </div>
@@ -552,7 +568,7 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
                 <Switch
                   checked={config.style?.mergeCells === true}
                   onCheckedChange={(v) =>
-                    updateConfig({ style: { ...config.style, mergeCells: v } })
+                    updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, mergeCells: v } })
                   }
                 />
               </div>
@@ -600,12 +616,42 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
               </div>
               <div className="flex items-center justify-between py-1">
                 <div>
-                  <p className="text-sm">상태 저장</p>
+                  <p className="text-sm">전체 확장/축소</p>
-                  <p className="text-[11px] text-muted-foreground">사용자가 설정한 피벗 상태를 기억해요</p>
+                  <p className="text-[11px] text-muted-foreground">모든 그룹을 한번에 열거나 닫을 수 있어요</p>
                 </div>
                 <Switch
-                  checked={config.saveState === true}
+                  checked={config.allowExpandAll !== false}
-                  onCheckedChange={(v) => updateConfig({ saveState: v })}
+                  onCheckedChange={(v) => updateConfig({ allowExpandAll: v })}
+                />
+              </div>
+              <div className="flex items-center justify-between py-1">
+                <div>
+                  <p className="text-sm">필터링</p>
+                  <p className="text-[11px] text-muted-foreground">필드별 필터를 사용할 수 있어요</p>
+                </div>
+                <Switch
+                  checked={config.allowFiltering !== false}
+                  onCheckedChange={(v) => updateConfig({ allowFiltering: v })}
+                />
+              </div>
+              <div className="flex items-center justify-between py-1">
+                <div>
+                  <p className="text-sm">요약값 기준 정렬</p>
+                  <p className="text-[11px] text-muted-foreground">집계 결과를 클릭해서 정렬할 수 있어요</p>
+                </div>
+                <Switch
+                  checked={config.allowSortingBySummary !== false}
+                  onCheckedChange={(v) => updateConfig({ allowSortingBySummary: v })}
+                />
+              </div>
+              <div className="flex items-center justify-between py-1">
+                <div>
+                  <p className="text-sm">텍스트 줄바꿈</p>
+                  <p className="text-[11px] text-muted-foreground">긴 텍스트를 셀 안에서 줄바꿈해요</p>
+                </div>
+                <Switch
+                  checked={config.wordWrapEnabled === true}
+                  onCheckedChange={(v) => updateConfig({ wordWrapEnabled: v })}
                 />
               </div>
             </div>
@@ -620,8 +666,8 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
                       value={rule.type}
                       onValueChange={(v) => {
                         const newFormats = [...(config.style?.conditionalFormats || [])];
-                        newFormats[index] = { ...rule, type: v as any };
+                        newFormats[index] = { ...rule, type: v as ConditionalFormatRule["type"] };
-                        updateConfig({ style: { ...config.style, conditionalFormats: newFormats } });
+                        updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, conditionalFormats: newFormats } });
                       }}
                     >
                       <SelectTrigger className="h-7 w-24 text-xs">
@@ -650,7 +696,7 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
                                 maxColor: rule.colorScale?.maxColor || "#00ff00",
                               },
                             };
-                            updateConfig({ style: { ...config.style, conditionalFormats: newFormats } });
+                            updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, conditionalFormats: newFormats } });
                           }}
                           className="h-6 w-6 cursor-pointer rounded"
                           title="최소값 색상"
@@ -669,7 +715,7 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
                                 maxColor: e.target.value,
                               },
                             };
-                            updateConfig({ style: { ...config.style, conditionalFormats: newFormats } });
+                            updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, conditionalFormats: newFormats } });
                           }}
                           className="h-6 w-6 cursor-pointer rounded"
                           title="최대값 색상"
@@ -684,7 +730,7 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
                         onChange={(e) => {
                           const newFormats = [...(config.style?.conditionalFormats || [])];
                           newFormats[index] = { ...rule, dataBar: { color: e.target.value } };
-                          updateConfig({ style: { ...config.style, conditionalFormats: newFormats } });
+                          updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, conditionalFormats: newFormats } });
                         }}
                         className="h-6 w-6 cursor-pointer rounded"
                         title="바 색상"
@@ -696,8 +742,8 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
                         value={rule.iconSet?.type || "traffic"}
                         onValueChange={(v) => {
                           const newFormats = [...(config.style?.conditionalFormats || [])];
-                          newFormats[index] = { ...rule, iconSet: { type: v as any, thresholds: [33, 67] } };
+                          newFormats[index] = { ...rule, iconSet: { type: v as "arrows" | "traffic" | "rating" | "flags", thresholds: [33, 67] } };
-                          updateConfig({ style: { ...config.style, conditionalFormats: newFormats } });
+                          updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, conditionalFormats: newFormats } });
                         }}
                       >
                         <SelectTrigger className="h-7 w-20 text-xs">
@@ -718,7 +764,7 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
                       className="ml-auto h-6 w-6"
                       onClick={() => {
                         const newFormats = (config.style?.conditionalFormats || []).filter((_, i) => i !== index);
-                        updateConfig({ style: { ...config.style, conditionalFormats: newFormats } });
+                        updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, conditionalFormats: newFormats } });
                       }}
                     >
                       <X className="h-3 w-3" />
@@ -739,7 +785,7 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
                         colorScale: { minColor: "#ff0000", maxColor: "#00ff00" },
                       },
                     ];
-                    updateConfig({ style: { ...config.style, conditionalFormats: newFormats } });
+                    updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, conditionalFormats: newFormats } });
                   }}
                 >
                   <Plus className="mr-1 h-3 w-3" />