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:
64
src/hooks/useColumnSettings.ts
Normal file
64
src/hooks/useColumnSettings.ts
Normal 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,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user