補助線の作成 토글추가

src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx

@@ -8,14 +8,17 @@ import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
 import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall'
 import { useAuxiliaryDrawing } from '@/hooks/roofcover/useAuxiliaryDrawing'
 import { usePopup } from '@/hooks/usePopup'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
+import Image from 'next/image'
 
 export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
   const canvas = useRecoilValue(canvasState)
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
+  const [useCalcPad, setUseCalcPad] = useState(false)
+  const disableKeypad = !useCalcPad
 
   const types = [
     { id: 1, name: getMessage('straight.line'), type: OUTER_LINE_TYPE.OUTER_LINE },
@@ -71,6 +74,7 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
     length1Ref,
     arrow1,
     setArrow1,
+    disableKeypad,
   }
 
   const rightAngleProps = {
@@ -84,6 +88,7 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
     setArrow1,
     arrow2,
     setArrow2,
+    disableKeypad,
   }
 
   const doublePitchProps = {
@@ -105,6 +110,7 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
     setArrow2,
     arrow1Ref,
     arrow2Ref,
+    disableKeypad,
   }
 
   const angleProps = {
@@ -114,6 +120,7 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
     length1,
     setLength1,
     length1Ref,
+    disableKeypad,
   }
 
   const diagonalLineProps = {
@@ -130,6 +137,7 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
     setArrow1,
     arrow2,
     setArrow2,
+    disableKeypad,
   }
 
   const onClickButton = (button) => {
@@ -160,7 +168,10 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
           {buttonAct === 4 && <Angle props={angleProps} />}
           {buttonAct === 5 && <Diagonal props={diagonalLineProps} />}
         </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' }} 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>
           <button className="btn-frame modal mr5" onClick={handleRollback}>
             {getMessage('modal.cover.outline.rollback')}
           </button>