diff --git a/src/components/floor-plan/modal/lineTypes/Angle.jsx b/src/components/floor-plan/modal/lineTypes/Angle.jsx index 0faad2a4..1b05993f 100644 --- a/src/components/floor-plan/modal/lineTypes/Angle.jsx +++ b/src/components/floor-plan/modal/lineTypes/Angle.jsx @@ -2,11 +2,110 @@ import Image from 'next/image' import { useMessage } from '@/hooks/useMessage' import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils' import { CalculatorInput } from '@/components/common/input/CalcInput' +import { useEffect } from 'react' 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 ( <>
@@ -31,19 +130,33 @@ export default function Angle({ props }) { className="input-origin block" value={angle1} ref={angle1Ref} - onChange={(value) => setAngle1(value)} + onChange={(value) => {setAngle1(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)); + setAngle1(String(clampedValue)); + } else { + setAngle1(value); + } + } + } placeholder="45" onFocus={() => (angle1Ref.current.value = '')} options={{ - allowNegative: false, - allowDecimal: true + allowNegative: true, + allowDecimal: false }} />
@@ -77,8 +190,11 @@ export default function Angle({ props }) {