fix: changeMode 두번 실행 문제 해결

src/components/Roof2.jsx

@@ -35,6 +35,7 @@ export default function Roof2() {
 
   const {
     mode,
+    setMode,
     changeMode,
     handleClear,
     fillCellInPolygon,
@@ -109,7 +110,6 @@ export default function Roof2() {
   }
 
   useEffect(() => {
-    console.log('horizontalSize', horizontalSize)
     setCanvasSize({ ...canvasSize, vertical: parseInt(verticalSize), horizontal: parseInt(horizontalSize) })
   }, [verticalSize, horizontalSize])
 
@@ -121,10 +121,7 @@ export default function Roof2() {
   // }, [verticalSize, horizontalSize])
   useEffect(() => {
     const { vertical, horizontal } = canvasSize
-    console.log('canvasSize', canvasSize)
-    console.log('horizontalSize', horizontalSize)
     if (vertical !== verticalSize || horizontal !== horizontalSize) {
-      console.log('setCanvasSize!!')
       canvas.setWidth(horizontalSize)
       canvas.setHeight(verticalSize)
       canvas.renderAll()
@@ -391,23 +388,19 @@ export default function Roof2() {
             <Button className="m-1 p-2" color={`${mode === Mode.DEFAULT ? 'primary' : 'default'}`} onClick={fillCellInPolygon}>
               모드 DEFAULT
             </Button>
-            <Button
+            <Button className="m-1 p-2" color={`${mode === Mode.DRAW_LINE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.DRAW_LINE)}>
-              className="m-1 p-2"
-              color={`${mode === Mode.DRAW_LINE ? 'primary' : 'default'}`}
-              onClick={() => changeMode(canvas, Mode.DRAW_LINE)}
-            >
               기준선 긋기 모드
             </Button>
-            <Button className="m-1 p-2" color={`${mode === Mode.EDIT ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.EDIT)}>
+            <Button className="m-1 p-2" color={`${mode === Mode.EDIT ? 'primary' : 'default'}`} onClick={() => setMode(Mode.EDIT)}>
               에디팅모드
             </Button>
-            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.TEMPLATE)}>
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.TEMPLATE)}>
               템플릿(기둥)
             </Button>
-            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.PATTERNA)}>
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.PATTERNA)}>
               템플릿(A 패턴)
             </Button>
-            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.PATTERNB)}>
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.PATTERNB)}>
               템플릿(B 패턴)
             </Button>
             <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => drawRoofPatterns(1)}>
@@ -416,28 +409,16 @@ export default function Roof2() {
             <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => drawRoofPatterns(2)}>
               지붕패턴2
             </Button>
-            <Button
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.ROOF_TRESTLE)}>
-              className="m-1 p-2"
-              color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
-              onClick={() => changeMode(canvas, Mode.ROOF_TRESTLE)}
-            >
               지붕가대생성
             </Button>
-            <Button
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.FILL_CELLS)}>
-              className="m-1 p-2"
-              color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
-              onClick={() => changeMode(canvas, Mode.FILL_CELLS)}
-            >
               태양광셀생성
             </Button>
-            <Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.TEXTBOX)}>
+            <Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => setMode(Mode.TEXTBOX)}>
               텍스트박스 모드
             </Button>
-            <Button
+            <Button className="m-1 p-2" color={`${mode === Mode.DRAW_RECT ? 'primary' : 'default'}`} onClick={() => setMode(Mode.DRAW_RECT)}>
-              className="m-1 p-2"
-              color={`${mode === Mode.DRAW_RECT ? 'primary' : 'default'}`}
-              onClick={() => changeMode(canvas, Mode.DRAW_RECT)}
-            >
               사각형 생성 모드
             </Button>
             <Button className="m-1 p-2" onClick={handleUndo}>

src/hooks/useMode.js

@@ -16,6 +16,7 @@ import {
 import { QLine } from '@/components/fabric/QLine'
 import { fabric } from 'fabric'
 import { QPolygon } from '@/components/fabric/QPolygon'
+import { input } from '@nextui-org/react'
 
 export const Mode = {
   DRAW_LINE: 'drawLine', // 기준선 긋기모드
@@ -214,9 +215,6 @@ export function useMode() {
 
   const addEvent = (mode) => {
     switch (mode) {
-      case 'default':
-        canvas?.off('mouse:down')
-        break
       case 'drawLine':
         drawLineMode()
         break
@@ -247,6 +245,9 @@ export function useMode() {
       case 'fillCells':
         makeRoofFillCells()
         break
+      case 'default':
+        canvas?.off('mouse:down')
+        break
     }
   }
 
@@ -3324,25 +3325,28 @@ export function useMode() {
   }
 
   const makeRoofFillCells = () => {
-    const selectedCellRoofs = selectedCellRoofArray
+    // const selectedCellRoofs = selectedCellRoofArray
-    if (selectedCellRoofs.length === 0) {
+    if (selectedCellRoofArray.length === 0) {
-      alert('선택된 영역이 없습니다.')
+      console.log('선택된 영역이 없습니다.')
       return
     }
-    let inputCellSize = { width: 172, height: 113 }
+    const inputCellSize = { width: 172, height: 113 }
-    let cellSize = { ...inputCellSize } //기본으로 가로형으로 넣고
+    const cellSize = { ...inputCellSize } //기본으로 가로형으로 넣고
 
     if (templateType === 2) {
-      ;[cellSize.width, cellSize.height] = [cellSize.height, cellSize.width]
+      // ;[cellSize.width, cellSize.height] = [cellSize.height, cellSize.width]
+      cellSize.width = inputCellSize.height
+      cellSize.height = inputCellSize.width
     }
 
-    selectedCellRoofs.forEach((polygon, index) => {
+    selectedCellRoofArray.forEach((polygon, index) => {
       polygon.fillCell({ width: cellSize.width, height: cellSize.height, padding: 10 })
     })
   }
 
   return {
     mode,
+    setMode,
     changeMode,
     setCanvas,
     handleClear,