オブジェクト配置 - 계산기 토클버튼 추가

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/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