(대표님) 변경사항 20250707 10시 43분

1 files changed, 32 insertions, 13 deletions

diff --git a/components/data-table/data-table-sort-list.tsx b/components/data-table/data-table-sort-list.tsx
index c3c537ac..c752f2f4 100644
--- a/components/data-table/data-table-sort-list.tsx
+++ b/components/data-table/data-table-sort-list.tsx
@@ -54,19 +54,30 @@ interface DataTableSortListProps<TData> {
   shallow?: boolean
 }
 
+let renderCount = 0;
+
 export function DataTableSortList<TData>({
   table,
   debounceMs,
   shallow,
 }: DataTableSortListProps<TData>) {
+  renderCount++;
+
   const id = React.useId()
 
   const initialSorting = (table.initialState.sorting ??
     []) as ExtendedSortingState<TData>
 
+  // ✅ 파서를 안정화 - 한 번만 생성되도록 수정
+  const sortingParser = React.useMemo(() => {
+    // 첫 번째 행의 데이터를 안정적으로 가져오기
+    const sampleData = table.getRowModel().rows[0]?.original;
+    return getSortingStateParser(sampleData);
+  }, []); // ✅ 빈 dependency - 한 번만 생성
+
   const [sorting, setSorting] = useQueryState(
     "sort",
-    getSortingStateParser(table.getRowModel().rows[0]?.original)
+    sortingParser
       .withDefault(initialSorting)
       .withOptions({
         clearOnDefault: true,
@@ -74,6 +85,10 @@ export function DataTableSortList<TData>({
       })
   )
 
+  // ✅ debouncedSetSorting - 컴포넌트 최상위로 이동
+  const debouncedSetSorting = useDebouncedCallback(setSorting, debounceMs);
+
+  // ✅ uniqueSorting 메모이제이션
   const uniqueSorting = React.useMemo(
     () =>
       sorting.filter(
@@ -82,8 +97,7 @@ export function DataTableSortList<TData>({
     [sorting]
   )
 
-  const debouncedSetSorting = useDebouncedCallback(setSorting, debounceMs)
-
+  // ✅ sortableColumns 메모이제이션
   const sortableColumns = React.useMemo(
     () =>
       table
@@ -100,7 +114,8 @@ export function DataTableSortList<TData>({
     [sorting, table]
   )
 
-  function addSort() {
+  // ✅ 함수들을 useCallback으로 메모이제이션
+  const addSort = React.useCallback(() => {
     const firstAvailableColumn = sortableColumns.find(
       (column) => !sorting.some((s) => s.id === column.id)
     )
@@ -113,9 +128,9 @@ export function DataTableSortList<TData>({
         desc: false,
       },
     ])
-  }
+  }, [sortableColumns, sorting, setSorting]);
 
-  function updateSort({
+  const updateSort = React.useCallback(({
     id,
     field,
     debounced = false,
@@ -123,7 +138,7 @@ export function DataTableSortList<TData>({
     id: string
     field: Partial<ExtendedColumnSort<TData>>
     debounced?: boolean
-  }) {
+  }) => {
     const updateFunction = debounced ? debouncedSetSorting : setSorting
 
     updateFunction((prevSorting) => {
@@ -134,13 +149,17 @@ export function DataTableSortList<TData>({
       )
       return updatedSorting
     })
-  }
+  }, [debouncedSetSorting, setSorting]);
 
-  function removeSort(id: string) {
+  const removeSort = React.useCallback((id: string) => {
     void setSorting((prevSorting) =>
       prevSorting.filter((item) => item.id !== id)
     )
-  }
+  }, [setSorting]);
+
+  const resetSorting = React.useCallback(() => {
+    setSorting(null);
+  }, [setSorting]);
 
   return (
     <Sortable
@@ -167,7 +186,7 @@ export function DataTableSortList<TData>({
             <ArrowDownUp className="size-3" aria-hidden="true" />
 
             <span className="hidden sm:inline">
-              정렬
+              정렬 
             </span>
 
             {uniqueSorting.length > 0 && (
@@ -357,7 +376,7 @@ export function DataTableSortList<TData>({
                 size="sm"
                 variant="outline"
                 className="rounded"
-                onClick={() => setSorting(null)}
+                onClick={resetSorting}
               >
                 Reset sorting
               </Button>
@@ -367,4 +386,4 @@ export function DataTableSortList<TData>({
       </Popover>
     </Sortable>
   )
-}
+}
\ No newline at end of file