>(new Set());
+```
+
+#### 2. 우선순위 기반 테이블 분류
+
+```typescript
+// 1. globalMainTables를 mainTableSet에 먼저 추가 (우선순위 적용)
+globalMainTables.forEach((tableName) => {
+ if (!mainTableSet.has(tableName)) {
+ mainTableSet.add(tableName);
+ filterTableSet.add(tableName); // 보라색 테두리
+ }
+});
+
+// 2. 서브 테이블 수집 (mainTableSet에 없는 것만)
+screenSubData.subTables.forEach((subTable) => {
+ if (mainTableSet.has(subTable.tableName)) {
+ return; // 메인 테이블은 서브에서 제외
+ }
+ subTableSet.add(subTable.tableName);
+});
+```
+
+### 시각적 결과
+
+#### 변경 전
+
+```
+[화면 노드들]
+ │
+ ▼
+[메인 테이블: dept_info, user_info] ← user_dept 없음
+ │
+ ▼
+[서브 테이블: user_dept, customer_mng] ← user_dept가 잘못 배치됨
+```
+
+#### 변경 후
+
+```
+[화면 노드들]
+ │
+ ▼
+[메인 테이블: dept_info, user_info, user_dept] ← user_dept 보라색 테두리
+ │
+ ▼
+[서브 테이블: customer_mng] ← 조인 참조용 테이블만
+```
+
+### 관련 파일
+
+| 파일 | 변경 내용 |
+|------|----------|
+| `backend-node/src/controllers/screenGroupController.ts` | screen_layouts_v2 UNION 추가, globalMainTables 반환 |
+| `frontend/components/screen/ScreenRelationFlow.tsx` | globalMainTables 상태, 우선순위 분류 로직 |
+| `frontend/components/screen/ScreenNode.tsx` | isFilterTable prop 및 보라색 테두리 스타일 |
+
+---
+
## 화면 설정 모달 개선 (2026-01-12)
### 개요
@@ -1742,4 +1897,6 @@ npm install react-zoom-pan-pinch
- [멀티테넌시 구현 가이드](.cursor/rules/multi-tenancy-guide.mdc)
- [API 클라이언트 사용 규칙](.cursor/rules/api-client-usage.mdc)
- [관리자 페이지 스타일 가이드](.cursor/rules/admin-page-style-guide.mdc)
+- [화면 복제 V2 마이그레이션 계획서](../SCREEN_COPY_V2_MIGRATION_PLAN.md) - screen_layouts_v2 복제 로직
+- [V2 컴포넌트 마이그레이션 분석](../V2_COMPONENT_MIGRATION_ANALYSIS.md) - V2 아키텍처
diff --git a/docs/SCREEN_COPY_V2_MIGRATION_PLAN.md b/docs/SCREEN_COPY_V2_MIGRATION_PLAN.md
index 7e1afcba..bcb2a765 100644
--- a/docs/SCREEN_COPY_V2_MIGRATION_PLAN.md
+++ b/docs/SCREEN_COPY_V2_MIGRATION_PLAN.md
@@ -467,9 +467,9 @@ V2 전환 롤백 (필요시):
- [x] copyScreens() - Legacy 제거, V2로 교체 ✅ 2026-01-28
- [x] hasLayoutChangesV2() 함수 추가 ✅ 2026-01-28
- [x] updateTabScreenReferences() V2 지원 추가 ✅ 2026-01-28
-- [ ] 단위 테스트 통과
-- [ ] 통합 테스트 통과
-- [ ] V2 전용 복제 동작 확인
+- [x] 단위 테스트 통과 ✅ 2026-01-30
+- [x] 통합 테스트 통과 ✅ 2026-01-30
+- [x] V2 전용 복제 동작 확인 ✅ 2026-01-30
### 9.3 Phase 2 완료 조건
@@ -522,3 +522,4 @@ V2 전환 롤백 (필요시):
| 2026-01-28 | 시뮬레이션 검증 - updateTabScreenReferences V2 지원 추가 | Claude |
| 2026-01-28 | V2 경로 지원 추가 - action/sections 직접 경로 (componentConfig 없이) | Claude |
| 2026-01-30 | **실제 코드 구현 완료** - copyScreen(), copyScreens() V2 전환 | Claude |
+| 2026-01-30 | **Phase 1 테스트 완료** - 단위/통합 테스트 통과 확인 | Claude |
diff --git a/frontend/components/screen/ScreenNode.tsx b/frontend/components/screen/ScreenNode.tsx
index e49bf6d8..bcaaf054 100644
--- a/frontend/components/screen/ScreenNode.tsx
+++ b/frontend/components/screen/ScreenNode.tsx
@@ -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 (
{
+ 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>>({});
+
+ // 전역 메인 테이블 목록 (우선순위: 메인 > 서브)
+ // 이 목록에 있는 테이블은 서브 테이블로 분류되지 않음
+ const [globalMainTables, setGlobalMainTables] = useState>(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;
// 서브 테이블 데이터 저장 (조인 컬럼 정보 포함)
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(); // 마스터-디테일의 디테일 테이블들
+ globalMainTables.forEach((tableName) => {
+ if (!mainTableSet.has(tableName)) {
+ mainTableSet.add(tableName);
+ filterTableSet.add(tableName); // 필터 테이블로 분류 (보라색 테두리)
+ }
+ });
+
+ // 2. 서브 테이블 수집 (mainTableSet에 없는 것만)
const newScreenSubTableMap: Record = {};
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에서 포커스 상태에 따라 동적으로 설정
},
diff --git a/frontend/stagewise.json b/frontend/stagewise.json
new file mode 100644
index 00000000..d6cd6af2
--- /dev/null
+++ b/frontend/stagewise.json
@@ -0,0 +1,3 @@
+{
+ "appPort": 9771
+}
\ No newline at end of file