diff --git a/src/components/common/input/CalcInput.jsx b/src/components/common/input/CalcInput.jsx index 5cb2bb42..b17f6667 100644 --- a/src/components/common/input/CalcInput.jsx +++ b/src/components/common/input/CalcInput.jsx @@ -1,4 +1,4 @@ -import React, { useState, useRef, useEffect, forwardRef } from 'react' +import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react' import { createCalculator } from '@/util/calc-utils' import '@/styles/calc.scss' @@ -294,9 +294,11 @@ export const CalculatorInput = forwardRef( } else { calculator.currentOperand = filteredValue setHasOperation(false) + // 연산자가 없는 순수 숫자일 때만 부모 컴포넌트의 onChange 호출 + onChange(filteredValue) } - onChange(filteredValue) + //onChange(filteredValue) } } diff --git a/src/components/floor-plan/modal/basic/step/Orientation.jsx b/src/components/floor-plan/modal/basic/step/Orientation.jsx index 4feeb41b..fe00c93b 100644 --- a/src/components/floor-plan/modal/basic/step/Orientation.jsx +++ b/src/components/floor-plan/modal/basic/step/Orientation.jsx @@ -452,7 +452,16 @@ export const Orientation = forwardRef((props, ref) => { className="input-origin block" value={inputCompasDeg} readOnly={!hasAnglePassivity} - onChange={(value) => setInputCompasDeg(value)} + onChange={(value) => { + // Convert to number and ensure it's within -180 to 180 range + const numValue = parseInt(value, 10); + if (!isNaN(numValue)) { + const clampedValue = Math.min(180, Math.max(-180, numValue)); + setInputCompasDeg(String(clampedValue)); + } else { + setInputCompasDeg(value); + } + }} options={{ allowNegative: true, allowDecimal: false diff --git a/src/components/floor-plan/modal/lineTypes/OuterLineWall.jsx b/src/components/floor-plan/modal/lineTypes/OuterLineWall.jsx index ffbfa9f4..ced6dbef 100644 --- a/src/components/floor-plan/modal/lineTypes/OuterLineWall.jsx +++ b/src/components/floor-plan/modal/lineTypes/OuterLineWall.jsx @@ -11,9 +11,44 @@ export default function OuterLineWall({ props }) { const { length1, setLength1, length1Ref, arrow1, setArrow1 } = props + const resetCalculatorValue = () => { + // 1. 즉시 상태를 0으로 변경 + setLength1(0); + + if (length1Ref.current) { + // 2. input에 포커스를 주어 계산기 UI가 떠있는 상태를 유지하게 함 + length1Ref.current.focus(); + length1Ref.current.value = ''; + + // 3. 약간의 시간차를 두어 계산기 UI 내부의 버튼을 찾음 + setTimeout(() => { + const acButton = document.querySelector('.keypad-btn.ac, .btn-ac') || + Array.from(document.querySelectorAll('button')).find(el => el.textContent === 'AC'); + + if (acButton) { + acButton.click(); + } else { + // 버튼을 못 찾으면 강제로 input 이벤트와 Enter/Escape 등을 시뮬레이션 + length1Ref.current.dispatchEvent(new Event('input', { bubbles: true })); + } + // 다시 포커스를 주어 키패드가 유지되도록 함 (필요시) + length1Ref.current.focus(); + }, 10); + } + } + // 키보드 입력 처리 useEffect(() => { const handleKeyDown = (e) => { + + if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) { + // 계산기 값이 확정된 후 초기화하기 위해 약간의 지연을 줌 + setTimeout(() => { + resetCalculatorValue(); + }, 0); + return; + } + // 계산기 키패드가 보이는지 확인 const keypadVisible = document.querySelector('.keypad-container') @@ -88,37 +123,58 @@ export default function OuterLineWall({ props }) { }} /> - +