From bbf2dfbe7c92cb62579c6691c608f7caee7fb9c3 Mon Sep 17 00:00:00 2001
From: ysCha <yscha@interplug.co.kr>
Date: Tue, 16 Dec 2025 17:14:47 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B3=B4=EC=A1=B0=EC=84=A0=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=EC=A6=88=EB=B3=80=EA=B2=BD=20:=20=EA=B3=84=EC=82=B0=EA=B8=B0?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modal/auxiliary/AuxiliarySize.jsx         | 38 ++++++++++++++++---
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
index 5a9cde6f..40fb9f76 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
@@ -8,19 +8,21 @@ import { useEffect, useState } from 'react'
 import Big from 'big.js'
 import { calcLineActualSize, calcLinePlaneSize } from '@/util/qpolygon-utils'
 import { normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function AuxiliarySize(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
   const { id, pos = contextPopupPosition } = props
   const [checkedRadio, setCheckedRadio] = useState(null)
-  const [value1, setValue1] = useState(null)
-  const [value2, setValue2] = useState(null)
+  const [value1, setValue1] = useState('')
+  const [value2, setValue2] = useState('')
   const [size, setSize] = useState(0)
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const currentObject = useRecoilValue(currentObjectState)
   const canvas = useRecoilValue(canvasState)
 
+
   useEffect(() => {
     return () => {
       canvas?.discardActiveObject()
@@ -37,7 +39,7 @@ export default function AuxiliarySize(props) {
   }, [currentObject])
 
   const handleInput = (e) => {
-    let value = e.target.value.replace(/^0+/, '')
+    let value = e.replace(/^0+/, '')
     if (value === '') {
       if (checkedRadio === 1) setValue1(value)
       if (checkedRadio === 2) setValue2(value)
@@ -130,7 +132,20 @@ export default function AuxiliarySize(props) {
           <div className="outline-form">
             <span style={{ width: 'auto' }}>{getMessage('length')}</span>
             <div className="input-grid mr5">
-              <input type="text" className="input-origin block" value={value1} readOnly={checkedRadio !== 1} onChange={handleInput} />
+              {/*<input type="text" className="input-origin block" value={value1} readOnly={checkedRadio !== 1} onChange={handleInput} />*/}
+              <CalculatorInput
+                id=""
+                name=""
+                label=""
+                className="input-origin block"
+                value={value1}
+                onChange={handleInput}
+                readOnly={checkedRadio !== 1}
+                options={{
+                  allowNegative: false,
+                  allowDecimal: false
+                }}
+              />
             </div>
             <span className="thin">mm</span>
           </div>
@@ -149,7 +164,20 @@ export default function AuxiliarySize(props) {
           <div className="outline-form">
             <span style={{ width: 'auto' }}>{getMessage('length')}</span>
             <div className="input-grid mr5">
-              <input type="text" className="input-origin block" value={value2} readOnly={checkedRadio !== 2} onChange={handleInput} />
+              {/*<input type="text" className="input-origin block" value={value2} readOnly={checkedRadio !== 2} onChange={handleInput} />*/}
+              <CalculatorInput
+                id=""
+                name=""
+                label=""
+                className="input-origin block"
+                value={value2}
+                onChange={handleInput}
+                readOnly={checkedRadio !== 2}
+                options={{
+                  allowNegative: false,
+                  allowDecimal: false
+                }}
+              />
             </div>
             <span className="thin">mm</span>
           </div>