(김준회) 기준정보-자재그룹 메뉴 구현

- 기준정보 메뉴를 자재그룹코드(/material-groups)로 변경
- 기존 자재코드조회는 /materials 로 남겨둠
- 메뉴를 자재그룹코드로만 남기고, i18n 처리

4 files changed, 435 insertions, 0 deletions

diff --git a/lib/material-groups/services.ts b/lib/material-groups/services.ts
new file mode 100644
index 00000000..4b7e9dea
--- /dev/null
+++ b/lib/material-groups/services.ts
@@ -0,0 +1,165 @@
+'use server'
+
+import { and, asc, desc, ilike, or, sql, eq } from 'drizzle-orm';
+import db from '@/db/db';
+import { filterColumns } from "@/lib/filter-columns";
+import { materialSearchView } from "@/db/schema/items";
+
+// 자재그룹 뷰의 컬럼 타입 정의
+type MaterialGroupColumn = keyof typeof materialSearchView.$inferSelect;
+
+export interface GetMaterialGroupsInput {
+  page: number;
+  perPage: number;
+  search?: string;
+  sort: Array<{
+    id: MaterialGroupColumn;
+    desc: boolean;
+  }>;
+  filters?: any[];
+  joinOperator: 'and' | 'or';
+}
+
+/**
+ * 자재그룹 목록을 조회합니다.
+ * materialSearchView를 사용하여 MATKL(자재그룹코드)와 ZZNAME(자재그룹명)의 고유한 조합을 조회
+ */
+export async function getMaterialGroups(input: GetMaterialGroupsInput) {
+  const safePerPage = Math.min(input.perPage, 100);
+  
+  try {
+    const offset = (input.page - 1) * safePerPage;
+    
+    // 고급 필터링
+    const advancedWhere = filterColumns({
+      table: materialSearchView,
+      filters: (input.filters || []) as any,
+      joinOperator: input.joinOperator,
+    });
+
+    // 전역 검색 - 주요 컬럼들에 대해 검색
+    let globalWhere;
+    if (input.search) {
+      const s = `%${input.search}%`;
+      globalWhere = or(
+        ilike(materialSearchView.materialGroupCode, s),      // 자재그룹코드
+        ilike(materialSearchView.materialName, s),           // 자재그룹명
+        ilike(materialSearchView.displayText, s),            // 표시 텍스트
+      );
+    }
+
+    const finalWhere = and(advancedWhere, globalWhere);
+
+    // 정렬 처리 - 타입 안전하게 처리
+    const orderBy = input.sort.length > 0
+      ? input.sort.map((item) => {
+          const column = materialSearchView[item.id];
+          return item.desc ? desc(column) : asc(column);
+        })
+      : [asc(materialSearchView.materialGroupCode)];
+
+    // 데이터 조회
+    const { data, total } = await db.transaction(async (tx) => {
+      const data = await tx
+        .select({
+          materialGroupCode: materialSearchView.materialGroupCode,
+          materialName: materialSearchView.materialName,
+          displayText: materialSearchView.displayText,
+        })
+        .from(materialSearchView)
+        .where(finalWhere)
+        .orderBy(...orderBy)
+        .offset(offset)
+        .limit(safePerPage);
+
+      const totalResult = await tx
+        .select({
+          count: sql<number>`count(*)`
+        })
+        .from(materialSearchView)
+        .where(finalWhere);
+      
+      const total = Number(totalResult[0]?.count) || 0;
+      return { data, total };
+    });
+
+    const pageCount = Math.ceil(total / safePerPage);
+    return { data, pageCount };
+  } catch (err) {
+    console.error('Error in getMaterialGroups:', err);
+    return { data: [], pageCount: 0 };
+  }
+}
+
+/**
+ * 무한 스크롤을 위한 자재그룹 조회 (페이지네이션 없음)
+ */
+export interface GetMaterialGroupsInfiniteInput extends Omit<GetMaterialGroupsInput, 'page' | 'perPage'> {
+  limit?: number; // 무한 스크롤용 추가 옵션
+}
+
+export async function getMaterialGroupsInfinite(input: GetMaterialGroupsInfiniteInput) {
+  try {
+    // 고급 필터링
+    const advancedWhere = filterColumns({
+      table: materialSearchView,
+      filters: (input.filters || []) as any,
+      joinOperator: input.joinOperator || "and",
+    });
+
+    // 전역 검색
+    let globalWhere;
+    if (input.search) {
+      const s = `%${input.search}%`;
+      globalWhere = or(
+        ilike(materialSearchView.materialGroupCode, s),
+        ilike(materialSearchView.materialName, s),
+        ilike(materialSearchView.displayText, s),
+      );
+    }
+
+    const finalWhere = and(advancedWhere, globalWhere);
+
+    // 정렬 처리 - 타입 안전하게 처리
+    const orderBy = input.sort.length > 0
+      ? input.sort.map((item) => {
+          const column = materialSearchView[item.id];
+          return item.desc ? desc(column) : asc(column);
+        })
+      : [asc(materialSearchView.materialGroupCode)];
+
+    // 전체 데이터 조회 (클라이언트에서 가상화 처리)
+    const data = await db
+      .select({
+        materialGroupCode: materialSearchView.materialGroupCode,
+        materialName: materialSearchView.materialName,
+        displayText: materialSearchView.displayText,
+      })
+      .from(materialSearchView)
+      .where(finalWhere)
+      .orderBy(...orderBy);
+
+    return { data };
+  } catch (err) {
+    console.error('Error in getMaterialGroupsInfinite:', err);
+    return { data: [] };
+  }
+}
+
+/**
+ * 특정 자재그룹 상세 정보 조회
+ */
+export async function getMaterialGroupDetail(materialGroupCode: string) {
+  try {
+    const materialGroup = await db
+      .select()
+      .from(materialSearchView)
+      .where(eq(materialSearchView.materialGroupCode, materialGroupCode))
+      .limit(1);
+
+    return materialGroup.length > 0 ? materialGroup[0] : null;
+  } catch (err) {
+    console.error('Error in getMaterialGroupDetail:', err);
+    return null;
+  }
+}
diff --git a/lib/material-groups/table/material-group-table-columns.tsx b/lib/material-groups/table/material-group-table-columns.tsx
new file mode 100644
index 00000000..90df720d
--- /dev/null
+++ b/lib/material-groups/table/material-group-table-columns.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import { type ColumnDef } from "@tanstack/react-table"
+
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+
+// MaterialGroup 타입 정의 (서비스에서 반환되는 타입과 일치)
+type MaterialGroup = {
+  materialGroupCode: string | null;
+  materialName: string | null;
+  displayText: string | null;
+}
+
+/**
+ * MaterialGroup 테이블 컬럼 정의
+ */
+export function getColumns(): ColumnDef<MaterialGroup>[] {
+  // ----------------------------------------------------------------
+  // 데이터 컬럼들
+  // ----------------------------------------------------------------
+  const dataColumns: ColumnDef<MaterialGroup>[] = [
+    {
+      accessorKey: "materialGroupCode",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="자재그룹코드" />
+      ),
+      cell: ({ row }) => {
+        const value = row.getValue("materialGroupCode") as string | null
+        return (
+          <div className="font-medium">
+            {value || "-"}
+          </div>
+        )
+      },
+      enableSorting: true,
+      enableHiding: false,
+    },
+    {
+      accessorKey: "materialName",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="자재그룹명" />
+      ),
+      cell: ({ row }) => {
+        const value = row.getValue("materialName") as string | null
+        return (
+          <div className="max-w-[300px] truncate">
+            {value || "-"}
+          </div>
+        )
+      },
+      enableSorting: true,
+      enableHiding: false,
+    },
+  ]
+
+  // ----------------------------------------------------------------
+  // 최종 컬럼 배열
+  // ----------------------------------------------------------------
+  return dataColumns
+}
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>
+      )
+}
diff --git a/lib/material-groups/validations.ts b/lib/material-groups/validations.ts
new file mode 100644
index 00000000..c379c833
--- /dev/null
+++ b/lib/material-groups/validations.ts
@@ -0,0 +1,31 @@
+import {
+  createSearchParamsCache,
+  parseAsArrayOf,
+  parseAsInteger,
+  parseAsString,
+  parseAsStringEnum,
+} from "nuqs/server"
+import * as z from "zod"
+
+import { getFiltersStateParser, getSortingStateParser } from "@/lib/parsers"
+import { materialSearchView } from "@/db/schema/items"
+
+// MaterialGroup 검색 파라미터 캐시 정의
+export const searchParamsCache = createSearchParamsCache({
+  flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault([]),
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(10),
+  
+  // 확장된 타입으로 정렬 파서 사용
+  sort: getSortingStateParser<typeof materialSearchView>().withDefault([
+    { id: "materialGroupCode", desc: false },
+  ]),
+
+  // 고급 필터
+  filters: getFiltersStateParser().withDefault([]),
+  joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+  search: parseAsString.withDefault(""),
+});
+
+// 타입 내보내기
+export type GetMaterialGroupsSchema = Awaited<ReturnType<typeof searchParamsCache.parse>>;