From c3f066f88fc8b17e8988f3fd81ff3e15a876b8bd Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Thu, 18 Dec 2025 10:15:33 +0900
Subject: [PATCH] =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=20=ED=8B=80?=
 =?UTF-8?q?=EA=B3=A0=EC=A0=95=EA=B8=B0=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../table-options/ColumnVisibilityPanel.tsx   | 81 ++++++++++++++++---
 .../table-list/TableListComponent.tsx         | 66 ++++++++++++---
 frontend/types/table-options.ts               |  4 +
 3 files changed, 127 insertions(+), 24 deletions(-)

diff --git a/frontend/components/screen/table-options/ColumnVisibilityPanel.tsx b/frontend/components/screen/table-options/ColumnVisibilityPanel.tsx
index c03dac58..64acd942 100644
--- a/frontend/components/screen/table-options/ColumnVisibilityPanel.tsx
+++ b/frontend/components/screen/table-options/ColumnVisibilityPanel.tsx
@@ -13,7 +13,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { GripVertical, Eye, EyeOff } from "lucide-react";
+import { GripVertical, Eye, EyeOff, Lock } from "lucide-react";
 import { ColumnVisibility } from "@/types/table-options";
 
 interface Props {
@@ -30,6 +30,7 @@ export const ColumnVisibilityPanel: React.FC<Props> = ({
 
   const [localColumns, setLocalColumns] = useState<ColumnVisibility[]>([]);
   const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
+  const [frozenColumnCount, setFrozenColumnCount] = useState<number>(0);
 
   // 테이블 정보 로드
   useEffect(() => {
@@ -42,6 +43,8 @@ export const ColumnVisibilityPanel: React.FC<Props> = ({
           order: 0,
         }))
       );
+      // 현재 틀고정 컬럼 수 로드
+      setFrozenColumnCount(table.frozenColumnCount ?? 0);
     }
   }, [table]);
 
@@ -94,6 +97,11 @@ export const ColumnVisibilityPanel: React.FC<Props> = ({
       table.onColumnOrderChange(newOrder);
     }
     
+    // 틀고정 컬럼 수 변경 콜백 호출
+    if (table?.onFrozenColumnCountChange) {
+      table.onFrozenColumnCountChange(frozenColumnCount);
+    }
+    
     onClose();
   };
 
@@ -107,9 +115,18 @@ export const ColumnVisibilityPanel: React.FC<Props> = ({
           order: 0,
         }))
       );
+      setFrozenColumnCount(0);
     }
   };
 
+  // 틀고정 컬럼 수 변경 핸들러
+  const handleFrozenColumnCountChange = (value: string) => {
+    const count = parseInt(value) || 0;
+    // 최대값은 표시 가능한 컬럼 수
+    const maxCount = localColumns.filter((col) => col.visible).length;
+    setFrozenColumnCount(Math.min(Math.max(0, count), maxCount));
+  };
+
   const visibleCount = localColumns.filter((col) => col.visible).length;
 
   return (
@@ -126,11 +143,34 @@ export const ColumnVisibilityPanel: React.FC<Props> = ({
         </DialogHeader>
 
         <div className="space-y-3 sm:space-y-4">
-          {/* 상태 표시 */}
-          <div className="flex items-center justify-between rounded-lg border bg-muted/50 p-3">
-            <div className="text-xs text-muted-foreground sm:text-sm">
-              {visibleCount}/{localColumns.length}개 컬럼 표시 중
+          {/* 상태 표시 및 틀고정 설정 */}
+          <div className="flex flex-col gap-3 rounded-lg border bg-muted/50 p-3 sm:flex-row sm:items-center sm:justify-between">
+            <div className="flex items-center gap-4">
+              <div className="text-xs text-muted-foreground sm:text-sm">
+                {visibleCount}/{localColumns.length}개 컬럼 표시 중
+              </div>
+              
+              {/* 틀고정 설정 */}
+              <div className="flex items-center gap-2">
+                <Lock className="h-4 w-4 text-muted-foreground" />
+                <Label className="text-xs text-muted-foreground whitespace-nowrap">
+                  틀고정:
+                </Label>
+                <Input
+                  type="number"
+                  value={frozenColumnCount}
+                  onChange={(e) => handleFrozenColumnCountChange(e.target.value)}
+                  className="h-7 w-16 text-xs sm:h-8 sm:w-20 sm:text-sm"
+                  min={0}
+                  max={visibleCount}
+                  placeholder="0"
+                />
+                <span className="text-xs text-muted-foreground whitespace-nowrap">
+                  개 컬럼
+                </span>
+              </div>
             </div>
+            
             <Button
               variant="ghost"
               size="sm"
@@ -148,6 +188,12 @@ export const ColumnVisibilityPanel: React.FC<Props> = ({
                 const columnMeta = table?.columns.find(
                   (c) => c.columnName === col.columnName
                 );
+                // 표시 가능한 컬럼 중 몇 번째인지 계산 (틀고정 표시용)
+                const visibleIndex = localColumns
+                  .slice(0, index + 1)
+                  .filter((c) => c.visible).length;
+                const isFrozen = col.visible && visibleIndex <= frozenColumnCount;
+                
                 return (
                   <div
                     key={col.columnName}
@@ -155,7 +201,11 @@ export const ColumnVisibilityPanel: React.FC<Props> = ({
                     onDragStart={() => handleDragStart(index)}
                     onDragOver={(e) => handleDragOver(e, index)}
                     onDragEnd={handleDragEnd}
-                    className="flex items-center gap-3 rounded-lg border bg-background p-3 transition-colors hover:bg-muted/50 cursor-move"
+                    className={`flex items-center gap-3 rounded-lg border p-3 transition-colors cursor-move ${
+                      isFrozen 
+                        ? "bg-blue-50 border-blue-200 dark:bg-blue-950/30 dark:border-blue-800" 
+                        : "bg-background hover:bg-muted/50"
+                    }`}
                   >
                     {/* 드래그 핸들 */}
                     <GripVertical className="h-4 w-4 shrink-0 text-muted-foreground" />
@@ -171,8 +221,10 @@ export const ColumnVisibilityPanel: React.FC<Props> = ({
                       }
                     />
 
-                    {/* 가시성 아이콘 */}
-                    {col.visible ? (
+                    {/* 가시성/틀고정 아이콘 */}
+                    {isFrozen ? (
+                      <Lock className="h-4 w-4 shrink-0 text-blue-500" />
+                    ) : col.visible ? (
                       <Eye className="h-4 w-4 shrink-0 text-primary" />
                     ) : (
                       <EyeOff className="h-4 w-4 shrink-0 text-muted-foreground" />
@@ -180,8 +232,15 @@ export const ColumnVisibilityPanel: React.FC<Props> = ({
 
                     {/* 컬럼명 */}
                     <div className="flex-1">
-                      <div className="text-xs font-medium sm:text-sm">
-                        {columnMeta?.columnLabel}
+                      <div className="flex items-center gap-2">
+                        <span className="text-xs font-medium sm:text-sm">
+                          {columnMeta?.columnLabel}
+                        </span>
+                        {isFrozen && (
+                          <span className="text-[10px] text-blue-600 dark:text-blue-400 font-medium">
+                            (고정)
+                          </span>
+                        )}
                       </div>
                       <div className="text-[10px] text-muted-foreground sm:text-xs">
                         {col.columnName}
@@ -217,7 +276,7 @@ export const ColumnVisibilityPanel: React.FC<Props> = ({
         <DialogFooter className="gap-2 sm:gap-0">
           <Button
             variant="outline"
-            onClick={() => onOpenChange(false)}
+            onClick={onClose}
             className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
           >
             취소
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index fec61b43..171c65bb 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -687,7 +687,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const [isTableOptionsOpen, setIsTableOptionsOpen] = useState(false);
   const [showGridLines, setShowGridLines] = useState(true);
   const [viewMode, setViewMode] = useState<"table" | "card" | "grouped-card">("table");
-  const [frozenColumns, setFrozenColumns] = useState<string[]>([]);
+  // 체크박스 컬럼은 항상 기본 틀고정
+  const [frozenColumns, setFrozenColumns] = useState<string[]>(
+    (tableConfig.checkbox?.enabled ?? true) ? ["__checkbox__"] : []
+  );
+  const [frozenColumnCount, setFrozenColumnCount] = useState<number>(0);
 
   // 🆕 Search Panel (통합 검색) 관련 상태
   const [globalSearchTerm, setGlobalSearchTerm] = useState("");
@@ -1022,6 +1026,19 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       onColumnVisibilityChange: setColumnVisibility,
       getColumnUniqueValues, // 고유 값 조회 함수 등록
       onGroupSumChange: setGroupSumConfig, // 그룹별 합산 설정
+      // 틀고정 컬럼 관련
+      frozenColumnCount, // 현재 틀고정 컬럼 수
+      onFrozenColumnCountChange: (count: number) => {
+        setFrozenColumnCount(count);
+        // 체크박스 컬럼은 항상 틀고정에 포함
+        const checkboxColumn = (tableConfig.checkbox?.enabled ?? true) ? ["__checkbox__"] : [];
+        // 표시 가능한 컬럼 중 처음 N개를 틀고정 컬럼으로 설정
+        const visibleCols = columnsToRegister
+          .filter((col) => col.visible !== false)
+          .map((col) => col.columnName || col.field);
+        const newFrozenColumns = [...checkboxColumn, ...visibleCols.slice(0, count)];
+        setFrozenColumns(newFrozenColumns);
+      },
       // 탭 관련 정보 (탭 내부의 테이블인 경우)
       parentTabId,
       parentTabsComponentId,
@@ -2879,6 +2896,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       sortDirection,
       groupByColumns,
       frozenColumns,
+      frozenColumnCount, // 틀고정 컬럼 수 저장
       showGridLines,
       headerFilters: Object.fromEntries(
         Object.entries(headerFilters).map(([key, set]) => [key, Array.from(set as Set<string>)]),
@@ -2900,6 +2918,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     sortDirection,
     groupByColumns,
     frozenColumns,
+    frozenColumnCount,
     showGridLines,
     headerFilters,
     localPageSize,
@@ -2920,7 +2939,15 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       if (state.sortColumn !== undefined) setSortColumn(state.sortColumn);
       if (state.sortDirection) setSortDirection(state.sortDirection);
       if (state.groupByColumns) setGroupByColumns(state.groupByColumns);
-      if (state.frozenColumns) setFrozenColumns(state.frozenColumns);
+      if (state.frozenColumns) {
+        // 체크박스 컬럼이 항상 포함되도록 보장
+        const checkboxColumn = (tableConfig.checkbox?.enabled ?? true) ? "__checkbox__" : null;
+        const restoredFrozenColumns = checkboxColumn && !state.frozenColumns.includes(checkboxColumn)
+          ? [checkboxColumn, ...state.frozenColumns]
+          : state.frozenColumns;
+        setFrozenColumns(restoredFrozenColumns);
+      }
+      if (state.frozenColumnCount !== undefined) setFrozenColumnCount(state.frozenColumnCount); // 틀고정 컬럼 수 복원
       if (state.showGridLines !== undefined) setShowGridLines(state.showGridLines);
       if (state.headerFilters) {
         const filters: Record<string, Set<string>> = {};
@@ -5590,7 +5617,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                     if (isFrozen && frozenIndex > 0) {
                       for (let i = 0; i < frozenIndex; i++) {
                         const frozenCol = frozenColumns[i];
-                        const frozenColWidth = columnWidths[frozenCol] || 150;
+                        // 체크박스 컬럼은 48px 고정
+                        const frozenColWidth = frozenCol === "__checkbox__" ? 48 : (columnWidths[frozenCol] || 150);
                         leftPosition += frozenColWidth;
                       }
                     }
@@ -5609,7 +5637,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                           column.sortable !== false &&
                             column.columnName !== "__checkbox__" &&
                             "hover:bg-muted/70 cursor-pointer transition-colors",
-                          isFrozen && "sticky z-60 shadow-[2px_0_4px_rgba(0,0,0,0.1)]",
+                          isFrozen && "sticky z-40 shadow-[2px_0_4px_rgba(0,0,0,0.1)]",
                           // 🆕 Column Reordering 스타일
                           isColumnDragEnabled &&
                             column.columnName !== "__checkbox__" &&
@@ -5901,7 +5929,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                 if (isFrozen && frozenIndex > 0) {
                                   for (let i = 0; i < frozenIndex; i++) {
                                     const frozenCol = frozenColumns[i];
-                                    const frozenColWidth = columnWidths[frozenCol] || 150;
+                                    // 체크박스 컬럼은 48px 고정
+                                    const frozenColWidth = frozenCol === "__checkbox__" ? 48 : (columnWidths[frozenCol] || 150);
                                     leftPosition += frozenColWidth;
                                   }
                                 }
@@ -5914,7 +5943,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                       column.columnName === "__checkbox__"
                                         ? "px-0 py-1"
                                         : "px-2 py-1 sm:px-4 sm:py-1.5",
-                                      isFrozen && "bg-background sticky z-10 shadow-[2px_0_4px_rgba(0,0,0,0.05)]",
+                                      isFrozen && "sticky z-20 shadow-[2px_0_4px_rgba(0,0,0,0.08)]",
                                     )}
                                     style={{
                                       textAlign:
@@ -5929,7 +5958,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                           : `${100 / visibleColumns.length}%`,
                                       minWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
                                       maxWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
-                                      ...(isFrozen && { left: `${leftPosition}px` }),
+                                      ...(isFrozen && { 
+                                        left: `${leftPosition}px`,
+                                        backgroundColor: "hsl(var(--background))",
+                                      }),
                                     }}
                                   >
                                     {column.columnName === "__checkbox__"
@@ -6061,7 +6093,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                             if (isFrozen && frozenIndex > 0) {
                               for (let i = 0; i < frozenIndex; i++) {
                                 const frozenCol = frozenColumns[i];
-                                const frozenColWidth = columnWidths[frozenCol] || 150;
+                                // 체크박스 컬럼은 48px 고정
+                                const frozenColWidth = frozenCol === "__checkbox__" ? 48 : (columnWidths[frozenCol] || 150);
                                 leftPosition += frozenColWidth;
                               }
                             }
@@ -6074,7 +6107,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                 className={cn(
                                   "text-foreground overflow-hidden text-xs font-normal text-ellipsis whitespace-nowrap sm:text-sm",
                                   column.columnName === "__checkbox__" ? "px-0 py-1" : "px-2 py-1 sm:px-4 sm:py-1.5",
-                                  isFrozen && "bg-background sticky z-10 shadow-[2px_0_4px_rgba(0,0,0,0.05)]",
+                                  isFrozen && "sticky z-20 shadow-[2px_0_4px_rgba(0,0,0,0.08)]",
                                   // 🆕 포커스된 셀 스타일
                                   isCellFocused && !editingCell && "ring-primary bg-primary/5 ring-2 ring-inset",
                                   // 🆕 편집 중인 셀 스타일
@@ -6101,7 +6134,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                     column.columnName === "__checkbox__" ? "48px" : `${100 / visibleColumns.length}%`,
                                   minWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
                                   maxWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
-                                  ...(isFrozen && { left: `${leftPosition}px` }),
+                                  ...(isFrozen && { 
+                                    left: `${leftPosition}px`,
+                                    backgroundColor: "hsl(var(--background))",
+                                  }),
                                 }}
                                 onClick={(e) => handleCellClick(index, colIndex, e)}
                                 onDoubleClick={() =>
@@ -6222,7 +6258,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                       if (isFrozen && frozenIndex > 0) {
                         for (let i = 0; i < frozenIndex; i++) {
                           const frozenCol = frozenColumns[i];
-                          const frozenColWidth = columnWidths[frozenCol] || 150;
+                          // 체크박스 컬럼은 48px 고정
+                          const frozenColWidth = frozenCol === "__checkbox__" ? 48 : (columnWidths[frozenCol] || 150);
                           leftPosition += frozenColWidth;
                         }
                       }
@@ -6237,7 +6274,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                           className={cn(
                             "text-foreground text-xs font-semibold sm:text-sm",
                             column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-4",
-                            isFrozen && "bg-muted/80 sticky z-10 shadow-[2px_0_4px_rgba(0,0,0,0.05)]",
+                            isFrozen && "sticky z-20 shadow-[2px_0_4px_rgba(0,0,0,0.08)]",
                           )}
                           style={{
                             textAlign: isNumeric ? "right" : column.align || "left",
@@ -6247,7 +6284,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                 : columnWidth
                                   ? `${columnWidth}px`
                                   : undefined,
-                            ...(isFrozen && { left: `${leftPosition}px` }),
+                            ...(isFrozen && { 
+                              left: `${leftPosition}px`,
+                              backgroundColor: "hsl(var(--muted) / 0.8)",
+                            }),
                           }}
                         >
                           {summary ? (
diff --git a/frontend/types/table-options.ts b/frontend/types/table-options.ts
index 3fcdb846..bfcfccbc 100644
--- a/frontend/types/table-options.ts
+++ b/frontend/types/table-options.ts
@@ -66,6 +66,10 @@ export interface TableRegistration {
   onGroupChange: (groups: string[]) => void;
   onColumnVisibilityChange: (columns: ColumnVisibility[]) => void;
   onGroupSumChange?: (config: GroupSumConfig | null) => void; // 그룹별 합산 설정 변경
+  onFrozenColumnCountChange?: (count: number) => void; // 틀고정 컬럼 수 변경
+  
+  // 현재 설정 값 (읽기 전용)
+  frozenColumnCount?: number; // 현재 틀고정 컬럼 수
 
   // 데이터 조회 함수 (선택 타입 필터용)
   getColumnUniqueValues?: (columnName: string) => Promise<Array<{ label: string; value: string }>>;