feat: 화면 그룹 및 서브 테이블 관련 로직 개선
- 화면 그룹 조회 시 삭제된 화면(is_active = 'D')을 제외하도록 쿼리를 수정하였습니다. - 화면 서브 테이블 API에서 전역 메인 테이블 목록을 수집하여, 메인 테이블과 서브 테이블의 우선순위를 적용하였습니다. - 화면 삭제 시 연결된 화면 그룹의 관계를 해제하는 로직을 추가하였습니다. - 화면 관계 흐름에서 연결된 화면들을 추가하는 로직을 개선하여, 그룹 모드와 개별 화면 모드에서의 동작을 명확히 하였습니다. - 관련 문서 및 주석을 업데이트하여 새로운 기능에 대한 이해를 돕도록 하였습니다.
This commit is contained in:
DDD1542
@@ -58,6 +58,7 @@ export interface TableNodeData {
|
||||
label: string;
|
||||
subLabel?: string;
|
||||
isMain?: boolean;
|
||||
isFilterTable?: boolean; // 마스터-디테일의 디테일 테이블인지 (보라색 테두리)
|
||||
isFocused?: boolean; // 포커스된 테이블인지
|
||||
isFaded?: boolean; // 흑백 처리할지
|
||||
columns?: Array<{
|
||||
@@ -448,7 +449,7 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
|
||||
|
||||
// ========== 테이블 노드 (하단) - 컬럼 목록 표시 (컴팩트) ==========
|
||||
export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
|
||||
const { label, subLabel, isMain, isFocused, isFaded, columns, highlightedColumns, joinColumns, joinColumnRefs, filterColumns, fieldMappings, referencedBy, saveInfos } = data;
|
||||
const { label, subLabel, isMain, isFilterTable, isFocused, isFaded, columns, highlightedColumns, joinColumns, joinColumnRefs, filterColumns, fieldMappings, referencedBy, saveInfos } = data;
|
||||
|
||||
// 강조할 컬럼 세트 (영문 컬럼명 기준)
|
||||
const highlightSet = new Set(highlightedColumns || []);
|
||||
@@ -574,16 +575,19 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
|
||||
return (
|
||||
<div
|
||||
className={`group relative flex w-[260px] flex-col overflow-visible rounded-xl border shadow-md ${
|
||||
// 필터 관련 테이블 (마스터 또는 디테일): 보라색
|
||||
(hasFilterRelation || isFilterSource)
|
||||
// 1. 필터 테이블 (마스터-디테일의 디테일 테이블): 항상 보라색 테두리
|
||||
isFilterTable
|
||||
? "border-2 border-violet-500 ring-2 ring-violet-500/20 shadow-lg bg-violet-50/50"
|
||||
// 2. 필터 관련 테이블 (마스터 또는 디테일) 포커스 시: 진한 보라색
|
||||
: (hasFilterRelation || isFilterSource)
|
||||
? "border-2 border-violet-500 ring-4 ring-violet-500/30 shadow-xl bg-violet-50"
|
||||
// 순수 포커스 (필터 관계 없음): 초록색
|
||||
// 3. 순수 포커스 (필터 관계 없음): 초록색
|
||||
: isFocused
|
||||
? "border-2 border-emerald-500 ring-4 ring-emerald-500/30 shadow-xl bg-card"
|
||||
// 흐리게 처리
|
||||
// 4. 흐리게 처리
|
||||
: isFaded
|
||||
? "border-gray-200 opacity-60 bg-card"
|
||||
// 기본
|
||||
// 5. 기본
|
||||
: "border-border hover:shadow-lg hover:ring-2 hover:ring-emerald-500/20 bg-card"
|
||||
}`}
|
||||
style={{
|
||||
|
||||
@@ -147,6 +147,19 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
|
||||
// 강제 새로고침용 키 (설정 저장 후 시각화 재로딩)
|
||||
const [refreshKey, setRefreshKey] = useState(0);
|
||||
|
||||
// 화면 삭제/추가 시 노드 플로워 새로고침 (screen-list-refresh 이벤트 구독)
|
||||
useEffect(() => {
|
||||
const handleScreenListRefresh = () => {
|
||||
// refreshKey 증가로 데이터 재로드 트리거
|
||||
setRefreshKey(prev => prev + 1);
|
||||
};
|
||||
|
||||
window.addEventListener("screen-list-refresh", handleScreenListRefresh);
|
||||
return () => {
|
||||
window.removeEventListener("screen-list-refresh", handleScreenListRefresh);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 그룹 또는 화면이 변경될 때 포커스 초기화
|
||||
useEffect(() => {
|
||||
setFocusedScreenId(null);
|
||||
@@ -170,6 +183,10 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
|
||||
|
||||
// 화면별 사용 컬럼 매핑 (화면 ID -> 테이블명 -> 사용 컬럼들)
|
||||
const [screenUsedColumnsMap, setScreenUsedColumnsMap] = useState<Record<number, Record<string, string[]>>>({});
|
||||
|
||||
// 전역 메인 테이블 목록 (우선순위: 메인 > 서브)
|
||||
// 이 목록에 있는 테이블은 서브 테이블로 분류되지 않음
|
||||
const [globalMainTables, setGlobalMainTables] = useState<Set<string>>(new Set());
|
||||
|
||||
// 테이블 컬럼 정보 로드
|
||||
const loadTableColumns = useCallback(
|
||||
@@ -266,24 +283,26 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
|
||||
const flows = flowsRes.success ? flowsRes.data || [] : [];
|
||||
const relations = relationsRes.success ? relationsRes.data || [] : [];
|
||||
|
||||
// 데이터 흐름에서 연결된 화면들 추가
|
||||
flows.forEach((flow: any) => {
|
||||
if (flow.source_screen_id === screen.screenId && flow.target_screen_id) {
|
||||
const exists = screenList.some((s) => s.screenId === flow.target_screen_id);
|
||||
if (!exists) {
|
||||
screenList.push({
|
||||
screenId: flow.target_screen_id,
|
||||
screenName: flow.target_screen_name || `화면 ${flow.target_screen_id}`,
|
||||
screenCode: "",
|
||||
tableName: "",
|
||||
companyCode: screen.companyCode,
|
||||
isActive: "Y",
|
||||
createdDate: new Date(),
|
||||
updatedDate: new Date(),
|
||||
} as ScreenDefinition);
|
||||
// 데이터 흐름에서 연결된 화면들 추가 (개별 화면 모드에서만 - 그룹 모드에서는 그룹 내 화면만 표시)
|
||||
if (!selectedGroup && screen) {
|
||||
flows.forEach((flow: any) => {
|
||||
if (flow.source_screen_id === screen.screenId && flow.target_screen_id) {
|
||||
const exists = screenList.some((s) => s.screenId === flow.target_screen_id);
|
||||
if (!exists) {
|
||||
screenList.push({
|
||||
screenId: flow.target_screen_id,
|
||||
screenName: flow.target_screen_name || `화면 ${flow.target_screen_id}`,
|
||||
screenCode: "",
|
||||
tableName: "",
|
||||
companyCode: screen.companyCode,
|
||||
isActive: "Y",
|
||||
createdDate: new Date(),
|
||||
updatedDate: new Date(),
|
||||
} as ScreenDefinition);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 화면 레이아웃 요약 정보 로드
|
||||
const screenIds = screenList.map((s) => s.screenId);
|
||||
@@ -305,6 +324,13 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
|
||||
subTablesData = subTablesRes.data as Record<number, ScreenSubTablesData>;
|
||||
// 서브 테이블 데이터 저장 (조인 컬럼 정보 포함)
|
||||
setSubTablesDataMap(subTablesData);
|
||||
|
||||
// 전역 메인 테이블 목록 저장 (우선순위 적용용)
|
||||
// 이 목록에 있는 테이블은 서브 테이블로 분류되지 않음
|
||||
const globalMainTablesArr = (subTablesRes as any).globalMainTables as string[] | undefined;
|
||||
if (globalMainTablesArr && Array.isArray(globalMainTablesArr)) {
|
||||
setGlobalMainTables(new Set(globalMainTablesArr));
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("레이아웃 요약/서브 테이블 로드 실패:", e);
|
||||
@@ -434,9 +460,27 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
|
||||
if (rel.table_name) mainTableSet.add(rel.table_name);
|
||||
});
|
||||
|
||||
// 서브 테이블 수집 (componentConfig에서 추출된 테이블들)
|
||||
// 서브 테이블은 메인 테이블과 다른 테이블들
|
||||
// 화면별 서브 테이블 매핑도 함께 구축
|
||||
// ============================================================
|
||||
// 테이블 분류 (우선순위: 메인 > 서브)
|
||||
// ============================================================
|
||||
// 메인 테이블 조건:
|
||||
// 1. screen_definitions.table_name (컴포넌트 직접 연결) - 이미 mainTableSet에 추가됨
|
||||
// 2. globalMainTables (WHERE 조건 대상, 마스터-디테일의 디테일 테이블)
|
||||
//
|
||||
// 서브 테이블 조건:
|
||||
// - 조인(JOIN)으로만 연결된 테이블 (autocomplete 등에서 참조)
|
||||
// - 단, mainTableSet에 있으면 제외 (우선순위: 메인 > 서브)
|
||||
|
||||
// 1. globalMainTables를 mainTableSet에 먼저 추가 (우선순위 적용)
|
||||
const filterTableSet = new Set<string>(); // 마스터-디테일의 디테일 테이블들
|
||||
globalMainTables.forEach((tableName) => {
|
||||
if (!mainTableSet.has(tableName)) {
|
||||
mainTableSet.add(tableName);
|
||||
filterTableSet.add(tableName); // 필터 테이블로 분류 (보라색 테두리)
|
||||
}
|
||||
});
|
||||
|
||||
// 2. 서브 테이블 수집 (mainTableSet에 없는 것만)
|
||||
const newScreenSubTableMap: Record<number, string[]> = {};
|
||||
|
||||
Object.entries(subTablesData).forEach(([screenIdStr, screenSubData]) => {
|
||||
@@ -444,11 +488,14 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
|
||||
const subTableNames: string[] = [];
|
||||
|
||||
screenSubData.subTables.forEach((subTable) => {
|
||||
// 메인 테이블에 없는 것만 서브 테이블로 추가
|
||||
if (!mainTableSet.has(subTable.tableName)) {
|
||||
subTableSet.add(subTable.tableName);
|
||||
subTableNames.push(subTable.tableName);
|
||||
// mainTableSet에 있으면 서브 테이블에서 제외 (우선순위: 메인 > 서브)
|
||||
if (mainTableSet.has(subTable.tableName)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 조인으로만 연결된 테이블 → 서브 테이블
|
||||
subTableSet.add(subTable.tableName);
|
||||
subTableNames.push(subTable.tableName);
|
||||
});
|
||||
|
||||
if (subTableNames.length > 0) {
|
||||
@@ -539,10 +586,19 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
|
||||
isForeignKey: !!col.referenceTable || (col.columnName?.includes("_id") && col.columnName !== "id"),
|
||||
}));
|
||||
|
||||
// 여러 화면이 같은 테이블 사용하면 "공통 메인 테이블", 아니면 "메인 테이블"
|
||||
const subLabel = linkedScreens.length > 1
|
||||
? `메인 테이블 (${linkedScreens.length}개 화면)`
|
||||
: "메인 테이블";
|
||||
// 테이블 분류에 따른 라벨 결정
|
||||
// 1. 필터 테이블 (마스터-디테일의 디테일): "필터 대상 테이블"
|
||||
// 2. 여러 화면이 같은 테이블 사용: "공통 메인 테이블 (N개 화면)"
|
||||
// 3. 일반 메인 테이블: "메인 테이블"
|
||||
const isFilterTable = filterTableSet.has(tableName);
|
||||
let subLabel: string;
|
||||
if (isFilterTable) {
|
||||
subLabel = "필터 대상 테이블 (마스터-디테일)";
|
||||
} else if (linkedScreens.length > 1) {
|
||||
subLabel = `메인 테이블 (${linkedScreens.length}개 화면)`;
|
||||
} else {
|
||||
subLabel = "메인 테이블";
|
||||
}
|
||||
|
||||
// 이 테이블을 참조하는 관계들
|
||||
tableNodes.push({
|
||||
@@ -552,7 +608,8 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
|
||||
data: {
|
||||
label: tableName,
|
||||
subLabel: subLabel,
|
||||
isMain: true, // mainTableSet의 모든 테이블은 메인
|
||||
isMain: !isFilterTable, // 필터 테이블은 isMain: false로 설정 (보라색 테두리 표시용)
|
||||
isFilterTable: isFilterTable, // 필터 테이블 여부 표시
|
||||
columns: formattedColumns,
|
||||
// referencedBy, filterColumns, saveInfos는 styledNodes에서 포커스 상태에 따라 동적으로 설정
|
||||
},
|
||||
|
||||
3
frontend/stagewise.json
Normal file
3
frontend/stagewise.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"appPort": 9771
|
||||
}
|
||||
Reference in New Issue
Block a user