軒/ケラバ変更 토글추가

src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx

@@ -6,10 +6,14 @@ import WallMerge from '@/components/floor-plan/modal/eavesGable/type/WallMerge'
 import Shed from '@/components/floor-plan/modal/eavesGable/type/Shed'
 import { useEavesGableEdit } from '@/hooks/roofcover/useEavesGableEdit'
 import { usePopup } from '@/hooks/usePopup'
+import { useState } from 'react'
+import Image from 'next/image'
 
 export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
+  const [useCalcPad, setUseCalcPad] = useState(false)
+  const disableKeypad = !useCalcPad
 
   const { type, setType, buttonMenu, TYPES, pitchRef, offsetRef, widthRef, radioTypeRef, pitchText } = useEavesGableEdit(id)
   const eavesProps = {
@@ -18,6 +22,7 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
     widthRef,
     radioTypeRef,
     pitchText,
+    disableKeypad,
   }
 
   const gableProps = {
@@ -26,15 +31,18 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
     widthRef,
     radioTypeRef,
     pitchText,
+    disableKeypad,
   }
 
   const wallMergeProps = {
     offsetRef,
     radioTypeRef,
+    disableKeypad,
   }
 
   const shedProps = {
     offsetRef,
+    disableKeypad,
   }
 
   return (
@@ -48,8 +56,13 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
             </button>
           ))}
         </div>
-        <div className="properties-setting-wrap outer">
+        <div className="properties-setting-wrap outer" style={{margin: '10px'}}>
-          <div className="setting-tit">{getMessage('setting')}</div>
+          <div className="setting-tit" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <span>{getMessage('setting')}</span>
+            <button style={{ width: 'auto' }} type="button" onClick={() => setUseCalcPad((prev) => !prev)}>
+              <Image src={useCalcPad ? '/static/images/common/Icon_ON_Black.png' : '/static/images/common/Icon_OFF_Black.png'} alt="toggle" width={34} height={34} />
+            </button>
+          </div>
           {type === TYPES.EAVES && <Eaves {...eavesProps} />}
           {type === TYPES.GABLE && <Gable {...gableProps} />}
           {type === TYPES.WALL_MERGE && <WallMerge {...wallMergeProps} />}

src/components/floor-plan/modal/eavesGable/type/Eaves.jsx

@@ -6,7 +6,7 @@ import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
 import { CalculatorInput } from '@/components/common/input/CalcInput'
 
-export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pitchText }) {
+export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pitchText, disableKeypad }) {
   const { getMessage } = useMessage()
   const [type, setType] = useState('1')
   const onChange = (e) => {
@@ -43,6 +43,7 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
               onChange={(value) => {
                 if (pitchRef?.current) pitchRef.current.value = value
               }}
+              disableKeypad={disableKeypad}
               options={{
                 allowNegative: false,
                 allowDecimal: true //(index !== 0),
@@ -77,6 +78,7 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
               onChange={(value) => {
                 if (offsetRef?.current) offsetRef.current.value = value
               }}
+              disableKeypad={disableKeypad}
               options={{
                 allowNegative: false,
                 allowDecimal: false //(index !== 0),
@@ -144,6 +146,7 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
                     onChange={(value) => {
                       if (widthRef?.current) widthRef.current.value = value
                     }}
+                    disableKeypad={disableKeypad}
                     options={{
                       allowNegative: false,
                       allowDecimal: false //(index !== 0),

src/components/floor-plan/modal/eavesGable/type/Gable.jsx

@@ -5,7 +5,7 @@ import { useRecoilValue } from 'recoil'
 import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
 import { CalculatorInput } from '@/components/common/input/CalcInput'
 
-export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pitchText }) {
+export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pitchText, disableKeypad }) {
   const { getMessage } = useMessage()
   const [type, setType] = useState('1')
   const onChange = (e) => {
@@ -30,6 +30,7 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
               className="input-origin block"
               ref={offsetRef}
               value={300}
+              disableKeypad={disableKeypad}
               options={{
                 allowNegative: false,
                 allowDecimal: false //(index !== 0),
@@ -96,6 +97,7 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
                     onChange={(value) => {
                       if (pitchRef?.current) pitchRef.current.value = value
                     }}
+                    disableKeypad={disableKeypad}
                     options={{
                       allowNegative: false,
                       allowDecimal: true //(index !== 0),
@@ -129,6 +131,7 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
                     ref={widthRef}
                     value={800}
                     readOnly={type === '1'}
+                    disableKeypad={disableKeypad}
                     options={{
                       allowNegative: false,
                       allowDecimal: false //(index !== 0),

src/components/floor-plan/modal/eavesGable/type/Shed.jsx

@@ -1,7 +1,7 @@
 import { useMessage } from '@/hooks/useMessage'
 import { CalculatorInput } from '@/components/common/input/CalcInput'
 
-export default function Shed({ offsetRef }) {
+export default function Shed({ offsetRef, disableKeypad }) {
   const { getMessage } = useMessage()
   return (
     <>
@@ -19,6 +19,7 @@ export default function Shed({ offsetRef }) {
               className="input-origin block"
               ref={offsetRef}
               value={300}
+              disableKeypad={disableKeypad}
               options={{
                 allowNegative: false,
                 allowDecimal: false //(index !== 0),

src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx

@@ -3,7 +3,7 @@ import Image from 'next/image'
 import { useState } from 'react'
 import { CalculatorInput } from '@/components/common/input/CalcInput'
 
-export default function WallMerge({ offsetRef, radioTypeRef }) {
+export default function WallMerge({ offsetRef, radioTypeRef, disableKeypad }) {
   const { getMessage } = useMessage()
   const [type, setType] = useState('1')
   const onChange = (e) => {
@@ -61,6 +61,7 @@ export default function WallMerge({ offsetRef, radioTypeRef }) {
                     ref={offsetRef}
                     value={300}
                     readOnly={type === '1'}
+                    disableKeypad={disableKeypad}
                     options={{
                       allowNegative: false,
                       allowDecimal: false //(index !== 0),