diff --git a/src/components/common/input/CalcInput.jsx b/src/components/common/input/CalcInput.jsx index b17f6667..37bd00ef 100644 --- a/src/components/common/input/CalcInput.jsx +++ b/src/components/common/input/CalcInput.jsx @@ -23,8 +23,23 @@ export const CalculatorInput = forwardRef( }, [ref]) // Sync displayValue with value prop + // useEffect(() => { + // setDisplayValue(value || '0') + // }, [value]) + useEffect(() => { - setDisplayValue(value || '0') + const newValue = value || '0' + setDisplayValue(newValue) + + // 외부에서 value가 변경될 때 계산기 내부 상태도 동기화 + const calculator = calculatorRef.current + if (calculator) { + // 연산 중이 아닐 때 외부에서 값이 들어오면 현재 피연산자로 설정 + calculator.currentOperand = newValue.toString() + calculator.previousOperand = '' + calculator.operation = undefined + setHasOperation(false) + } }, [value]) // 클릭 외부 감지 diff --git a/src/components/floor-plan/modal/lineTypes/Angle.jsx b/src/components/floor-plan/modal/lineTypes/Angle.jsx index 1b05993f..97bbe416 100644 --- a/src/components/floor-plan/modal/lineTypes/Angle.jsx +++ b/src/components/floor-plan/modal/lineTypes/Angle.jsx @@ -8,104 +8,6 @@ export default function Angle({ props }) { const { getMessage } = useMessage() const { angle1, setAngle1, angle1Ref, length1, setLength1, length1Ref } = 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); - } - } - - const resetCalculatorValue2 = () => { - // 1. 즉시 상태를 0으로 변경 - setAngle1(0); - - if (angle1Ref.current) { - // 2. input에 포커스를 주어 계산기 UI가 떠있는 상태를 유지하게 함 - angle1Ref.current.focus(); - angle1Ref.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 등을 시뮬레이션 - angle1Ref.current.dispatchEvent(new Event('input', { bubbles: true })); - } - // 다시 포커스를 주어 키패드가 유지되도록 함 (필요시) - angle1Ref.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') - - // 계산기 키패드가 보이면 계산기가 처리하도록 함 - if (keypadVisible) { - return - } - - // 이미 계산기 input에 포커스가 있으면 계산기가 처리하도록 함 - if (document.activeElement && document.activeElement.classList.contains('calculator-input')) { - return - } - - // 엔터키는 계산기가 숨겨진 상태에서만 페이지가 처리 - if (e.key === 'Enter') { - // 엔터키를 페이지 레벨로 전달 (useOuterLineWall.js에서 처리) - return - } - - // 숫자 키가 입력되면 계산기 input에 포커스만 주기 - if (/^[0-9+\-*\/=.]$/.test(e.key) || e.key === 'Backspace' || e.key === 'Delete') { - const calcInput = document.querySelector('.calculator-input') - if (calcInput) { - // 포커스만 주고 이벤트는 preventDefault 하지 않음 - calcInput.focus() - calcInput.click() - } - } - } - // capture: true로 설정하여 다른 핸들러보다 먼저 실행 - document.addEventListener('keydown', handleKeyDown, { capture: true }) - return () => document.removeEventListener('keydown', handleKeyDown, { capture: true }) - }, []) - return ( <>