From 10c7c9a0b1cf821deaa080c22f7954941e5437cc Mon Sep 17 00:00:00 2001 From: kjs Date: Tue, 4 Nov 2025 17:44:10 +0900 Subject: [PATCH] =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EB=86=92=EC=9D=B4=20=EC=A1=B0=EC=A0=88=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/components/screen/ScreenDesigner.tsx | 8 ++++---- .../screen/panels/PropertiesPanel.tsx | 14 +++++++------- .../screen/panels/UnifiedPropertiesPanel.tsx | 6 +++--- frontend/lib/utils/gridUtils.ts | 18 +++++++++--------- 4 files changed, 23 insertions(+), 23 deletions(-) diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index ed180314..d057930f 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -610,16 +610,16 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD const columnIndex = Math.round(effectiveX / (columnWidth + (gap || 16))); const snappedX = padding + columnIndex * (columnWidth + (gap || 16)); - // Y 좌표는 20px 단위로 스냅 + // Y 좌표는 10px 단위로 스냅 const effectiveY = newComp.position.y - padding; - const rowIndex = Math.round(effectiveY / 20); - const snappedY = padding + rowIndex * 20; + const rowIndex = Math.round(effectiveY / 10); + const snappedY = padding + rowIndex * 10; // 크기도 외부 격자와 동일하게 스냅 const fullColumnWidth = columnWidth + (gap || 16); // 외부 격자와 동일한 크기 const widthInColumns = Math.max(1, Math.round(newComp.size.width / fullColumnWidth)); const snappedWidth = widthInColumns * fullColumnWidth - (gap || 16); // gap 제거하여 실제 컴포넌트 크기 - const snappedHeight = Math.max(40, Math.round(newComp.size.height / 20) * 20); + const snappedHeight = Math.max(10, Math.round(newComp.size.height / 10) * 10); newComp.position = { x: Math.max(padding, snappedX), // 패딩만큼 최소 여백 확보 diff --git a/frontend/components/screen/panels/PropertiesPanel.tsx b/frontend/components/screen/panels/PropertiesPanel.tsx index 88643c60..277c6e9c 100644 --- a/frontend/components/screen/panels/PropertiesPanel.tsx +++ b/frontend/components/screen/panels/PropertiesPanel.tsx @@ -961,27 +961,27 @@ const PropertiesPanelComponent: React.FC = ({
{ - const rows = Math.max(1, Math.min(20, Number(e.target.value))); - const newHeight = rows * 40; + const units = Math.max(1, Math.min(100, Number(e.target.value))); + const newHeight = units * 10; setLocalInputs((prev) => ({ ...prev, height: newHeight.toString() })); onUpdateProperty("size.height", newHeight); }} className="flex-1" /> - 행 = {localInputs.height || 40}px + 단위 = {localInputs.height || 10}px

- 1행 = 40px (현재 {Math.round((localInputs.height || 40) / 40)}행) - 내부 콘텐츠에 맞춰 늘어남 + 1단위 = 10px (현재 {Math.round((localInputs.height || 10) / 10)}단위) - 내부 콘텐츠에 맞춰 늘어남

diff --git a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx index 01716bb0..f2e50db8 100644 --- a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx +++ b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx @@ -364,11 +364,11 @@ export const UnifiedPropertiesPanel: React.FC = ({ value={selectedComponent.size?.height || 0} onChange={(e) => { const value = parseInt(e.target.value) || 0; - const roundedValue = Math.max(40, Math.round(value / 40) * 40); + const roundedValue = Math.max(10, Math.round(value / 10) * 10); handleUpdate("size.height", roundedValue); }} - step={40} - placeholder="40" + step={10} + placeholder="10" className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }} style={{ fontSize: "12px" }} diff --git a/frontend/lib/utils/gridUtils.ts b/frontend/lib/utils/gridUtils.ts index b23c0ec0..419937f0 100644 --- a/frontend/lib/utils/gridUtils.ts +++ b/frontend/lib/utils/gridUtils.ts @@ -44,7 +44,7 @@ export function snapToGrid(position: Position, gridInfo: GridInfo, gridSettings: // 격자 셀 크기 (컬럼 너비 + 간격을 하나의 격자 단위로 계산) const cellWidth = columnWidth + gap; - const cellHeight = Math.max(40, gap * 2); // 행 높이를 더 크게 설정 + const cellHeight = 10; // 행 높이 10px 단위로 고정 // 패딩을 제외한 상대 위치 const relativeX = position.x - padding; @@ -92,9 +92,9 @@ export function snapSizeToGrid(size: Size, gridInfo: GridInfo, gridSettings: Gri const snappedWidth = gridColumns * columnWidth + (gridColumns - 1) * gap; - // 높이는 동적 행 높이 단위로 스냅 - const rowHeight = Math.max(20, gap); - const snappedHeight = Math.max(40, Math.round(size.height / rowHeight) * rowHeight); + // 높이는 10px 단위로 스냅 + const rowHeight = 10; + const snappedHeight = Math.max(10, Math.round(size.height / rowHeight) * rowHeight); console.log( `📏 크기 스냅: ${size.width}px → ${snappedWidth}px (${gridColumns}컬럼, 컬럼너비:${columnWidth}px, 간격:${gap}px)`, @@ -175,7 +175,7 @@ export function generateGridLines( // 격자 셀 크기 (스냅 로직과 동일하게) const cellWidth = columnWidth + gap; - const cellHeight = Math.max(40, gap * 2); + const cellHeight = 10; // 행 높이 10px 단위로 고정 // 세로 격자선 const verticalLines: number[] = []; @@ -254,8 +254,8 @@ export function alignGroupChildrenToGrid( const columnIndex = Math.round(effectiveX / (columnWidth + gap)); const snappedX = padding + columnIndex * (columnWidth + gap); - // Y 좌표는 동적 행 높이 단위로 스냅 - const rowHeight = Math.max(20, gap); + // Y 좌표는 10px 단위로 스냅 + const rowHeight = 10; const effectiveY = child.position.y - padding; const rowIndex = Math.round(effectiveY / rowHeight); const snappedY = padding + rowIndex * rowHeight; @@ -264,7 +264,7 @@ export function alignGroupChildrenToGrid( const fullColumnWidth = columnWidth + gap; // 외부 격자와 동일한 크기 const widthInColumns = Math.max(1, Math.round(child.size.width / fullColumnWidth)); const snappedWidth = widthInColumns * fullColumnWidth - gap; // gap 제거하여 실제 컴포넌트 크기 - const snappedHeight = Math.max(40, Math.round(child.size.height / rowHeight) * rowHeight); + const snappedHeight = Math.max(10, Math.round(child.size.height / rowHeight) * rowHeight); const snappedChild = { ...child, @@ -310,7 +310,7 @@ export function calculateOptimalGroupSize( gridSettings: GridSettings, ): Size { if (children.length === 0) { - return { width: gridInfo.columnWidth * 2, height: 40 * 2 }; + return { width: gridInfo.columnWidth * 2, height: 10 * 4 }; } console.log("📏 calculateOptimalGroupSize 시작:", {