gridInit 분리 및 firstOption useEffect 수정

src/components/floor-plan/CanvasFrame.jsx

@@ -22,7 +22,7 @@ export default function CanvasFrame({ plan }) {
     },
   })
   const { checkCanvasObjectEvent, checkUnsavedCanvasPlan } = usePlan()
-  const { canvasLoadInit } = useCanvasConfigInitialize()
+  const { canvasLoadInit, gridInit } = useCanvasConfigInitialize()
   const currentObject = useRecoilValue(currentObjectState)
 
   useEvent()
@@ -32,10 +32,11 @@ export default function CanvasFrame({ plan }) {
       canvas?.clear() // 캔버스를 초기화합니다.
       if (plan?.canvasStatus) {
         canvas?.loadFromJSON(JSON.parse(plan.canvasStatus), function () {
-          canvas?.renderAll() // 캔버스를 다시 그립니다.
           canvasLoadInit() //config된 상태로 캔버스 객체를 그린다
+          canvas?.renderAll() // 캔버스를 다시 그립니다.
         })
       }
+      gridInit()
     }
   }
 

src/hooks/common/useCanvasConfigInitialize.js

@@ -31,6 +31,12 @@ export function useCanvasConfigInitialize() {
     roofInit() //화면표시 초기화
   }
 
+  const gridInit = () => {
+    setDotLineGridSetting((prev) => {
+      return { ...prev, INTERVAL: { ...prev.INTERVAL } }
+    })
+  }
+
   //치수표시, 화면표시, 글꼴등 초기화
   const roofInit = () => {
     setSettingModalFirstOptions((prev) => {
@@ -46,10 +52,7 @@ export function useCanvasConfigInitialize() {
       })
       return { ...prev, option1, option2, dimensionDisplay }
     })
-
-    setDotLineGridSetting((prev) => {
-      return { ...prev }
-    })
+    gridInit()
 
     setGlobalFonts((prev) => {
       const commonText = { ...prev.commonText }
@@ -61,5 +64,5 @@ export function useCanvasConfigInitialize() {
     })
   }
 
-  return { canvasLoadInit }
+  return { canvasLoadInit, gridInit }
 }

src/hooks/option/useFirstOption.js

@@ -33,7 +33,7 @@ export function useFirstOption() {
           optionName = ['outerLine', 'wallLine']
           break
         case 'gridDisplay': //그리드 표시
-          optionName = ['lindGrid', 'dotGrid']
+          optionName = ['lineGrid', 'dotGrid']
           break
         case 'lineDisplay': //지붕선 표시
           optionName = ['roof', 'roofBase']
@@ -45,7 +45,7 @@ export function useFirstOption() {
           optionName = ['7']
           break
         case 'flowDisplay': //흐름방향 표시
-          optionName = ['arrow']
+          optionName = ['arrow', 'flowText']
           break
         case 'trestleDisplay': //가대 표시
           optionName = ['8']
@@ -66,6 +66,8 @@ export function useFirstOption() {
           //obj.set({ visible: !obj.visible })
         })
 
+      canvas.renderAll()
+
       // console.log(
       //   'optionName',
       //   optionName,

src/hooks/useCanvas.js

@@ -12,7 +12,6 @@ import { defineQPloygon } from '@/util/qpolygon-utils'
 import { writeImage } from '@/lib/canvas'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import { useAxios } from '@/hooks/useAxios'
-import { v4 as uuidv4 } from 'uuid'
 import { useFont } from '@/hooks/common/useFont'
 
 export function useCanvas(id) {
@@ -93,8 +92,6 @@ export function useCanvas(id) {
     canvas.getObjects().length > 0 && canvas?.clear()
     // settings for all canvas in the app
     fabric.Object.prototype.transparentCorners = false
-    fabric.Object.prototype.id = uuidv4()
-    fabric.Object.prototype.uuid = uuidv4()
     fabric.Object.prototype.selectable = true
     fabric.Object.prototype.lockMovementX = true
     fabric.Object.prototype.lockMovementY = true