버튼 visible 상태 수정

src/components/Roof2.jsx

@@ -5,7 +5,7 @@ import { Button } from '@nextui-org/react'
 
 import RangeSlider from './ui/RangeSlider'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { canvasSizeState, fontSizeState, roofMaterialState, sortedPolygonArray } from '@/store/canvasAtom'
+import { canvasSizeState, fontSizeState, roofMaterialState, sortedPolygonArray, templateTypeState } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { getCanvasState, insertCanvasState } from '@/lib/canvas'
 import { calculateIntersection } from '@/util/canvas-util'
@@ -34,6 +34,8 @@ export default function Roof2() {
   //지붕재
   const roofMaterial = useRecoilValue(roofMaterialState)
 
+  const [templateType, setTemplateType] = useRecoilState(templateTypeState)
+
   const {
     mode,
     setMode,
@@ -260,6 +262,7 @@ export default function Roof2() {
 
     canvas?.add(polygon)
     handleOuterlinesTest2(polygon, 50)
+    setTemplateType(1)
   }
 
   const rotateShape = () => {
@@ -477,21 +480,21 @@ export default function Roof2() {
             <Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => setMode(Mode.TEXTBOX)}>
               텍스트박스 모드
             </Button>
-            <Button className="m-1 p-2" onClick={handleUndo}>
+            {/*<Button className="m-1 p-2" onClick={handleUndo}>
               Undo
             </Button>
             <Button className="m-1 p-2" onClick={handleRedo}>
               Redo
-            </Button>
+            </Button>*/}
             <Button className="m-1 p-2" onClick={handleClear}>
               clear
             </Button>
-            <Button className="m-1 p-2" onClick={zoomIn}>
+            {/*<Button className="m-1 p-2" onClick={zoomIn}>
               확대
             </Button>
             <Button className="m-1 p-2" onClick={zoomOut}>
               축소
-            </Button>
+            </Button>*/}
             현재 줌 : {zoom}%
             <Button className="m-1 p-2" onClick={makeLine}>
               선 추가
@@ -499,52 +502,54 @@ export default function Roof2() {
             <Button className="m-1 p-2" onClick={makePolygon}>
               다각형 추가
             </Button>
-            <Button
+            {templateType === 0 && (
-              className="m-1 p-2"
+              <>
-              onClick={() => {
+                <Button
-                setCanvasBackgroundWithDots(canvas, 10)
+                  className="m-1 p-2"
-              }}
+                  onClick={() => {
-            >
+                    setCanvasBackgroundWithDots(canvas, 10)
-              점선 추가
+                  }}
-            </Button>
+                >
-            <Button
+                  점선 추가
-              className="m-1 p-2"
+                </Button>
-              onClick={() => {
+                <Button
-                setCanvasBackgroundWithDots(canvas, 20)
+                  className="m-1 p-2"
-              }}
+                  onClick={() => {
-            >
+                    setCanvasBackgroundWithDots(canvas, 20)
-              점선 추가
+                  }}
-            </Button>
+                >
+                  점선 추가
+                </Button>
+                <Button className="m-1 p-2" onClick={makeQPolygon}>
+                  QPolygon
+                </Button>
+              </>
+            )}
             <Button className="m-1 p-2" onClick={saveImage}>
               저장
             </Button>
-            <Button className="m-1 p-2" onClick={makeQPolygon}>
+            {/*<Button className="m-1 p-2" onClick={rotateShape}>
-              QPolygon
-            </Button>
-            <Button className="m-1 p-2" onClick={rotateShape}>
               회전
-            </Button>
+            </Button>*/}
-            <Button className="m-1 p-2" onClick={makeQLine}>
+            {/*<Button className="m-1 p-2" onClick={makeQLine}>
               QLine
             </Button>
             <Button className="m-1 p-2" onClick={PolygonToLine}>
               PolygonToLine
             </Button>
-            {/*<Button className="m-1 p-2" onClick={handleSaveCanvas}>
-              canvas 내용 저장하기
-            </Button>
-            <Button className="m-1 p-2" onClick={handleLoadCanvas}>
-              canvas 내용 불러오기
-            </Button>*/}
             <Button className="m-1 p-2" onClick={addCanvas}>
               캔버스 추가
-            </Button>
+            </Button>*/}
-            <Button className="m-1 p-2" onClick={drawRoofMaterial}>
+            {templateType === 1 && (
-              지붕타입 지붕재
+              <>
-            </Button>
+                <Button className="m-1 p-2" onClick={drawRoofMaterial}>
-            <Button className="m-1 p-2" onClick={createRoofRack}>
+                  지붕타입 지붕재
-              지붕가대
+                </Button>
-            </Button>
+                <Button className="m-1 p-2" onClick={createRoofRack}>
+                  지붕가대
+                </Button>
+              </>
+            )}
             <Button className="m-1 p-2" onClick={deleteCell}>
               선택 셀 지우기
             </Button>

src/hooks/useMode.js

@@ -710,6 +710,7 @@ export function useMode() {
     canvas?.clear()
     startPoint.current = null
     setEndPoint(null)
+    setTemplateType(0)
     points.current = []
     historyPoints.current = []
     historyLines.current = []

src/store/canvasAtom.js

@@ -50,7 +50,7 @@ export const roofPolygonArrayState = atom({
 
 export const templateTypeState = atom({
   key: 'templateType',
-  default: 1, //1:모임지붕, 2:A타입, 3:B타입
+  default: 0, //1:모임지붕, 2:A타입, 3:B타입
   dangerouslyAllowMutability: true,
 })