feat(WEB): 테이블 컬럼 표시/숨김 설정 기능 추가

- useColumnSettings 훅: 컬럼 가시성 토글 로직
- useTableColumnStore: Zustand 기반 컬럼 설정 영속화 (localStorage)
- ColumnSettingsPopover: 컬럼 설정 UI 컴포넌트
- UniversalListPage/IntegratedListTemplateV2에 컬럼 설정 통합

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
유병철
2026-02-20 18:09:17 +09:00
parent 30ca2afca8
commit ceeeeb1ef4
6 changed files with 353 additions and 6 deletions

View File

@@ -0,0 +1,64 @@
import { useMemo, useCallback } from 'react';
import { useTableColumnStore } from '@/stores/useTableColumnStore';
import type { TableColumn } from '@/components/templates/UniversalListPage/types';
export interface ColumnWithVisibility extends TableColumn {
visible: boolean;
locked: boolean;
}
interface UseColumnSettingsParams {
pageId: string;
columns: TableColumn[];
alwaysVisibleKeys?: string[];
}
export function useColumnSettings({ pageId, columns, alwaysVisibleKeys = [] }: UseColumnSettingsParams) {
const store = useTableColumnStore();
const settings = store.getPageSettings(pageId);
const visibleColumns = useMemo(() => {
return columns.filter((col) => !settings.hiddenColumns.includes(col.key));
}, [columns, settings.hiddenColumns]);
const allColumnsWithVisibility = useMemo((): ColumnWithVisibility[] => {
return columns.map((col) => ({
...col,
visible: !settings.hiddenColumns.includes(col.key),
locked: alwaysVisibleKeys.includes(col.key),
}));
}, [columns, settings.hiddenColumns, alwaysVisibleKeys]);
const columnWidths = settings.columnWidths;
const setColumnWidth = useCallback(
(key: string, width: number) => {
store.setColumnWidth(pageId, key, width);
},
[store, pageId]
);
const toggleColumnVisibility = useCallback(
(key: string) => {
if (alwaysVisibleKeys.includes(key)) return;
store.toggleColumnVisibility(pageId, key);
},
[store, pageId, alwaysVisibleKeys]
);
const resetSettings = useCallback(() => {
store.resetPageSettings(pageId);
}, [store, pageId]);
const hasHiddenColumns = settings.hiddenColumns.length > 0;
return {
visibleColumns,
allColumnsWithVisibility,
columnWidths,
setColumnWidth,
toggleColumnVisibility,
resetSettings,
hasHiddenColumns,
};
}