Merge pull request 'dev' (#551) from dev into dev-deploy

Reviewed-on: #551

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)
       }
     }
 

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

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 }) {
               }}
             />
           </div>
-          <button className="reset-btn" onClick={() => setLength1(0)}></button>
+          <button
+            className="reset-btn"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+
+              resetCalculatorValue()
+            }}
+          ></button>
         </div>
         <div className="outline-form">
           <span>{getMessage('modal.cover.outline.arrow')}</span>
           <div className="grid-direction">
             <button
               className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
-              onClick={() => {
+              onClick={(e) => {
+
                 setArrow1('↑')
                 document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+                e.preventDefault();
+                e.stopPropagation();
+                resetCalculatorValue()
               }}
             ></button>
             <button
               className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
-              onClick={() => {
+              onClick={(e) => {
                 setArrow1('↓')
                 document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+                e.preventDefault();
+                e.stopPropagation();
+                resetCalculatorValue()
               }}
             ></button>
             <button
               className={`direction left ${arrow1 === '←' ? 'act' : ''}`}
-              onClick={() => {
+              onClick={(e) => {
                 setArrow1('←')
                 document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+                e.preventDefault();
+                e.stopPropagation();
+                resetCalculatorValue()
               }}
             ></button>
             <button
               className={`direction right ${arrow1 === '→' ? 'act' : ''}`}
-              onClick={() => {
+              onClick={(e) => {
                 setArrow1('→')
                 document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+                e.preventDefault();
+                e.stopPropagation();
+                resetCalculatorValue()
               }}
             ></button>
           </div>