配置面初期設定 - 계산기 토클버튼 추가

src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-
+import Image from 'next/image'
 import { useMessage } from '@/hooks/useMessage'
 import { usePopup } from '@/hooks/usePopup'
 
@@ -35,6 +35,8 @@ export const ROOF_MATERIAL_LAYOUT = {
 export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, planNo, openPoint }) {
   const [showSizeGuideModal, setShowSizeGuidModal] = useState(false)
   const [showMaterialGuideModal, setShowMaterialGuidModal] = useState(false)
+  const [useCalcPad, setUseCalcPad] = useState(false)
+  const disableKeypad = !useCalcPad
   const { getMessage } = useMessage()
   const roofMaterials = useRecoilValue(roofMaterialsAtom)
 
@@ -398,6 +400,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
                             }}
                             readOnly={currentRoof?.widAuth === 'R'}
                             disabled={currentRoof?.roofSizeSet === '3'}
+                            disableKeypad={disableKeypad}
                             options={{
                               allowNegative: false,
                               allowDecimal: false, //(index !== 0),
@@ -433,6 +436,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
                             }}
                             readOnly={currentRoof?.lenAuth === 'R'}
                             disabled={currentRoof?.roofSizeSet === '3'}
+                            disableKeypad={disableKeypad}
                             options={{
                               allowNegative: false,
                               allowDecimal: false, //(index !== 0),
@@ -490,6 +494,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
                             }}
                             readOnly={currentRoof?.roofPchAuth === 'R'}
                             disabled={currentRoof?.roofSizeSet === '3'}
+                            disableKeypad={disableKeypad}
                             options={{
                               allowNegative: false,
                               allowDecimal: false, //(index !== 0),
@@ -588,6 +593,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
                                   }))
                                 }
                               }}
+                              disableKeypad={disableKeypad}
                               options={{
                                 allowNegative: false,
                                 allowDecimal: true,
@@ -603,7 +609,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
             </tbody>
           </table>
         </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={handleSaveBtn}>
             {getMessage('modal.common.save')}
           </button>

src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx

@@ -1,5 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
+import Image from 'next/image'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useRoofAllocationSetting } from '@/hooks/roofcover/useRoofAllocationSetting'
 import { usePopup } from '@/hooks/usePopup'
@@ -38,6 +39,8 @@ export default function ContextRoofAllocationSetting(props) {
     handleChangePitch,
   } = useRoofAllocationSetting(id)
 
+  const [useCalcPad, setUseCalcPad] = useState(false)
+  const disableKeypad = !useCalcPad
   const { findCommonCode } = useCommonCode()
   const pitchText = useRecoilValue(pitchTextSelector)
   const globalLocale = useRecoilValue(globalLocaleStore)
@@ -223,6 +226,7 @@ export default function ContextRoofAllocationSetting(props) {
                               onChange={(value) => {
                                 handleChangePitch(value, index)
                               }}
+                              disableKeypad={disableKeypad}
                               options={{
                                 allowNegative: false,
                                 allowDecimal: true //(index !== 0),
@@ -238,7 +242,10 @@ export default function ContextRoofAllocationSetting(props) {
               })}
             </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={handleSaveContext}>
               {getMessage('modal.roof.alloc.apply')}
             </button>

src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx

@@ -1,5 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
+import Image from 'next/image'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useRoofAllocationSetting } from '@/hooks/roofcover/useRoofAllocationSetting'
 import { usePopup } from '@/hooks/usePopup'
@@ -37,6 +38,8 @@ export default function RoofAllocationSetting(props) {
     handleChangeInput,
     handleChangePitch,
   } = useRoofAllocationSetting(id)
+  const [useCalcPad, setUseCalcPad] = useState(false)
+  const disableKeypad = !useCalcPad
   const pitchText = useRecoilValue(pitchTextSelector)
   const { findCommonCode } = useCommonCode()
   const [raftCodes, setRaftCodes] = useState([])
@@ -224,6 +227,7 @@ export default function RoofAllocationSetting(props) {
                                 onChange={(value) => {
                                   handleChangePitch(value, index)
                                 }}
+                                disableKeypad={disableKeypad}
                                 options={{
                                   allowNegative: false,
                                   allowDecimal: true //(index !== 0),
@@ -260,7 +264,10 @@ export default function RoofAllocationSetting(props) {
                 })}
               </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.roof.alloc.apply')}
               </button>