屋根形状の設定 - 계산기 토클버튼 추가

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),