fix: 너비/높이 입력 시 자유 입력 가능하도록 수정 및 포커스 아웃 시 10px 단위 스냅
- 문제: 너비/높이 입력 시 즉시 10px 단위로 스냅되어 자유 입력 불가 - 해결: 1. 너비: onChange에서는 입력값 그대로 반영, onBlur에서 10px 단위로 스냅 2. 높이: 로컬 상태로 자유 입력 허용, onBlur/Enter 시 10px 단위로 스냅 3. step을 10에서 1로 변경하여 자유 입력 가능 - 영향: - 입력 중에는 원하는 값 입력 가능 - 입력 완료 시(포커스 아웃 또는 Enter) 자동으로 10px 단위로 정렬
This commit is contained in:
parent
99468ca250
commit
5d374f902a
|
|
@ -328,22 +328,26 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
|
||||||
type="number"
|
type="number"
|
||||||
value={localHeight}
|
value={localHeight}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
// 입력 중에는 로컬 상태만 업데이트 (격자 스냅 방지)
|
// 입력 중에는 로컬 상태만 업데이트 (자유 입력)
|
||||||
setLocalHeight(e.target.value);
|
setLocalHeight(e.target.value);
|
||||||
}}
|
}}
|
||||||
onBlur={(e) => {
|
onBlur={(e) => {
|
||||||
// 포커스를 잃을 때만 실제로 업데이트
|
// 포커스를 잃을 때 10px 단위로 스냅
|
||||||
const value = parseInt(e.target.value) || 0;
|
const value = parseInt(e.target.value) || 0;
|
||||||
if (value >= 1) {
|
if (value >= 10) {
|
||||||
handleUpdate("size.height", value);
|
const snappedValue = Math.round(value / 10) * 10;
|
||||||
|
handleUpdate("size.height", snappedValue);
|
||||||
|
setLocalHeight(String(snappedValue));
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
onKeyDown={(e) => {
|
onKeyDown={(e) => {
|
||||||
// Enter 키를 누르면 즉시 적용
|
// Enter 키를 누르면 즉시 적용 (10px 단위로 스냅)
|
||||||
if (e.key === "Enter") {
|
if (e.key === "Enter") {
|
||||||
const value = parseInt(e.currentTarget.value) || 0;
|
const value = parseInt(e.currentTarget.value) || 0;
|
||||||
if (value >= 1) {
|
if (value >= 10) {
|
||||||
handleUpdate("size.height", value);
|
const snappedValue = Math.round(value / 10) * 10;
|
||||||
|
handleUpdate("size.height", snappedValue);
|
||||||
|
setLocalHeight(String(snappedValue));
|
||||||
}
|
}
|
||||||
e.currentTarget.blur(); // 포커스 제거
|
e.currentTarget.blur(); // 포커스 제거
|
||||||
}
|
}
|
||||||
|
|
@ -410,12 +414,18 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
|
||||||
type="number"
|
type="number"
|
||||||
min={10}
|
min={10}
|
||||||
max={3840}
|
max={3840}
|
||||||
step="10"
|
step="1"
|
||||||
value={selectedComponent.size?.width || 100}
|
value={selectedComponent.size?.width || 100}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
const value = parseInt(e.target.value, 10);
|
const value = parseInt(e.target.value, 10);
|
||||||
if (!isNaN(value) && 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;
|
const snappedValue = Math.round(value / 10) * 10;
|
||||||
handleUpdate("size.width", snappedValue);
|
handleUpdate("size.width", snappedValue);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue