From 0845259945bbe178c02ea20526d213c992ba9242 Mon Sep 17 00:00:00 2001
From: yjnoh <lelalela@daum.net>
Date: Thu, 24 Oct 2024 12:23:45 +0900
Subject: [PATCH] =?UTF-8?q?=EC=BA=94=EB=B2=84=EC=8A=A4=20=EB=A1=9C?=
 =?UTF-8?q?=EB=94=A9=20=ED=9B=84=20=EC=B4=88=EA=B8=B0=ED=99=94=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/CanvasFrame.jsx     |  4 ++-
 src/components/floor-plan/CanvasMenu.jsx      |  1 -
 src/hooks/common/useCanvasConfigInitialize.js | 32 +++++++++++++++++++
 src/hooks/common/useCommonUtils.js            | 10 ++----
 4 files changed, 38 insertions(+), 9 deletions(-)
 create mode 100644 src/hooks/common/useCanvasConfigInitialize.js

diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx
index ebb3ece7..6887d07a 100644
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/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된 상태로 캔버스 객체를 그린다
         })
       }
     }
diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index 5f73efa1..07411efb 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -69,7 +69,6 @@ export default function CanvasMenu(props) {
   })
 
   const { commonFunctions } = useCommonUtils({
-    canvas,
     commonFunctionState,
     setCommonFunctionState,
   })
diff --git a/src/hooks/common/useCanvasConfigInitialize.js b/src/hooks/common/useCanvasConfigInitialize.js
new file mode 100644
index 00000000..7421c53f
--- /dev/null
+++ b/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 }
+}
diff --git a/src/hooks/common/useCommonUtils.js b/src/hooks/common/useCommonUtils.js
index d4ab9cbf..8af18fa0 100644
--- a/src/hooks/common/useCommonUtils.js
+++ b/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,
   }
 }