(김준회) 자재그룹 선택기 오류수정, 공용사용을 위한 다이얼로그 컴포넌트 구현, data-table 오류 수정

1 files changed, 14 insertions, 1 deletions

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,