From 7433eea5b4bbc0899e255b88e1a7e91f26e9d95b Mon Sep 17 00:00:00 2001
From: joonhoekim <26rote@gmail.com>
Date: Wed, 17 Sep 2025 18:04:10 +0900
Subject: (김준회) 자재그룹 선택기 오류수정, 공용사용을 위한 다이얼로그
 컴포넌트 구현, data-table 오류 수정
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/data-table/data-table-filter-list.tsx   | 20 +++++++++++++++++---
 components/data-table/data-table-grobal-filter.tsx | 15 ++++++++++++++-
 2 files changed, 31 insertions(+), 4 deletions(-)

(limited to 'components/data-table')

diff --git a/components/data-table/data-table-filter-list.tsx b/components/data-table/data-table-filter-list.tsx
index ea4b1f90..c79c9cfd 100644
--- a/components/data-table/data-table-filter-list.tsx
+++ b/components/data-table/data-table-filter-list.tsx
@@ -124,14 +124,27 @@ export function DataTableFilterList<TData>({
     })
   )
 
+  // Page state to reset when filters change
+  const [, setPage] = useQueryState("page", {
+    parse: (str) => str ? parseInt(str) : 1,
+    serialize: (val) => val.toString(),
+    eq: (a, b) => a === b,
+    clearOnDefault: true,
+    shallow,
+  })
+
   const safeSetFilters = React.useCallback(
     (next: Filter<TData>[] | ((p: Filter<TData>[]) => Filter<TData>[])) => {
       setFilters((prev) => {
         const value = typeof next === "function" ? next(prev) : next
+        if (!deepEqual(prev, value)) {
+          // Reset page to 1 when filters change
+          void setPage(1);
+        }
         return deepEqual(prev, value) ? prev : value   // <─ 달라진 게 없으면 그대로
       })
     },
-    [setFilters]
+    [setFilters, setPage]
   )
   
   
@@ -145,11 +158,12 @@ export function DataTableFilterList<TData>({
   }, [externalFilters, setFilters, safeSetFilters]);
 
   React.useEffect(() => {
-    if (externalJoinOperator) {
+    if (externalJoinOperator && externalJoinOperator !== joinOperator) {
       console.log("=== 외부 조인 연산자 적용 ===", externalJoinOperator);
+      void setPage(1); // Reset page when join operator changes
       setJoinOperator(externalJoinOperator);
     }
-  }, [externalJoinOperator, setJoinOperator]);
+  }, [externalJoinOperator, setJoinOperator, joinOperator, setPage]);
 
   // ✅ 필터 변경 시 부모에게 알림
 
diff --git a/components/data-table/data-table-grobal-filter.tsx b/components/data-table/data-table-grobal-filter.tsx
index fa0c809c..5714d92a 100644
--- a/components/data-table/data-table-grobal-filter.tsx
+++ b/components/data-table/data-table-grobal-filter.tsx
@@ -19,12 +19,25 @@ export function DataTableGlobalFilter() {
     shallow: false, 
   })
 
+  // Page state to reset when search changes
+  const [, setPage] = useQueryState("page", {
+    parse: (str) => str ? parseInt(str) : 1,
+    serialize: (val) => val.toString(),
+    eq: (a, b) => a === b,
+    clearOnDefault: true,
+    shallow: false,
+  })
+
   // Local tempValue to update instantly on user keystroke
   const [tempValue, setTempValue] = React.useState(searchValue ?? "")
 
   // Debounced callback that sets the URL param after `delay` ms
   const debouncedSetSearch = useDebouncedCallback((value: string) => {
-    if (value !== searchValue) setSearchValue(value.trim() === "" ? null : value);
+    if (value !== searchValue) {
+      // Reset page to 1 when search changes
+      void setPage(1);
+      setSearchValue(value.trim() === "" ? null : value);
+    }
   }, 300)
 
   // When user types, update local `tempValue` immediately,
-- 
cgit v1.2.3