src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx

@@ -5,27 +5,34 @@ import Shed from '@/components/floor-plan/modal/roofShape/passivity/Shed'
 import { useMessage } from '@/hooks/useMessage'
 import { useRoofShapePassivitySetting } from '@/hooks/roofcover/useRoofShapePassivitySetting'
 import { usePopup } from '@/hooks/usePopup'
+import { useState } from 'react'
+import Image from 'next/image'
 
 export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 } }) {
   const { handleSave, handleConfirm, handleRollback, buttons, type, setType, TYPES, offsetRef, pitchRef, pitchText } =
     useRoofShapePassivitySetting(id)
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
+  const [useCalcPad, setUseCalcPad] = useState(false)
+  const disableKeypad = !useCalcPad
 
   const eavesProps = {
     offsetRef,
     pitchRef,
     pitchText,
+    disableKeypad,
   }
 
   const gableProps = {
     offsetRef,
     pitchRef,
     pitchText,
+    disableKeypad,
   }
 
   const shedProps = {
     offsetRef,
+    disableKeypad,
   }
 
   return (
@@ -55,7 +62,10 @@ export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 }
             </button>
           </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' }} type="button" 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(id)}>
             {getMessage('common.setting.finish')}
           </button>

src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx

@@ -5,7 +5,7 @@ import { selectedRoofMaterialSelector } from '@/store/settingAtom'
 import { useEffect } from 'react'
 import { CalculatorInput } from '@/components/common/input/CalcInput'
 
-export default function Eaves({ offsetRef, pitchRef, pitchText }) {
+export default function Eaves({ offsetRef, pitchRef, pitchText, disableKeypad }) {
   const { getMessage } = useMessage()
   const currentAngleType = useRecoilValue(currentAngleTypeSelector)
   const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
@@ -30,6 +30,7 @@ export default function Eaves({ offsetRef, pitchRef, pitchText }) {
             className="input-origin block"
             ref={pitchRef}
             value={currentAngleType === ANGLE_TYPE.SLOPE ? selectedRoofMaterial.pitch : selectedRoofMaterial.angle}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: true //(index !== 0),
@@ -52,6 +53,7 @@ export default function Eaves({ offsetRef, pitchRef, pitchText }) {
             value={offsetRef.current?.value ?? 500}  // Set default value to 500
             ref={offsetRef}
             onChange={() => {}}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: false

src/components/floor-plan/modal/roofShape/passivity/Gable.jsx

@@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil'
 import { currentAngleTypeSelector } from '@/store/canvasAtom'
 import { CalculatorInput } from '@/components/common/input/CalcInput'
 
-export default function Gable({ offsetRef }) {
+export default function Gable({ offsetRef, disableKeypad }) {
   const { getMessage } = useMessage()
   const currentAngleType = useRecoilValue(currentAngleTypeSelector)
   return (
@@ -22,6 +22,7 @@ export default function Gable({ offsetRef }) {
             value={offsetRef.current?.value ?? 300}  // Set default value to 500
             ref={offsetRef}
             onChange={() => {}}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: false

src/components/floor-plan/modal/roofShape/passivity/Shed.jsx

@@ -1,7 +1,7 @@
 import { useMessage } from '@/hooks/useMessage'
 import { CalculatorInput } from '@/components/common/input/CalcInput'
 
-export default function Shed({ offsetRef }) {
+export default function Shed({ offsetRef, disableKeypad }) {
   const { getMessage } = useMessage()
   return (
     <>
@@ -19,6 +19,7 @@ export default function Shed({ offsetRef }) {
             value={offsetRef.current?.value ?? 300}  // Set default value to 500
             ref={offsetRef}
             onChange={() => {}}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: false