feature/screen-management #239

Merged
kjs merged 6 commits from feature/screen-management into main 2025-12-03 17:36:53 +09:00
2 changed files with 265 additions and 1 deletions
Showing only changes of commit 8317af92cd - Show all commits

View File

@ -1517,11 +1517,23 @@ export class ScreenManagementService {
};
}
// 🔥 최신 inputType 정보 조회 (table_type_columns에서)
const inputTypeMap = await this.getLatestInputTypes(componentLayouts, companyCode);
const components: ComponentData[] = componentLayouts.map((layout) => {
const properties = layout.properties as any;
// 🔥 최신 inputType으로 widgetType 및 componentType 업데이트
const tableName = properties?.tableName;
const columnName = properties?.columnName;
const latestTypeInfo = tableName && columnName
? inputTypeMap.get(`${tableName}.${columnName}`)
: null;
const component = {
id: layout.component_id,
type: layout.component_type as any,
// 🔥 최신 componentType이 있으면 type 덮어쓰기
type: latestTypeInfo?.componentType || layout.component_type as any,
position: {
x: layout.position_x,
y: layout.position_y,
@ -1530,6 +1542,17 @@ export class ScreenManagementService {
size: { width: layout.width, height: layout.height },
parentId: layout.parent_id,
...properties,
// 🔥 최신 inputType이 있으면 widgetType, componentType 덮어쓰기
...(latestTypeInfo && {
widgetType: latestTypeInfo.inputType,
inputType: latestTypeInfo.inputType,
componentType: latestTypeInfo.componentType,
componentConfig: {
...properties?.componentConfig,
type: latestTypeInfo.componentType,
inputType: latestTypeInfo.inputType,
},
}),
};
console.log(`로드된 컴포넌트:`, {
@ -1539,6 +1562,9 @@ export class ScreenManagementService {
size: component.size,
parentId: component.parentId,
title: (component as any).title,
widgetType: (component as any).widgetType,
componentType: (component as any).componentType,
latestTypeInfo,
});
return component;
@ -1558,6 +1584,112 @@ export class ScreenManagementService {
};
}
/**
* ID
* ( webTypeMapping.ts와 )
*/
private getComponentIdFromInputType(inputType: string): string {
const mapping: Record<string, string> = {
// 텍스트 입력
text: "text-input",
email: "text-input",
password: "text-input",
tel: "text-input",
// 숫자 입력
number: "number-input",
decimal: "number-input",
// 날짜/시간
date: "date-input",
datetime: "date-input",
time: "date-input",
// 텍스트 영역
textarea: "textarea-basic",
// 선택
select: "select-basic",
dropdown: "select-basic",
// 체크박스/라디오
checkbox: "checkbox-basic",
radio: "radio-basic",
boolean: "toggle-switch",
// 파일
file: "file-upload",
// 이미지
image: "image-widget",
img: "image-widget",
picture: "image-widget",
photo: "image-widget",
// 버튼
button: "button-primary",
// 기타
label: "text-display",
code: "select-basic",
entity: "select-basic",
category: "select-basic",
};
return mapping[inputType] || "text-input";
}
/**
* inputType
* @param layouts -
* @param companyCode -
* @returns Map<"tableName.columnName", { inputType, componentType }>
*/
private async getLatestInputTypes(
layouts: any[],
companyCode: string
): Promise<Map<string, { inputType: string; componentType: string }>> {
const inputTypeMap = new Map<string, { inputType: string; componentType: string }>();
// tableName과 columnName이 있는 컴포넌트들의 고유 조합 추출
const tableColumnPairs = new Set<string>();
for (const layout of layouts) {
const properties = layout.properties as any;
if (properties?.tableName && properties?.columnName) {
tableColumnPairs.add(`${properties.tableName}|${properties.columnName}`);
}
}
if (tableColumnPairs.size === 0) {
return inputTypeMap;
}
// 각 테이블-컬럼 조합에 대해 최신 inputType 조회
const pairs = Array.from(tableColumnPairs).map(pair => {
const [tableName, columnName] = pair.split('|');
return { tableName, columnName };
});
// 배치 쿼리로 한 번에 조회
const placeholders = pairs.map((_, i) => `($${i * 2 + 1}, $${i * 2 + 2})`).join(', ');
const params = pairs.flatMap(p => [p.tableName, p.columnName]);
try {
const results = await query<{ table_name: string; column_name: string; input_type: string }>(
`SELECT table_name, column_name, input_type
FROM table_type_columns
WHERE (table_name, column_name) IN (${placeholders})
AND company_code = $${params.length + 1}`,
[...params, companyCode]
);
for (const row of results) {
const componentType = this.getComponentIdFromInputType(row.input_type);
inputTypeMap.set(`${row.table_name}.${row.column_name}`, {
inputType: row.input_type,
componentType: componentType,
});
}
console.log(`최신 inputType 조회 완료: ${results.length}`);
} catch (error) {
console.warn(`최신 inputType 조회 실패 (무시됨):`, error);
}
return inputTypeMap;
}
// ========================================
// 템플릿 관리
// ========================================

View File

@ -797,6 +797,9 @@ export class TableManagementService {
]
);
// 🔥 해당 컬럼을 사용하는 화면 레이아웃의 widgetType도 업데이트
await this.syncScreenLayoutsInputType(tableName, columnName, inputType, companyCode);
// 🔥 캐시 무효화: 해당 테이블의 컬럼 캐시 삭제
const cacheKeyPattern = `${CacheKeys.TABLE_COLUMNS(tableName, 1, 1000)}_${companyCode}`;
cache.delete(cacheKeyPattern);
@ -816,6 +819,135 @@ export class TableManagementService {
}
}
/**
* ID
* ( webTypeMapping.ts와 )
*/
private getComponentIdFromInputType(inputType: string): string {
const mapping: Record<string, string> = {
// 텍스트 입력
text: "text-input",
email: "text-input",
password: "text-input",
tel: "text-input",
// 숫자 입력
number: "number-input",
decimal: "number-input",
// 날짜/시간
date: "date-input",
datetime: "date-input",
time: "date-input",
// 텍스트 영역
textarea: "textarea-basic",
// 선택
select: "select-basic",
dropdown: "select-basic",
// 체크박스/라디오
checkbox: "checkbox-basic",
radio: "radio-basic",
boolean: "toggle-switch",
// 파일
file: "file-upload",
// 이미지
image: "image-widget",
img: "image-widget",
picture: "image-widget",
photo: "image-widget",
// 버튼
button: "button-primary",
// 기타
label: "text-display",
code: "select-basic",
entity: "select-basic",
category: "select-basic",
};
return mapping[inputType] || "text-input";
}
/**
* widgetType componentType
* @param tableName -
* @param columnName -
* @param inputType -
* @param companyCode -
*/
private async syncScreenLayoutsInputType(
tableName: string,
columnName: string,
inputType: string,
companyCode: string
): Promise<void> {
try {
// 해당 컬럼을 사용하는 화면 레이아웃 조회
const affectedLayouts = await query<{
layout_id: number;
screen_id: number;
component_id: string;
component_type: string;
properties: any;
}>(
`SELECT sl.layout_id, sl.screen_id, sl.component_id, sl.component_type, sl.properties
FROM screen_layouts sl
JOIN screen_definitions sd ON sl.screen_id = sd.screen_id
WHERE sl.properties->>'tableName' = $1
AND sl.properties->>'columnName' = $2
AND (sd.company_code = $3 OR $3 = '*')`,
[tableName, columnName, companyCode]
);
if (affectedLayouts.length === 0) {
logger.info(
`화면 레이아웃 동기화: ${tableName}.${columnName}을 사용하는 화면 없음`
);
return;
}
logger.info(
`화면 레이아웃 동기화 시작: ${affectedLayouts.length}개 컴포넌트 발견`
);
// 새로운 componentType 계산
const newComponentType = this.getComponentIdFromInputType(inputType);
// 각 레이아웃의 widgetType, componentType 업데이트
for (const layout of affectedLayouts) {
const updatedProperties = {
...layout.properties,
widgetType: inputType,
inputType: inputType,
// componentConfig 내부의 type도 업데이트
componentConfig: {
...layout.properties?.componentConfig,
type: newComponentType,
inputType: inputType,
},
};
await query(
`UPDATE screen_layouts
SET properties = $1, component_type = $2
WHERE layout_id = $3`,
[JSON.stringify(updatedProperties), newComponentType, layout.layout_id]
);
logger.info(
`화면 레이아웃 업데이트: screen_id=${layout.screen_id}, component_id=${layout.component_id}, widgetType=${inputType}, componentType=${newComponentType}`
);
}
logger.info(
`화면 레이아웃 동기화 완료: ${affectedLayouts.length}개 컴포넌트 업데이트됨`
);
} catch (error) {
// 화면 레이아웃 동기화 실패는 치명적이지 않으므로 로그만 남기고 계속 진행
logger.warn(
`화면 레이아웃 동기화 실패 (무시됨): ${tableName}.${columnName}`,
error
);
}
}
/**
*
*/