📌fix: 견적서 생성 호출시 로딩바 추가

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>

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)

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) => {
+      canvas.getObjects('image').forEach((obj) => {
-      if (obj.getSrc) {
+        if (obj.getSrc) {
-        const img = new Image()
+          const img = new Image()
-        img.crossOrigin = 'anonymous'
+          img.crossOrigin = 'anonymous'
-        img.src = obj.getSrc()
+          img.src = obj.getSrc()
-        obj.setElement(img)
+          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()
+      return result
-    const dataUrl = canvas.toDataURL('image/png')
+    } catch (e) {
-    const blobBin = atob(dataUrl.split(',')[1])
+      setIsGlobalLoading(false)
-    const array = []
+      console.log('🚀 ~ handleCanvasToPng ~ e:', e)
-    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)
-
-    // 이미지 크롭 요청
-    const result = await post({
-      url: `${process.env.NEXT_PUBLIC_HOST_URL}/image/canvas`,
-      data: formData,
-    })
-    console.log('🚀 ~ handleCanvasToPng ~ result:', result)
-
-    return result
   }
 
   /**

src/hooks/module/useTrestle.js

@@ -598,6 +598,7 @@ export const useTrestle = () => {
       console.error(e)
       // clear()
       setViewCircuitNumberTexts(true)
+      setIsGlobalLoading(false)
       return null
     }
   }

src/hooks/useEstimate.js

@@ -60,6 +60,7 @@ export function useEstimate() {
         moveEstimate(planNo, objectNo)
       })
       .catch((error) => {
+        setIsGlobalLoading(false)
         swalFire({ text: error.message, icon: 'error' })
       })
   }