diff --git a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx index d790dfaa..838842f8 100644 --- a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx +++ b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx @@ -328,22 +328,26 @@ export const UnifiedPropertiesPanel: React.FC = ({ type="number" value={localHeight} onChange={(e) => { - // 입력 중에는 로컬 상태만 업데이트 (격자 스냅 방지) + // 입력 중에는 로컬 상태만 업데이트 (자유 입력) setLocalHeight(e.target.value); }} onBlur={(e) => { - // 포커스를 잃을 때만 실제로 업데이트 + // 포커스를 잃을 때 10px 단위로 스냅 const value = parseInt(e.target.value) || 0; - if (value >= 1) { - handleUpdate("size.height", value); + if (value >= 10) { + const snappedValue = Math.round(value / 10) * 10; + handleUpdate("size.height", snappedValue); + setLocalHeight(String(snappedValue)); } }} onKeyDown={(e) => { - // Enter 키를 누르면 즉시 적용 + // Enter 키를 누르면 즉시 적용 (10px 단위로 스냅) if (e.key === "Enter") { const value = parseInt(e.currentTarget.value) || 0; - if (value >= 1) { - handleUpdate("size.height", value); + if (value >= 10) { + const snappedValue = Math.round(value / 10) * 10; + handleUpdate("size.height", snappedValue); + setLocalHeight(String(snappedValue)); } e.currentTarget.blur(); // 포커스 제거 } @@ -410,12 +414,18 @@ export const UnifiedPropertiesPanel: React.FC = ({ type="number" min={10} max={3840} - step="10" + step="1" value={selectedComponent.size?.width || 100} onChange={(e) => { const value = parseInt(e.target.value, 10); if (!isNaN(value) && value >= 10) { - // 10px 단위로 스냅 + handleUpdate("size.width", value); + } + }} + onBlur={(e) => { + const value = parseInt(e.target.value, 10); + if (!isNaN(value) && value >= 10) { + // 포커스 아웃 시 10px 단위로 스냅 const snappedValue = Math.round(value / 10) * 10; handleUpdate("size.width", snappedValue); }