화면 해상도 설정 기능 구현

backend-node/src/services/screenManagementService.ts

@@ -45,12 +45,22 @@ export class ScreenManagementService {
     screenData: CreateScreenRequest,
     userCompanyCode: string
   ): Promise<ScreenDefinition> {
+    console.log(`=== 화면 생성 요청 ===`);
+    console.log(`요청 데이터:`, screenData);
+    console.log(`사용자 회사 코드:`, userCompanyCode);
+
     // 화면 코드 중복 확인
     const existingScreen = await prisma.screen_definitions.findUnique({
       where: { screen_code: screenData.screenCode },
     });
 
+    console.log(
+      `화면 코드 '${screenData.screenCode}' 중복 검사 결과:`,
+      existingScreen ? "중복됨" : "사용 가능"
+    );
+
     if (existingScreen) {
+      console.log(`기존 화면 정보:`, existingScreen);
       throw new Error("이미 존재하는 화면 코드입니다.");
     }
 
@@ -437,6 +447,8 @@ export class ScreenManagementService {
     console.log(`=== 레이아웃 저장 시작 ===`);
     console.log(`화면 ID: ${screenId}`);
     console.log(`컴포넌트 수: ${layoutData.components.length}`);
+    console.log(`격자 설정:`, layoutData.gridSettings);
+    console.log(`해상도 설정:`, layoutData.screenResolution);
 
     // 권한 확인
     const existingScreen = await prisma.screen_definitions.findUnique({
@@ -451,12 +463,37 @@ export class ScreenManagementService {
       throw new Error("이 화면의 레이아웃을 저장할 권한이 없습니다.");
     }
 
-    // 기존 레이아웃 삭제
+    // 기존 레이아웃 삭제 (컴포넌트와 메타데이터 모두)
     await prisma.screen_layouts.deleteMany({
       where: { screen_id: screenId },
     });
 
-    // 새 레이아웃 저장
+    // 1. 메타데이터 저장 (격자 설정과 해상도 정보)
+    if (layoutData.gridSettings || layoutData.screenResolution) {
+      const metadata: any = {
+        gridSettings: layoutData.gridSettings,
+        screenResolution: layoutData.screenResolution,
+      };
+
+      await prisma.screen_layouts.create({
+        data: {
+          screen_id: screenId,
+          component_type: "_metadata", // 특별한 타입으로 메타데이터 식별
+          component_id: `_metadata_${screenId}`,
+          parent_id: null,
+          position_x: 0,
+          position_y: 0,
+          width: 0,
+          height: 0,
+          properties: metadata,
+          display_order: -1, // 메타데이터는 맨 앞에 배치
+        },
+      });
+
+      console.log(`메타데이터 저장 완료:`, metadata);
+    }
+
+    // 2. 컴포넌트 저장
     for (const component of layoutData.components) {
       const { id, ...componentData } = component;
 
@@ -531,14 +568,45 @@ export class ScreenManagementService {
 
     console.log(`DB에서 조회된 레이아웃 수: ${layouts.length}`);
 
-    if (layouts.length === 0) {
+    // 메타데이터와 컴포넌트 분리
+    const metadataLayout = layouts.find(
+      (layout) => layout.component_type === "_metadata"
+    );
+    const componentLayouts = layouts.filter(
+      (layout) => layout.component_type !== "_metadata"
+    );
+
+    // 기본 메타데이터 설정
+    let gridSettings = {
+      columns: 12,
+      gap: 16,
+      padding: 16,
+      snapToGrid: true,
+      showGrid: true,
+    };
+    let screenResolution = null;
+
+    // 저장된 메타데이터가 있으면 적용
+    if (metadataLayout && metadataLayout.properties) {
+      const metadata = metadataLayout.properties as any;
+      if (metadata.gridSettings) {
+        gridSettings = { ...gridSettings, ...metadata.gridSettings };
+      }
+      if (metadata.screenResolution) {
+        screenResolution = metadata.screenResolution;
+      }
+      console.log(`메타데이터 로드:`, { gridSettings, screenResolution });
+    }
+
+    if (componentLayouts.length === 0) {
       return {
         components: [],
-        gridSettings: { columns: 12, gap: 16, padding: 16 },
+        gridSettings,
+        screenResolution,
       };
     }
 
-    const components: ComponentData[] = layouts.map((layout) => {
+    const components: ComponentData[] = componentLayouts.map((layout) => {
       const properties = layout.properties as any;
       const component = {
         id: layout.component_id,
@@ -567,10 +635,13 @@ export class ScreenManagementService {
 
     console.log(`=== 레이아웃 로드 완료 ===`);
     console.log(`반환할 컴포넌트 수: ${components.length}`);
+    console.log(`최종 격자 설정:`, gridSettings);
+    console.log(`최종 해상도 설정:`, screenResolution);
 
     return {
       components,
-      gridSettings: { columns: 12, gap: 16, padding: 16 },
+      gridSettings,
+      screenResolution,
     };
   }
 

backend-node/src/types/screen.ts

@@ -108,6 +108,7 @@ export type ComponentData =
 export interface LayoutData {
   components: ComponentData[];
   gridSettings?: GridSettings;
+  screenResolution?: ScreenResolution;
 }
 
 // 그리드 설정
@@ -115,6 +116,18 @@ export interface GridSettings {
   columns: number; // 기본값: 12
   gap: number; // 기본값: 16px
   padding: number; // 기본값: 16px
+  snapToGrid?: boolean; // 격자에 맞춤 여부 (기본값: true)
+  showGrid?: boolean; // 격자 표시 여부 (기본값: true)
+  gridColor?: string; // 격자 색상 (기본값: #d1d5db)
+  gridOpacity?: number; // 격자 투명도 (기본값: 0.5)
+}
+
+// 화면 해상도 설정
+export interface ScreenResolution {
+  width: number;
+  height: number;
+  name: string;
+  category: "desktop" | "tablet" | "mobile" | "custom";
 }
 
 // 유효성 검증 규칙