withDraggable spinner 추가

src/components/floor-plan/modal/basic/step/Orientation.jsx

@@ -51,6 +51,7 @@ export const Orientation = forwardRef((props, ref) => {
   } = props
   const [inputCompasDeg, setInputCompasDeg] = useState(compasDeg ?? 0)
   const [inputInstallHeight, setInputInstallHeight] = useState('0')
+  const [inputMargin, setInputMargin] = useState('0')
   const [inputVerticalSnowCover, setInputVerticalSnowCover] = useState('0')
   const [inputRoughness, setInputRoughness] = useState(selectedSurfaceType)
   const [inputStandardWindSpeed, setInputStandardWindSpeed] = useState(standardWindSpeed)
@@ -93,7 +94,7 @@ export const Orientation = forwardRef((props, ref) => {
 
   useEffect(() => {
     if (addedRoofs) {
-      setRoofs(addedRoofs)
+      // setRoofs(addedRoofs)
       // setAddedRoofs(roofsStore)
     }
   }, [addedRoofs])
@@ -113,6 +114,7 @@ export const Orientation = forwardRef((props, ref) => {
         saleStoreNorthFlg: managementState?.saleStoreNorthFlg,
         moduleTpCd: selectedModules.itemTp,
         moduleItemId: selectedModules.itemId,
+        margin: inputMargin,
       }
       setCompasDeg(inputCompasDeg)
       setInstallHeight(inputInstallHeight)
@@ -199,7 +201,6 @@ export const Orientation = forwardRef((props, ref) => {
   }
 
   const handleChangeModule = (e) => {
-    console.log('hhㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗ')
     resetRoofs()
     setSelectedModules(e)
   }
@@ -383,23 +384,18 @@ export const Orientation = forwardRef((props, ref) => {
                     </tbody>
                   </table>
                 </div>
-                {basicSetting && basicSetting.roofSizeSet === '3' && (
+                {basicSetting && basicSetting.roofSizeSet == '3' && (
                   <div className="outline-form mt15">
                     <span>{getMessage('modal.module.basic.setting.module.placement.area')}</span>
                     <div className="input-grid mr10" style={{ width: '60px' }}>
-                      <input
+                      <input type="text" className="input-origin block" value={inputMargin} onChange={(e) => setInputMargin(e.target.value)} />
-                        type="text"
-                        className="input-origin block"
-                        value={inputInstallHeight}
-                        onChange={(e) => setInputInstallHeight(e.target.value)}
-                      />
                     </div>
                     <span className="thin">m</span>
                   </div>
                 )}
               </div>
 
-              {basicSetting && basicSetting.roofSizeSet !== '3' && (
+              {basicSetting && basicSetting.roofSizeSet != '3' && (
                 <div className="compas-table-box">
                   <div className="compas-grid-table">
                     <div className="outline-form">

src/hooks/module/useModuleTrestle.js

@@ -2,8 +2,9 @@ import { use, useContext, useEffect, useReducer, useState } from 'react'
 import { useCommonCode } from '../common/useCommonCode'
 import { useMasterController } from '../common/useMasterController'
 import { selectedModuleState } from '@/store/selectedModuleOptions'
-import { useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
 import { GlobalDataContext } from '@/app/GlobalDataProvider'
+import { popSpinnerState } from '@/store/popupAtom'
 
 const RAFT_BASE_CODE = '203800'
 
@@ -62,6 +63,7 @@ export function useModuleTrestle(props) {
   const [kerabaMargin, setKerabaMargin] = useState(0)
   const [trestleState, dispatch] = useReducer(trestleReducer, null)
   const [trestleDetail, setTrestleDetail] = useState(null)
+  const [popSpinnerStore, setPopSpinnerStore] = useRecoilState(popSpinnerState)
 
   useEffect(() => {
     const raftCodeList = findCommonCode(RAFT_BASE_CODE)
@@ -120,39 +122,58 @@ export function useModuleTrestle(props) {
   }, [trestleState])
 
   const handleSetTrestleList = () => {
+    setPopSpinnerStore(true)
     getTrestleList({
       moduleTpCd: trestleState?.moduleTpCd ?? '',
       roofMatlCd: trestleState?.roofMatlCd ?? '',
       raftBaseCd: trestleState?.raftBaseCd ?? '',
-    }).then((res) => {
-      if (res?.data) setTrestleList(res.data)
     })
+      .then((res) => {
+        if (res?.data) setTrestleList(res.data)
+        setPopSpinnerStore(false)
+      })
+      .catch((e) => {
+        setPopSpinnerStore(false)
+      })
   }
 
   const handleSetConstMthdList = () => {
+    setPopSpinnerStore(true)
     getTrestleList({
       moduleTpCd: trestleState?.moduleTpCd ?? '',
       roofMatlCd: trestleState?.roofMatlCd ?? '',
       raftBaseCd: trestleState?.raftBaseCd ?? '',
       trestleMkrCd: trestleState?.trestleMkrCd ?? '',
-    }).then((res) => {
-      if (res?.data) setConstMthdList(res.data)
     })
+      .then((res) => {
+        if (res?.data) setConstMthdList(res.data)
+        setPopSpinnerStore(false)
+      })
+      .catch((e) => {
+        setPopSpinnerStore(false)
+      })
   }
 
   const handleSetRoofBaseList = () => {
+    setPopSpinnerStore(true)
     getTrestleList({
       moduleTpCd: trestleState?.moduleTpCd ?? '',
       roofMatlCd: trestleState?.roofMatlCd ?? '',
       raftBaseCd: trestleState?.raftBaseCd ?? '',
       trestleMkrCd: trestleState?.trestleMkrCd ?? '',
       constMthdCd: trestleState?.constMthdCd ?? '',
-    }).then((res) => {
-      if (res?.data) setRoofBaseList(res.data)
     })
+      .then((res) => {
+        if (res?.data) setRoofBaseList(res.data)
+        setPopSpinnerStore(false)
+      })
+      .catch((e) => {
+        setPopSpinnerStore(false)
+      })
   }
 
   const handleSetConstructionList = () => {
+    setPopSpinnerStore(true)
     getConstructionList({
       moduleTpCd: trestleState?.moduleTpCd ?? '',
       roofMatlCd: trestleState?.roofMatlCd ?? '',
@@ -166,12 +187,18 @@ export function useModuleTrestle(props) {
       inclCd: trestleState.inclCd ?? '',
       raftBaseCd: trestleState.raftBaseCd ?? '',
       roofPitch: Math.round(trestleState.roofPitch) ?? '',
-    }).then((res) => {
-      if (res?.data) setConstructionList(res.data)
     })
+      .then((res) => {
+        if (res?.data) setConstructionList(res.data)
+        setPopSpinnerStore(false)
+      })
+      .catch((e) => {
+        setPopSpinnerStore(false)
+      })
   }
 
   const handleSetTrestleDetailData = () => {
+    setPopSpinnerStore(true)
     getTrestleDetailList([
       {
         moduleTpCd: trestleState.moduleTpCd ?? '',
@@ -189,24 +216,29 @@ export function useModuleTrestle(props) {
         roofPitch: trestleState.roofPitch ?? '',
         workingWidth: trestleState.workingWidth ?? '',
       },
-    ]).then((res) => {
+    ])
-      if (res.length > 0) {
+      .then((res) => {
-        if (!res[0].data) return
+        if (res.length > 0) {
-        setEavesMargin(res[0].data.eaveIntvl)
+          if (!res[0].data) return
-        setRidgeMargin(res[0].data.ridgeIntvl)
+          setEavesMargin(res[0].data.eaveIntvl)
-        setKerabaMargin(res[0].data.kerabaIntvl)
+          setRidgeMargin(res[0].data.ridgeIntvl)
-        setTrestleDetail(res[0].data)
+          setKerabaMargin(res[0].data.kerabaIntvl)
-        // dispatch({
+          setTrestleDetail(res[0].data)
-        //   type: 'SET_TRESTLE_DETAIL',
+          // dispatch({
-        //   roof: {
+          //   type: 'SET_TRESTLE_DETAIL',
-        //     ...trestleState,
+          //   roof: {
-        //     eavesMargin: res[0].data.eaveIntvl,
+          //     ...trestleState,
-        //     ridgeMargin: res[0].data.ridgeIntvl,
+          //     eavesMargin: res[0].data.eaveIntvl,
-        //     kerabaMargin: res[0].data.kerabaIntvl,
+          //     ridgeMargin: res[0].data.ridgeIntvl,
-        //   },
+          //     kerabaMargin: res[0].data.kerabaIntvl,
-        // })
+          //   },
-      }
+          // })
-    })
+        }
+        setPopSpinnerStore(false)
+      })
+      .catch((e) => {
+        setPopSpinnerStore(false)
+      })
   }
 
   return {