Merge pull request '補助線サイズ変更/移動/コピー 모달에 계산기패드 토글 버튼 추가' (#814) from dev into dev-deploy

Reviewed-on: #814

src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx

@@ -4,6 +4,7 @@ import { usePopup } from '@/hooks/usePopup'
 import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { useState } from 'react'
+import Image from 'next/image'
 import { currentObjectState } from '@/store/canvasAtom'
 import { useAuxiliaryDrawing } from '@/hooks/roofcover/useAuxiliaryDrawing'
 import { useSwal } from '@/hooks/useSwal'
@@ -22,6 +23,8 @@ export default function AuxiliaryEdit(props) {
   const [arrow2, setArrow2] = useState(null)
   const currentObject = useRecoilValue(currentObjectState)
   const { swalFire } = useSwal()
+  const [useCalcPad, setUseCalcPad] = useState(false)
+  const disableKeypad = !useCalcPad
   const handleSave = () => {
     if ((!arrow1 && !arrow2) || (+verticalSize === 0 && +horizonSize === 0)) {
       swalFire({ title: getMessage('length.direction.is.required'), type: 'alert' })
@@ -75,6 +78,7 @@ export default function AuxiliaryEdit(props) {
                     className="input-origin block"
                     value={verticalSize}
                     onChange={(value) => setVerticalSize(value)}
+                    disableKeypad={disableKeypad}
                     options={{
                       allowNegative: false,
                       allowDecimal: false
@@ -109,6 +113,7 @@ export default function AuxiliaryEdit(props) {
                     className="input-origin block"
                     value={horizonSize}
                     onChange={(value) => setHorizonSize(value)}
+                    disableKeypad={disableKeypad}
                     options={{
                       allowNegative: false,
                       allowDecimal: false
@@ -136,7 +141,10 @@ export default function AuxiliaryEdit(props) {
             </div>
           </div>
         </div>
-        <div className="grid-btn-wrap">
+        <div className="grid-btn-wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: '5px' }}>
+          <button style={{ width: 'auto' }} onClick={() => setUseCalcPad((prev) => !prev)}>
+            <Image src={useCalcPad ? '/static/images/common/Icon_ON_Black.png' : '/static/images/common/Icon_OFF_Black.png'} alt="toggle" width={34} height={34} />
+          </button>
           <button className="btn-frame modal act" onClick={handleSave}>
             {getMessage('modal.common.save')}
           </button>

src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx

@@ -5,6 +5,7 @@ import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { useEffect, useState } from 'react'
+import Image from 'next/image'
 import Big from 'big.js'
 import { calcLineActualSize, calcLinePlaneSize } from '@/util/qpolygon-utils'
 import { normalizeDigits } from '@/util/input-utils'
@@ -21,6 +22,8 @@ export default function AuxiliarySize(props) {
   const { closePopup } = usePopup()
   const currentObject = useRecoilValue(currentObjectState)
   const canvas = useRecoilValue(canvasState)
+  const [useCalcPad, setUseCalcPad] = useState(false)
+  const disableKeypad = !useCalcPad
 
 
   useEffect(() => {
@@ -141,6 +144,7 @@ export default function AuxiliarySize(props) {
                 value={value1}
                 onChange={handleInput}
                 readOnly={checkedRadio !== 1}
+                disableKeypad={disableKeypad}
                 options={{
                   allowNegative: false,
                   allowDecimal: false
@@ -173,6 +177,7 @@ export default function AuxiliarySize(props) {
                 value={value2}
                 onChange={handleInput}
                 readOnly={checkedRadio !== 2}
+                disableKeypad={disableKeypad}
                 options={{
                   allowNegative: false,
                   allowDecimal: false
@@ -182,7 +187,10 @@ export default function AuxiliarySize(props) {
             <span className="thin">mm</span>
           </div>
         </div>
-        <div className="grid-btn-wrap">
+        <div className="grid-btn-wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: '5px' }}>
+          <button style={{ width: 'auto' }} onClick={() => setUseCalcPad((prev) => !prev)}>
+            <Image src={useCalcPad ? '/static/images/common/Icon_ON_Black.png' : '/static/images/common/Icon_OFF_Black.png'} alt="toggle" width={34} height={34} />
+          </button>
           <button className="btn-frame modal act" onClick={handleSave}>
             {getMessage('modal.common.save')}
           </button>