Merge branch 'dev' of https://git.hanasys.jp/qcast3/qcast-front into feature/redo-undo

src/components/common/input/CalcInput.jsx

@@ -3,7 +3,7 @@ import { createCalculator } from '@/util/calc-utils'
 import '@/styles/calc.scss'
 
 export const CalculatorInput = forwardRef(
-  ({ value, onChange, label, options = {}, id, className = 'calculator-input', readOnly = false, placeholder, name='', disabled = false, maxLength = 12 }, ref) => {
+  ({ value, onChange, label, options = {}, id, className = 'calculator-input', readOnly = false, placeholder, name='', disabled = false, maxLength = 12, disableKeypad = false }, ref) => {
     const [showKeypad, setShowKeypad] = useState(false)
     const [displayValue, setDisplayValue] = useState(value || '0')
     const [hasOperation, setHasOperation] = useState(false)
@@ -478,7 +478,7 @@ export const CalculatorInput = forwardRef(
           maxLength={maxLength}
         />
 
-        {showKeypad && !readOnly && (
+        {showKeypad && !readOnly && !disableKeypad && (
           <div className="keypad-container">
             <div className="keypad-grid">
               <button

src/components/estimate/Estimate.jsx

@@ -25,7 +25,10 @@ import { QcastContext } from '@/app/QcastProvider'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 import {normalizeDigits, normalizeDecimal} from '@/util/input-utils'
 import { CalculatorInput } from '@/components/common/input/CalcInput'
+import Image from 'next/image'
 export default function Estimate({}) {
+  const [useCalcPad, setUseCalcPad] = useState(false)
+  const disableKeypad = !useCalcPad
   const [uniqueData, setUniqueData] = useState([])
   const [handlePricingFlag, setHandlePricingFlag] = useState(false)
   const [specialNoteFirstFlg, setSpecialNoteFirstFlg] = useState(false)
@@ -1980,6 +1983,9 @@ export default function Estimate({}) {
                     <span className="minus"></span>
                     {getMessage('estimate.detail.showPrice.delItem')}
                   </button>
+                  <button style={{ width: 'auto', marginLeft: '8px' }} type="button" onClick={() => setUseCalcPad((prev) => !prev)}>
+                    <Image src={useCalcPad ? '/static/images/common/Icon_ON.png' : '/static/images/common/Icon_OFF.png'} alt="toggle" width={34} height={34} />
+                  </button>
                 </div>
               </div>
             </div>
@@ -2148,6 +2154,7 @@ export default function Estimate({}) {
                                   onChange={(value) =>{
                                     onChangeAmount(value, item.dispOrder, index)
                                   }}
+                                  disableKeypad={disableKeypad}
                                   options={{
                                     allowNegative: false,
                                     allowDecimal: false
@@ -2205,6 +2212,7 @@ export default function Estimate({}) {
                                       onChangeSalePrice(value, item.dispOrder, index)
                                     }}
                                     maxLength={12}
+                                    disableKeypad={disableKeypad}
                                     options={{
                                       allowNegative: false,
                                       allowDecimal: false

src/components/floor-plan/modal/basic/BasicSetting.jsx

@@ -1,5 +1,6 @@
 import { MODULE_SETUP_TYPE, POLYGON_TYPE } from '@/common/common'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
+import Image from 'next/image'
 import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation'
 import PitchPlacement from '@/components/floor-plan/modal/basic/step/pitch/PitchPlacement'
 import Placement from '@/components/floor-plan/modal/basic/step/Placement'
@@ -75,6 +76,8 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   const { trigger: placementTrigger } = useCanvasPopupStatusController(3)
   const [roofsStore, setRoofsStore] = useRecoilState(roofsState)
   const [isFold, setIsFold] = useState(false)
+  const [useCalcPad, setUseCalcPad] = useState(false)
+  const disableKeypad = !useCalcPad
 
   // const { initEvent } = useContext(EventContext)
   const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup, manualModuleLayoutSetup, restoreModuleInstArea } =
@@ -235,6 +238,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   }
 
   const orientationProps = {
+    disableKeypad,
     roofs,
     setRoofs,
     tabNum,
@@ -270,6 +274,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
     updateObjectDataApi,
   }
   const trestleProps = {
+    disableKeypad,
     roofs,
     setRoofs,
     setRoofsStore,
@@ -320,7 +325,10 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
           )}
         </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>
           {/* {tabNum === 1 && <button className="btn-frame modal mr5">{getMessage('modal.common.save')}</button>} */}
           {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && (
             <>

src/components/floor-plan/modal/basic/step/Orientation.jsx

@@ -24,6 +24,7 @@ export const Orientation = forwardRef((props, ref) => {
   const [moduleSeriesList, setModuleSeriesList] = useState([])
   const [filteredModuleList, setFilteredModuleList] = useState([])
   const {
+    disableKeypad,
     roofs,
     setRoofs,
     tabNum,
@@ -453,15 +454,12 @@ export const Orientation = forwardRef((props, ref) => {
                       value={inputCompasDeg}
                       readOnly={!hasAnglePassivity}
                       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(Math.min(180, Math.max(-180, numValue)));
-                          setInputCompasDeg(String(clampedValue));
-                        } else {
-                          setInputCompasDeg(value);
                         }
                       }}
+                      disableKeypad={disableKeypad}
                       options={{
                         allowNegative: true,
                         allowDecimal: false
@@ -564,6 +562,7 @@ export const Orientation = forwardRef((props, ref) => {
                         className="input-origin block"
                         value={inputMargin}
                         onChange={(value) => setInputMargin(value)}
+                        disableKeypad={disableKeypad}
                         options={{
                           allowNegative: false,
                           allowDecimal: false
@@ -609,6 +608,7 @@ export const Orientation = forwardRef((props, ref) => {
                           className="input-origin block"
                           value={inputInstallHeight}
                           onChange={(value) => handleChangeInstallHeight(value)}
+                          disableKeypad={disableKeypad}
                           options={{
                             allowNegative: false,
                             allowDecimal: false
@@ -649,6 +649,7 @@ export const Orientation = forwardRef((props, ref) => {
                           className="input-origin block"
                           value={inputVerticalSnowCover}
                           onChange={(value) => handleChangeVerticalSnowCover(value)}
+                          disableKeypad={disableKeypad}
                           options={{
                             allowNegative: false,
                             allowDecimal: false

src/components/floor-plan/modal/basic/step/Trestle.jsx

@@ -14,7 +14,7 @@ import { normalizeDigits } from '@/util/input-utils'
 import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 const Trestle = forwardRef((props, ref) => {
-  const { tabNum, setTabNum, trestleTrigger, roofs, setRoofs, moduleSelectionData, setModuleSelectionData, setRoofsStore } = props
+  const { tabNum, setTabNum, trestleTrigger, roofs, setRoofs, moduleSelectionData, setModuleSelectionData, setRoofsStore, disableKeypad } = props
   const { getMessage } = useMessage()
   // const [selectedTrestle, setSelectedTrestle] = useState()
   const currentAngleType = useRecoilValue(currentAngleTypeSelector)
@@ -936,6 +936,7 @@ const Trestle = forwardRef((props, ref) => {
                     className="input-origin block"
                     value={eavesMargin ?? 0}
                     onChange={(value) => setEavesMargin(value)}
+                    disableKeypad={disableKeypad}
                     options={{
                       allowNegative: false,
                       allowDecimal: false
@@ -961,6 +962,7 @@ const Trestle = forwardRef((props, ref) => {
                     className="input-origin block"
                     value={ridgeMargin ?? 0}
                     onChange={(value) => setRidgeMargin(value)}
+                    disableKeypad={disableKeypad}
                     options={{
                       allowNegative: false,
                       allowDecimal: false
@@ -986,6 +988,7 @@ const Trestle = forwardRef((props, ref) => {
                     className="input-origin block"
                     value={kerabaMargin ?? 0}
                     onChange={(value) => setKerabaMargin(value)}
+                    disableKeypad={disableKeypad}
                     options={{
                       allowNegative: false,
                       allowDecimal: false

src/components/floor-plan/modal/lineTypes/Angle.jsx

@@ -6,7 +6,7 @@ import { useEffect } from 'react'
 
 export default function Angle({ props }) {
   const { getMessage } = useMessage()
-  const { angle1, setAngle1, angle1Ref, length1, setLength1, length1Ref } = props
+  const { angle1, setAngle1, angle1Ref, length1, setLength1, length1Ref, disableKeypad } = props
 
   return (
     <>
@@ -45,6 +45,7 @@ export default function Angle({ props }) {
                   }}
                   placeholder="45"
                   onFocus={() => (angle1Ref.current.value = '')}
+                  disableKeypad={disableKeypad}
                   options={{
                     allowNegative: true,
                     allowDecimal: true
@@ -80,6 +81,7 @@ export default function Angle({ props }) {
                   onChange={(value) => setLength1(value)}
                   placeholder="3000"
                   onFocus={() => (length1Ref.current.value = '')}
+                  disableKeypad={disableKeypad}
                   options={{
                     allowNegative: false,
                     allowDecimal: false

src/components/floor-plan/modal/lineTypes/Diagonal.jsx

@@ -19,6 +19,7 @@ export default function Diagonal({ props }) {
     setArrow1,
     arrow2,
     setArrow2,
+    disableKeypad,
   } = props
   return (
     <>
@@ -50,6 +51,7 @@ export default function Diagonal({ props }) {
                 onChange={(value) => setDiagonalLength(value)}
                 placeholder="3000"
                 onFocus={() => (diagonalLengthRef.current.value = '')}
+                disableKeypad={disableKeypad}
                 options={{
                   allowNegative: false,
                   allowDecimal: false
@@ -87,6 +89,7 @@ export default function Diagonal({ props }) {
                 onChange={(value) => setLength1(value)}
                 placeholder="3000"
                 onFocus={() => (length1Ref.current.value = '')}
+                disableKeypad={disableKeypad}
                 options={{
                   allowNegative: false,
                   allowDecimal: false
@@ -160,6 +163,7 @@ export default function Diagonal({ props }) {
                 onChange={(value) => setLength2(value)}
                 placeholder="3000"
                 onFocus={() => (length2Ref.current.value = '')}
+                disableKeypad={disableKeypad}
                 options={{
                   allowNegative: false,
                   allowDecimal: false

src/components/floor-plan/modal/lineTypes/DoublePitch.jsx

@@ -24,6 +24,7 @@ export default function DoublePitch({ props }) {
     setArrow2,
     arrow1Ref,
     arrow2Ref,
+    disableKeypad,
   } = props
 
   const getLength2 = (angle1, angle2, length1) => {
@@ -68,6 +69,7 @@ export default function DoublePitch({ props }) {
                 onChange={(value) => setAngle1(value)}
                 placeholder="45"
                 onFocus={() => (angle1Ref.current.value = '')}
+                disableKeypad={disableKeypad}
                 options={{
                   allowNegative: false,
                   allowDecimal: true
@@ -100,6 +102,7 @@ export default function DoublePitch({ props }) {
                 onChange={(value) => setLength1(value)}
                 placeholder="3000"
                 onFocus={() => (length1Ref.current.value = '')}
+                disableKeypad={disableKeypad}
                 options={{
                   allowNegative: false,
                   allowDecimal: false
@@ -180,6 +183,7 @@ export default function DoublePitch({ props }) {
                 }}
                 placeholder="45"
                 onFocus={() => (angle2Ref.current.value = '')}
+                disableKeypad={disableKeypad}
                 options={{
                   allowNegative: false,
                   allowDecimal: true

src/components/floor-plan/modal/lineTypes/OuterLineWall.jsx

@@ -9,7 +9,7 @@ import { useEffect, useRef } from 'react'
 export default function OuterLineWall({ props }) {
   const { getMessage } = useMessage()
 
-  const { length1, setLength1, length1Ref, arrow1, setArrow1 } = props
+  const { length1, setLength1, length1Ref, arrow1, setArrow1, disableKeypad } = props
 
   // 키보드 입력 처리
   useEffect(() => {
@@ -81,6 +81,7 @@ export default function OuterLineWall({ props }) {
                    }}
               placeholder={'3000'}
               ref={length1Ref}
+              disableKeypad={disableKeypad}
               onFocus={() => {
                 if (length1Ref.current && length1Ref.current.value === '0') {
                   length1Ref.current.value = ''

src/components/floor-plan/modal/lineTypes/RightAngle.jsx

@@ -4,7 +4,7 @@ import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function RightAngle({ props }) {
   const { getMessage } = useMessage()
-  const { length1, setLength1, length1Ref, length2, setLength2, length2Ref, arrow1, setArrow1, arrow2, setArrow2 } = props
+  const { length1, setLength1, length1Ref, length2, setLength2, length2Ref, arrow1, setArrow1, arrow2, setArrow2, disableKeypad } = props
 
   const handleClickArrow = (arrow) => {
     const arrowType = arrow === '↑' ? 'ArrowUp' : arrow === '↓' ? 'ArrowDown' : arrow === '←' ? 'ArrowLeft' : arrow === '→' ? 'ArrowRight' : ''
@@ -42,6 +42,7 @@ export default function RightAngle({ props }) {
               ref={length1Ref}
               onChange={(value) => setLength1(value)}
               onFocus={() => (length1Ref.current.value = '')}
+              disableKeypad={disableKeypad}
               options={{
                 allowNegative: false,
                 allowDecimal: false
@@ -125,6 +126,7 @@ export default function RightAngle({ props }) {
               onFocus={() => (length2Ref.current.value = '')}
               onChange={(value) => setLength2(value)}
               placeholder="3000"
+              disableKeypad={disableKeypad}
               options={{
                 allowNegative: false,
                 allowDecimal: false

src/components/floor-plan/modal/object/ObjectSetting.jsx

@@ -14,6 +14,7 @@ import TriangleDormer from '@/components/floor-plan/modal/object/type/TriangleDo
 import PentagonDormer from '@/components/floor-plan/modal/object/type/PentagonDormer'
 import { usePopup } from '@/hooks/usePopup'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import Image from 'next/image'
 
 export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
@@ -21,6 +22,7 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
   const [buttonAct, setButtonAct] = useState(1)
   const { swalFire } = useSwal()
   const [isHidden, setIsHidden] = useState(false)
+  const [useCalcPad, setUseCalcPad] = useState(false)
   const { applyOpeningAndShadow, applyDormers } = useObjectBatch({ isHidden, setIsHidden })
   const { closePopup } = usePopup()
 
@@ -112,12 +114,15 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
           ))}
         </div>
         <div className="properties-setting-wrap outer">
-          {buttonAct === 1 && <OpenSpace ref={objectPlacement} />}
+          {buttonAct === 1 && <OpenSpace ref={objectPlacement} disableKeypad={!useCalcPad} />}
-          {buttonAct === 2 && <Shadow ref={objectPlacement} />}
+          {buttonAct === 2 && <Shadow ref={objectPlacement} disableKeypad={!useCalcPad} />}
-          {buttonAct === 3 && <TriangleDormer ref={dormerPlacement} />}
+          {buttonAct === 3 && <TriangleDormer ref={dormerPlacement} disableKeypad={!useCalcPad} />}
-          {buttonAct === 4 && <PentagonDormer ref={dormerPlacement} />}
+          {buttonAct === 4 && <PentagonDormer ref={dormerPlacement} disableKeypad={!useCalcPad} />}
         </div>
         <div className="grid-btn-wrap">
+          <button className="mr5" style={{ verticalAlign: 'middle' }} 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={() => {

src/components/floor-plan/modal/object/SizeSetting.jsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useRecoilValue } from 'recoil'
+import Image from 'next/image'
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { usePopup } from '@/hooks/usePopup'
@@ -23,6 +24,8 @@ export default function SizeSetting(props) {
   const heightRef = useRef(null)
   const [width, setWidth] = useState(target?.width ? (target.width * 10).toFixed() : 0)
   const [height, setHeight] = useState(target?.height ? (target.height * 10) : 0)
+  const [useCalcPad, setUseCalcPad] = useState(false)
+  const disableKeypad = !useCalcPad
   // const { initEvent } = useEvent()
   // const { initEvent } = useContext(EventContext)
 
@@ -72,6 +75,7 @@ export default function SizeSetting(props) {
                   value={width}
                   ref={widthRef}
                   onChange={(value) => setWidth(value)}
+                  disableKeypad={disableKeypad}
                   options={{
                     allowNegative: false,
                     allowDecimal: false
@@ -99,6 +103,7 @@ export default function SizeSetting(props) {
                     value={height}
                     ref={heightRef}
                     onChange={(value) => setHeight(value)}
+                    disableKeypad={disableKeypad}
                     options={{
                       allowNegative: false,
                       allowDecimal: false
@@ -117,7 +122,10 @@ export default function SizeSetting(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={() => handleReSizeObject(id)}>
             {getMessage('write')}
           </button>

src/components/floor-plan/modal/object/type/OpenSpace.jsx

@@ -3,7 +3,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { INPUT_TYPE } from '@/common/common'
 import { CalculatorInput } from '@/components/common/input/CalcInput'
 
-const OpenSpace = forwardRef((props, refs) => {
+const OpenSpace = forwardRef(({ disableKeypad }, refs) => {
   const { getMessage } = useMessage()
   const [selectedType, setSelectedType] = useState(INPUT_TYPE.FREE)
   const [width, setWidth] = useState(0)
@@ -70,6 +70,7 @@ const OpenSpace = forwardRef((props, refs) => {
                       ref={refs.widthRef}
                       onChange={(value) => setWidth(value)}
                       disabled={selectedType !== INPUT_TYPE.DIMENSION}
+                      disableKeypad={disableKeypad}
                       options={{
                         allowNegative: false,
                         allowDecimal: false
@@ -101,6 +102,7 @@ const OpenSpace = forwardRef((props, refs) => {
                       ref={refs.heightRef}
                       onChange={(value) => setHeight(value)}
                       disabled={selectedType !== INPUT_TYPE.DIMENSION}
+                      disableKeypad={disableKeypad}
                       options={{
                         allowNegative: false,
                         allowDecimal: false

src/components/floor-plan/modal/object/type/PentagonDormer.jsx

@@ -3,7 +3,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { forwardRef, useState } from 'react'
 import { CalculatorInput } from '@/components/common/input/CalcInput'
 
-const PentagonDormer = forwardRef((props, refs) => {
+const PentagonDormer = forwardRef(({ disableKeypad }, refs) => {
   const { getMessage } = useMessage()
   const [direction, setDirection] = useState('down')
   refs.directionRef.current = direction
@@ -45,6 +45,7 @@ const PentagonDormer = forwardRef((props, refs) => {
                         value={height}
                         ref={refs.heightRef}
                         onChange={(value) => setHeight(value)}
+                        disableKeypad={disableKeypad}
                         options={{
                           allowNegative: false,
                           allowDecimal: false
@@ -69,6 +70,7 @@ const PentagonDormer = forwardRef((props, refs) => {
                         value={offsetDepth}
                         ref={refs.offsetRef}
                         onChange={(value) => setOffsetDepth(value)}
+                        disableKeypad={disableKeypad}
                         options={{
                           allowNegative: false,
                           allowDecimal: false
@@ -96,6 +98,7 @@ const PentagonDormer = forwardRef((props, refs) => {
                         value={width}
                         ref={refs.widthRef}
                         onChange={(value) => setWidth(value)}
+                        disableKeypad={disableKeypad}
                         options={{
                           allowNegative: false,
                           allowDecimal: false
@@ -120,6 +123,7 @@ const PentagonDormer = forwardRef((props, refs) => {
                         value={offsetWidth}
                         ref={refs.offsetWidthRef}
                         onChange={(value) => setOffsetWidth(value)}
+                        disableKeypad={disableKeypad}
                         options={{
                           allowNegative: false,
                           allowDecimal: false
@@ -144,6 +148,7 @@ const PentagonDormer = forwardRef((props, refs) => {
                         ref={refs.pitchRef}
                         value={pitch}
                         onChange={(value) => setPitch(value)}
+                        disableKeypad={disableKeypad}
                         options={{
                           allowNegative: false,
                           allowDecimal: true //(index !== 0),

src/components/floor-plan/modal/object/type/Shadow.jsx

@@ -3,7 +3,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { INPUT_TYPE } from '@/common/common'
 import { CalculatorInput } from '@/components/common/input/CalcInput'
 
-const Shadow = forwardRef((props, refs) => {
+const Shadow = forwardRef(({ disableKeypad }, refs) => {
   const { getMessage } = useMessage()
 
   const [selectedType, setSelectedType] = useState(INPUT_TYPE.FREE)
@@ -70,6 +70,7 @@ const Shadow = forwardRef((props, refs) => {
                       ref={refs.widthRef}
                       onChange={(value) => setWidth(value)}
                       disabled={selectedType !== INPUT_TYPE.DIMENSION}
+                      disableKeypad={disableKeypad}
                       options={{
                         allowNegative: false,
                         allowDecimal: false
@@ -101,6 +102,7 @@ const Shadow = forwardRef((props, refs) => {
                       ref={refs.heightRef}
                       onChange={(value) => setHeight(value)}
                       disabled={selectedType !== INPUT_TYPE.DIMENSION}
+                      disableKeypad={disableKeypad}
                       options={{
                         allowNegative: false,
                         allowDecimal: false

src/components/floor-plan/modal/object/type/TriangleDormer.jsx

@@ -3,7 +3,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { forwardRef, useState } from 'react'
 import { CalculatorInput } from '@/components/common/input/CalcInput'
 
-const TriangleDormer = forwardRef((props, refs) => {
+const TriangleDormer = forwardRef(({ disableKeypad }, refs) => {
   const { getMessage } = useMessage()
   const [direction, setDirection] = useState('down')
   refs.directionRef.current = direction
@@ -43,6 +43,7 @@ const [pitch, setPitch] = useState(4)
                         value={height}
                         ref={refs.heightRef}
                         onChange={(value) => setHeight(value)}
+                        disableKeypad={disableKeypad}
                         options={{
                           allowNegative: false,
                           allowDecimal: false
@@ -67,6 +68,7 @@ const [pitch, setPitch] = useState(4)
                         value={offset}
                         ref={refs.offsetRef}
                         onChange={(value) => setOffset(value)}
+                        disableKeypad={disableKeypad}
                         options={{
                           allowNegative: false,
                           allowDecimal: false
@@ -91,6 +93,7 @@ const [pitch, setPitch] = useState(4)
                         ref={refs.pitchRef}
                         value={pitch}
                         onChange={(value) => setPitch(value)}
+                        disableKeypad={disableKeypad}
                         options={{
                           allowNegative: false,
                           allowDecimal: true

src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx

@@ -11,6 +11,7 @@ import DoublePitch from '@/components/floor-plan/modal/lineTypes/DoublePitch'
 import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal'
 import { usePopup } from '@/hooks/usePopup'
 import { useState } from 'react'
+import Image from 'next/image'
 import { v4 as uuidv4 } from 'uuid'
 
 export default function WallLineSetting(props) {
@@ -18,6 +19,7 @@ export default function WallLineSetting(props) {
   const { addPopup, closePopup } = usePopup()
   const { getMessage } = useMessage()
   const [propertiesId, setPropertiesId] = useState(uuidv4())
+  const [useCalcPad, setUseCalcPad] = useState(false)
   const {
     length1,
     setLength1,
@@ -46,12 +48,15 @@ export default function WallLineSetting(props) {
     handleFix,
   } = useOuterLineWall(id, propertiesId)
 
+  const disableKeypad = !useCalcPad
+
   const outerLineProps = {
     length1,
     setLength1,
     length1Ref,
     arrow1,
     setArrow1,
+    disableKeypad,
   }
 
   const rightAngleProps = {
@@ -65,6 +70,7 @@ export default function WallLineSetting(props) {
     setArrow1,
     arrow2,
     setArrow2,
+    disableKeypad,
   }
 
   const doublePitchProps = {
@@ -86,6 +92,7 @@ export default function WallLineSetting(props) {
     setArrow2,
     arrow1Ref,
     arrow2Ref,
+    disableKeypad,
   }
 
   const angleProps = {
@@ -95,6 +102,7 @@ export default function WallLineSetting(props) {
     length1,
     setLength1,
     length1Ref,
+    disableKeypad,
   }
 
   const diagonalLineProps = {
@@ -111,6 +119,7 @@ export default function WallLineSetting(props) {
     setArrow1,
     arrow2,
     setArrow2,
+    disableKeypad,
   }
 
   return (
@@ -164,6 +173,9 @@ export default function WallLineSetting(props) {
         </div>
         <div className="normal-font mt10">{getMessage('outerLine.property.info')}</div>
         <div className="grid-btn-wrap">
+          <button className="mr5" style={{ verticalAlign: 'middle' }} 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 mr5" onClick={handleRollback}>
             {getMessage('modal.cover.outline.rollback')}
           </button>

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

@@ -9,11 +9,13 @@ import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
 import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall'
 import { usePlacementShapeDrawing } from '@/hooks/surface/usePlacementShapeDrawing'
 import { usePopup } from '@/hooks/usePopup'
+import Image from 'next/image'
 
 export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const [buttonAct, setButtonAct] = useState(1)
+  const [useCalcPad, setUseCalcPad] = useState(false)
   const types = [
     { id: 1, name: getMessage('straight.line'), type: OUTER_LINE_TYPE.OUTER_LINE },
     { id: 2, name: getMessage('right.angle'), type: OUTER_LINE_TYPE.RIGHT_ANGLE },
@@ -49,12 +51,15 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
     handleFix,
   } = usePlacementShapeDrawing(id)
 
+  const disableKeypad = !useCalcPad
+
   const outerLineProps = {
     length1,
     setLength1,
     length1Ref,
     arrow1,
     setArrow1,
+    disableKeypad,
   }
 
   const rightAngleProps = {
@@ -68,6 +73,7 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
     setArrow1,
     arrow2,
     setArrow2,
+    disableKeypad,
   }
 
   const doublePitchProps = {
@@ -89,6 +95,7 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
     setArrow2,
     arrow1Ref,
     arrow2Ref,
+    disableKeypad,
   }
 
   const angleProps = {
@@ -98,6 +105,7 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
     length1,
     setLength1,
     length1Ref,
+    disableKeypad,
   }
 
   const diagonalLineProps = {
@@ -114,6 +122,7 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
     setArrow1,
     arrow2,
     setArrow2,
+    disableKeypad,
   }
 
   const onClickButton = (button) => {
@@ -140,6 +149,9 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
         </div>
 
         <div className="grid-btn-wrap">
+          <button className="mr5" style={{ verticalAlign: 'middle' }} 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 mr5" onClick={handleRollback}>
             {getMessage('modal.cover.outline.rollback')}
           </button>

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/placementSurface/PlacementSurface.jsx

@@ -5,7 +5,7 @@ import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 const PlacementSurface = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
-  const { id, lines, info, rotate, xInversion, yInversion } = props
+  const { id, lines, info, rotate, xInversion, yInversion, disableKeypad } = props
   let { length1, length2, length3, length4, length5, lengthetc, azimuth } = refs
 
   const [azimuthDirection, setAzimuthDirection] = useState(azimuth.current)
@@ -114,6 +114,7 @@ const PlacementSurface = forwardRef((props, refs) => {
                                         ? length4
                                         : length5
                             }
+                            disableKeypad={disableKeypad}
                             options={{
                               allowNegative: false,
                               allowDecimal: false

src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx

@@ -19,6 +19,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
   const canvas = useRecoilValue(canvasState)
   const { closePopup } = usePopup()
   const [isHidden, setIsHidden] = useState(false)
+  const [useCalcPad, setUseCalcPad] = useState(false)
 
   const { applySurfaceShape } = useSurfaceShapeBatch({ isHidden, setIsHidden })
 
@@ -217,6 +218,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
     rotate,
     xInversion,
     yInversion,
+    disableKeypad: !useCalcPad,
   }
 
   const getInversionState = () => {
@@ -291,7 +293,10 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
           </div>
           <div className="plane-detail-wrap">
             <PlacementSurface {...placementSurfaceProps} ref={surfaceRefs} />
-            <div className="plane-shape-btn">
+            <div className="plane-shape-btn" style={{ display: 'flex', alignItems: 'center', 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={applySurfaces}>
                 {getMessage('write')}
               </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>

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

@@ -7,9 +7,11 @@ import Direction from '@/components/floor-plan/modal/roofShape/type/Direction'
 import { useRoofShapeSetting } from '@/hooks/roofcover/useRoofShapeSetting'
 import { useMessage } from '@/hooks/useMessage'
 import { usePopup } from '@/hooks/usePopup'
+import { useState } from 'react'
 
 export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
+  const [useCalcPad, setUseCalcPad] = useState(false)
   const {
     shapeNum,
     setShapeNum,
@@ -44,8 +46,10 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
   } = useRoofShapeSetting(id)
   const { closePopup } = usePopup()
 
-  const ridgeProps = { pitch, setPitch, eavesOffset, setEavesOffset, pitchText }
+  const disableKeypad = !useCalcPad
-  const patternProps = { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, pitchText }
+
+  const ridgeProps = { pitch, setPitch, eavesOffset, setEavesOffset, pitchText, disableKeypad }
+  const patternProps = { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, pitchText, disableKeypad }
   const sideProps = {
     pitch,
     setPitch,
@@ -73,6 +77,7 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
     handleConfirm,
     handleRollBack,
     pitchText,
+    disableKeypad,
   }
 
   const directionProps = {
@@ -85,6 +90,7 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
     shedWidth,
     setShedWidth,
     pitchText,
+    disableKeypad,
   }
 
   return (
@@ -108,6 +114,9 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
           {(shapeNum === 5 || shapeNum === 6 || shapeNum === 7 || shapeNum === 8) && <Direction {...directionProps} />}
         </div>
         <div className="grid-btn-wrap">
+          <button className="mr5" style={{ verticalAlign: 'middle' }} 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/type/Direction.jsx

@@ -2,7 +2,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
 import { CalculatorInput } from '@/components/common/input/CalcInput'
 
-export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, shedWidth, setShedWidth, pitchText }) {
+export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, shedWidth, setShedWidth, pitchText, disableKeypad }) {
   const { getMessage } = useMessage()
   return (
     <div className="setting-box">
@@ -24,6 +24,7 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
             className="input-origin block"
             value={pitch}
             onChange={(value) => setPitch(value)}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: true //(index !== 0),
@@ -50,6 +51,7 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
             className="input-origin block"
             value={eavesOffset}
             onChange={(value) => setEavesOffset(value)}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: false //(index !== 0),
@@ -76,6 +78,7 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
             className="input-origin block"
             value={gableOffset}
             onChange={(value) => setGableOffset(value)}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: false //(index !== 0),
@@ -102,6 +105,7 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
             className="input-origin block"
             value={shedWidth}
             onChange={(value) => setShedWidth(value)}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: false //(index !== 0),

src/components/floor-plan/modal/roofShape/type/Pattern.jsx

@@ -4,7 +4,7 @@ import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Pattern(props) {
   const { getMessage } = useMessage()
-  const { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, pitchText } = props
+  const { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, pitchText, disableKeypad } = props
   return (
     <div className="setting-box">
       <div className="outline-form mb10">
@@ -21,6 +21,7 @@ export default function Pattern(props) {
             className="input-origin block"
             value={pitch}
             onChange={(value) => setPitch(value)}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: true //(index !== 0),
@@ -43,6 +44,7 @@ export default function Pattern(props) {
             className="input-origin block"
             value={eavesOffset}
             onChange={(value) => setEavesOffset(value)}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: false //(index !== 0),
@@ -65,6 +67,7 @@ export default function Pattern(props) {
             className="input-origin block"
             value={gableOffset}
             onChange={(value) => setGableOffset(value)}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: false //(index !== 0),

src/components/floor-plan/modal/roofShape/type/Ridge.jsx

@@ -5,7 +5,7 @@ import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Ridge(props) {
   const { getMessage } = useMessage()
-  const { pitch, setPitch, eavesOffset, setEavesOffset, pitchText } = props
+  const { pitch, setPitch, eavesOffset, setEavesOffset, pitchText, disableKeypad } = props
 
   return (
     <div className="setting-box">
@@ -23,6 +23,7 @@ export default function Ridge(props) {
             className="input-origin block"
             value={pitch}
             onChange={(value) => setPitch(value)}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: true //(index !== 0),
@@ -45,6 +46,7 @@ export default function Ridge(props) {
             className="input-origin block"
             value={eavesOffset}
             onChange={(value) => setEavesOffset(value)}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: false //(index !== 0),

src/components/floor-plan/modal/roofShape/type/Side.jsx

@@ -35,14 +35,15 @@ export default function Side(props) {
     pitchText,
     shedPitch,
     setShedPitch,
+    disableKeypad,
   } = props
 
-  const eavesProps = { pitch, setPitch, eavesOffset, setEavesOffset, pitchText }
+  const eavesProps = { pitch, setPitch, eavesOffset, setEavesOffset, pitchText, disableKeypad }
-  const gableProps = { gableOffset, setGableOffset }
+  const gableProps = { gableOffset, setGableOffset, disableKeypad }
-  const wallProps = { sleeveOffset, setSleeveOffset, hasSleeve, setHasSleeve }
+  const wallProps = { sleeveOffset, setSleeveOffset, hasSleeve, setHasSleeve, disableKeypad }
-  const hipAndGableProps = { pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText }
+  const hipAndGableProps = { pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText, disableKeypad }
-  const jerkinheadProps = { gableOffset, setGableOffset, jerkinHeadWidth, setJerkinHeadWidth, jerkinHeadPitch, setJerkinHeadPitch, pitchText }
+  const jerkinheadProps = { gableOffset, setGableOffset, jerkinHeadWidth, setJerkinHeadWidth, jerkinHeadPitch, setJerkinHeadPitch, pitchText, disableKeypad }
-  const shedProps = { shedWidth, setShedWidth, shedPitch, setShedPitch, pitchText }
+  const shedProps = { shedWidth, setShedWidth, shedPitch, setShedPitch, pitchText, disableKeypad }
 
   const { getMessage } = useMessage()
 

src/components/floor-plan/modal/roofShape/type/option/Eaves.jsx

@@ -2,7 +2,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
 import { CalculatorInput } from '@/components/common/input/CalcInput'
 
-export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset, pitchText }) {
+export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset, pitchText, disableKeypad }) {
   const { getMessage } = useMessage()
   return (
     <>
@@ -20,6 +20,7 @@ export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset, pi
             className="input-origin block"
             value={pitch}
             onChange={(value) => setPitch(value)}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: true //(index !== 0),
@@ -43,6 +44,7 @@ export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset, pi
             className="input-origin block"
             value={eavesOffset}
             onChange={(value) => setEavesOffset(value)}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: false //(index !== 0),

src/components/floor-plan/modal/roofShape/type/option/Gable.jsx

@@ -3,7 +3,7 @@ import { useEffect } from 'react'
 import { normalizeDigits } from '@/util/input-utils'
 import { CalculatorInput } from '@/components/common/input/CalcInput'
 
-export default function Gable({ gableOffset, setGableOffset }) {
+export default function Gable({ gableOffset, setGableOffset, disableKeypad }) {
   const { getMessage } = useMessage()
 
   return (
@@ -20,6 +20,7 @@ export default function Gable({ gableOffset, setGableOffset }) {
             className="input-origin block"
             value={gableOffset}
             onChange={(value) => setGableOffset(value)}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: false //(index !== 0),

src/components/floor-plan/modal/roofShape/type/option/HipAndGable.jsx

@@ -2,7 +2,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
 import { CalculatorInput } from '@/components/common/input/CalcInput'
 
-export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText }) {
+export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText, disableKeypad }) {
   const { getMessage } = useMessage()
   return (
     <>
@@ -20,6 +20,7 @@ export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffs
             className="input-origin block"
             value={pitch}
             onChange={(value) => setPitch(value)}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: true //(index !== 0),
@@ -42,6 +43,7 @@ export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffs
             className="input-origin block"
             value={eavesOffset}
             onChange={(value) => setEavesOffset(value)}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: false //(index !== 0),
@@ -69,6 +71,7 @@ export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffs
             className="input-origin block"
             value={hipAndGableWidth}
             onChange={(value) => setHipAndGableWidth(value)}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: false //(index !== 0),

src/components/floor-plan/modal/roofShape/type/option/Jerkinhead.jsx

@@ -10,6 +10,7 @@ export default function Jerkinhead({
   jerkinHeadPitch,
   setJerkinHeadPitch,
   pitchText,
+  disableKeypad,
 }) {
   const { getMessage } = useMessage()
   return (
@@ -28,6 +29,7 @@ export default function Jerkinhead({
             className="input-origin block"
             value={gableOffset}
             onChange={(value) => setGableOffset(value)}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: false //(index !== 0),
@@ -51,6 +53,7 @@ export default function Jerkinhead({
             className="input-origin block"
             value={jerkinHeadWidth}
             onChange={(value) => setJerkinHeadWidth(value)}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: false //(index !== 0),
@@ -77,6 +80,7 @@ export default function Jerkinhead({
             className="input-origin block"
             value={jerkinHeadPitch}
             onChange={(value) => setJerkinHeadPitch(value)}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: true //(index !== 0),

src/components/floor-plan/modal/roofShape/type/option/Shed.jsx

@@ -2,7 +2,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
 import { CalculatorInput } from '@/components/common/input/CalcInput'
 
-export default function Shed({ shedWidth, setShedWidth, shedPitch, setShedPitch, pitchText }) {
+export default function Shed({ shedWidth, setShedWidth, shedPitch, setShedPitch, pitchText, disableKeypad }) {
   const { getMessage } = useMessage()
   return (
     <>
@@ -18,6 +18,7 @@ export default function Shed({ shedWidth, setShedWidth, shedPitch, setShedPitch,
             className="input-origin block"
             value={shedPitch}
             onChange={(value) => setShedPitch(value)}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: true //(index !== 0),
@@ -38,6 +39,7 @@ export default function Shed({ shedWidth, setShedWidth, shedPitch, setShedPitch,
             className="input-origin block"
             value={shedWidth}
             onChange={(value) => setShedWidth(value)}
+            disableKeypad={disableKeypad}
             options={{
               allowNegative: false,
               allowDecimal: false //(index !== 0),

src/components/floor-plan/modal/roofShape/type/option/Wall.jsx

@@ -3,7 +3,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { normalizeDigits } from '@/util/input-utils'
 import { CalculatorInput } from '@/components/common/input/CalcInput'
 
-export default function Wall({ sleeveOffset, setSleeveOffset, hasSleeve, setHasSleeve }) {
+export default function Wall({ sleeveOffset, setSleeveOffset, hasSleeve, setHasSleeve, disableKeypad }) {
   const { getMessage } = useMessage()
   return (
     <>
@@ -43,6 +43,7 @@ export default function Wall({ sleeveOffset, setSleeveOffset, hasSleeve, setHasS
                   value={sleeveOffset}
                   onChange={(value) => setSleeveOffset(value)}
                   readOnly={hasSleeve === '0'}
+                  disableKeypad={disableKeypad}
                   options={{
                     allowNegative: false,
                     allowDecimal: false //(index !== 0),

src/components/management/StuffDetail.jsx

@@ -24,8 +24,11 @@ import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 import { useSwal } from '@/hooks/useSwal'
 import { sanitizeIntegerInputEvent } from '@/util/input-utils'
 import { CalculatorInput } from '@/components/common/input/CalcInput'
+import Image from 'next/image'
 
 export default function StuffDetail() {
+  const [useCalcPad, setUseCalcPad] = useState(false)
+  const disableKeypad = !useCalcPad
   const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
   const { swalFire } = useSwal()
   const { setIsGlobalLoading } = useContext(QcastContext)
@@ -1761,6 +1764,9 @@ export default function StuffDetail() {
                 >
                   {getMessage('stuff.detail.btn.moveList')}
                 </button>
+                <button style={{ width: 'auto', marginLeft: '8px' }} type="button" onClick={() => setUseCalcPad((prev) => !prev)}>
+                  <Image src={useCalcPad ? '/static/images/common/Icon_ON.png' : '/static/images/common/Icon_OFF.png'} alt="toggle" width={34} height={34} />
+                </button>
               </div>
             </div>
             <div className="infomation-table">
@@ -2161,6 +2167,7 @@ export default function StuffDetail() {
                             className="input-light"
                             value={form.watch('verticalSnowCover') || ''}
                             onChange={(value) => form.setValue('verticalSnowCover', value)}
+                            disableKeypad={disableKeypad}
                             options={{
                               allowNegative: false,
                               allowDecimal: false,
@@ -2233,6 +2240,7 @@ export default function StuffDetail() {
                             className="input-light"
                             value={form.watch('installHeight') || ''}
                             onChange={(value) => form.setValue('installHeight', value)}
+                            disableKeypad={disableKeypad}
                             options={{
                               allowNegative: false,
                               allowDecimal: false,
@@ -2286,6 +2294,9 @@ export default function StuffDetail() {
               >
                 {getMessage('stuff.detail.btn.moveList')}
               </button>
+              <button style={{ width: 'auto', marginLeft: '8px' }} type="button" onClick={() => setUseCalcPad((prev) => !prev)}>
+                <Image src={useCalcPad ? '/static/images/common/Icon_ON.png' : '/static/images/common/Icon_OFF.png'} alt="toggle" width={34} height={34} />
+              </button>
             </div>
           </div>
         </form>
@@ -2310,12 +2321,16 @@ export default function StuffDetail() {
                       >
                         {getMessage('stuff.detail.btn.moveList')}
                       </button>
+
                       <button type="button" onClick={() => onValid('save')} className="btn-origin navy mr5" style={{ display: showButton }}>
                         {getMessage('stuff.detail.btn.save')}
                       </button>
                       <button type="button" className="btn-origin grey" onClick={onDelete} style={{ display: showButton }}>
                         {getMessage('stuff.detail.btn.delete')}
                       </button>
+                      <button style={{ width: 'auto', marginLeft: '8px', marginRight: '8px' }} type="button" onClick={() => setUseCalcPad((prev) => !prev)}>
+                        <Image src={useCalcPad ? '/static/images/common/Icon_ON.png' : '/static/images/common/Icon_OFF.png'} alt="toggle" width={34} height={34} />
+                      </button>
                     </div>
                   </>
                 ) : (
@@ -2337,6 +2352,9 @@ export default function StuffDetail() {
                       >
                         {getMessage('stuff.detail.btn.moveList')}
                       </button>
+                      <button style={{ width: 'auto', marginLeft: '8px' }} type="button" onClick={() => setUseCalcPad((prev) => !prev)}>
+                        <Image src={useCalcPad ? '/static/images/common/Icon_ON.png' : '/static/images/common/Icon_OFF.png'} alt="toggle" width={34} height={34} />
+                      </button>
                     </div>
                   </>
                 )}
@@ -2757,6 +2775,7 @@ export default function StuffDetail() {
                                 className="input-light"
                                 value={form.watch('verticalSnowCover') || ''}
                                 onChange={(value) => form.setValue('verticalSnowCover', value)}
+                                disableKeypad={disableKeypad}
                                 options={{
                                   allowNegative: false,
                                   allowDecimal: false,
@@ -2833,6 +2852,7 @@ export default function StuffDetail() {
                                 className="input-light"
                                 value={form.watch('installHeight') || ''}
                                 onChange={(value) => form.setValue('installHeight', value)}
+                                disableKeypad={disableKeypad}
                                 options={{
                                   allowNegative: false,
                                   allowDecimal: false,
@@ -2917,12 +2937,16 @@ export default function StuffDetail() {
                     >
                       {getMessage('stuff.detail.btn.moveList')}
                     </button>
+
                     <button type="button" onClick={() => onValid('save')} className="btn-origin navy mr5" style={{ display: showButton }}>
                       {getMessage('stuff.detail.btn.save')}
                     </button>
                     <button type="button" className="btn-origin grey" onClick={onDelete} style={{ display: showButton }}>
                       {getMessage('stuff.detail.btn.delete')}
                     </button>
+                    <button style={{ width: 'auto', marginLeft: '8px', marginRight: '8px' }} type="button" onClick={() => setUseCalcPad((prev) => !prev)}>
+                      <Image src={useCalcPad ? '/static/images/common/Icon_ON.png' : '/static/images/common/Icon_OFF.png'} alt="toggle" width={34} height={34} />
+                    </button>
                   </div>
                 </>
               ) : (
@@ -2944,6 +2968,9 @@ export default function StuffDetail() {
                     >
                       {getMessage('stuff.detail.btn.moveList')}
                     </button>
+                    <button style={{ width: 'auto', marginLeft: '8px' }} type="button" onClick={() => setUseCalcPad((prev) => !prev)}>
+                      <Image src={useCalcPad ? '/static/images/common/Icon_ON.png' : '/static/images/common/Icon_OFF.png'} alt="toggle" width={34} height={34} />
+                    </button>
                   </div>
                 </>
               )}

src/hooks/module/useTrestle.js

@@ -106,6 +106,7 @@ export const useTrestle = () => {
           console.log('모듈이 없거나 계산 실패:', surface.modules?.length || 0)
           return
         }
+
         const centerPoints = result.centerPoints
 
         const exposedBottomModules = [] // 아래 두면이 모두 노출 되어있는 경우
@@ -164,11 +165,8 @@ export const useTrestle = () => {
 
         if (isEaveBar) {
           // 처마력바설치 true인 경우 설치
+          // exposedBottomModules는 아래가 노출된 최하단 모듈이므로 level 체크 없이 항상 설치
           exposedBottomModules.forEach((module) => {
-            const level = module.level
-            if (level > cvrLmtRow) {
-              return
-            }
             const bottomPoints = findTopTwoPoints([...module.getCurrentPoints()], direction)
             if (!bottomPoints) return
             const eaveBar = new fabric.Line([bottomPoints[0].x, bottomPoints[0].y, bottomPoints[1].x, bottomPoints[1].y], {