캔버스 로딩 후 초기화 작업 추가

src/components/floor-plan/CanvasFrame.jsx

@@ -10,6 +10,7 @@ import { useRecoilValue } from 'recoil'
 import { currentObjectState } from '@/store/canvasAtom'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import QContextMenu from '@/components/common/context-menu/QContextMenu'
+import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize'
 
 export default function CanvasFrame({ plan }) {
   const canvasRef = useRef(null)
@@ -21,7 +22,7 @@ export default function CanvasFrame({ plan }) {
     },
   })
   const { checkCanvasObjectEvent, checkUnsavedCanvasPlan } = usePlan()
-
+  const { canvasLoadInit } = useCanvasConfigInitialize()
   const currentObject = useRecoilValue(currentObjectState)
 
   useEvent()
@@ -32,6 +33,7 @@ export default function CanvasFrame({ plan }) {
       if (plan?.canvasStatus) {
         canvas?.loadFromJSON(JSON.parse(plan.canvasStatus), function () {
           canvas?.renderAll() // 캔버스를 다시 그립니다.
+          canvasLoadInit() //config된 상태로 캔버스 객체를 그린다
         })
       }
     }

src/components/floor-plan/CanvasMenu.jsx

@@ -69,7 +69,6 @@ export default function CanvasMenu(props) {
   })
 
   const { commonFunctions } = useCommonUtils({
-    canvas,
     commonFunctionState,
     setCommonFunctionState,
   })

src/hooks/common/useCanvasConfigInitialize.js

@@ -0,0 +1,32 @@
+import { use, useEffect } from 'react'
+import { useRecoilValue } from 'recoil'
+import { settingModalFirstOptionsState } from '@/store/settingAtom'
+import { canvasState } from '@/store/canvasAtom'
+import { setSurfaceShapePattern } from '@/util/canvas-util'
+
+export function useCanvasConfigInitialize() {
+  const canvas = useRecoilValue(canvasState)
+  const settingModalFirstOptions = useRecoilValue(settingModalFirstOptionsState)
+
+  const canvasLoadInit = () => {
+    roofInit() //화면표시 초기화
+  }
+
+  //치수표시, 화면표시, 글꼴등 초기화
+  const roofInit = () => {
+    if (canvas) {
+      const roofDisplay = settingModalFirstOptions.option2.filter((item) => item.selected)
+
+      canvas
+        .getObjects()
+        .filter((polygon) => polygon.name === 'roof')
+        .forEach((polygon) => {
+          setSurfaceShapePattern(polygon, roofDisplay[0].column)
+        })
+
+      canvas.renderAll()
+    }
+  }
+
+  return { canvasLoadInit }
+}

src/hooks/common/useCommonUtils.js

@@ -5,8 +5,10 @@ import { useEvent } from '@/hooks/useEvent'
 import { checkLineOrientation, getDistance, setSurfaceShapePattern } from '@/util/canvas-util'
 import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
 import { fontSelector } from '@/store/fontAtom'
+import { canvasState } from '@/store/canvasAtom'
 
-export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionState }) {
+export function useCommonUtils({ commonFunctionState, setCommonFunctionState }) {
+  const canvas = useRecoilValue(canvasState)
   const wordDisplay = useRecoilValue(wordDisplaySelector)
   const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent()
   const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
@@ -24,11 +26,6 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS
     }
   }, [commonFunctionState, dimensionSettings, commonTextFont, dimensionLineTextFont])
 
-  const loadDataInitialize = () => {
-    const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof')
-    roofs.forEach((roof) => {})
-  }
-
   const commonTextMode = () => {
     let textbox
     if (commonFunctionState.text) {
@@ -378,6 +375,5 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS
   return {
     commonFunctions,
     dimensionSettings,
-    loadDataInitialize,
   }
 }