Files
vexplor/frontend/lib/utils/layoutV2Converter.ts
kjs 2fac9371c8 feat: UnifiedSelect 및 DynamicComponentRenderer에서 DISTINCT 값 자동 로드 기능 추가
- UnifiedSelect 컴포넌트에서 columnName이 유효하지 않은 경우 옵션 로드를 건너뛰도록 개선하였습니다.
- DynamicComponentRenderer에서 unified-select의 기본 source를 'distinct'로 설정하여 항상 테이블 컬럼에서 DISTINCT 값을 자동으로 로드하도록 변경하였습니다.
- layoutV2Converter에서 상위 레벨 속성을 추출하고, componentConfig와 병합하여 레거시 구조와의 호환성을 유지하였습니다.
- 관련된 경고 메시지를 추가하여 유효하지 않은 columnName에 대한 정보를 로그로 남기도록 하였습니다.
2026-01-28 16:40:37 +09:00

166 lines
4.9 KiB
TypeScript

/**
* V2 레이아웃 변환 유틸리티
*
* 기존 LayoutData ↔ V2 LayoutData 변환
*/
import {
ComponentV2,
LayoutV2,
getComponentUrl,
getComponentTypeFromUrl,
getDefaultsByUrl,
mergeComponentConfig,
extractCustomConfig
} from "@/lib/schemas/componentConfig";
// 기존 ComponentData 타입 (간략화)
interface LegacyComponentData {
id: string;
componentType?: string;
widgetType?: string;
type?: string;
position?: { x: number; y: number };
size?: { width: number; height: number };
componentConfig?: Record<string, any>;
[key: string]: any;
}
interface LegacyLayoutData {
components: LegacyComponentData[];
gridSettings?: any;
screenResolution?: any;
metadata?: any;
}
// ============================================
// V2 → Legacy 변환 (로드 시)
// ============================================
export function convertV2ToLegacy(v2Layout: LayoutV2 | null): LegacyLayoutData | null {
if (!v2Layout || !v2Layout.components) {
return null;
}
const components: LegacyComponentData[] = v2Layout.components.map((comp) => {
const componentType = getComponentTypeFromUrl(comp.url);
const defaults = getDefaultsByUrl(comp.url);
const mergedConfig = mergeComponentConfig(defaults, comp.overrides);
// 🆕 overrides에서 상위 레벨 속성들 추출
const overrides = comp.overrides || {};
return {
id: comp.id,
componentType: componentType,
widgetType: componentType,
type: "component",
position: comp.position,
size: comp.size,
componentConfig: mergedConfig,
// 🆕 상위 레벨 속성 복원 (테이블/컬럼 연결 정보)
tableName: overrides.tableName,
columnName: overrides.columnName,
label: overrides.label || mergedConfig.label || "", // 라벨이 없으면 빈 문자열
required: overrides.required,
readonly: overrides.readonly,
codeCategory: overrides.codeCategory,
inputType: overrides.inputType,
webType: overrides.webType,
// 기존 구조 호환을 위한 추가 필드
style: {},
parentId: null,
gridColumns: 12,
gridRowIndex: 0,
};
});
return {
components,
gridSettings: v2Layout.gridSettings || {
enabled: true,
size: 20,
color: "#d1d5db",
opacity: 0.5,
snapToGrid: true,
columns: 12,
gap: 16,
padding: 16,
},
screenResolution: v2Layout.screenResolution || {
width: 1920,
height: 1080,
},
};
}
// ============================================
// Legacy → V2 변환 (저장 시)
// ============================================
export function convertLegacyToV2(legacyLayout: LegacyLayoutData): LayoutV2 {
const components: ComponentV2[] = legacyLayout.components.map((comp, index) => {
// 컴포넌트 타입 결정
const componentType = comp.componentType || comp.widgetType || comp.type || "unknown";
const url = getComponentUrl(componentType);
// 기본값 가져오기
const defaults = getDefaultsByUrl(url);
// 🆕 컴포넌트 상위 레벨 속성들도 포함 (tableName, columnName 등)
const topLevelProps: Record<string, any> = {};
if (comp.tableName) topLevelProps.tableName = comp.tableName;
if (comp.columnName) topLevelProps.columnName = comp.columnName;
if (comp.label) topLevelProps.label = comp.label;
if (comp.required !== undefined) topLevelProps.required = comp.required;
if (comp.readonly !== undefined) topLevelProps.readonly = comp.readonly;
if (comp.codeCategory) topLevelProps.codeCategory = comp.codeCategory;
if (comp.inputType) topLevelProps.inputType = comp.inputType;
if (comp.webType) topLevelProps.webType = comp.webType;
// 현재 설정에서 차이값만 추출
const fullConfig = comp.componentConfig || {};
const configOverrides = extractCustomConfig(fullConfig, defaults);
// 상위 레벨 속성과 componentConfig 병합
const overrides = { ...topLevelProps, ...configOverrides };
return {
id: comp.id,
url: url,
position: comp.position || { x: 0, y: 0 },
size: comp.size || { width: 100, height: 100 },
displayOrder: index,
overrides: overrides,
};
});
return {
version: "2.0",
components,
updatedAt: new Date().toISOString(),
};
}
// ============================================
// V2 레이아웃 유효성 검사
// ============================================
export function isValidV2Layout(data: any): data is LayoutV2 {
return (
data &&
typeof data === "object" &&
data.version === "2.0" &&
Array.isArray(data.components)
);
}
// ============================================
// 기존 레이아웃인지 확인
// ============================================
export function isLegacyLayout(data: any): boolean {
return (
data &&
typeof data === "object" &&
Array.isArray(data.components) &&
data.version !== "2.0"
);
}