kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: calculateGridInfo 더미 함수 추가 및 드래그 앤 드롭 수정

This commit is contained in:
kjs 2025-11-10 15:09:27 +09:00
parent d7e598435c
commit 2a2bf86d12
1 changed files with 16 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
frontend/components/screen/ScreenDesigner.tsx
View File

@ -44,6 +44,18 @@ const snapSizeTo10px = (size: { width: number; height: number }): { width: numbe
height: snapTo10px(size.height),
};
};
// calculateGridInfo 더미 함수 (하위 호환성을 위해 유지)
const calculateGridInfo = (width: number, height: number, settings: any) => {
return {
columnWidth: 10,
totalWidth: width,
totalHeight: height,
columns: settings.columns || 12,
gap: settings.gap || 0,
padding: settings.padding || 0,
};
};
import { GroupingToolbar } from "./GroupingToolbar";
import { screenApi, tableTypeApi } from "@/lib/api/screen";
import { tableManagementApi } from "@/lib/api/tableManagement";
@ -2292,34 +2304,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
};
} else if (type === "column") {
// console.log("🔄 컬럼 드롭 처리:", { webType: column.widgetType, columnName: column.columnName });
// 현재 해상도에 맞는 격자 정보로 기본 크기 계산
const currentGridInfo = layout.gridSettings
? calculateGridInfo(screenResolution.width, screenResolution.height, {
columns: layout.gridSettings.columns,
gap: layout.gridSettings.gap,
padding: layout.gridSettings.padding,
snapToGrid: layout.gridSettings.snapToGrid || false,
})
: null;
// 격자 스냅이 활성화된 경우 정확한 격자 크기로 생성, 아니면 기본값
const defaultWidth =
currentGridInfo && layout.gridSettings?.snapToGrid
? calculateWidthFromColumns(1, currentGridInfo, layout.gridSettings as GridUtilSettings)
: 200;
console.log("🎯 컴포넌트 생성 시 크기 계산:", {
screenResolution: `${screenResolution.width}x${screenResolution.height}`,
gridSettings: layout.gridSettings,
currentGridInfo: currentGridInfo
? {
columnWidth: currentGridInfo.columnWidth.toFixed(2),
totalWidth: currentGridInfo.totalWidth,
}
: null,
defaultWidth: defaultWidth.toFixed(2),
snapToGrid: true,
});
// 웹타입별 기본 너비 계산 (10px 단위 고정)
const getDefaultWidth = (widgetType: string): number => {
@ -2627,31 +2611,15 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
return;
}
// 격자 스냅 적용 (그룹 컴포넌트 제외)
// 10px 단위 스냅 적용 (그룹 컴포넌트 제외)
if (layout.gridSettings?.snapToGrid && newComponent.type !== "group") {
// 현재 해상도에 맞는 격자 정보 계산
const currentGridInfo = calculateGridInfo(screenResolution.width, screenResolution.height, {
columns: layout.gridSettings.columns,
gap: layout.gridSettings.gap,
padding: layout.gridSettings.padding,
snapToGrid: layout.gridSettings.snapToGrid || false,
});
newComponent.position = snapPositionTo10px(newComponent.position);
newComponent.size = snapSizeTo10px(newComponent.size);
const gridUtilSettings = {
columns: layout.gridSettings.columns,
gap: layout.gridSettings.gap,
padding: layout.gridSettings.padding,
snapToGrid: layout.gridSettings.snapToGrid || false,
};
newComponent.position = snapPositionTo10px(newComponent.position, currentGridInfo, gridUtilSettings);
newComponent.size = snapSizeTo10px(newComponent.size, currentGridInfo, gridUtilSettings);
console.log("🧲 새 컴포넌트 격자 스냅 적용:", {
console.log("🧲 새 컴포넌트 10px 스냅 적용:", {
type: newComponent.type,
resolution: `${screenResolution.width}x${screenResolution.height}`,
snappedPosition: newComponent.position,
snappedSize: newComponent.size,
columnWidth: currentGridInfo.columnWidth,
});
}