(김준회) MDG 자재마스터 정보 조회 기능 및 메뉴 추가, 회원가입시 공급품목 선택 기능 추가

6 files changed, 1101 insertions, 0 deletions

diff --git a/lib/material/material-group-service.ts b/lib/material/material-group-service.ts
new file mode 100644
index 00000000..216cd0e6
--- /dev/null
+++ b/lib/material/material-group-service.ts
@@ -0,0 +1,105 @@
+"use server";
+
+import { sql, SQL } from "drizzle-orm";
+import db from "@/db/db";
+import { materialSearchView } from "@/db/schema/items";
+
+export interface MaterialSearchItem {
+  materialGroupCode: string;
+  materialName: string;
+  displayText: string;
+}
+
+export interface MaterialSearchResult {
+  success: boolean;
+  data: MaterialSearchItem[];
+  pagination: {
+    page: number;
+    perPage: number;
+    total: number;
+    pageCount: number;
+    hasNextPage: boolean;
+    hasPrevPage: boolean;
+  };
+}
+
+/**
+ * 자재 검색 함수 - material_search_view에서 검색
+ */
+export async function searchMaterialsForSelector(
+  query: string,
+  page: number = 1,
+  perPage: number = 10
+): Promise<MaterialSearchResult> {
+  try {
+    const offset = (page - 1) * perPage;
+
+    // 검색 조건
+    let searchWhere: SQL<unknown> | undefined;
+    if (query.trim()) {
+      const searchPattern = `%${query.trim()}%`;
+      searchWhere = sql`(
+        ${materialSearchView.materialGroupCode} ILIKE ${searchPattern} OR 
+        ${materialSearchView.materialName} ILIKE ${searchPattern} OR 
+        ${materialSearchView.displayText} ILIKE ${searchPattern}
+      )`;
+    }
+
+    const { data, total } = await db.transaction(async (tx) => {
+      // 데이터 조회
+      const data = await tx
+        .select()
+        .from(materialSearchView)
+        .where(searchWhere)
+        .orderBy(materialSearchView.materialGroupCode, materialSearchView.materialName)
+        .limit(perPage)
+        .offset(offset);
+
+      // 총 개수 조회
+      const countResult = await tx
+        .select({ count: sql<number>`count(*)` })
+        .from(materialSearchView)
+        .where(searchWhere);
+
+      const total = countResult[0]?.count || 0;
+
+      return {
+        data: data.map((row) => ({
+          materialGroupCode: row.materialGroupCode,
+          materialName: row.materialName,
+          displayText: row.displayText,
+        })),
+        total,
+      };
+    });
+
+    const pageCount = Math.ceil(total / perPage);
+
+    return {
+      success: true,
+      data,
+      pagination: {
+        page,
+        perPage,
+        total,
+        pageCount,
+        hasNextPage: page < pageCount,
+        hasPrevPage: page > 1,
+      },
+    };
+  } catch (error) {
+    console.error("자재 검색 오류:", error);
+    return {
+      success: false,
+      data: [],
+      pagination: {
+        page: 1,
+        perPage: 10,
+        total: 0,
+        pageCount: 0,
+        hasNextPage: false,
+        hasPrevPage: false,
+      },
+    };
+  }
+}
diff --git a/lib/material/services.ts b/lib/material/services.ts
new file mode 100644
index 00000000..e050d8f8
--- /dev/null
+++ b/lib/material/services.ts
@@ -0,0 +1,224 @@
+'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 { 
+  MATERIAL_MASTER_PART_MATL,
+  MATERIAL_MASTER_PART_MATL_CHARASGN,
+  MATERIAL_MASTER_PART_MATL_CLASSASGN,
+  MATERIAL_MASTER_PART_MATL_DESC,
+  MATERIAL_MASTER_PART_MATL_UNIT
+} from "@/db/schema/MDG/mdg";
+
+// 자재마스터 테이블의 컬럼 타입 정의
+type MaterialColumn = keyof typeof MATERIAL_MASTER_PART_MATL.$inferSelect;
+
+export interface GetMaterialsInput {
+  page: number;
+  perPage: number;
+  search?: string;
+  sort: Array<{
+    id: MaterialColumn;
+    desc: boolean;
+  }>;
+  filters?: any[];
+  joinOperator: 'and' | 'or';
+}
+
+/**
+ * 자재마스터 목록을 조회합니다.
+ * 필수 컬럼: MATKL(자재그룹), MATNR(자재코드), ZZNAME(자재명), ZZPJT(프로젝트), createdAt, updatedAt
+ */
+export async function getMaterials(input: GetMaterialsInput) {
+  const safePerPage = Math.min(input.perPage, 100);
+  
+  try {
+    const offset = (input.page - 1) * safePerPage;
+    
+    // 고급 필터링
+    const advancedWhere = filterColumns({
+      table: MATERIAL_MASTER_PART_MATL,
+      filters: (input.filters || []) as any,
+      joinOperator: input.joinOperator,
+    });
+
+    // 전역 검색 - 주요 컬럼들에 대해 검색
+    let globalWhere;
+    if (input.search) {
+      const s = `%${input.search}%`;
+      globalWhere = or(
+        ilike(MATERIAL_MASTER_PART_MATL.MATKL, s),      // 자재그룹코드
+        ilike(MATERIAL_MASTER_PART_MATL.MATNR, s),      // 자재코드
+        ilike(MATERIAL_MASTER_PART_MATL.ZZNAME, s),     // 자재명
+        ilike(MATERIAL_MASTER_PART_MATL.ZZPJT, s),      // 프로젝트
+      );
+    }
+
+    const finalWhere = and(advancedWhere, globalWhere);
+
+    // 정렬 처리 - 타입 안전하게 처리
+    const orderBy = input.sort.length > 0
+      ? input.sort.map((item) => {
+          const column = MATERIAL_MASTER_PART_MATL[item.id];
+          return item.desc ? desc(column) : asc(column);
+        })
+      : [desc(MATERIAL_MASTER_PART_MATL.createdAt)];
+
+    // 데이터 조회 - 필요한 컬럼만 선택
+    const { data, total } = await db.transaction(async (tx) => {
+      const data = await tx
+        .select({
+          id: MATERIAL_MASTER_PART_MATL.id,
+          MATKL: MATERIAL_MASTER_PART_MATL.MATKL,       // 자재그룹(=자재그룹코드)
+          MATNR: MATERIAL_MASTER_PART_MATL.MATNR,       // 자재코드(=자재번호)
+          ZZNAME: MATERIAL_MASTER_PART_MATL.ZZNAME,     // 자재명(=자재그룹명)
+          ZZPJT: MATERIAL_MASTER_PART_MATL.ZZPJT,       // 프로젝트
+          createdAt: MATERIAL_MASTER_PART_MATL.createdAt,
+          updatedAt: MATERIAL_MASTER_PART_MATL.updatedAt,
+        })
+        .from(MATERIAL_MASTER_PART_MATL)
+        .where(finalWhere)
+        .orderBy(...orderBy)
+        .offset(offset)
+        .limit(safePerPage);
+
+      const totalResult = await tx
+        .select({
+          count: sql<number>`count(*)`
+        })
+        .from(MATERIAL_MASTER_PART_MATL)
+        .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 getMaterials:', err);
+    return { data: [], pageCount: 0 };
+  }
+}
+
+/**
+ * 무한 스크롤을 위한 자재마스터 조회 (페이지네이션 없음)
+ */
+export interface GetMaterialsInfiniteInput extends Omit<GetMaterialsInput, 'page' | 'perPage'> {
+  limit?: number; // 무한 스크롤용 추가 옵션
+}
+
+export async function getMaterialsInfinite(input: GetMaterialsInfiniteInput) {
+  try {
+    // 고급 필터링
+    const advancedWhere = filterColumns({
+      table: MATERIAL_MASTER_PART_MATL,
+      filters: (input.filters || []) as any,
+      joinOperator: input.joinOperator || "and",
+    });
+
+    // 전역 검색
+    let globalWhere;
+    if (input.search) {
+      const s = `%${input.search}%`;
+      globalWhere = or(
+        ilike(MATERIAL_MASTER_PART_MATL.MATKL, s),
+        ilike(MATERIAL_MASTER_PART_MATL.MATNR, s),
+        ilike(MATERIAL_MASTER_PART_MATL.ZZNAME, s),
+        ilike(MATERIAL_MASTER_PART_MATL.ZZPJT, s),
+      );
+    }
+
+    const finalWhere = and(advancedWhere, globalWhere);
+
+    // 정렬 처리 - 타입 안전하게 처리
+    const orderBy = input.sort.length > 0
+      ? input.sort.map((item) => {
+          const column = MATERIAL_MASTER_PART_MATL[item.id];
+          return item.desc ? desc(column) : asc(column);
+        })
+      : [desc(MATERIAL_MASTER_PART_MATL.createdAt)];
+
+    // 전체 데이터 조회 (클라이언트에서 가상화 처리)
+    const data = await db
+      .select({
+        id: MATERIAL_MASTER_PART_MATL.id,
+        MATKL: MATERIAL_MASTER_PART_MATL.MATKL,
+        MATNR: MATERIAL_MASTER_PART_MATL.MATNR,
+        ZZNAME: MATERIAL_MASTER_PART_MATL.ZZNAME,
+        ZZPJT: MATERIAL_MASTER_PART_MATL.ZZPJT,
+        createdAt: MATERIAL_MASTER_PART_MATL.createdAt,
+        updatedAt: MATERIAL_MASTER_PART_MATL.updatedAt,
+      })
+      .from(MATERIAL_MASTER_PART_MATL)
+      .where(finalWhere)
+      .orderBy(...orderBy);
+
+    return { data };
+  } catch (err) {
+    console.error('Error in getMaterialsInfinite:', err);
+    return { data: [] };
+  }
+}
+
+/**
+ * 자재마스터 상세 정보를 조회합니다 (모든 관련 테이블 포함)
+ */
+export async function getMaterialDetail(matnr: string) {
+  try {
+    // 메인 자재 정보 조회
+    const material = await db
+      .select()
+      .from(MATERIAL_MASTER_PART_MATL)
+      .where(eq(MATERIAL_MASTER_PART_MATL.MATNR, matnr))
+      .limit(1);
+
+    if (material.length === 0) {
+      return null;
+    }
+
+    // 관련 테이블들 조회
+    const [
+      characteristics,
+      classifications,
+      descriptions,
+      units
+    ] = await Promise.all([
+      // CHARASGN - 특성 할당
+      db
+        .select()
+        .from(MATERIAL_MASTER_PART_MATL_CHARASGN)
+        .where(eq(MATERIAL_MASTER_PART_MATL_CHARASGN.MATNR, matnr)),
+      
+      // CLASSASGN - 클래스 할당
+      db
+        .select()
+        .from(MATERIAL_MASTER_PART_MATL_CLASSASGN)
+        .where(eq(MATERIAL_MASTER_PART_MATL_CLASSASGN.MATNR, matnr)),
+      
+      // DESC - 설명
+      db
+        .select()
+        .from(MATERIAL_MASTER_PART_MATL_DESC)
+        .where(eq(MATERIAL_MASTER_PART_MATL_DESC.MATNR, matnr)),
+      
+      // UNIT - 단위
+      db
+        .select()
+        .from(MATERIAL_MASTER_PART_MATL_UNIT)
+        .where(eq(MATERIAL_MASTER_PART_MATL_UNIT.MATNR, matnr))
+    ]);
+
+    return {
+      material: material[0],
+      characteristics,
+      classifications,
+      descriptions,
+      units
+    };
+  } catch (err) {
+    console.error('Error in getMaterialDetail:', err);
+    return null;
+  }
+}
\ No newline at end of file
diff --git a/lib/material/table/material-detail-dialog.tsx b/lib/material/table/material-detail-dialog.tsx
new file mode 100644
index 00000000..aed0485c
--- /dev/null
+++ b/lib/material/table/material-detail-dialog.tsx
@@ -0,0 +1,359 @@
+"use client"
+
+import * as React from "react"
+import { getMaterialDetail } from "../services"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Badge } from "@/components/ui/badge"
+
+import { formatDate } from "@/lib/utils"
+
+interface MaterialDetailDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  matnr: string | null
+}
+
+export function MaterialDetailDialog({
+  open,
+  onOpenChange,
+  matnr,
+}: MaterialDetailDialogProps) {
+  const [data, setData] = React.useState<Awaited<ReturnType<typeof getMaterialDetail>> | null>(null)
+  const [loading, setLoading] = React.useState(false)
+
+  React.useEffect(() => {
+    if (open && matnr) {
+      setLoading(true)
+      getMaterialDetail(matnr)
+        .then(setData)
+        .finally(() => setLoading(false))
+    }
+  }, [open, matnr])
+
+  if (!matnr) return null
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-6xl h-[90vh] flex flex-col">
+        <DialogHeader className="flex-shrink-0">
+          <DialogTitle>자재마스터 상세정보</DialogTitle>
+          <DialogDescription>
+            자재코드: {matnr}
+          </DialogDescription>
+        </DialogHeader>
+
+        {loading ? (
+          <div className="space-y-4 p-4">
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-32 w-full" />
+            <Skeleton className="h-32 w-full" />
+          </div>
+        ) : data ? (
+          <Tabs defaultValue="basic" className="w-full flex flex-col flex-1 min-h-0">
+            <TabsList className="grid w-full grid-cols-5 flex-shrink-0">
+              <TabsTrigger value="basic">기본정보</TabsTrigger>
+              <TabsTrigger value="characteristics">특성할당</TabsTrigger>
+              <TabsTrigger value="classifications">클래스할당</TabsTrigger>
+              <TabsTrigger value="descriptions">설명</TabsTrigger>
+              <TabsTrigger value="units">단위</TabsTrigger>
+            </TabsList>
+
+            <div className="flex-1 overflow-y-auto min-h-0 mt-4">
+
+              <TabsContent value="basic" className="mt-0">
+                <div className="space-y-6">
+                  <div>
+                    <h3 className="text-lg font-semibold mb-3">기본 자재 정보</h3>
+                    <Table>
+                      <TableBody>
+                        <TableRow>
+                          <TableCell className="font-medium w-1/4">자재코드 (MATNR)</TableCell>
+                          <TableCell>{data.material.MATNR || "-"}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell className="font-medium">자재명 (ZZNAME)</TableCell>
+                          <TableCell>{data.material.ZZNAME || "-"}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell className="font-medium">프로젝트 (ZZPJT)</TableCell>
+                          <TableCell>{data.material.ZZPJT || "-"}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell className="font-medium">구 자재번호 (BISMT)</TableCell>
+                          <TableCell>{data.material.BISMT || "-"}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell className="font-medium">자재그룹 (MATKL)</TableCell>
+                          <TableCell>{data.material.MATKL || "-"}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell className="font-medium">자재유형 (MTART)</TableCell>
+                          <TableCell>{data.material.MTART || "-"}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell className="font-medium">기본단위 (MEINS)</TableCell>
+                          <TableCell>{data.material.MEINS || "-"}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell className="font-medium">산업섹터 (MBRSH)</TableCell>
+                          <TableCell>{data.material.MBRSH || "-"}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell className="font-medium">사업부 (SPART)</TableCell>
+                          <TableCell>{data.material.SPART || "-"}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell className="font-medium">규격 (ZZSPEC)</TableCell>
+                          <TableCell>{data.material.ZZSPEC || "-"}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell className="font-medium">설명 (ZZDESC)</TableCell>
+                          <TableCell>{data.material.ZZDESC || "-"}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell className="font-medium">PLM ID (ZZPLMID)</TableCell>
+                          <TableCell>{data.material.ZZPLMID || "-"}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell className="font-medium">삭제플래그 (LVORM)</TableCell>
+                          <TableCell>
+                            {data.material.LVORM ? (
+                              <Badge variant="destructive">삭제됨</Badge>
+                            ) : (
+                              <Badge variant="secondary">활성</Badge>
+                            )}
+                          </TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell className="font-medium">자재상태 (MSTAE)</TableCell>
+                          <TableCell>{data.material.MSTAE || "-"}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell className="font-medium">총 중량 (BRGEW)</TableCell>
+                          <TableCell>{data.material.BRGEW || "-"}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell className="font-medium">순 중량 (NTGEW)</TableCell>
+                          <TableCell>{data.material.NTGEW || "-"}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell className="font-medium">중량단위 (GEWEI)</TableCell>
+                          <TableCell>{data.material.GEWEI || "-"}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell className="font-medium">크기/치수 (GROES)</TableCell>
+                          <TableCell>{data.material.GROES || "-"}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell className="font-medium">생성일시</TableCell>
+                          <TableCell>{formatDate(data.material.createdAt, "KR")}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell className="font-medium">수정일시</TableCell>
+                          <TableCell>{formatDate(data.material.updatedAt, "KR")}</TableCell>
+                        </TableRow>
+                      </TableBody>
+                    </Table>
+                  </div>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="characteristics" className="mt-0">
+                <div>
+                  <h3 className="text-lg font-semibold mb-3">특성 할당 정보</h3>
+                  {data.characteristics.length === 0 && (
+                    <p className="text-muted-foreground mb-4">특성 할당 정보가 없습니다.</p>
+                  )}
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>특성명 (ATNAM)</TableHead>
+                        <TableHead>특성값 (ATWRT)</TableHead>
+                        <TableHead>특성내역 (ATBEZ)</TableHead>
+                        <TableHead>특성값내역 (ATWTB)</TableHead>
+                        <TableHead>클래스번호 (CLASS)</TableHead>
+                        <TableHead>클래스유형 (KLART)</TableHead>
+                        <TableHead>측정단위 (ATAWE)</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {data.characteristics.length > 0 ? (
+                        data.characteristics.map((char, index) => (
+                          <TableRow key={index}>
+                            <TableCell className="font-medium">{char.ATNAM || "-"}</TableCell>
+                            <TableCell>{char.ATWRT || "-"}</TableCell>
+                            <TableCell>{char.ATBEZ || "-"}</TableCell>
+                            <TableCell>{char.ATWTB || "-"}</TableCell>
+                            <TableCell>{char.CLASS || "-"}</TableCell>
+                            <TableCell>{char.KLART || "-"}</TableCell>
+                            <TableCell>{char.ATAWE || "-"}</TableCell>
+                          </TableRow>
+                        ))
+                      ) : (
+                        <TableRow>
+                          <TableCell colSpan={7} className="text-center text-muted-foreground">
+                            데이터가 없습니다
+                          </TableCell>
+                        </TableRow>
+                      )}
+                    </TableBody>
+                  </Table>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="classifications" className="mt-0">
+                <div>
+                  <h3 className="text-lg font-semibold mb-3">클래스 할당 정보</h3>
+                  {data.classifications.length === 0 && (
+                    <p className="text-muted-foreground mb-4">클래스 할당 정보가 없습니다.</p>
+                  )}
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>클래스번호 (CLASS)</TableHead>
+                        <TableHead>클래스유형 (KLART)</TableHead>
+                        <TableHead>생성일시</TableHead>
+                        <TableHead>수정일시</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {data.classifications.length > 0 ? (
+                        data.classifications.map((cls, index) => (
+                          <TableRow key={index}>
+                            <TableCell className="font-medium">{cls.CLASS || "-"}</TableCell>
+                            <TableCell>{cls.KLART || "-"}</TableCell>
+                            <TableCell>{formatDate(cls.createdAt, "KR")}</TableCell>
+                            <TableCell>{formatDate(cls.updatedAt, "KR")}</TableCell>
+                          </TableRow>
+                        ))
+                      ) : (
+                        <TableRow>
+                          <TableCell colSpan={4} className="text-center text-muted-foreground">
+                            데이터가 없습니다
+                          </TableCell>
+                        </TableRow>
+                      )}
+                    </TableBody>
+                  </Table>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="descriptions" className="mt-0">
+                <div>
+                  <h3 className="text-lg font-semibold mb-3">자재 설명 정보</h3>
+                  {data.descriptions.length === 0 && (
+                    <p className="text-muted-foreground mb-4">자재 설명 정보가 없습니다.</p>
+                  )}
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>자재설명 (MAKTX)</TableHead>
+                        <TableHead>언어 (SPRAS)</TableHead>
+                        <TableHead>생성일시</TableHead>
+                        <TableHead>수정일시</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {data.descriptions.length > 0 ? (
+                        data.descriptions.map((desc, index) => (
+                          <TableRow key={index}>
+                            <TableCell className="font-medium">{desc.MAKTX || "-"}</TableCell>
+                            <TableCell>{desc.SPRAS || "-"}</TableCell>
+                            <TableCell>{formatDate(desc.createdAt, "KR")}</TableCell>
+                            <TableCell>{formatDate(desc.updatedAt, "KR")}</TableCell>
+                          </TableRow>
+                        ))
+                      ) : (
+                        <TableRow>
+                          <TableCell colSpan={4} className="text-center text-muted-foreground">
+                            데이터가 없습니다
+                          </TableCell>
+                        </TableRow>
+                      )}
+                    </TableBody>
+                  </Table>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="units" className="mt-0">
+                <div>
+                  <h3 className="text-lg font-semibold mb-3">단위 정보</h3>
+                  {data.units.length === 0 && (
+                    <p className="text-muted-foreground mb-4">단위 정보가 없습니다.</p>
+                  )}
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>대체단위 (MEINH)</TableHead>
+                        <TableHead>분모 (UMREN)</TableHead>
+                        <TableHead>분자 (UMREZ)</TableHead>
+                        <TableHead>길이 (LAENG)</TableHead>
+                        <TableHead>폭 (BREIT)</TableHead>
+                        <TableHead>높이 (HOEHE)</TableHead>
+                        <TableHead>부피 (VOLUM)</TableHead>
+                        <TableHead>부피단위 (VOLEH)</TableHead>
+                        <TableHead>총중량 (BRGEW)</TableHead>
+                        <TableHead>중량단위 (GEWEI)</TableHead>
+                        <TableHead>치수단위 (MEABM)</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {data.units.length > 0 ? (
+                        data.units.map((unit, index) => (
+                          <TableRow key={index}>
+                            <TableCell className="font-medium">{unit.MEINH || "-"}</TableCell>
+                            <TableCell>{unit.UMREN || "-"}</TableCell>
+                            <TableCell>{unit.UMREZ || "-"}</TableCell>
+                            <TableCell>{unit.LAENG || "-"}</TableCell>
+                            <TableCell>{unit.BREIT || "-"}</TableCell>
+                            <TableCell>{unit.HOEHE || "-"}</TableCell>
+                            <TableCell>{unit.VOLUM || "-"}</TableCell>
+                            <TableCell>{unit.VOLEH || "-"}</TableCell>
+                            <TableCell>{unit.BRGEW || "-"}</TableCell>
+                            <TableCell>{unit.GEWEI || "-"}</TableCell>
+                            <TableCell>{unit.MEABM || "-"}</TableCell>
+                          </TableRow>
+                        ))
+                      ) : (
+                        <TableRow>
+                          <TableCell colSpan={11} className="text-center text-muted-foreground">
+                            데이터가 없습니다
+                          </TableCell>
+                        </TableRow>
+                      )}
+                    </TableBody>
+                  </Table>
+                </div>
+              </TabsContent>
+            </div>
+          </Tabs>
+        ) : (
+          <div className="text-center py-8">
+            <p className="text-muted-foreground">데이터를 찾을 수 없습니다.</p>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/lib/material/table/material-table-columns.tsx b/lib/material/table/material-table-columns.tsx
new file mode 100644
index 00000000..dd405770
--- /dev/null
+++ b/lib/material/table/material-table-columns.tsx
@@ -0,0 +1,183 @@
+"use client"
+
+import * as React from "react"
+import { type ColumnDef } from "@tanstack/react-table"
+import { type DataTableRowAction } from "@/types/table"
+
+import { formatDate } from "@/lib/utils"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Button } from "@/components/ui/button"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+
+// Material 타입 정의 (서비스에서 반환되는 타입과 일치)
+type Material = {
+  id: number;
+  MATKL: string | null;    // 자재그룹
+  MATNR: string | null;    // 자재코드
+  ZZNAME: string | null;   // 자재명
+  ZZPJT: string | null;    // 프로젝트
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<Material> | null>>
+}
+
+/**
+ * Material 테이블 컬럼 정의
+ */
+export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Material>[] {
+  
+  // ----------------------------------------------------------------
+  // 1) select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+  const selectColumn: ColumnDef<Material> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // ----------------------------------------------------------------
+  // 2) 데이터 컬럼들
+  // ----------------------------------------------------------------
+  const dataColumns: ColumnDef<Material>[] = [
+    {
+      accessorKey: "MATKL",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="자재그룹" />
+      ),
+      cell: ({ row }) => {
+        const value = row.getValue("MATKL") as string | null
+        return (
+          <div className="font-medium">
+            {value || "-"}
+          </div>
+        )
+      },
+      enableSorting: true,
+      enableHiding: false,
+    },
+    {
+      accessorKey: "MATNR",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="자재코드" />
+      ),
+      cell: ({ row }) => {
+        const value = row.getValue("MATNR") as string | null
+        return (
+          <div className="font-medium">
+            {value || "-"}
+          </div>
+        )
+      },
+      enableSorting: true,
+      enableHiding: false,
+    },
+    {
+      accessorKey: "ZZNAME",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="자재명" />
+      ),
+      cell: ({ row }) => {
+        const value = row.getValue("ZZNAME") as string | null
+        return (
+          <div className="max-w-[200px] truncate">
+            {value || "-"}
+          </div>
+        )
+      },
+      enableSorting: true,
+    },
+    {
+      accessorKey: "ZZPJT",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="프로젝트" />
+      ),
+      cell: ({ row }) => {
+        const value = row.getValue("ZZPJT") as string | null
+        return (
+          <div className="max-w-[150px] truncate">
+            {value || "-"}
+          </div>
+        )
+      },
+      enableSorting: true,
+    },
+    {
+      accessorKey: "createdAt",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="생성일시" />
+      ),
+      cell: ({ row }) => {
+        const value = row.getValue("createdAt") as Date
+        return (
+          <div className="text-sm text-muted-foreground">
+            {formatDate(value, "KR")}
+          </div>
+        )
+      },
+      enableSorting: true,
+    },
+    {
+      accessorKey: "updatedAt",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="수정일시" />
+      ),
+      cell: ({ row }) => {
+        const value = row.getValue("updatedAt") as Date
+        return (
+          <div className="text-sm text-muted-foreground">
+            {formatDate(value, "KR")}
+          </div>
+        )
+      },
+      enableSorting: true,
+    },
+  ]
+
+  // ----------------------------------------------------------------
+  // 3) actions 컬럼 (상세보기)
+  // ----------------------------------------------------------------
+  const actionsColumn: ColumnDef<Material> = {
+    id: "actions",
+    enableHiding: false,
+    cell: function Cell({ row }) {
+      return (
+          <Button onClick={() => setRowAction({ row, type: "view" })}>
+            상세
+          </Button>
+      )
+    },
+    size: 40,
+  }
+
+  // ----------------------------------------------------------------
+  // 4) 최종 컬럼 배열
+  // ----------------------------------------------------------------
+  return [
+    selectColumn,
+    ...dataColumns,
+    actionsColumn,
+  ]
+}
diff --git a/lib/material/table/material-table.tsx b/lib/material/table/material-table.tsx
new file mode 100644
index 00000000..6870a030
--- /dev/null
+++ b/lib/material/table/material-table.tsx
@@ -0,0 +1,199 @@
+"use client"
+
+import * as React from "react"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} 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 { getMaterials } from "../services"
+import { getColumns } from "./material-table-columns"
+import { MaterialDetailDialog } from "./material-detail-dialog"
+import { ViewModeToggle } from "@/components/data-table/view-mode-toggle"
+
+// Material 타입 정의 (서비스에서 반환되는 타입과 일치)
+type Material = {
+  id: number;
+  MATKL: string | null;    // 자재그룹(=자재그룹코드)
+  MATNR: string | null;    // 자재코드
+  ZZNAME: string | null;   // 자재명
+  ZZPJT: string | null;    // 프로젝트
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+interface MaterialTableProps {
+  promises?: Promise<
+    [
+      Awaited<ReturnType<typeof getMaterials>>,
+    ]
+  >
+}
+
+export function MaterialTable({ promises }: MaterialTableProps) {
+  // 페이지네이션 모드 데이터
+  const paginationData = promises ? React.use(promises) : null
+  const [{ data = [], pageCount = 0 }] = paginationData || [{ data: [], pageCount: 0 }]
+
+  console.log('MaterialTable data:', data.length, 'materials')
+
+  const [rowAction, setRowAction] =
+    React.useState<DataTableRowAction<Material> | null>(null)
+
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    [setRowAction]
+  )
+
+  // 기존 필터 필드들
+  const filterFields: DataTableFilterField<Material>[] = [
+    {
+      id: "MATKL",
+      label: "자재그룹",
+    },
+    {
+      id: "MATNR",
+      label: "자재코드",
+    },
+  ]
+
+  const advancedFilterFields: DataTableAdvancedFilterField<Material>[] = [
+    {
+      id: "MATKL",
+      label: "자재그룹",
+      type: "text",
+    },
+    {
+      id: "MATNR",
+      label: "자재코드",
+      type: "text",
+    },
+    {
+      id: "ZZNAME",
+      label: "자재명",
+      type: "text",
+    },
+    {
+      id: "ZZPJT",
+      label: "프로젝트",
+      type: "text",
+    },
+  ]
+
+  // 확장된 useDataTable 훅 사용 (pageSize 기반 자동 전환)
+  const {
+    table,
+    infiniteScroll,
+    isInfiniteMode,
+    handlePageSizeChange,
+  } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+          initialState: {
+        sorting: [{ id: "createdAt", desc: true }],
+        columnPinning: { left: ["select"], right: ["actions"] },
+      },
+    getRowId: (originalRow) => String(originalRow.id),
+    shallow: false,
+    clearOnDefault: true,
+    // 무한 스크롤 설정
+    infiniteScrollConfig: {
+      apiEndpoint: "/api/table/materials/infinite",
+      tableName: "materials",
+      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>
+        )}
+
+        {/* 상세보기 다이얼로그 */}
+        <MaterialDetailDialog
+          open={rowAction?.type === "view"}
+          onOpenChange={() => setRowAction(null)}
+          matnr={rowAction?.row.original?.MATNR || null}
+        />
+      </div>
+      )
+}
diff --git a/lib/material/validations.ts b/lib/material/validations.ts
new file mode 100644
index 00000000..5831372a
--- /dev/null
+++ b/lib/material/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 { MATERIAL_MASTER_PART_MATL } from "@/db/schema/MDG/mdg"
+
+// Material 검색 파라미터 캐시 정의
+export const searchParamsCache = createSearchParamsCache({
+  flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault([]),
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(10),
+  
+  // 확장된 타입으로 정렬 파서 사용
+  sort: getSortingStateParser<typeof MATERIAL_MASTER_PART_MATL>().withDefault([
+    { id: "createdAt", desc: true },
+  ]),
+
+  // 고급 필터
+  filters: getFiltersStateParser().withDefault([]),
+  joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+  search: parseAsString.withDefault(""),
+});
+
+// 타입 내보내기
+export type GetMaterialsSchema = Awaited<ReturnType<typeof searchParamsCache.parse>>;