Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into jskim-node

frontend/components/screen/InteractiveDataTable.tsx

@@ -605,6 +605,23 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     }
   }, [relatedButtonFilter]);
 
+  // TableOptionsContext 필터 변경 시 데이터 재조회 (TableSearchWidget 연동)
+  const filtersAppliedRef = useRef(false);
+  useEffect(() => {
+    // 초기 렌더 시 빈 배열은 무시 (불필요한 재조회 방지)
+    if (!filtersAppliedRef.current && filters.length === 0) return;
+    filtersAppliedRef.current = true;
+
+    const filterSearchParams: Record<string, any> = {};
+    filters.forEach((f) => {
+      if (f.value !== "" && f.value !== undefined && f.value !== null) {
+        filterSearchParams[f.columnName] = f.value;
+      }
+    });
+    loadData(1, { ...searchValues, ...filterSearchParams });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filters]);
+
   // 카테고리 타입 컬럼의 값 매핑 로드
   useEffect(() => {
     const loadCategoryMappings = async () => {

frontend/components/screen/config-panels/DataFilterConfigPanel.tsx

@@ -541,8 +541,31 @@ export function DataFilterConfigPanel({
                         {/* 카테고리 타입이고 값 타입이 category인 경우 셀렉트박스 */}
                         {filter.valueType === "category" && categoryValues[filter.columnName] ? (
                           <Select
-                            value={Array.isArray(filter.value) ? filter.value[0] : filter.value}
-                            onValueChange={(value) => handleFilterChange(filter.id, "value", value)}
+                            value={
+                              filter.operator === "in" || filter.operator === "not_in"
+                                ? Array.isArray(filter.value) && filter.value.length > 0
+                                  ? filter.value[0]
+                                  : ""
+                                : Array.isArray(filter.value)
+                                  ? filter.value[0]
+                                  : filter.value
+                            }
+                            onValueChange={(selectedValue) => {
+                              if (filter.operator === "in" || filter.operator === "not_in") {
+                                const currentValues = Array.isArray(filter.value) ? filter.value : [];
+                                if (currentValues.includes(selectedValue)) {
+                                  handleFilterChange(
+                                    filter.id,
+                                    "value",
+                                    currentValues.filter((v) => v !== selectedValue),
+                                  );
+                                } else {
+                                  handleFilterChange(filter.id, "value", [...currentValues, selectedValue]);
+                                }
+                              } else {
+                                handleFilterChange(filter.id, "value", selectedValue);
+                              }
+                            }}
                           >
                             <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                               <SelectValue

frontend/components/screen/table-options/TableOptionsToolbar.tsx

@@ -109,9 +109,8 @@ export const TableOptionsToolbar: React.FC = () => {
             onOpenChange={setColumnPanelOpen}
           />
           <FilterPanel
-            tableId={selectedTableId}
-            open={filterPanelOpen}
-            onOpenChange={setFilterPanelOpen}
+            isOpen={filterPanelOpen}
+            onClose={() => setFilterPanelOpen(false)}
           />
           <GroupingPanel
             tableId={selectedTableId}