카드 디스플레이

선택안함 옵션 추가

frontend/lib/registry/components/card-display/CardDisplayComponent.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useState, useMemo, useCallback, useRef } from "react"
 import { ComponentRendererProps } from "@/types/component";
 import { CardDisplayConfig } from "./types";
 import { tableTypeApi } from "@/lib/api/screen";
+import { entityJoinApi } from "@/lib/api/entityJoin";
 import { getFullImageUrl, apiClient } from "@/lib/api/client";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
@@ -308,10 +309,35 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
           search: Object.keys(linkedFilterValues).length > 0 ? linkedFilterValues : undefined,
         };
 
+        // 조인 컬럼 설정 가져오기 (componentConfig에서)
+        const joinColumnsConfig = component.componentConfig?.joinColumns || [];
+        const entityJoinColumns = joinColumnsConfig
+          .filter((col: any) => col.isJoinColumn)
+          .map((col: any) => ({
+            columnName: col.columnName,
+            sourceColumn: col.sourceColumn,
+            referenceTable: col.referenceTable,
+            referenceColumn: col.referenceColumn,
+            displayColumn: col.referenceColumn,
+            label: col.label,
+            joinAlias: col.columnName, // 백엔드에서 필요한 joinAlias 추가
+            sourceTable: tableNameToUse, // 기준 테이블
+          }));
 
         // 테이블 데이터, 컬럼 정보, 입력 타입 정보를 병렬로 로드
-        const [dataResponse, columnsResponse, inputTypesResponse] = await Promise.all([
-          tableTypeApi.getTableData(tableNameToUse, apiParams),
+        // 조인 컬럼이 있으면 entityJoinApi 사용
+        let dataResponse;
+        if (entityJoinColumns.length > 0) {
+          console.log("🔗 [CardDisplay] 엔티티 조인 API 사용:", entityJoinColumns);
+          dataResponse = await entityJoinApi.getTableDataWithJoins(tableNameToUse, {
+            ...apiParams,
+            additionalJoinColumns: entityJoinColumns,
+          });
+        } else {
+          dataResponse = await tableTypeApi.getTableData(tableNameToUse, apiParams);
+        }
+
+        const [columnsResponse, inputTypesResponse] = await Promise.all([
           tableTypeApi.getColumns(tableNameToUse),
           tableTypeApi.getColumnInputTypes(tableNameToUse),
         ]);