From 18b9cafbce9ac7ad843979cbdd9ff02aa2946344 Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Tue, 11 Feb 2025 10:46:48 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=8Cfix:=20=EA=B2=AC=EC=A0=81=EC=84=9C?=
 =?UTF-8?q?=20=EC=83=9D=EC=84=B1=20=ED=98=B8=EC=B6=9C=EC=8B=9C=20=EB=A1=9C?=
 =?UTF-8?q?=EB=94=A9=EB=B0=94=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/layout.js                             |  4 +-
 .../circuitTrestle/CircuitTrestleSetting.jsx  |  4 +
 src/hooks/floorPlan/useImgLoader.js           | 83 ++++++++++---------
 src/hooks/module/useTrestle.js                |  1 +
 src/hooks/useEstimate.js                      |  1 +
 5 files changed, 53 insertions(+), 40 deletions(-)

diff --git a/src/app/layout.js b/src/app/layout.js
index 8c78f6c7..8071159a 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -72,10 +72,10 @@ export default async function RootLayout({ children }) {
                   </div>
                   <Footer />
                 </div>
+                <QModal />
+                <PopupManager />
               </QcastProvider>
             )}
-            <QModal />
-            <PopupManager />
           </body>
         </html>
       </GlobalDataProvider>
diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
index 5107d585..be4653c0 100644
--- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
@@ -24,6 +24,7 @@ import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
 import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
 import { useImgLoader } from '@/hooks/floorPlan/useImgLoader'
 import { usePlan } from '@/hooks/usePlan'
+import { QcastContext } from '@/app/QcastProvider'
 
 const ALLOCATION_TYPE = {
   AUTO: 'auto',
@@ -56,6 +57,8 @@ export default function CircuitTrestleSetting({ id }) {
   const { handleCanvasToPng } = useImgLoader()
   const { saveCanvas } = usePlan()
 
+  const { setIsGlobalLoading } = useContext(QcastContext)
+
   const {
     makers,
     setMakers,
@@ -324,6 +327,7 @@ export default function CircuitTrestleSetting({ id }) {
 
   // 회로할당(승압설정) 저장 버튼 클릭 시
   const onApply = async () => {
+    setIsGlobalLoading(true)
     canvas
       .getObjects()
       .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
diff --git a/src/hooks/floorPlan/useImgLoader.js b/src/hooks/floorPlan/useImgLoader.js
index 9b23d36d..4be21e67 100644
--- a/src/hooks/floorPlan/useImgLoader.js
+++ b/src/hooks/floorPlan/useImgLoader.js
@@ -4,6 +4,8 @@ import { useCanvas } from '../useCanvas'
 import { useAxios } from '../useAxios'
 import { usePlan } from '../usePlan'
 import { POLYGON_TYPE } from '@/common/common'
+import { QcastContext } from '@/app/QcastProvider'
+import { useContext } from 'react'
 
 /**
  * 이미지 로더 hook
@@ -13,7 +15,7 @@ export function useImgLoader() {
   const canvas = useRecoilValue(canvasState)
   const { currentCanvasPlan } = usePlan()
   const { post } = useAxios()
-
+  const { setIsGlobalLoading } = useContext(QcastContext)
   /**
    * 이미지 저장 시 왼쪽 위, 오른쪽 아래 좌표
    * return [start, end]
@@ -39,48 +41,53 @@ export function useImgLoader() {
    * @param {integer} type 1: 모듈만 있는 상태, 2: 가대까지 올린 상태
    */
   const handleCanvasToPng = async (type) => {
-    removeMouseLines()
+    try {
+      removeMouseLines()
 
-    canvas.getObjects('image').forEach((obj) => {
-      if (obj.getSrc) {
-        const img = new Image()
-        img.crossOrigin = 'anonymous'
-        img.src = obj.getSrc()
-        obj.setElement(img)
+      canvas.getObjects('image').forEach((obj) => {
+        if (obj.getSrc) {
+          const img = new Image()
+          img.crossOrigin = 'anonymous'
+          img.src = obj.getSrc()
+          obj.setElement(img)
+        }
+      })
+
+      canvas.renderAll()
+
+      const formData = new FormData()
+      const dataUrl = canvas.toDataURL('image/png')
+      const blobBin = atob(dataUrl.split(',')[1])
+      const array = []
+      for (let i = 0; i < blobBin.length; i++) {
+        array.push(blobBin.charCodeAt(i))
       }
-    })
+      const file = new Blob([new Uint8Array(array)], { type: 'image/png' })
+      formData.append('file', file, 'canvas.png')
+      formData.append('objectNo', currentCanvasPlan.objectNo)
+      formData.append('planNo', currentCanvasPlan.planNo)
+      formData.append('type', type)
+      // formData.append('coordinates', getImageCoordinates())
+      const positionObj = getImageCoordinates()
+      console.log('🚀 ~ handleCanvasToPng ~ positionObj:', positionObj)
+      formData.append('width', Math.round(positionObj[1].x - positionObj[0].x - 350))
+      formData.append('height', Math.round(positionObj[1].y - positionObj[0].y - 100))
+      formData.append('left', Math.round(positionObj[0].x))
+      formData.append('top', Math.round(positionObj[0].y))
+      console.log('🚀 ~ handleCanvasToPng ~ formData:', formData)
 
-    canvas.renderAll()
+      // 이미지 크롭 요청
+      const result = await post({
+        url: `${process.env.NEXT_PUBLIC_HOST_URL}/image/canvas`,
+        data: formData,
+      })
+      console.log('🚀 ~ handleCanvasToPng ~ result:', result)
 
-    const formData = new FormData()
-    const dataUrl = canvas.toDataURL('image/png')
-    const blobBin = atob(dataUrl.split(',')[1])
-    const array = []
-    for (let i = 0; i < blobBin.length; i++) {
-      array.push(blobBin.charCodeAt(i))
+      return result
+    } catch (e) {
+      setIsGlobalLoading(false)
+      console.log('🚀 ~ handleCanvasToPng ~ e:', e)
     }
-    const file = new Blob([new Uint8Array(array)], { type: 'image/png' })
-    formData.append('file', file, 'canvas.png')
-    formData.append('objectNo', currentCanvasPlan.objectNo)
-    formData.append('planNo', currentCanvasPlan.planNo)
-    formData.append('type', type)
-    // formData.append('coordinates', getImageCoordinates())
-    const positionObj = getImageCoordinates()
-    console.log('🚀 ~ handleCanvasToPng ~ positionObj:', positionObj)
-    formData.append('width', Math.round(positionObj[1].x - positionObj[0].x - 350))
-    formData.append('height', Math.round(positionObj[1].y - positionObj[0].y - 100))
-    formData.append('left', Math.round(positionObj[0].x))
-    formData.append('top', Math.round(positionObj[0].y))
-    console.log('🚀 ~ handleCanvasToPng ~ formData:', formData)
-
-    // 이미지 크롭 요청
-    const result = await post({
-      url: `${process.env.NEXT_PUBLIC_HOST_URL}/image/canvas`,
-      data: formData,
-    })
-    console.log('🚀 ~ handleCanvasToPng ~ result:', result)
-
-    return result
   }
 
   /**
diff --git a/src/hooks/module/useTrestle.js b/src/hooks/module/useTrestle.js
index ff13e305..213bd62d 100644
--- a/src/hooks/module/useTrestle.js
+++ b/src/hooks/module/useTrestle.js
@@ -598,6 +598,7 @@ export const useTrestle = () => {
       console.error(e)
       // clear()
       setViewCircuitNumberTexts(true)
+      setIsGlobalLoading(false)
       return null
     }
   }
diff --git a/src/hooks/useEstimate.js b/src/hooks/useEstimate.js
index 7abe27b1..5192ec0c 100644
--- a/src/hooks/useEstimate.js
+++ b/src/hooks/useEstimate.js
@@ -60,6 +60,7 @@ export function useEstimate() {
         moveEstimate(planNo, objectNo)
       })
       .catch((error) => {
+        setIsGlobalLoading(false)
         swalFire({ text: error.message, icon: 'error' })
       })
   }