refactor(frontend): DataTable 컴포넌트에서 테이블 로직을 커스텀 훅으로 분리

정렬과 즐겨찾기 로직이 컴포넌트에 직접 포함되어 가독성이 떨어지고 재사용이 어려웠음

- useTableSort: 정렬 상태 관리 및 행 정렬 로직 분리
- useFavoriteRows: 즐겨찾기 행 분리 로직 추출
- getRowProps 타입을 ComponentPropsWithoutRef로 개선

fix #268

Author: kubrickcode

src/frontend/src/components/table/data-table.tsx

@@ -1,7 +1,13 @@
 import { Box, EmptyState, HStack, Table } from "@chakra-ui/react";
-import { orderBy, partition } from "es-toolkit/array";
 import { get } from "es-toolkit/compat";
-import { ReactNode, TableHTMLAttributes, useCallback, useMemo, useState } from "react";
+import {
+  ComponentPropsWithoutRef,
+  ReactNode,
+  TableHTMLAttributes,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 
 import {
   PaginationItems,
@@ -11,6 +17,8 @@ import {
 } from "~/components/chakra/pagination";
 
 import { FavoriteValue, getFavoriteRowStyles, isFavoriteValue } from "./favorite-control";
+import { useFavoriteRows } from "./hooks/use-favorite-rows";
+import { useTableSort } from "./hooks/use-table-sort";
 import { SortControl } from "./sort-control";
 
 export type DataTableProps<T> = TableHTMLAttributes<HTMLTableElement> & {
@@ -21,7 +29,7 @@ export type DataTableProps<T> = TableHTMLAttributes<HTMLTableElement> & {
   };
   favoriteKeyPath?: string;
   favorites?: FavoriteValue[];
-  getRowProps?: (row: { data: T; index: number }) => { [key: string]: any };
+  getRowProps?: (row: { data: T; index: number }) => ComponentPropsWithoutRef<typeof Table.Row>;
   pagination?: boolean;
   rows: {
     data: T;
@@ -50,74 +58,24 @@ export const DataTable = <T,>({
   rows,
   ...rest
 }: DataTableProps<T>) => {
-  const [sortOrder, setSortOrder] = useState<"asc" | "desc" | null>(defaultSorting?.value || null);
-  const [currentSortKey, setCurrentSortKey] = useState<string | null>(
-    defaultSorting?.sortKey || null
-  );
-
-  const displayRows = useMemo(() => {
-    if (!rows.length) return [];
-
-    const hasFavoriteFeature = !!favoriteKeyPath && favorites.length > 0;
-
-    let favoriteRows: typeof rows = [];
-    let normalRows: typeof rows = [];
-
-    if (hasFavoriteFeature) {
-      [favoriteRows, normalRows] = partition(rows, (row) => {
-        const value = get(row.data, favoriteKeyPath);
-        return (
-          (typeof value === "string" || typeof value === "number") && favorites.includes(value)
-        );
-      });
-    } else {
-      normalRows = [...rows];
-    }
+  const { currentSortKey, handleSort, sortOrder, sortRows } = useTableSort({
+    columns,
+    defaultSorting,
+  });
 
-    const sortRows = (rowsToSort: typeof rows) => {
-      if (!currentSortKey || !sortOrder) return rowsToSort;
-
-      return orderBy(
-        rowsToSort,
-        [
-          (row) => {
-            const column = columns.find((col) => col.sortKey === currentSortKey);
-            if (column?.sortValue) {
-              return column.sortValue(row.data);
-            }
-            return get(row.data, currentSortKey);
-          },
-        ],
-        [sortOrder]
-      );
-    };
+  const { favoriteRows, hasFavoriteFeature, normalRows } = useFavoriteRows({
+    favoriteKeyPath,
+    favorites,
+    rows,
+  });
 
+  const displayRows = useMemo(() => {
     if (hasFavoriteFeature) {
-      const sortedFavoriteRows = sortRows(favoriteRows);
-      const sortedNormalRows = sortRows(normalRows);
-      return [...sortedFavoriteRows, ...sortedNormalRows];
-    }
-
-    return sortRows(rows);
-  }, [rows, currentSortKey, sortOrder, columns, favoriteKeyPath, favorites]);
-
-  const handleSort = (column: Column<T>) => {
-    if (!column.sortKey) return;
-
-    let newOrder: "asc" | "desc" | null;
-    if (currentSortKey !== column.sortKey) {
-      newOrder = "asc";
-    } else if (sortOrder === "asc") {
-      newOrder = "desc";
-    } else if (sortOrder === "desc") {
-      newOrder = null;
-    } else {
-      newOrder = "asc";
+      return [...sortRows(favoriteRows), ...sortRows(normalRows)];
     }
 
-    setSortOrder(newOrder);
-    setCurrentSortKey(newOrder ? column.sortKey : null);
-  };
+    return sortRows(normalRows);
+  }, [favoriteRows, hasFavoriteFeature, normalRows, sortRows]);
 
   const [currentPage, setCurrentPage] = useState(1);
   const pageSize = 10;

src/frontend/src/components/table/hooks/index.tsx

@@ -0,0 +1,2 @@
+export { getValueFromPath, useFavoriteRows } from "./use-favorite-rows";
+export { useTableSort } from "./use-table-sort";

src/frontend/src/components/table/hooks/use-favorite-rows.tsx

@@ -0,0 +1,50 @@
+import { partition } from "es-toolkit/array";
+import { get } from "es-toolkit/compat";
+import { useMemo } from "react";
+
+import { FavoriteValue } from "../favorite-control";
+
+const isFavoriteValue = (value: unknown): value is FavoriteValue => {
+  return typeof value === "string" || typeof value === "number";
+};
+
+type UseFavoriteRowsOptions<T> = {
+  favoriteKeyPath?: string;
+  favorites: FavoriteValue[];
+  rows: Array<{ data: T }>;
+};
+
+type UseFavoriteRowsReturn<T> = {
+  favoriteRows: Array<{ data: T }>;
+  hasFavoriteFeature: boolean;
+  normalRows: Array<{ data: T }>;
+};
+
+export const useFavoriteRows = <T,>({
+  favoriteKeyPath,
+  favorites,
+  rows,
+}: UseFavoriteRowsOptions<T>): UseFavoriteRowsReturn<T> => {
+  return useMemo(() => {
+    const hasFavoriteFeature = !!favoriteKeyPath && favorites.length > 0;
+
+    if (!hasFavoriteFeature) {
+      return {
+        favoriteRows: [],
+        hasFavoriteFeature: false,
+        normalRows: [...rows],
+      };
+    }
+
+    const [favoriteRows, normalRows] = partition(rows, (row) => {
+      const value = get(row.data, favoriteKeyPath);
+      return isFavoriteValue(value) && favorites.includes(value);
+    });
+
+    return {
+      favoriteRows,
+      hasFavoriteFeature,
+      normalRows,
+    };
+  }, [favoriteKeyPath, favorites, rows]);
+};

src/frontend/src/components/table/hooks/use-table-sort.tsx

@@ -0,0 +1,82 @@
+import { orderBy } from "es-toolkit/array";
+import { get } from "es-toolkit/compat";
+import { useCallback, useMemo, useState } from "react";
+
+type SortOrder = "asc" | "desc" | null;
+
+type UseTableSortOptions<T> = {
+  columns: Array<{
+    sortKey?: string;
+    sortValue?: (data: T) => number | string | null;
+  }>;
+  defaultSorting?: {
+    sortKey: string;
+    value: "asc" | "desc";
+  };
+};
+
+type UseTableSortReturn<T> = {
+  currentSortKey: string | null;
+  handleSort: (column: { sortKey?: string }) => void;
+  sortOrder: SortOrder;
+  sortRows: <R extends { data: T }>(rows: R[]) => R[];
+};
+
+export const useTableSort = <T,>({
+  columns,
+  defaultSorting,
+}: UseTableSortOptions<T>): UseTableSortReturn<T> => {
+  const [currentSortKey, setCurrentSortKey] = useState<string | null>(
+    defaultSorting?.sortKey || null
+  );
+  const [sortOrder, setSortOrder] = useState<SortOrder>(defaultSorting?.value || null);
+
+  const handleSort = useCallback(
+    (column: { sortKey?: string }) => {
+      if (!column.sortKey) return;
+
+      let newOrder: SortOrder;
+      if (currentSortKey !== column.sortKey) {
+        newOrder = "asc";
+      } else if (sortOrder === "asc") {
+        newOrder = "desc";
+      } else if (sortOrder === "desc") {
+        newOrder = null;
+      } else {
+        newOrder = "asc";
+      }
+
+      setCurrentSortKey(newOrder ? column.sortKey : null);
+      setSortOrder(newOrder);
+    },
+    [currentSortKey, sortOrder]
+  );
+
+  const sortRows = useMemo(() => {
+    const column = columns.find((col) => col.sortKey === currentSortKey);
+
+    return <R extends { data: T }>(rows: R[]): R[] => {
+      if (!currentSortKey || !sortOrder) return rows;
+
+      return orderBy(
+        rows,
+        [
+          (row) => {
+            if (column?.sortValue) {
+              return column.sortValue(row.data);
+            }
+            return get(row.data, currentSortKey);
+          },
+        ],
+        [sortOrder]
+      );
+    };
+  }, [columns, currentSortKey, sortOrder]);
+
+  return {
+    currentSortKey,
+    handleSort,
+    sortOrder,
+    sortRows,
+  };
+};