컴포넌트 높이 조절기능

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), // 패딩만큼 최소 여백 확보

frontend/components/screen/panels/PropertiesPanel.tsx

@@ -961,27 +961,27 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
 
                 <div className="col-span-2">
                   <Label htmlFor="height" className="text-sm font-medium">
-                    최소 높이 (40px 단위)
+                    최소 높이 (10px 단위)
                   </Label>
                   <div className="mt-1 flex items-center space-x-2">
                     <Input
                       id="height"
                       type="number"
                       min="1"
-                      max="20"
-                      value={Math.round((localInputs.height || 40) / 40)}
+                      max="100"
+                      value={Math.round((localInputs.height || 10) / 10)}
                       onChange={(e) => {
-                        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"
                     />
-                    <span className="text-sm text-gray-500">행 = {localInputs.height || 40}px</span>
+                    <span className="text-sm text-gray-500">단위 = {localInputs.height || 10}px</span>
                   </div>
                   <p className="mt-1 text-xs text-gray-500">
-                    1행 = 40px (현재 {Math.round((localInputs.height || 40) / 40)}행) - 내부 콘텐츠에 맞춰 늘어남
+                    1단위 = 10px (현재 {Math.round((localInputs.height || 10) / 10)}단위) - 내부 콘텐츠에 맞춰 늘어남
                   </p>
                 </div>
               </>

frontend/components/screen/panels/UnifiedPropertiesPanel.tsx

@@ -364,11 +364,11 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
               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" }}