From 10c7c9a0b1cf821deaa080c22f7954941e5437cc Mon Sep 17 00:00:00 2001 From: kjs Date: Tue, 4 Nov 2025 17:44:10 +0900 Subject: [PATCH 1/2] =?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 시작:", { From f4fd1184cd40ecc4960634b6849d3a4e10d2cc4e Mon Sep 17 00:00:00 2001 From: kjs Date: Tue, 4 Nov 2025 17:48:22 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EA=B0=84=EA=B2=A9=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../table-list/TableListComponent.tsx | 7 ++-- .../table-list/TableListConfigPanel.tsx | 35 +++++++++++++++++++ .../registry/components/table-list/index.ts | 1 + .../registry/components/table-list/types.ts | 2 ++ 4 files changed, 43 insertions(+), 2 deletions(-) diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx index 46c03aef..08607e92 100644 --- a/frontend/lib/registry/components/table-list/TableListComponent.tsx +++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx @@ -1169,7 +1169,7 @@ export const TableListComponent: React.FC = ({ )} -
+
= ({ )} {/* 테이블 컨테이너 */} -
+
{/* 스크롤 영역 */}
= ({
)} + + {/* 필터 간격 설정 */} + {config.filter?.enabled && ( +
+
+

필터 간격

+
+
+
+ + { + const value = Math.max(0, Math.min(200, parseInt(e.target.value) || 40)); + handleChange("filter", { + ...config.filter, + bottomSpacing: value, + }); + }} + min={0} + max={200} + step={10} + placeholder="40" + className="h-8 text-xs" + /> +

+ 기본값: 40px (0-200px 범위, 10px 단위 권장) +

+
+
+ )}
); diff --git a/frontend/lib/registry/components/table-list/index.ts b/frontend/lib/registry/components/table-list/index.ts index cc54085b..9a68a3c4 100644 --- a/frontend/lib/registry/components/table-list/index.ts +++ b/frontend/lib/registry/components/table-list/index.ts @@ -72,6 +72,7 @@ export const TableListDefinition = createComponentDefinition({ filter: { enabled: true, filters: [], // 사용자가 설정할 필터 목록 + bottomSpacing: 40, // 필터와 리스트 사이 간격 (px) }, // 액션 설정 diff --git a/frontend/lib/registry/components/table-list/types.ts b/frontend/lib/registry/components/table-list/types.ts index f1422205..053d6fb1 100644 --- a/frontend/lib/registry/components/table-list/types.ts +++ b/frontend/lib/registry/components/table-list/types.ts @@ -116,6 +116,8 @@ export interface FilterConfig { referenceColumn?: string; displayColumn?: string; }>; + // 필터와 리스트 사이 간격 (px 단위, 기본: 40) + bottomSpacing?: number; } /**