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 (
     <>
       <div className="outline-wrap">
@@ -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
                   }}
                 />
               </div>
               <button
                 className="reset-btn"
                 onClick={(e) => {
-                  setAngle1(0)
+                  e.preventDefault();
+                  e.stopPropagation();
+
+                  resetCalculatorValue2()
                 }}
               ></button>
             </div>
@@ -77,8 +190,11 @@ export default function Angle({ props }) {
               </div>
               <button
                 className="reset-btn"
-                onClick={() => {
-                  setLength1(0)
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+
+                  resetCalculatorValue()
                 }}
               ></button>
             </div>