From 4b76297a7b9f36fdbffe58b152e5ba418b0e6237 Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Mon, 12 May 2025 11:32:59 +0000
Subject: (대표님) S-EDP 관련 components/form-data
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/form-data/form-data-table-columns.tsx | 50 ++++++++++++++++++++++--
 1 file changed, 46 insertions(+), 4 deletions(-)

(limited to 'components/form-data/form-data-table-columns.tsx')

diff --git a/components/form-data/form-data-table-columns.tsx b/components/form-data/form-data-table-columns.tsx
index 4db3a724..a1fbcae1 100644
--- a/components/form-data/form-data-table-columns.tsx
+++ b/components/form-data/form-data-table-columns.tsx
@@ -38,6 +38,8 @@ export interface DataTableColumnJSON {
   options?: string[];
   uom?: string;
   uomId?: string;
+  shi?: boolean;
+
 }
 /**
  * getColumns 함수에 필요한 props
@@ -78,17 +80,33 @@ export function getColumns<TData extends object>({
       minWidth: 80,
       paddingFactor: 1.2,
       maxWidth: col.key === "TAG_NO" ? 120 : 150,
+      isReadOnly: col.shi === true,  // shi 정보를 메타데이터에 저장
     },
     // (2) 실제 셀(cell) 렌더링: type에 따라 분기 가능
     cell: ({ row }) => {
       const cellValue = row.getValue(col.key);
+      
+      // shi 속성이 true인 경우 적용할 스타일
+      const isReadOnly = col.shi === true;
+      const readOnlyClass = isReadOnly ? "read-only-cell" : "";
+      
+      // 읽기 전용 셀의 스타일 (인라인 스타일과 클래스 동시 적용)
+      const cellStyle = isReadOnly 
+        ? { backgroundColor: '#f5f5f5', color: '#666', cursor: 'not-allowed' } 
+        : {};
 
       // 데이터 타입별 처리
       switch (col.type) {
         case "NUMBER":
           // 예: number인 경우 콤마 등 표시
           return (
-            <div>{cellValue ? Number(cellValue).toLocaleString() : ""}</div>
+            <div 
+              className={readOnlyClass} 
+              style={cellStyle} 
+              title={isReadOnly ? "읽기 전용 필드입니다" : ""}
+            >
+              {cellValue ? Number(cellValue).toLocaleString() : ""}
+            </div>
           );
 
         // case "date":
@@ -101,11 +119,27 @@ export function getColumns<TData extends object>({
 
         case "LIST":
           // 예: select인 경우 label만 표시
-          return <div>{String(cellValue ?? "")}</div>;
+          return (
+            <div 
+              className={readOnlyClass} 
+              style={cellStyle}
+              title={isReadOnly ? "읽기 전용 필드입니다" : ""}
+            >
+              {String(cellValue ?? "")}
+            </div>
+          );
 
         case "STRING":
         default:
-          return <div>{String(cellValue ?? "")}</div>;
+          return (
+            <div 
+              className={readOnlyClass} 
+              style={cellStyle}
+              title={isReadOnly ? "읽기 전용 필드입니다" : ""}
+            >
+              {String(cellValue ?? "")}
+            </div>
+          );
       }
     },
   }));
@@ -127,7 +161,15 @@ export function getColumns<TData extends object>({
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="w-40">
           <DropdownMenuItem
-            onSelect={() => setRowAction({ row, type: "update" })}
+            onSelect={() => {
+              // 행에 있는 모든 필드가 읽기 전용인지 확인할 수도 있습니다 (선택 사항)
+              // const allColumnsReadOnly = columnsJSON.every(col => col.shi === true);
+              // if(allColumnsReadOnly) {
+              //   toast.info("이 항목은 읽기 전용입니다.");
+              //   return;
+              // }
+              setRowAction({ row, type: "update" });
+            }}
           >
             Edit
           </DropdownMenuItem>
-- 
cgit v1.2.3