From fb276ed3db86fe4fc0c0fcd870fd3d085b034be0 Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Thu, 17 Jul 2025 10:50:28 +0000
Subject: (대표님) 벤더데이터 S-EDP 변경사항 대응(seperator), 정기평가
 점수오류, dim 준비
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/equip-class/table/equipClass-table-columns.tsx | 143 +++++++++++++++++++--
 1 file changed, 135 insertions(+), 8 deletions(-)

(limited to 'lib/equip-class/table/equipClass-table-columns.tsx')

diff --git a/lib/equip-class/table/equipClass-table-columns.tsx b/lib/equip-class/table/equipClass-table-columns.tsx
index 0dfbf06f..51aacc97 100644
--- a/lib/equip-class/table/equipClass-table-columns.tsx
+++ b/lib/equip-class/table/equipClass-table-columns.tsx
@@ -9,17 +9,125 @@ import { formatDate } from "@/lib/utils"
 import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
 import { equipclassColumnsConfig } from "@/config/equipClassColumnsConfig"
 import { ExtendedTagClasses } from "../validation"
+import { Badge } from "@/components/ui/badge"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 
 interface GetColumnsProps {
   setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<ExtendedTagClasses> | null>>
 }
 
+// 서브클래스 배열을 렌더링하는 컴포넌트
+const SubclassesCell = ({ subclasses }: { subclasses: {
+  id: string;
+  desc: string;
+}[] }) => {
+  if (!subclasses || subclasses.length === 0) {
+    return <span className="text-muted-foreground">-</span>
+  }
+
+  if (subclasses.length <= 3) {
+    return (
+      <div className="flex flex-wrap gap-1">
+        {subclasses.map((subclass) => (
+          <Badge key={subclass.id} variant="secondary" className="text-xs">
+            {subclass.desc}
+          </Badge>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div className="flex flex-wrap gap-1">
+            {subclasses.slice(0, 2).map((subclass) => (
+              <Badge key={subclass.id} variant="secondary" className="text-xs">
+                {subclass.desc}
+              </Badge>
+            ))}
+            <Badge variant="outline" className="text-xs">
+              +{subclasses.length - 2}
+            </Badge>
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>
+          <div className="max-w-sm">
+            <div className="font-semibold mb-2">All Subclasses:</div>
+            <div className="flex flex-wrap gap-1">
+              {subclasses.map((subclass) => (
+                <Badge key={subclass.id} variant="secondary" className="text-xs">
+                  {subclass.desc}
+                </Badge>
+              ))}
+            </div>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
+
+// 서브클래스 리마크를 렌더링하는 컴포넌트
+const SubclassRemarksCell = ({ remarks }: { remarks: Record<string, string> }) => {
+  if (!remarks || Object.keys(remarks).length === 0) {
+    return <span className="text-muted-foreground">-</span>
+  }
+
+  const entries = Object.entries(remarks)
+  
+  if (entries.length <= 2) {
+    return (
+      <div className="space-y-1">
+        {entries.map(([key, value]) => (
+          <div key={key} className="text-sm">
+            <span className="font-medium">{key}:</span>{" "}
+            <span className="text-muted-foreground">{value}</span>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div className="space-y-1">
+            {entries.slice(0, 1).map(([key, value]) => (
+              <div key={key} className="text-sm">
+                <span className="font-medium">{key}:</span>{" "}
+                <span className="text-muted-foreground">{value}</span>
+              </div>
+            ))}
+            <div className="text-xs text-muted-foreground">
+              +{entries.length - 1} more...
+            </div>
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>
+          <div className="max-w-md">
+            <div className="font-semibold mb-2">All Remarks:</div>
+            <div className="space-y-1">
+              {entries.map(([key, value]) => (
+                <div key={key} className="text-sm">
+                  <span className="font-medium">{key}:</span>{" "}
+                  <span className="text-muted-foreground">{value}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
+
 /**
  * tanstack table 컬럼 정의 (중첩 헤더 버전)
  */
 export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<ExtendedTagClasses>[] {
-
-
   // ----------------------------------------------------------------
   // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성
   // ----------------------------------------------------------------
@@ -47,12 +155,27 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Extende
         type: cfg.type,
       },
       cell: ({ row, cell }) => {
- 
-        if (cfg.id === "createdAt"||cfg.id === "updatedAt") {
+        // 날짜 필드 처리
+        if (cfg.id === "createdAt" || cfg.id === "updatedAt") {
           const dateVal = cell.getValue() as Date
           return formatDate(dateVal, "KR")
         }
 
+        // 서브클래스 배열 처리
+        if (cfg.id === "subclasses") {
+          const subclasses = cell.getValue() as {
+            id: string;
+            desc: string;
+          }[]
+          return <SubclassesCell subclasses={subclasses} />
+        }
+
+        // 서브클래스 리마크 처리
+        if (cfg.id === "subclassRemark") {
+          const remarks = cell.getValue() as Record<string, string>
+          return <SubclassRemarksCell remarks={remarks} />
+        }
+
         return row.getValue(cfg.id) ?? ""
       },
     }
@@ -65,9 +188,13 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Extende
   // ----------------------------------------------------------------
   const nestedColumns: ColumnDef<ExtendedTagClasses>[] = []
 
-  // 순서를 고정하고 싶다면 group 순서를 미리 정의하거나 sort해야 함
-  // 여기서는 그냥 Object.entries 순서
-  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+  // 그룹 순서 정의
+  const groupOrder = ["Basic Info", "Hierarchy", "Metadata", "_noGroup"]
+  
+  groupOrder.forEach((groupName) => {
+    const colDefs = groupMap[groupName]
+    if (!colDefs) return
+
     if (groupName === "_noGroup") {
       // 그룹 없음 → 그냥 최상위 레벨 컬럼
       nestedColumns.push(...colDefs)
@@ -75,7 +202,7 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Extende
       // 상위 컬럼
       nestedColumns.push({
         id: groupName,
-        header: groupName, // "Basic Info", "Metadata" 등
+        header: groupName, // "Basic Info", "Hierarchy", "Metadata" 등
         columns: colDefs,
       })
     }
-- 
cgit v1.2.3