(대표님) S-EDP 관련 components/form-data

1 files changed, 46 insertions, 4 deletions

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>