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 = ({ const [localColumns, setLocalColumns] = useState([]); const [draggedIndex, setDraggedIndex] = useState(null); + const [frozenColumnCount, setFrozenColumnCount] = useState(0); // 테이블 정보 로드 useEffect(() => { @@ -42,6 +43,8 @@ export const ColumnVisibilityPanel: React.FC = ({ order: 0, })) ); + // 현재 틀고정 컬럼 수 로드 + setFrozenColumnCount(table.frozenColumnCount ?? 0); } }, [table]); @@ -94,6 +97,11 @@ export const ColumnVisibilityPanel: React.FC = ({ table.onColumnOrderChange(newOrder); } + // 틀고정 컬럼 수 변경 콜백 호출 + if (table?.onFrozenColumnCountChange) { + table.onFrozenColumnCountChange(frozenColumnCount); + } + onClose(); }; @@ -107,9 +115,18 @@ export const ColumnVisibilityPanel: React.FC = ({ 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 = ({
- {/* 상태 표시 */} -
-
- {visibleCount}/{localColumns.length}개 컬럼 표시 중 + {/* 상태 표시 및 틀고정 설정 */} +
+
+
+ {visibleCount}/{localColumns.length}개 컬럼 표시 중 +
+ + {/* 틀고정 설정 */} +
+ + + 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" + /> + + 개 컬럼 + +
+