1 files changed, 121 insertions, 0 deletions
diff --git a/lib/pcr/table/detail-table/pcr-detail-table.tsx b/lib/pcr/table/detail-table/pcr-detail-table.tsx
new file mode 100644
index 00000000..65a07146
--- /dev/null
+++ b/lib/pcr/table/detail-table/pcr-detail-table.tsx
@@ -0,0 +1,121 @@
+"use client"
+
+import * as React from "react"
+import { useEffect, useState, useCallback } from "react"
+import { getPcrPrListByPoContractNumber } from "@/lib/pcr/service"
+import { PcrPoData, PcrPrData } from "@/lib/pcr/types"
+import { ClientDataTable } from "@/components/client-data-table/data-table"
+import { getPcrDetailColumns } from "./pcr-detail-column"
+import { PcrDetailToolbarAction } from "./pcr-detail-toolbar-action"
+import { toast } from "sonner"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Badge } from "@/components/ui/badge"
+
+// 프로퍼티 정의
+interface PcrDetailTablesProps {
+  selectedPcrPo: PcrPoData | null
+  maxHeight?: string | number
+  isPartnersPage?: boolean
+}
+
+export function PcrDetailTables({ selectedPcrPo, maxHeight, isPartnersPage = false }: PcrDetailTablesProps) {
+  // 상태 관리
+  const [isLoading, setIsLoading] = useState(false)
+  const [details, setDetails] = useState<PcrPrData[]>([])
+
+  // 데이터 새로고침 함수
+  const handleRefreshData = useCallback(async () => {
+    if (!selectedPcrPo?.poContractNumber) {
+      setDetails([])
+      return
+    }
+
+    try {
+      setIsLoading(true)
+
+      const result = await getPcrPrListByPoContractNumber(selectedPcrPo.poContractNumber)
+
+      // 데이터 변환
+      const transformedData = result.map(item => ({
+        ...item,
+        // 필요한 추가 필드 변환
+      }))
+
+      setDetails(transformedData)
+    } catch (error) {
+      console.error("PCR_PR 데이터 로드 오류:", error)
+      setDetails([])
+      toast.error("PCR_PR 데이터를 불러오는 중 오류가 발생했습니다")
+    } finally {
+      setIsLoading(false)
+    }
+  }, [selectedPcrPo?.poContractNumber])
+
+  // selectedPcrPo가 변경될 때 데이터 로드
+  useEffect(() => {
+    handleRefreshData()
+  }, [handleRefreshData])
+
+  // 칼럼 정의
+  const columns = React.useMemo(() =>
+    getPcrDetailColumns(),
+    []
+  )
+
+  if (!selectedPcrPo) {
+    return (
+      <div className="flex items-center justify-center h-full text-muted-foreground">
+        PCR_PO를 선택하세요
+      </div>
+    )
+  }
+
+  // 로딩 중인 경우
+  if (isLoading) {
+    return (
+      <div className="p-4 space-y-4">
+        <Skeleton className="h-8 w-1/2" />
+        <Skeleton className="h-24 w-full" />
+        <Skeleton className="h-48 w-full" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-full overflow-hidden">
+      {/* 헤더 정보 */}
+      <div className="p-4 bg-muted/50 border-b">
+        <div className="flex items-center justify-between">
+          <div className="space-y-1">
+            <h3 className="text-sm font-medium">
+              PO/계약번호: {selectedPcrPo.poContractNumber}
+            </h3>
+            <p className="text-xs text-muted-foreground">
+              프로젝트: {selectedPcrPo.project || "N/A"}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <Badge variant="outline">
+              {details.length}건
+            </Badge>
+                <PcrDetailToolbarAction
+                  selectedPcrPo={selectedPcrPo}
+                  onRefresh={handleRefreshData}
+                  isPartnersPage={isPartnersPage}
+                />
+          </div>
+        </div>
+      </div>
+
+      {/* 테이블 표시 */}
+      <ClientDataTable
+        columns={columns}
+        data={details}
+        maxHeight={maxHeight}
+        emptyStateMessage="PCR_PR 데이터가 없습니다. 새 항목을 생성해보세요."
+      />
+    </div>
+  )
+}
+
+