diff --git a/public/static/images/common/Icon_OFF_Black.png b/public/static/images/common/Icon_OFF_Black.png
new file mode 100644
index 00000000..c77f8311
Binary files /dev/null and b/public/static/images/common/Icon_OFF_Black.png differ
diff --git a/public/static/images/common/Icon_ON_Black.png b/public/static/images/common/Icon_ON_Black.png
new file mode 100644
index 00000000..04c22ff7
Binary files /dev/null and b/public/static/images/common/Icon_ON_Black.png differ
diff --git a/src/components/common/input/CalcInput.jsx b/src/components/common/input/CalcInput.jsx
index e8a97b93..a92b86c7 100644
--- a/src/components/common/input/CalcInput.jsx
+++ b/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
diff --git a/src/components/floor-plan/modal/lineTypes/Angle.jsx b/src/components/floor-plan/modal/lineTypes/Angle.jsx
index 97bbe416..ad305025 100644
--- a/src/components/floor-plan/modal/lineTypes/Angle.jsx
+++ b/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
diff --git a/src/components/floor-plan/modal/lineTypes/Diagonal.jsx b/src/components/floor-plan/modal/lineTypes/Diagonal.jsx
index 7ab0e3ec..cc3b16d4 100644
--- a/src/components/floor-plan/modal/lineTypes/Diagonal.jsx
+++ b/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
diff --git a/src/components/floor-plan/modal/lineTypes/DoublePitch.jsx b/src/components/floor-plan/modal/lineTypes/DoublePitch.jsx
index 4919462b..0f3ee8b1 100644
--- a/src/components/floor-plan/modal/lineTypes/DoublePitch.jsx
+++ b/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
diff --git a/src/components/floor-plan/modal/lineTypes/OuterLineWall.jsx b/src/components/floor-plan/modal/lineTypes/OuterLineWall.jsx
index ffbfa9f4..09ff9644 100644
--- a/src/components/floor-plan/modal/lineTypes/OuterLineWall.jsx
+++ b/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 = ''
diff --git a/src/components/floor-plan/modal/lineTypes/RightAngle.jsx b/src/components/floor-plan/modal/lineTypes/RightAngle.jsx
index a4356b4a..0849078e 100644
--- a/src/components/floor-plan/modal/lineTypes/RightAngle.jsx
+++ b/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
diff --git a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
index 8d79f223..21ede5ec 100644
--- a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
+++ b/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>
diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
index 8010675d..95758b8c 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
+++ b/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>
diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
index 4ede1367..1a7df9d8 100644
--- a/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
+++ b/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
diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
index ae29b778..47a73ab7 100644
--- a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
+++ b/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>