팝업에 로딩바 적용

src/components/estimate/Estimate.jsx

@@ -1,10 +1,9 @@
 'use client'
 
 import { useEffect, useState, useContext } from 'react'
-import { useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilValue } from 'recoil'
 import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
 import { useMessage } from '@/hooks/useMessage'
-import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 import SingleDatePicker from '../common/datepicker/SingleDatePicker'
 import EstimateFileUploader from './EstimateFileUploader'
 import { useAxios } from '@/hooks/useAxios'
@@ -14,11 +13,10 @@ import dayjs from 'dayjs'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
 import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateController'
 import { SessionContext } from '@/app/SessionProvider'
-import Select, { components } from 'react-select'
+import Select from 'react-select'
 import { convertNumberToPriceDecimal, convertNumberToPriceDecimalToFixed } from '@/util/common-utils'
 import ProductFeaturesPop from './popup/ProductFeaturesPop'
 import { v4 as uuidv4 } from 'uuid'
-import { correntObjectNoState } from '@/store/settingAtom'
 import { useSearchParams } from 'next/navigation'
 import { usePlan } from '@/hooks/usePlan'
 import { usePopup } from '@/hooks/usePopup'

src/components/estimate/popup/DocDownOptionPop.jsx

@@ -1,12 +1,15 @@
 'use client'
-import { useState } from 'react'
+import { useState, useContext } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useAxios } from '@/hooks/useAxios'
 import { useRecoilValue } from 'recoil'
 import { floorPlanObjectState, estimateState } from '@/store/floorPlanObjectAtom'
 import { usePathname, useSearchParams } from 'next/navigation'
+import { QcastContext } from '@/app/QcastProvider'
 
 export default function DocDownOptionPop({ planNo, setEstimatePopupOpen, docDownPopLockFlg }) {
+  const { setIsGlobalLoading } = useContext(QcastContext)
+
   const { getMessage } = useMessage()
   const { promisePost } = useAxios()
 
@@ -68,8 +71,10 @@ export default function DocDownOptionPop({ planNo, setEstimatePopupOpen, docDown
 
     const options = { responseType: 'blob' }
 
+    setIsGlobalLoading(true)
     await promisePost({ url: url, data: params, option: options })
       .then((resultData) => {
+        setIsGlobalLoading(false)
         if (resultData) {
           let fileName = 'unknow'
           const blob = new Blob([resultData.data], { type: resultData.headers['content-type'] || 'application/octet-stream' })
@@ -97,6 +102,7 @@ export default function DocDownOptionPop({ planNo, setEstimatePopupOpen, docDown
         }
       })
       .catch((error) => {
+        setIsGlobalLoading(false)
         console.log('::FileDownLoad Error::', error)
         alert('File does not exist.')
       })

src/components/main/ChangePasswordPop.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { useContext } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useForm } from 'react-hook-form'
 import { sessionStore } from '@/store/commonAtom'
@@ -7,10 +7,13 @@ import { useAxios } from '@/hooks/useAxios'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { logout, setSession, login } from '@/lib/authActions'
 import { useSwal } from '@/hooks/useSwal'
+import { QcastContext } from '@/app/QcastProvider'
 
 export default function ChangePasswordPop(props) {
   const globalLocaleState = useRecoilValue(globalLocaleStore)
 
+  const { setIsGlobalLoading } = useContext(QcastContext)
+
   const { swalFire } = useSwal()
   const { patch } = useAxios(globalLocaleState)
   const { getMessage } = useMessage()
@@ -98,9 +101,11 @@ export default function ChangePasswordPop(props) {
       chgPwd: _password1,
     }
 
+    setIsGlobalLoading(true)
     await patch({ url: '/api/login/v1.0/user/change-password', data: param })
       .then((res) => {
         if (res?.result?.code === 200) {
+          setIsGlobalLoading(false)
           if (res?.result?.resultCode === 'S') {
             swalFire({
               text: getMessage('main.popup.login.success'),
@@ -117,11 +122,13 @@ export default function ChangePasswordPop(props) {
             alert(res?.result?.resultMsg)
           }
         } else {
+          setIsGlobalLoading(false)
           logout()
           console.log('code not 200 error')
         }
       })
       .catch((error) => {
+        setIsGlobalLoading(false)
         logout()
         console.log('catch::::::::', error)
       })

src/components/management/popup/FindAddressPop.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState, useContext } from 'react'
 import { useForm } from 'react-hook-form'
 import { queryStringFormatter } from '@/util/common-utils'
 import { useAxios } from '@/hooks/useAxios'
@@ -8,9 +8,12 @@ import FindAddressPopQGrid from './FindAddressPopQGrid'
 import { useMessage } from '@/hooks/useMessage'
 import { isNotEmptyArray } from '@/util/common-utils'
 import { useSwal } from '@/hooks/useSwal'
+import { QcastContext } from '@/app/QcastProvider'
 export default function FindAddressPop(props) {
   const globalLocaleState = useRecoilValue(globalLocaleStore)
 
+  const { setIsGlobalLoading } = useContext(QcastContext)
+
   const { get } = useAxios(globalLocaleState)
 
   const { getMessage } = useMessage()
@@ -61,8 +64,10 @@ export default function FindAddressPop(props) {
       zipcode: watch('zipNo'),
     }
 
+    setIsGlobalLoading(true)
     get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
       if (res.status === 200) {
+        setIsGlobalLoading(false)
         if (isNotEmptyArray(res.results)) {
           setGridProps({ ...gridProps, gridData: res.results })
         } else {
@@ -70,10 +75,12 @@ export default function FindAddressPop(props) {
           setGridProps({ ...gridProps, gridData: [] })
         }
       } else {
+        setIsGlobalLoading(false)
         swalFire({ text: getMessage('stuff.addressPopup.error.message1'), type: 'alert', icon: 'warning' })
         setGridProps({ ...gridProps, gridData: [] })
       }
     })
+    setIsGlobalLoading(false)
   }
   // 주소적용 클릭
   const applyAddress = () => {

src/components/management/popup/PlanRequestPop.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from 'react'
+import { useEffect, useState, useRef, useContext } from 'react'
 import { useAxios } from '@/hooks/useAxios'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { useRecoilValue } from 'recoil'
@@ -10,6 +10,7 @@ import PlanRequestPopQGrid from './PlanRequestPopQGrid'
 import { isObjectNotEmpty, queryStringFormatter } from '@/util/common-utils'
 import QPagination from '@/components/common/pagination/QPagination'
 import { useSwal } from '@/hooks/useSwal'
+import { QcastContext } from '@/app/QcastProvider'
 export default function PlanRequestPop(props) {
   const [pageNo, setPageNo] = useState(1) //현재 페이지 번호
   const [pageSize, setPageSize] = useState(20) //페이지 당 게시물 개수
@@ -17,6 +18,7 @@ export default function PlanRequestPop(props) {
   const { swalFire } = useSwal()
   const globalLocaleState = useRecoilValue(globalLocaleStore)
 
+  const { setIsGlobalLoading } = useContext(QcastContext)
   const [planReqObject, setPlanReqObject] = useState({})
 
   const { promiseGet } = useAxios(globalLocaleState)
@@ -89,8 +91,10 @@ export default function PlanRequestPop(props) {
     }
 
     const apiUrl = `/api/object/planReq/list?${queryStringFormatter(params)}`
+    setIsGlobalLoading(true)
     promiseGet({ url: apiUrl }).then((res) => {
       if (res.status === 200) {
+        setIsGlobalLoading(false)
         if (isNotEmptyArray(res.data.data)) {
           setGridProps({ ...gridProps, gridData: res.data.data, gridCount: res.data.data[0].totCnt })
           setTotalCount(res.data.data[0].totCnt)
@@ -99,10 +103,12 @@ export default function PlanRequestPop(props) {
           setTotalCount(0)
         }
       } else {
+        setIsGlobalLoading(false)
         setGridProps({ ...gridProps, gridData: [], gridCount: 0 })
         setTotalCount(0)
       }
     })
+    setIsGlobalLoading(false)
   }
   // 페이징 현재페이지 변경
   const handleChangePage = (page) => {

src/components/management/popup/WindSelectPop.jsx

@@ -1,10 +1,11 @@
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect, useContext } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useAxios } from '@/hooks/useAxios'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { useRecoilValue } from 'recoil'
 import { isEmptyArray } from '@/util/common-utils'
 import { useSwal } from '@/hooks/useSwal'
+import { QcastContext } from '@/app/QcastProvider'
 
 export default function WindSelectPop(props) {
   const globalLocaleState = useRecoilValue(globalLocaleStore)
@@ -13,6 +14,7 @@ export default function WindSelectPop(props) {
   const [windSpeed, setWindSpeed] = useState(null)
   const { getMessage } = useMessage()
   const { swalFire } = useSwal()
+  const { setIsGlobalLoading } = useContext(QcastContext)
   //선택한 라디오 값 세팅
   const handleChangeRadio = (e) => {
     setWindSpeed(e.target.value)
@@ -31,15 +33,20 @@ export default function WindSelectPop(props) {
   }
 
   useEffect(() => {
+    setIsGlobalLoading(true)
     if (props.prefName !== '') {
       promiseGet({ url: `/api/object/windSpeed/${props.prefName}/list` }).then((res) => {
         if (res.status === 200) {
+          setIsGlobalLoading(false)
           if (!isEmptyArray(res.data)) {
             setWindSpeedList(res.data)
           }
         }
       })
+    } else {
+      setIsGlobalLoading(false)
     }
+    setIsGlobalLoading(false)
   }, [props])
 
   return (

src/hooks/floorPlan/estimate/useEstimateController.js

@@ -445,7 +445,9 @@ export const useEstimateController = (planNo, flag) => {
       userId: session.userId,
     }
 
+    setIsGlobalLoading(true)
     await promisePost({ url: '/api/estimate/save-estimate-copy', data: params }).then((res) => {
+      setIsGlobalLoading(false)
       if (res.status === 201) {
         if (isObjectNotEmpty(res.data)) {
           let newObjectNo = res.data.objectNo
@@ -457,6 +459,8 @@ export const useEstimateController = (planNo, flag) => {
             },
           })
         }
+      } else {
+        setIsGlobalLoading(false)
       }
     })
   }