피벗

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

@@ -184,7 +184,7 @@ const DataCell: React.FC<DataCellProps> = ({
         onClick={onClick}
         onDoubleClick={onDoubleClick}
       >
-        -
+        0
       </td>
     );
   }
@@ -222,7 +222,7 @@ const DataCell: React.FC<DataCellProps> = ({
         )}
         <span className="relative z-10 flex items-center justify-end gap-1">
           {icon && <span>{icon}</span>}
-          {values[0].formattedValue}
+          {values[0].formattedValue || (values[0].value === 0 ? '0' : values[0].formattedValue)}
         </span>
       </td>
     );
@@ -257,7 +257,7 @@ const DataCell: React.FC<DataCellProps> = ({
           )}
           <span className="relative z-10 flex items-center justify-end gap-1">
             {icon && <span>{icon}</span>}
-            {val.formattedValue}
+            {val.formattedValue || (val.value === 0 ? '0' : val.formattedValue)}
           </span>
         </td>
       ))}
@@ -530,14 +530,22 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
   
   // 🆕 초기 로드 시 첫 레벨 자동 확장
   useEffect(() => {
-    if (!isInitialExpanded && pivotResult && pivotResult.flatRows.length > 0) {
+    if (pivotResult && pivotResult.flatRows.length > 0) {
+      console.log("🔶 피벗 결과 생성됨:", {
+        flatRowsCount: pivotResult.flatRows.length,
+        expandedRowPaths: pivotState.expandedRowPaths.length,
+        isInitialExpanded,
+      });
+
       // 첫 레벨 행들의 경로 수집 (level 0인 행들)
-      const firstLevelPaths = pivotResult.flatRows
+      const firstLevelRows = pivotResult.flatRows.filter(row => row.level === 0 && row.hasChildren);
-        .filter(row => row.level === 0 && row.hasChildren)
-        .map(row => row.path);
       
-      if (firstLevelPaths.length > 0) {
+      console.log("🔶 첫 레벨 행 (level 0, hasChildren):", firstLevelRows.map(r => ({ path: r.path, caption: r.caption })));
-        console.log("🔶 초기 자동 확장:", firstLevelPaths);
+
+      // 초기 확장이 안 되어 있고, 첫 레벨 행이 있으면 자동 확장
+      if (!isInitialExpanded && firstLevelRows.length > 0) {
+        const firstLevelPaths = firstLevelRows.map(row => row.path);
+        console.log("🔶 초기 자동 확장 실행:", firstLevelPaths);
         setPivotState(prev => ({
           ...prev,
           expandedRowPaths: firstLevelPaths,
@@ -545,7 +553,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
         setIsInitialExpanded(true);
       }
     }
-  }, [pivotResult, isInitialExpanded]);
+  }, [pivotResult, isInitialExpanded, pivotState.expandedRowPaths.length]);
 
   // 조건부 서식용 전체 값 수집
   const allCellValues = useMemo(() => {
@@ -1607,13 +1615,13 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
         <table ref={tableRef} className="w-full border-collapse">
           <thead>
             {/* 열 헤더 */}
-            <tr className="bg-muted/50">
+            <tr className="bg-background">
               {/* 좌상단 코너 (행 필드 라벨 + 필터) */}
               <th
                 className={cn(
                   "border-r border-b border-border",
-                  "px-2 py-2 text-left text-xs font-medium",
+                  "px-2 py-1 text-left text-xs font-medium",
-                  "bg-muted sticky left-0 top-0 z-20"
+                  "bg-background sticky left-0 top-0 z-20"
                 )}
                 rowSpan={columnFields.length > 0 ? 2 : 1}
               >
@@ -1657,8 +1665,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                   key={idx}
                   className={cn(
                     "border-r border-b border-border relative group",
-                    "px-2 py-1.5 text-center text-xs font-medium",
+                    "px-2 py-1 text-center text-xs font-medium",
-                    "bg-muted/70 sticky top-0 z-10",
+                    "bg-background sticky top-0 z-10",
                     dataFields.length === 1 && "cursor-pointer hover:bg-accent/50"
                   )}
                   colSpan={dataFields.length || 1}
@@ -1680,16 +1688,31 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                   />
                 </th>
               ))}
+
+              {/* 행 총계 헤더 */}
+              {totals?.showRowGrandTotals && (
+                <th
+                  className={cn(
+                    "border-b border-border",
+                    "px-2 py-1 text-center text-xs font-medium",
+                    "bg-background sticky top-0 z-10"
+                  )}
+                  colSpan={dataFields.length || 1}
+                  rowSpan={dataFields.length > 1 ? 2 : 1}
+                >
+                  총계
+                </th>
+              )}
               
-              {/* 열 필드 필터 (헤더 왼쪽에 표시) */}
+              {/* 열 필드 필터 (헤더 오른쪽 끝에 표시) */}
               {columnFields.length > 0 && (
                 <th
                   className={cn(
                     "border-b border-border",
-                    "px-1 py-1.5 text-center text-xs",
+                    "px-1 py-1 text-center text-xs",
-                    "bg-muted/50 sticky top-0 z-10"
+                    "bg-background sticky top-0 z-10"
                   )}
-                  rowSpan={columnFields.length > 0 ? 2 : 1}
+                  rowSpan={dataFields.length > 1 ? 2 : 1}
                 >
                   <div className="flex flex-col gap-0.5">
                     {columnFields.map((f) => (
@@ -1721,25 +1744,11 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                   </div>
                 </th>
               )}
-
-              {/* 행 총계 헤더 */}
-              {totals?.showRowGrandTotals && (
-                <th
-                  className={cn(
-                    "border-b border-border",
-                    "px-2 py-1.5 text-center text-xs font-medium",
-                    "bg-primary/10 sticky top-0 z-10"
-                  )}
-                  colSpan={dataFields.length || 1}
-                >
-                  총계
-                </th>
-              )}
             </tr>
 
             {/* 데이터 필드 라벨 (다중 데이터 필드인 경우) */}
             {dataFields.length > 1 && (
-              <tr className="bg-muted/30">
+              <tr className="bg-background">
                 {flatColumns.map((col, colIdx) => (
                   <React.Fragment key={colIdx}>
                     {dataFields.map((df, dfIdx) => (
@@ -1747,7 +1756,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                         key={`${colIdx}-${dfIdx}`}
                         className={cn(
                           "border-r border-b border-border",
-                          "px-2 py-1 text-center text-xs font-normal",
+                          "px-2 py-0.5 text-center text-xs font-normal",
                           "text-muted-foreground cursor-pointer hover:bg-accent/50"
                         )}
                         onClick={() => handleSort(df.field)}
@@ -1760,19 +1769,6 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                     ))}
                   </React.Fragment>
                 ))}
-                {totals?.showRowGrandTotals &&
-                  dataFields.map((df, dfIdx) => (
-                    <th
-                      key={`total-${dfIdx}`}
-                      className={cn(
-                        "border-r border-b border-border",
-                        "px-2 py-1 text-center text-xs font-normal",
-                        "bg-primary/5 text-muted-foreground"
-                      )}
-                    >
-                      {df.caption}
-                    </th>
-                  ))}
               </tr>
             )}
           </thead>

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

@@ -210,7 +210,7 @@ const PivotGridWrapper: React.FC<any> = (props) => {
       fieldChooser={componentConfig.fieldChooser || props.fieldChooser}
       chart={componentConfig.chart || props.chart}
       allowExpandAll={componentConfig.allowExpandAll !== false}
-      height={componentConfig.height || props.height || "400px"}
+      height="100%"
       maxHeight={componentConfig.maxHeight || props.maxHeight}
       exportConfig={componentConfig.exportConfig || props.exportConfig || { excel: true }}
       onCellClick={props.onCellClick}
@@ -339,7 +339,7 @@ export class PivotGridRenderer extends AutoRegisteringComponentRenderer {
         fieldChooser={componentConfig.fieldChooser || props.fieldChooser}
         chart={componentConfig.chart || props.chart}
         allowExpandAll={componentConfig.allowExpandAll !== false}
-        height={componentConfig.height || props.height || "400px"}
+        height="100%"
         maxHeight={componentConfig.maxHeight || props.maxHeight}
         exportConfig={componentConfig.exportConfig || props.exportConfig || { excel: true }}
         onCellClick={props.onCellClick}