feat: 검색 필터 위젯 화면별 독립 설정 및 고정 모드 추가

- 검색 필터 설정을 화면별로 독립적으로 저장하도록 개선 (screenId 포함)
- FilterPanel, TableSearchWidget, TableListComponent에 화면 ID 기반 localStorage 키 적용
- 동적 모드(사용자 설정)와 고정 모드(디자이너 설정) 2가지 필터 방식 추가
- 고정 모드에서 컬럼 드롭다운 선택 기능 구현
- 컬럼 선택 시 라벨 및 필터 타입 자동 설정
- ConfigPanel 표시 문제 해결 (type='component' 지원)
- UnifiedPropertiesPanel에서 독립 컴포넌트 ConfigPanel 조회 개선

주요 변경:
- 같은 테이블을 사용하는 다른 화면에서 필터 설정이 독립적으로 관리됨
- 고정 모드에서는 설정 버튼이 숨겨지고 지정된 필터만 표시
- 테이블 정보가 있으면 컬럼을 드롭다운으로 선택 가능
- inputType에 따라 filterType 자동 추론 (number, date, select, text)
This commit is contained in:
kjs
2025-11-20 16:21:18 +09:00
parent 45ac397417
commit e2cc09b2d6
6 changed files with 415 additions and 87 deletions

View File

@@ -26,6 +26,7 @@ interface Props {
isOpen: boolean;
onClose: () => void;
onFiltersApplied?: (filters: TableFilter[]) => void; // 필터 적용 시 콜백
screenId?: number; // 화면 ID 추가
}
// 필터 타입별 연산자
@@ -69,7 +70,7 @@ interface ColumnFilterConfig {
selectOptions?: Array<{ label: string; value: string }>;
}
export const FilterPanel: React.FC<Props> = ({ isOpen, onClose, onFiltersApplied }) => {
export const FilterPanel: React.FC<Props> = ({ isOpen, onClose, onFiltersApplied, screenId }) => {
const { getTable, selectedTableId } = useTableOptions();
const table = selectedTableId ? getTable(selectedTableId) : undefined;
@@ -79,7 +80,10 @@ export const FilterPanel: React.FC<Props> = ({ isOpen, onClose, onFiltersApplied
// localStorage에서 저장된 필터 설정 불러오기
useEffect(() => {
if (table?.columns && table?.tableName) {
const storageKey = `table_filters_${table.tableName}`;
// 화면별로 독립적인 필터 설정 저장
const storageKey = screenId
? `table_filters_${table.tableName}_screen_${screenId}`
: `table_filters_${table.tableName}`;
const savedFilters = localStorage.getItem(storageKey);
let filters: ColumnFilterConfig[];
@@ -192,9 +196,11 @@ export const FilterPanel: React.FC<Props> = ({ isOpen, onClose, onFiltersApplied
width: cf.width || 200, // 너비 포함 (기본 200px)
}));
// localStorage에 저장
// localStorage에 저장 (화면별로 독립적)
if (table?.tableName) {
const storageKey = `table_filters_${table.tableName}`;
const storageKey = screenId
? `table_filters_${table.tableName}_screen_${screenId}`
: `table_filters_${table.tableName}`;
localStorage.setItem(storageKey, JSON.stringify(columnFilters));
}
@@ -216,9 +222,11 @@ export const FilterPanel: React.FC<Props> = ({ isOpen, onClose, onFiltersApplied
setColumnFilters(clearedFilters);
setSelectAll(false);
// localStorage에서 제거
// localStorage에서 제거 (화면별로 독립적)
if (table?.tableName) {
const storageKey = `table_filters_${table.tableName}`;
const storageKey = screenId
? `table_filters_${table.tableName}_screen_${screenId}`
: `table_filters_${table.tableName}`;
localStorage.removeItem(storageKey);
}