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

@@ -7,8 +7,6 @@
 
 import React, { useState, useMemo, useCallback, useEffect, useRef } from "react";
 import { cn } from "@/lib/utils";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
 import {
   PivotGridProps,
   PivotResult,
@@ -52,10 +50,6 @@ import {
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 
-// ==================== 상수 ====================
-
-const PIVOT_STATE_VERSION = "1.0"; // 상태 저장 버전 (호환성 체크용)
-
 // ==================== 유틸리티 함수 ====================
 
 // 셀 병합 정보 계산
@@ -134,10 +128,7 @@ const RowHeaderCell: React.FC<RowHeaderCellProps> = ({
       <div className="flex items-center gap-1">
         {row.hasChildren && (
           <button
-            onClick={(e) => {
+            onClick={() => onToggleExpand(row.path)}
-              e.stopPropagation();
-              onToggleExpand(row.path);
-            }}
             className="p-0.5 hover:bg-accent rounded"
           >
             {row.isExpanded ? (
@@ -308,8 +299,6 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
   // ==================== 상태 ====================
 
   const [fields, setFields] = useState<PivotFieldConfig[]>(initialFields);
-  // 초기 필드 설정 저장 (초기화용)
-  const initialFieldsRef = useRef<PivotFieldConfig[]>(initialFields);
   const [pivotState, setPivotState] = useState<PivotGridState>({
     expandedRowPaths: [],
     expandedColumnPaths: [],
@@ -355,44 +344,41 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
   const [resizeStartX, setResizeStartX] = useState<number>(0);
   const [resizeStartWidth, setResizeStartWidth] = useState<number>(0);
 
+  // 외부 fields 변경 시 동기화
+  useEffect(() => {
+    if (initialFields.length > 0) {
+      setFields(initialFields);
+    }
+  }, [initialFields]);
+
   // 상태 저장 키
   const stateStorageKey = `pivot-state-${title || "default"}`;
-  const persistSettingKey = `pivot-persist-${title || "default"}`;
   
-  // 상태 유지 설정 (체크박스용)
+  // 상태 저장 (localStorage)
-  const [persistState, setPersistState] = useState<boolean>(() => {
+  const saveStateToStorage = useCallback(() => {
-    if (typeof window === "undefined") return true;
+    if (typeof window === "undefined") return;
-    const saved = localStorage.getItem(persistSettingKey);
+    const stateToSave = {
-    return saved !== null ? saved === "true" : true; // 기본값 true
+      fields,
-  });
+      pivotState,
+      sortConfig,
+      columnWidths,
+    };
+    localStorage.setItem(stateStorageKey, JSON.stringify(stateToSave));
+  }, [fields, pivotState, sortConfig, columnWidths, stateStorageKey]);
   
-  // 복원 완료 여부 (initialFields 덮어쓰기 방지)
+  // 상태 복원 (localStorage) - 프로덕션 안전성 강화
-  const [isStateRestored, setIsStateRestored] = useState(false);
-  
-  // 상태 복원 (localStorage) - 마운트 시 한 번만 실행
   useEffect(() => {
     if (typeof window === "undefined") return;
     
-    // 상태 유지가 꺼져 있으면 복원하지 않음
-    if (!persistState) {
-      localStorage.removeItem(stateStorageKey);
-      setIsStateRestored(true);
-      return;
-    }
-    
     try {
       const savedState = localStorage.getItem(stateStorageKey);
-      if (!savedState) {
+      if (!savedState) return;
-        setIsStateRestored(true);
-        return;
-      }
       
       const parsed = JSON.parse(savedState);
       
       // 버전 체크 - 버전이 다르면 이전 상태 무시
       if (parsed.version !== PIVOT_STATE_VERSION) {
         localStorage.removeItem(stateStorageKey);
-        setIsStateRestored(true);
         return;
       }
       
@@ -438,72 +424,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
       // 손상된 상태는 제거
       localStorage.removeItem(stateStorageKey);
     }
-    
+  }, [stateStorageKey]);
-    setIsStateRestored(true);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // 마운트 시 한 번만 실행
-  
-  // 외부 fields 변경 시 동기화 (복원이 완료된 후에만, 저장된 상태가 없을 때만)
-  useEffect(() => {
-    if (!isStateRestored) return; // 복원 완료 전에는 무시
-    
-    // 저장된 상태가 있으면 initialFields로 덮어쓰지 않음
-    if (typeof window !== "undefined") {
-      const savedState = localStorage.getItem(stateStorageKey);
-      if (savedState) return; // 이미 저장된 상태가 있으면 무시
-    }
-    
-    if (initialFields.length > 0) {
-      setFields(initialFields);
-    }
-  // persistState는 의존성에서 제외 - 체크박스 변경 시 현재 상태 유지
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [initialFields, isStateRestored, stateStorageKey]);
-  
-  // 상태 유지 설정 저장 + 켜질 때 현재 상태 즉시 저장
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    localStorage.setItem(persistSettingKey, String(persistState));
-    
-    // 상태 유지를 켜면 현재 상태를 즉시 저장
-    if (persistState && isStateRestored && fields.length > 0) {
-      const stateToSave = {
-        version: PIVOT_STATE_VERSION,
-        fields,
-        pivotState,
-        sortConfig,
-        columnWidths,
-      };
-      localStorage.setItem(stateStorageKey, JSON.stringify(stateToSave));
-    }
-    
-    // 상태 유지를 끄면 저장된 상태 삭제
-    if (!persistState) {
-      localStorage.removeItem(stateStorageKey);
-    }
-  }, [persistState, persistSettingKey, isStateRestored, fields, pivotState, sortConfig, columnWidths, stateStorageKey]);
-  
-  // 상태 저장 (localStorage)
-  const saveStateToStorage = useCallback(() => {
-    if (typeof window === "undefined" || !persistState) return;
-    const stateToSave = {
-      version: PIVOT_STATE_VERSION,
-      fields,
-      pivotState,
-      sortConfig,
-      columnWidths,
-    };
-    localStorage.setItem(stateStorageKey, JSON.stringify(stateToSave));
-  }, [fields, pivotState, sortConfig, columnWidths, stateStorageKey, persistState]);
-  
-  // 상태 변경 시 자동 저장 (복원 완료 후에만)
-  useEffect(() => {
-    if (!persistState || !isStateRestored) return;
-    // 초기 로드 후에만 저장 (빈 필드일 때는 저장 안 함)
-    if (fields.length > 0) {
-      saveStateToStorage();
-    }
-  }, [fields, pivotState, sortConfig, columnWidths, persistState, isStateRestored, saveStateToStorage]);
 
   // 데이터
   const data = externalData || [];
@@ -579,9 +500,9 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
   const filteredData = useMemo(() => {
     if (!data || data.length === 0) return data;
 
-    // 모든 영역(행/열/필터)의 필터 값이 있는 필드로 데이터 필터링
+    // 필터 영역의 필드들로 데이터 필터링
     const activeFilters = fields.filter(
-      (f) => f.filterValues && f.filterValues.length > 0
+      (f) => f.area === "filter" && f.filterValues && f.filterValues.length > 0
     );
 
     if (activeFilters.length === 0) return data;
@@ -1208,7 +1129,6 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
           onFieldsChange={handleFieldsChange}
           collapsed={!showFieldPanel}
           onToggleCollapse={() => setShowFieldPanel(!showFieldPanel)}
-          initialFields={initialFieldsRef.current}
         />
 
         {/* 안내 메시지 */}
@@ -1250,7 +1170,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
     );
   }
 
-  const { flatColumns, dataMatrix, grandTotals, columnHeaderLevels } = pivotResult;
+  const { flatColumns, dataMatrix, grandTotals } = pivotResult;
 
   // ==================== 키보드 네비게이션 ====================
   
@@ -1485,7 +1405,6 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
         onFieldsChange={handleFieldsChange}
         collapsed={!showFieldPanel}
         onToggleCollapse={() => setShowFieldPanel(!showFieldPanel)}
-        initialFields={initialFieldsRef.current}
       />
 
       {/* 헤더 툴바 */}
@@ -1548,22 +1467,6 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
             </>
           )}
 
-          {/* 상태 유지 체크박스 */}
-          <div className="flex items-center gap-1.5 ml-2 pl-2 border-l">
-            <Checkbox
-              id="persist-state"
-              checked={persistState}
-              onCheckedChange={(checked) => setPersistState(checked === true)}
-              className="h-3.5 w-3.5"
-            />
-            <Label
-              htmlFor="persist-state"
-              className="text-xs text-muted-foreground cursor-pointer whitespace-nowrap"
-            >
-              상태 유지
-            </Label>
-          </div>
-
           {/* 차트 토글 */}
           {chartConfig && (
             <Button
@@ -1782,224 +1685,137 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
       >
         <table ref={tableRef} className="w-full border-collapse">
           <thead>
-            {/* 다중 행 열 헤더 */}
+            {/* 열 헤더 */}
-            {columnHeaderLevels.length > 0 ? (
+            <tr className="bg-background">
-              // 열 필드가 있는 경우: 각 레벨별로 행 생성
+              {/* 좌상단 코너 (행 필드 라벨 + 필터) */}
-              columnHeaderLevels.map((levelCells, levelIdx) => (
+              <th
-                <tr key={`col-level-${levelIdx}`} className="bg-background">
+                className={cn(
-                  {/* 좌상단 코너 (첫 번째 레벨에만 표시) */}
+                  "border-r border-b border-border",
-                  {levelIdx === 0 && (
+                  "px-2 py-1 text-left text-xs font-medium",
-                    <th
+                  "bg-background sticky left-0 top-0 z-20"
-                      className={cn(
+                )}
-                        "border-r border-b border-border",
+                rowSpan={columnFields.length > 0 ? 2 : 1}
-                        "px-2 py-1 text-left text-xs font-medium",
+              >
-                        "bg-background sticky left-0 top-0 z-20"
+                <div className="flex items-center gap-1 flex-wrap">
-                      )}
+                  {rowFields.map((f, idx) => (
-                      rowSpan={columnHeaderLevels.length + (dataFields.length > 1 ? 1 : 0)}
+                    <div key={f.field} className="flex items-center gap-0.5 group">
-                    >
+                      <span>{f.caption}</span>
-                      <div className="flex items-center gap-1 flex-wrap">
+                      <FilterPopup
-                        {rowFields.map((f, idx) => (
+                        field={f}
-                          <div key={f.field} className="flex items-center gap-0.5 group">
+                        data={data}
-                            <span>{f.caption}</span>
+                        onFilterChange={(field, values, type) => {
-                            <FilterPopup
+                          const newFields = fields.map((fld) =>
-                              field={f}
+                            fld.field === field.field && fld.area === "row"
-                              data={data}
+                              ? { ...fld, filterValues: values, filterType: type }
-                              onFilterChange={(field, values, type) => {
+                              : fld
-                                const newFields = fields.map((fld) =>
+                          );
-                                  fld.field === field.field && fld.area === "row"
+                          handleFieldsChange(newFields);
-                                    ? { ...fld, filterValues: values, filterType: type }
+                        }}
-                                    : fld
+                        trigger={
-                                );
+                          <button
-                                handleFieldsChange(newFields);
+                            className={cn(
-                              }}
+                              "p-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity",
-                              trigger={
+                              "hover:bg-accent",
-                                <button
+                              f.filterValues && f.filterValues.length > 0 && "opacity-100 text-primary"
-                                  className={cn(
+                            )}
-                                    "p-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity",
+                          >
-                                    "hover:bg-accent",
+                            <Filter className="h-3 w-3" />
-                                    f.filterValues && f.filterValues.length > 0 && "opacity-100 text-primary"
+                          </button>
-                                  )}
+                        }
-                                >
+                      />
-                                  <Filter className="h-3 w-3" />
+                      {idx < rowFields.length - 1 && <span className="mx-0.5 text-muted-foreground">/</span>}
-                                </button>
+                    </div>
-                              }
-                            />
-                            {idx < rowFields.length - 1 && <span className="mx-0.5 text-muted-foreground">/</span>}
-                          </div>
-                        ))}
-                        {rowFields.length === 0 && <span>항목</span>}
-                      </div>
-                    </th>
-                  )}
-
-                  {/* 열 헤더 셀 - 해당 레벨 */}
-                  {levelCells.map((cell, cellIdx) => (
-                    <th
-                      key={`${levelIdx}-${cellIdx}`}
-                      className={cn(
-                        "border-r border-b border-border relative",
-                        "px-2 py-1 text-center text-xs font-medium",
-                        "bg-background sticky top-0 z-10",
-                        levelIdx === columnHeaderLevels.length - 1 && dataFields.length === 1 && "cursor-pointer hover:bg-accent/50"
-                      )}
-                      colSpan={cell.colSpan * (dataFields.length || 1)}
-                    >
-                      <div className="flex items-center justify-center gap-1">
-                        <span>{cell.caption || "(전체)"}</span>
-                        {levelIdx === columnHeaderLevels.length - 1 && dataFields.length === 1 && (
-                          <SortIcon field={dataFields[0].field} />
-                        )}
-                      </div>
-                    </th>
                   ))}
+                  {rowFields.length === 0 && <span>항목</span>}
+                </div>
+              </th>
 
-                  {/* 행 총계 헤더 (첫 번째 레벨에만 표시) */}
+              {/* 열 헤더 셀 */}
-                  {levelIdx === 0 && totals?.showRowGrandTotals && (
+              {flatColumns.map((col, idx) => (
-                    <th
+                <th
-                      className={cn(
+                  key={idx}
-                        "border-b border-border",
+                  className={cn(
-                        "px-2 py-1 text-center text-xs font-medium",
+                    "border-r border-b border-border relative group",
-                        "bg-background sticky top-0 z-10"
+                    "px-2 py-1 text-center text-xs font-medium",
-                      )}
+                    "bg-background sticky top-0 z-10",
-                      colSpan={dataFields.length || 1}
+                    dataFields.length === 1 && "cursor-pointer hover:bg-accent/50"
-                      rowSpan={columnHeaderLevels.length + (dataFields.length > 1 ? 1 : 0)}
-                    >
-                      총계
-                    </th>
                   )}
+                  colSpan={dataFields.length || 1}
+                  style={{ width: columnWidths[idx] || "auto", minWidth: 50 }}
+                  onClick={dataFields.length === 1 ? () => handleSort(dataFields[0].field) : undefined}
+                >
+                  <div className="flex items-center justify-center gap-1">
+                    <span>{col.caption || "(전체)"}</span>
+                    {dataFields.length === 1 && <SortIcon field={dataFields[0].field} />}
+                  </div>
+                  {/* 열 리사이즈 핸들 */}
+                  <div
+                    className={cn(
+                      "absolute right-0 top-0 bottom-0 w-1 cursor-col-resize",
+                      "hover:bg-primary/50 transition-colors",
+                      resizingColumn === idx && "bg-primary"
+                    )}
+                    onMouseDown={(e) => handleResizeStart(idx, e)}
+                  />
+                </th>
+              ))}
 
-                  {/* 열 필드 필터 (첫 번째 레벨에만 표시) */}
+              {/* 행 총계 헤더 */}
-                  {levelIdx === 0 && columnFields.length > 0 && (
+              {totals?.showRowGrandTotals && (
-                    <th
-                      className={cn(
-                        "border-b border-border",
-                        "px-1 py-1 text-center text-xs",
-                        "bg-background sticky top-0 z-10"
-                      )}
-                      rowSpan={columnHeaderLevels.length + (dataFields.length > 1 ? 1 : 0)}
-                    >
-                      <div className="flex flex-col gap-0.5">
-                        {columnFields.map((f) => (
-                          <FilterPopup
-                            key={f.field}
-                            field={f}
-                            data={data}
-                            onFilterChange={(field, values, type) => {
-                              const newFields = fields.map((fld) =>
-                                fld.field === field.field && fld.area === "column"
-                                  ? { ...fld, filterValues: values, filterType: type }
-                                  : fld
-                              );
-                              handleFieldsChange(newFields);
-                            }}
-                            trigger={
-                              <button
-                                className={cn(
-                                  "p-0.5 rounded hover:bg-accent",
-                                  f.filterValues && f.filterValues.length > 0 && "text-primary"
-                                )}
-                                title={`${f.caption} 필터`}
-                              >
-                                <Filter className="h-3 w-3" />
-                              </button>
-                            }
-                          />
-                        ))}
-                      </div>
-                    </th>
-                  )}
-                </tr>
-              ))
-            ) : (
-              // 열 필드가 없는 경우: 단일 행
-              <tr className="bg-background">
                 <th
                   className={cn(
-                    "border-r border-b border-border",
+                    "border-b border-border",
-                    "px-2 py-1 text-left text-xs font-medium",
+                    "px-2 py-1 text-center text-xs font-medium",
-                    "bg-background sticky left-0 top-0 z-20"
+                    "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 text-center text-xs",
+                    "bg-background sticky top-0 z-10"
                   )}
                   rowSpan={dataFields.length > 1 ? 2 : 1}
                 >
-                  <div className="flex items-center gap-1 flex-wrap">
+                  <div className="flex flex-col gap-0.5">
-                    {rowFields.map((f, idx) => (
+                    {columnFields.map((f) => (
-                      <div key={f.field} className="flex items-center gap-0.5 group">
+                      <FilterPopup
-                        <span>{f.caption}</span>
+                        key={f.field}
-                        <FilterPopup
+                        field={f}
-                          field={f}
+                        data={data}
-                          data={data}
+                        onFilterChange={(field, values, type) => {
-                          onFilterChange={(field, values, type) => {
+                          const newFields = fields.map((fld) =>
-                            const newFields = fields.map((fld) =>
+                            fld.field === field.field && fld.area === "column"
-                              fld.field === field.field && fld.area === "row"
+                              ? { ...fld, filterValues: values, filterType: type }
-                                ? { ...fld, filterValues: values, filterType: type }
+                              : fld
-                                : fld
+                          );
-                            );
+                          handleFieldsChange(newFields);
-                            handleFieldsChange(newFields);
+                        }}
-                          }}
+                        trigger={
-                          trigger={
+                          <button
-                            <button
+                            className={cn(
-                              className={cn(
+                              "p-0.5 rounded hover:bg-accent",
-                                "p-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity",
+                              f.filterValues && f.filterValues.length > 0 && "text-primary"
-                                "hover:bg-accent",
+                            )}
-                                f.filterValues && f.filterValues.length > 0 && "opacity-100 text-primary"
+                            title={`${f.caption} 필터`}
-                              )}
+                          >
-                            >
+                            <Filter className="h-3 w-3" />
-                              <Filter className="h-3 w-3" />
+                          </button>
-                            </button>
+                        }
-                          }
+                      />
-                        />
-                        {idx < rowFields.length - 1 && <span className="mx-0.5 text-muted-foreground">/</span>}
-                      </div>
                     ))}
-                    {rowFields.length === 0 && <span>항목</span>}
                   </div>
                 </th>
-
+              )}
-                {/* 열 헤더 셀 (열 필드 없을 때) */}
+            </tr>
-                {flatColumns.map((col, idx) => (
-                  <th
-                    key={idx}
-                    className={cn(
-                      "border-r border-b border-border relative group",
-                      "px-2 py-1 text-center text-xs font-medium",
-                      "bg-background sticky top-0 z-10",
-                      dataFields.length === 1 && "cursor-pointer hover:bg-accent/50"
-                    )}
-                    colSpan={dataFields.length || 1}
-                    style={{ width: columnWidths[idx] || "auto", minWidth: 50 }}
-                    onClick={dataFields.length === 1 ? () => handleSort(dataFields[0].field) : undefined}
-                  >
-                    <div className="flex items-center justify-center gap-1">
-                      <span>{col.caption || "(전체)"}</span>
-                      {dataFields.length === 1 && <SortIcon field={dataFields[0].field} />}
-                    </div>
-                    <div
-                      className={cn(
-                        "absolute right-0 top-0 bottom-0 w-1 cursor-col-resize",
-                        "hover:bg-primary/50 transition-colors",
-                        resizingColumn === idx && "bg-primary"
-                      )}
-                      onMouseDown={(e) => handleResizeStart(idx, e)}
-                    />
-                  </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>
-                )}
-              </tr>
-            )}
 
             {/* 데이터 필드 라벨 (다중 데이터 필드인 경우) */}
             {dataFields.length > 1 && (

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

@@ -16,7 +16,6 @@ import {
   PivotAreaType,
   AggregationType,
   FieldDataType,
-  DateGroupInterval,
 } from "./types";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
@@ -203,28 +202,6 @@ const AreaDropZone: React.FC<AreaDropZoneProps> = ({
                     </Select>
                   )}
                   
-                  {/* 행/열 영역에서 날짜 타입일 때 그룹화 옵션 */}
-                  {(area === "row" || area === "column") && field.dataType === "date" && (
-                    <Select
-                      value={field.groupInterval || "__none__"}
-                      onValueChange={(v) => onUpdateField(idx, { 
-                        groupInterval: v === "__none__" ? undefined : v as DateGroupInterval 
-                      })}
-                    >
-                      <SelectTrigger className="h-6 w-16 text-xs">
-                        <SelectValue placeholder="그룹" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="__none__">없음</SelectItem>
-                        <SelectItem value="year">년</SelectItem>
-                        <SelectItem value="quarter">분기</SelectItem>
-                        <SelectItem value="month">월</SelectItem>
-                        <SelectItem value="week">주</SelectItem>
-                        <SelectItem value="day">일</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  )}
-                  
                   <Button
                     variant="ghost"
                     size="icon"
@@ -318,8 +295,7 @@ export const PivotGridConfigPanel: React.FC<PivotGridConfigPanelProps> = ({
         const mappedColumns: ColumnInfo[] = columnList.map((c: any) => ({
           column_name: c.columnName || c.column_name,
           data_type: c.dataType || c.data_type || "text",
-          // 라벨 우선순위: displayName > comment > columnLabel > columnName
+          column_comment: c.columnLabel || c.column_label || c.columnName || c.column_name,
-          column_comment: c.displayName || c.comment || c.columnLabel || c.column_label || c.columnName || c.column_name,
         }));
         setColumns(mappedColumns);
       } catch (error) {

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

@@ -37,12 +37,6 @@ import {
   BarChart3,
   GripVertical,
   ChevronDown,
-  RotateCcw,
-  FilterX,
-  LayoutGrid,
-  Trash2,
-  Calendar,
-  Check,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
@@ -62,8 +56,6 @@ interface FieldPanelProps {
   onFieldSettingsChange?: (field: PivotFieldConfig) => void;
   collapsed?: boolean;
   onToggleCollapse?: () => void;
-  /** 초기 필드 설정 (필드 배치 초기화용) */
-  initialFields?: PivotFieldConfig[];
 }
 
 interface FieldChipProps {
@@ -131,33 +123,15 @@ const SortableFieldChip: React.FC<FieldChipProps> = ({
     transition,
   };
 
-  // 필터 적용 여부 확인
-  const hasFilter = field.filterValues && field.filterValues.length > 0;
-  const filterCount = field.filterValues?.length || 0;
-  
-  // 그룹화 상태 확인
-  const hasGrouping = field.groupInterval && field.dataType === "date";
-  const groupLabels: Record<string, string> = {
-    year: "연도",
-    quarter: "분기",
-    month: "월",
-    week: "주",
-    day: "일",
-  };
-
   return (
     <div
       ref={setNodeRef}
       style={style}
       className={cn(
         "inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs",
-        "bg-background border shadow-sm",
+        "bg-background border border-border shadow-sm",
         "hover:bg-accent/50 transition-colors",
-        isDragging && "opacity-50 shadow-lg",
+        isDragging && "opacity-50 shadow-lg"
-        // 필터 적용 시 강조 표시
-        hasFilter 
-          ? "border-primary bg-primary/5" 
-          : "border-border"
       )}
     >
       {/* 드래그 핸들 */}
@@ -169,30 +143,11 @@ const SortableFieldChip: React.FC<FieldChipProps> = ({
         <GripVertical className="h-3 w-3" />
       </button>
 
-      {/* 필터 아이콘 (필터 적용 시) */}
-      {hasFilter && (
-        <Filter className="h-3 w-3 text-primary" />
-      )}
-
       {/* 필드 라벨 */}
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <button className="flex items-center gap-1 hover:text-primary">
-            <span className={cn("font-medium", hasFilter && "text-primary")}>
+            <span className="font-medium">{field.caption}</span>
-              {field.caption}
-            </span>
-            {/* 그룹화 적용 표시 */}
-            {hasGrouping && (
-              <span className="bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 text-[10px] px-1 rounded">
-                {groupLabels[field.groupInterval!]}
-              </span>
-            )}
-            {/* 필터 적용 개수 배지 */}
-            {hasFilter && (
-              <span className="bg-primary text-primary-foreground text-[10px] px-1 rounded">
-                {filterCount}
-              </span>
-            )}
             {field.area === "data" && field.summaryType && (
               <span className="text-muted-foreground">
                 ({getSummaryLabel(field.summaryType)})
@@ -242,59 +197,6 @@ const SortableFieldChip: React.FC<FieldChipProps> = ({
               <DropdownMenuSeparator />
             </>
           )}
-          {/* 날짜 그룹화 옵션 (행/열 영역의 날짜 타입 필드만) */}
-          {(field.area === "row" || field.area === "column") && 
-           field.dataType === "date" && (
-            <>
-              <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground flex items-center gap-1">
-                <Calendar className="h-3 w-3" />
-                날짜 그룹화
-              </div>
-              <DropdownMenuItem
-                onClick={() => onSettingsChange?.({ ...field, groupInterval: undefined })}
-                className="pl-6"
-              >
-                {!field.groupInterval && <Check className="h-3 w-3 mr-2" />}
-                <span className={!field.groupInterval ? "font-medium" : ""}>그룹화 없음</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={() => onSettingsChange?.({ ...field, groupInterval: "year" })}
-                className="pl-6"
-              >
-                {field.groupInterval === "year" && <Check className="h-3 w-3 mr-2" />}
-                <span className={field.groupInterval === "year" ? "font-medium" : ""}>연도별</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={() => onSettingsChange?.({ ...field, groupInterval: "quarter" })}
-                className="pl-6"
-              >
-                {field.groupInterval === "quarter" && <Check className="h-3 w-3 mr-2" />}
-                <span className={field.groupInterval === "quarter" ? "font-medium" : ""}>분기별</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={() => onSettingsChange?.({ ...field, groupInterval: "month" })}
-                className="pl-6"
-              >
-                {field.groupInterval === "month" && <Check className="h-3 w-3 mr-2" />}
-                <span className={field.groupInterval === "month" ? "font-medium" : ""}>월별</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={() => onSettingsChange?.({ ...field, groupInterval: "week" })}
-                className="pl-6"
-              >
-                {field.groupInterval === "week" && <Check className="h-3 w-3 mr-2" />}
-                <span className={field.groupInterval === "week" ? "font-medium" : ""}>주별</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={() => onSettingsChange?.({ ...field, groupInterval: "day" })}
-                className="pl-6"
-              >
-                {field.groupInterval === "day" && <Check className="h-3 w-3 mr-2" />}
-                <span className={field.groupInterval === "day" ? "font-medium" : ""}>일별</span>
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-            </>
-          )}
           <DropdownMenuItem
             onClick={() =>
               onSettingsChange?.({
@@ -306,19 +208,6 @@ const SortableFieldChip: React.FC<FieldChipProps> = ({
             {field.sortOrder === "asc" ? "내림차순 정렬" : "오름차순 정렬"}
           </DropdownMenuItem>
           <DropdownMenuSeparator />
-          {/* 필터 초기화 (필터가 적용된 경우에만 표시) */}
-          {hasFilter && (
-            <>
-              <DropdownMenuItem
-                onClick={() => onSettingsChange?.({ ...field, filterValues: [] })}
-                className="text-orange-600"
-              >
-                <Filter className="h-3 w-3 mr-2" />
-                필터 초기화 ({filterCount}개 선택됨)
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-            </>
-          )}
           <DropdownMenuItem
             onClick={() => onSettingsChange?.({ ...field, visible: false })}
           >
@@ -437,73 +326,10 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
   onFieldSettingsChange,
   collapsed = false,
   onToggleCollapse,
-  initialFields,
 }) => {
   const [activeId, setActiveId] = useState<string | null>(null);
   const [overArea, setOverArea] = useState<PivotAreaType | null>(null);
 
-  // 필터만 초기화
-  const handleResetFilters = () => {
-    const newFields = fields.map((f) => ({
-      ...f,
-      filterValues: [],
-      filterType: "include" as const,
-    }));
-    onFieldsChange(newFields);
-  };
-
-  // 필드 배치 초기화 (initialFields가 있으면 사용, 없으면 모든 필드를 row로)
-  const handleResetLayout = () => {
-    if (initialFields && initialFields.length > 0) {
-      // initialFields의 영역 배치를 복원하되 현재 필터 값은 유지
-      const newFields = fields.map((f) => {
-        const initial = initialFields.find((i) => i.field === f.field);
-        if (initial) {
-          return {
-            ...f,
-            area: initial.area,
-            areaIndex: initial.areaIndex,
-          };
-        }
-        return f;
-      });
-      onFieldsChange(newFields);
-    } else {
-      // 기본값: 숫자는 data, 나머지는 row로
-      const newFields = fields.map((f, idx) => ({
-        ...f,
-        area: f.dataType === "number" ? "data" : "row" as PivotAreaType,
-        areaIndex: idx,
-        visible: true,
-      }));
-      onFieldsChange(newFields);
-    }
-  };
-
-  // 전체 초기화 (필드 배치 + 필터)
-  const handleResetAll = () => {
-    if (initialFields && initialFields.length > 0) {
-      // initialFields로 완전히 복원
-      onFieldsChange([...initialFields]);
-    } else {
-      // 기본값으로 초기화
-      const newFields = fields.map((f, idx) => ({
-        ...f,
-        area: f.dataType === "number" ? "data" : "row" as PivotAreaType,
-        areaIndex: idx,
-        visible: true,
-        filterValues: [],
-        filterType: "include" as const,
-      }));
-      onFieldsChange(newFields);
-    }
-  };
-
-  // 필터가 적용된 필드 개수
-  const filteredFieldCount = fields.filter(
-    (f) => f.filterValues && f.filterValues.length > 0
-  ).length;
-
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
@@ -750,60 +576,19 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
           />
         </div>
 
-        {/* 하단 버튼 영역 */}
+        {/* 접기 버튼 */}
-        <div className="flex items-center justify-between mt-1.5">
+        {onToggleCollapse && (
-          {/* 초기화 드롭다운 */}
+          <div className="flex justify-center mt-1.5">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="text-xs h-6 px-2 text-muted-foreground hover:text-foreground"
-              >
-                <RotateCcw className="h-3 w-3 mr-1" />
-                초기화
-                {filteredFieldCount > 0 && (
-                  <span className="ml-1 bg-orange-500 text-white text-[10px] px-1 rounded">
-                    {filteredFieldCount}
-                  </span>
-                )}
-                <ChevronDown className="h-3 w-3 ml-1" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start" className="w-48">
-              <DropdownMenuItem onClick={handleResetFilters}>
-                <FilterX className="h-3.5 w-3.5 mr-2 text-orange-500" />
-                필터만 초기화
-                {filteredFieldCount > 0 && (
-                  <span className="ml-auto text-xs text-muted-foreground">
-                    ({filteredFieldCount}개)
-                  </span>
-                )}
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={handleResetLayout}>
-                <LayoutGrid className="h-3.5 w-3.5 mr-2 text-blue-500" />
-                필드 배치 초기화
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem onClick={handleResetAll} className="text-destructive">
-                <Trash2 className="h-3.5 w-3.5 mr-2" />
-                전체 초기화
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-
-          {/* 접기 버튼 */}
-          {onToggleCollapse && (
             <Button
               variant="ghost"
               size="sm"
               onClick={onToggleCollapse}
-              className="text-xs h-6 px-2"
+              className="text-xs h-5 px-2"
             >
               필드 패널 접기
             </Button>
-          )}
+          </div>
-        </div>
+        )}
       </div>
 
       {/* 드래그 오버레이 */}

frontend/lib/registry/components/pivot-grid/types.ts

@@ -304,7 +304,6 @@ export interface PivotHeaderNode {
   level: number; // 깊이
   children?: PivotHeaderNode[]; // 자식 노드
   isExpanded: boolean; // 확장 상태
-  hasChildren: boolean; // 자식 존재 가능 여부 (다음 레벨 필드 있음)
   path: string[]; // 경로 (드릴다운용)
   subtotal?: PivotCellValue[]; // 소계
   span?: number; // colspan/rowspan
@@ -331,12 +330,9 @@ export interface PivotResult {
   // 플랫 행 목록 (렌더링용)
   flatRows: PivotFlatRow[];
 
-  // 플랫 열 목록 (렌더링용) - 리프 노드만
+  // 플랫 열 목록 (렌더링용)
   flatColumns: PivotFlatColumn[];
 
-  // 열 헤더 레벨별 (다중 행 헤더용)
-  columnHeaderLevels: PivotColumnHeaderCell[][];
-
   // 총합계
   grandTotals: {
     row: Map<string, PivotCellValue[]>; // 행별 총합
@@ -364,14 +360,6 @@ export interface PivotFlatColumn {
   isTotal?: boolean;
 }
 
-// 열 헤더 셀 (다중 행 헤더용)
-export interface PivotColumnHeaderCell {
-  caption: string;      // 표시 텍스트
-  colSpan: number;      // 병합할 열 수
-  path: string[];       // 전체 경로
-  level: number;        // 레벨 (0부터 시작)
-}
-
 // ==================== 상태 관리 ====================
 
 export interface PivotGridState {

frontend/lib/registry/components/pivot-grid/utils/pivotEngine.ts

@@ -10,7 +10,6 @@ import {
   PivotFlatRow,
   PivotFlatColumn,
   PivotCellValue,
-  PivotColumnHeaderCell,
   DateGroupInterval,
   AggregationType,
   SummaryDisplayMode,
@@ -77,31 +76,6 @@ export function pathToKey(path: string[]): string {
   return path.join("||");
 }
 
-/**
- * 모든 가능한 경로 생성 (열 전체 확장용)
- */
-function generateAllPaths(
-  data: Record<string, any>[],
-  fields: PivotFieldConfig[]
-): string[] {
-  const allPaths: string[] = [];
-  
-  // 각 레벨까지의 고유 경로 수집
-  for (let depth = 1; depth <= fields.length; depth++) {
-    const fieldsAtDepth = fields.slice(0, depth);
-    const pathSet = new Set<string>();
-    
-    data.forEach((row) => {
-      const path = fieldsAtDepth.map((f) => getFieldValue(row, f));
-      pathSet.add(pathToKey(path));
-    });
-    
-    pathSet.forEach((pathKey) => allPaths.push(pathKey));
-  }
-  
-  return allPaths;
-}
-
 /**
  * 키를 경로로 변환
  */
@@ -155,7 +129,6 @@ function buildHeaderTree(
       caption: key,
       level: 0,
       isExpanded: expandedPaths.has(pathKey),
-      hasChildren: remainingFields.length > 0, // 다음 레벨 필드가 있으면 자식 있음
       path: path,
       span: 1,
     };
@@ -222,7 +195,6 @@ function buildChildNodes(
       caption: key,
       level: level,
       isExpanded: expandedPaths.has(pathKey),
-      hasChildren: remainingFields.length > 0, // 다음 레벨 필드가 있으면 자식 있음
       path: path,
       span: 1,
     };
@@ -266,7 +238,7 @@ function flattenRows(nodes: PivotHeaderNode[]): PivotFlatRow[] {
       level: node.level,
       caption: node.caption,
       isExpanded: node.isExpanded,
-      hasChildren: node.hasChildren, // 노드에서 직접 가져옴 (다음 레벨 필드 존재 여부 기준)
+      hasChildren: !!(node.children && node.children.length > 0),
     });
 
     if (node.isExpanded && node.children) {
@@ -352,66 +324,6 @@ function getMaxColumnLevel(
   return Math.min(maxLevel, totalFields - 1);
 }
 
-/**
- * 다중 행 열 헤더 생성
- * 각 레벨별로 셀과 colSpan 정보를 반환
- */
-function buildColumnHeaderLevels(
-  nodes: PivotHeaderNode[],
-  totalLevels: number
-): PivotColumnHeaderCell[][] {
-  if (totalLevels === 0 || nodes.length === 0) {
-    return [];
-  }
-
-  const levels: PivotColumnHeaderCell[][] = Array.from(
-    { length: totalLevels },
-    () => []
-  );
-
-  // 리프 노드 수 계산 (colSpan 계산용)
-  function countLeaves(node: PivotHeaderNode): number {
-    if (!node.children || node.children.length === 0 || !node.isExpanded) {
-      return 1;
-    }
-    return node.children.reduce((sum, child) => sum + countLeaves(child), 0);
-  }
-
-  // 트리 순회하며 각 레벨에 셀 추가
-  function traverse(node: PivotHeaderNode, level: number) {
-    const colSpan = countLeaves(node);
-    
-    levels[level].push({
-      caption: node.caption,
-      colSpan,
-      path: node.path,
-      level,
-    });
-
-    if (node.children && node.isExpanded) {
-      for (const child of node.children) {
-        traverse(child, level + 1);
-      }
-    } else if (level < totalLevels - 1) {
-      // 확장되지 않은 노드는 다음 레벨들에 빈 셀로 채움
-      for (let i = level + 1; i < totalLevels; i++) {
-        levels[i].push({
-          caption: "",
-          colSpan,
-          path: node.path,
-          level: i,
-        });
-      }
-    }
-  }
-
-  for (const node of nodes) {
-    traverse(node, 0);
-  }
-
-  return levels;
-}
-
 // ==================== 데이터 매트릭스 생성 ====================
 
 /**
@@ -821,11 +733,12 @@ export function processPivotData(
     uniqueValues.forEach((val) => expandedRowSet.add(val));
   }
 
-  // 열은 항상 전체 확장 (열 헤더는 확장/축소 UI가 없음)
+  if (expandedColumnPaths.length === 0 && columnFields.length > 0) {
-  // 모든 가능한 열 경로를 확장 상태로 설정
+    const firstField = columnFields[0];
-  if (columnFields.length > 0) {
+    const uniqueValues = new Set(
-    const allColumnPaths = generateAllPaths(filteredData, columnFields);
+      filteredData.map((row) => getFieldValue(row, firstField))
-    allColumnPaths.forEach((pathKey) => expandedColSet.add(pathKey));
+    );
+    uniqueValues.forEach((val) => expandedColSet.add(val));
   }
 
   // 헤더 트리 생성
@@ -873,12 +786,6 @@ export function processPivotData(
     grandTotals.grand
   );
 
-  // 다중 행 열 헤더 생성
-  const columnHeaderLevels = buildColumnHeaderLevels(
-    columnHeaders,
-    columnFields.length
-  );
-
   return {
     rowHeaders,
     columnHeaders,
@@ -890,7 +797,6 @@ export function processPivotData(
       caption: path[path.length - 1] || "",
       span: 1,
     })),
-    columnHeaderLevels,
     grandTotals,
   };
 }