그룹이 보이지 않던 문제 수정

backend-node/src/services/screenManagementService.ts

@@ -376,6 +376,10 @@ export class ScreenManagementService {
     layoutData: LayoutData,
     companyCode: string
   ): Promise<void> {
+    console.log(`=== 레이아웃 저장 시작 ===`);
+    console.log(`화면 ID: ${screenId}`);
+    console.log(`컴포넌트 수: ${layoutData.components.length}`);
+
     // 권한 확인
     const existingScreen = await prisma.screen_definitions.findUnique({
       where: { screen_id: screenId },
@@ -398,12 +402,22 @@ export class ScreenManagementService {
     for (const component of layoutData.components) {
       const { id, ...componentData } = component;
 
+      console.log(`저장 중인 컴포넌트:`, {
+        id: component.id,
+        type: component.type,
+        position: component.position,
+        size: component.size,
+        parentId: component.parentId,
+        title: (component as any).title,
+      });
+
       // Prisma JSON 필드에 맞는 타입으로 변환
       const properties: any = {
         ...componentData,
         position: {
           x: component.position.x,
           y: component.position.y,
+          z: component.position.z || 1, // z 값 포함
         },
         size: {
           width: component.size.width,
@@ -425,6 +439,8 @@ export class ScreenManagementService {
         },
       });
     }
+
+    console.log(`=== 레이아웃 저장 완료 ===`);
   }
 
   /**
@@ -434,6 +450,9 @@ export class ScreenManagementService {
     screenId: number,
     companyCode: string
   ): Promise<LayoutData | null> {
+    console.log(`=== 레이아웃 로드 시작 ===`);
+    console.log(`화면 ID: ${screenId}`);
+
     // 권한 확인
     const existingScreen = await prisma.screen_definitions.findUnique({
       where: { screen_id: screenId },
@@ -452,6 +471,8 @@ export class ScreenManagementService {
       orderBy: { display_order: "asc" },
     });
 
+    console.log(`DB에서 조회된 레이아웃 수: ${layouts.length}`);
+
     if (layouts.length === 0) {
       return {
         components: [],
@@ -461,16 +482,34 @@ export class ScreenManagementService {
 
     const components: ComponentData[] = layouts.map((layout) => {
       const properties = layout.properties as any;
-      return {
+      const component = {
         id: layout.component_id,
         type: layout.component_type as any,
-        position: { x: layout.position_x, y: layout.position_y },
+        position: {
+          x: layout.position_x,
+          y: layout.position_y,
+          z: properties?.position?.z || 1, // z 값 복원
+        },
         size: { width: layout.width, height: layout.height },
         parentId: layout.parent_id,
         ...properties,
       };
+
+      console.log(`로드된 컴포넌트:`, {
+        id: component.id,
+        type: component.type,
+        position: component.position,
+        size: component.size,
+        parentId: component.parentId,
+        title: (component as any).title,
+      });
+
+      return component;
     });
 
+    console.log(`=== 레이아웃 로드 완료 ===`);
+    console.log(`반환할 컴포넌트 수: ${components.length}`);
+
     return {
       components,
       gridSettings: { columns: 12, gap: 16, padding: 16 },

backend-node/src/types/screen.ts

@@ -20,6 +20,7 @@ export type WebType =
 export interface Position {
   x: number;
   y: number;
+  z?: number; // z-index (레이어 순서)
 }
 
 // 크기 정보