1 files changed, 178 insertions, 0 deletions
diff --git a/lib/material-groups/table/material-group-table.tsx b/lib/material-groups/table/material-group-table.tsx
new file mode 100644
index 00000000..21430c4f
--- /dev/null
+++ b/lib/material-groups/table/material-group-table.tsx
@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+} from "@/types/table"
+
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { InfiniteDataTable } from "@/components/data-table/infinite-data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { Button } from "@/components/ui/button"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+
+import { getMaterialGroups } from "../services"
+import { getColumns } from "./material-group-table-columns"
+import { ViewModeToggle } from "@/components/data-table/view-mode-toggle"
+
+// MaterialGroup 타입 정의 (서비스에서 반환되는 타입과 일치)
+type MaterialGroup = {
+  materialGroupCode: string | null;
+  materialName: string | null;
+  displayText: string | null;
+}
+
+interface MaterialGroupTableProps {
+  promises?: Promise<
+    [
+      Awaited<ReturnType<typeof getMaterialGroups>>,
+    ]
+  >
+}
+
+export function MaterialGroupTable({ promises }: MaterialGroupTableProps) {
+  // 페이지네이션 모드 데이터
+  const paginationData = promises ? React.use(promises) : null
+  const [{ data = [], pageCount = 0 }] = paginationData || [{ data: [], pageCount: 0 }]
+
+  console.log('MaterialGroupTable data:', data.length, 'material groups')
+
+  const columns = React.useMemo(
+    () => getColumns(),
+    []
+  )
+
+  // 기존 필터 필드들
+  const filterFields: DataTableFilterField<MaterialGroup>[] = [
+    {
+      id: "materialGroupCode",
+      label: "자재그룹코드",
+    },
+    {
+      id: "materialName",
+      label: "자재그룹명",
+    },
+  ]
+
+  const advancedFilterFields: DataTableAdvancedFilterField<MaterialGroup>[] = [
+    {
+      id: "materialGroupCode",
+      label: "자재그룹코드",
+      type: "text",
+    },
+    {
+      id: "materialName",
+      label: "자재그룹명",
+      type: "text",
+    },
+    {
+      id: "displayText",
+      label: "표시텍스트",
+      type: "text",
+    },
+  ]
+
+  // 확장된 useDataTable 훅 사용 (pageSize 기반 자동 전환)
+  const {
+    table,
+    infiniteScroll,
+    isInfiniteMode,
+    handlePageSizeChange,
+  } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "materialGroupCode", desc: false }],
+    },
+    getRowId: (originalRow) => String(originalRow.materialGroupCode || 'unknown'),
+    shallow: false,
+    clearOnDefault: true,
+    // 무한 스크롤 설정
+    infiniteScrollConfig: {
+      apiEndpoint: "/api/table/material-groups/infinite",
+      tableName: "material-groups",
+      maxPageSize: 100,
+    },
+  })
+
+  return (
+    <div className="w-full space-y-2.5 overflow-x-auto" style={{maxWidth:'100vw'}}>
+
+        {/* 모드 토글 */}
+        <div className="flex items-center justify-between">
+          <ViewModeToggle
+            isInfiniteMode={isInfiniteMode}
+            onSwitch={handlePageSizeChange}
+          />
+        </div>
+
+        {/* 에러 상태 (무한 스크롤 모드) */}
+        {isInfiniteMode && infiniteScroll?.error && (
+          <Alert variant="destructive">
+            <AlertDescription>
+              데이터를 불러오는 중 오류가 발생했습니다.
+              <Button
+                variant="link"
+                size="sm"
+                onClick={() => infiniteScroll.reset()}
+                className="ml-2 p-0 h-auto"
+              >
+                다시 시도
+              </Button>
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {/* 로딩 상태가 아닐 때만 테이블 렌더링 */}
+        {!(isInfiniteMode && infiniteScroll?.isLoading && infiniteScroll?.isEmpty) ? (
+          <>
+            {/* 도구 모음 */}
+            <DataTableAdvancedToolbar
+              table={table}
+              filterFields={advancedFilterFields}
+              shallow={false}
+            />
+
+            {/* 테이블 렌더링 */}
+            {isInfiniteMode ? (
+              // 무한 스크롤 모드: InfiniteDataTable 사용
+              <InfiniteDataTable
+                table={table}
+                hasNextPage={infiniteScroll?.hasNextPage || false}
+                isLoadingMore={infiniteScroll?.isLoadingMore || false}
+                onLoadMore={infiniteScroll?.onLoadMore}
+                totalCount={infiniteScroll?.totalCount}
+                isEmpty={infiniteScroll?.isEmpty || false}
+                compact={false}
+                autoSizeColumns={true}
+              />
+            ) : (
+              // 페이지네이션 모드: DataTable 사용
+              <DataTable
+                table={table}
+                compact={false}
+                autoSizeColumns={true}
+              />
+            )}
+          </>
+        ) : (
+          /* 로딩 스켈레톤 (무한 스크롤 초기 로딩) */
+          <div className="space-y-3">
+            <div className="text-sm text-muted-foreground mb-4">
+              무한 스크롤 모드로 데이터를 로드하고 있습니다...
+            </div>
+            {Array.from({ length: 10 }).map((_, i) => (
+              <div key={i} className="h-12 w-full bg-muted animate-pulse rounded" />
+            ))}
+          </div>
+        )}
+
+      </div>
+      )
+}