withDraggable spinner 추가

Reviewed-on: #18

src/components/estimate/Estimate.jsx

@@ -13,7 +13,7 @@ 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, { components } from 'react-select'
 import { convertNumberToPriceDecimal, convertNumberToPriceDecimalToFixed } from '@/util/common-utils'
 import ProductFeaturesPop from './popup/ProductFeaturesPop'
 import { v4 as uuidv4 } from 'uuid'
@@ -504,7 +504,8 @@ export default function Estimate({}) {
       saleStoreId: estimateContextState.sapSaleStoreId,
       sapSalesStoreCd: estimateContextState.sapSalesStoreCd,
       docTpCd: estimateContextState.estimateType,
-      secSapSalesStoreCd:(estimateContextState.secSapSalesStoreCd?.length > 0 && showPriceCd === 'QSP_PRICE')? estimateContextState.secSapSalesStoreCd :'',
+      secSapSalesStoreCd:
+        estimateContextState.secSapSalesStoreCd?.length > 0 && showPriceCd === 'QSP_PRICE' ? estimateContextState.secSapSalesStoreCd : '',
       priceCd: showPriceCd,
       itemIdList: estimateContextState.itemList.filter((item) => item.delFlg === '0' && item.paDispOrder === null),
     }
@@ -1220,19 +1221,17 @@ export default function Estimate({}) {
   const [agencyCustList, setAgencyCustList] = useState([])
   useEffect(() => {
     // 952 - 2차점 특가 sapSalesStoreCd
-    if(estimateContextState?.sapSalesStoreCd && session?.storeLvl === '1') {
+    if (estimateContextState?.sapSalesStoreCd && session?.storeLvl === '1') {
       const param = {
         sapSalesStoreCd: estimateContextState.sapSalesStoreCd,
       }
       const apiUrl = `api/estimate/agency-cust-list?${queryStringFormatter(param)}`
       get({ url: apiUrl }).then((res) => {
         if (isNotEmptyArray(res?.data)) {
-          setAgencyCustList(res?.data);
+          setAgencyCustList(res?.data)
         }
-
       })
     }
-
   }, [estimateContextState?.sapSalesStoreCd])
   return (
     <div className="sub-content estimate">
@@ -1381,11 +1380,16 @@ export default function Estimate({}) {
                       <div className="form-flex-wrap">
                         <div className="radio-wrap">
                           {/*pkgRank is null, empty 인 경우 : 사용불가, 이전에 등록된 경우 사용가능, style로 제어*/}
-                          <div className="d-check-radio light mr10"    style={{display:
-                              (isNotEmptyArray(storePriceList) > 0
-                                && storePriceList[0].pkgRank !== null
-                                && storePriceList[0].pkgRank !== ''
-                                || estimateContextState?.estimateType === 'YJSS') ? "" : "none"}}>
+                          <div
+                            className="d-check-radio light mr10"
+                            style={{
+                              display:
+                                (isNotEmptyArray(storePriceList) > 0 && storePriceList[0].pkgRank !== null && storePriceList[0].pkgRank !== '') ||
+                                estimateContextState?.estimateType === 'YJSS'
+                                  ? ''
+                                  : 'none',
+                            }}
+                          >
                             <input
                               type="radio"
                               name="estimateType"
@@ -1415,7 +1419,7 @@ export default function Estimate({}) {
                             <label htmlFor="YJOD">{getMessage('estimate.detail.estimateType.yjod')}</label>
                           </div>
                         </div>
-                        { (session?.storeLvl === '1' && agencyCustList.length > 0 )? (
+                        {session?.storeLvl === '1' && agencyCustList.length > 0 ? (
                           <div className="form-flex-select ml10">
                             <label htmlFor="">{getMessage('estimate.detail.agency')}</label>
                             <div className="select-wrap" style={{ width: '400px' }}>
@@ -1443,7 +1447,9 @@ export default function Estimate({}) {
                               />
                             </div>
                           </div>
-                        ) : ('')}
+                        ) : (
+                          ''
+                        )}
                       </div>
                     </td>
                   </tr>
@@ -1932,16 +1938,12 @@ export default function Estimate({}) {
                                         }
                                       }}
                                       menuPlacement={'auto'}
-                                      getOptionLabel={(x) => x.itemName + " (" + x.itemNo + ")"}
+                                      getOptionLabel={(x) => x.itemName + ' (' + x.itemNo + ')'}
                                       getOptionValue={(x) => x.itemNo}
                                       components={{
-                                        SingleValue:({children, ...props}) =>{
-                                          return (
-                                            <components.SingleValue{...props}>
-                                              {props.data.itemName}
-                                            </components.SingleValue>
-                                          )
-                                        }
+                                        SingleValue: ({ children, ...props }) => {
+                                          return <components.SingleValue {...props}>{props.data.itemName}</components.SingleValue>
+                                        },
                                       }}
                                       isClearable={false}
                                       isDisabled={!!item?.paDispOrder}
@@ -1962,16 +1964,12 @@ export default function Estimate({}) {
                                       placeholder="Select"
                                       options={cableItemList}
                                       menuPlacement={'auto'}
-                                      getOptionLabel={(x) => x.clRefChr3 + " (" + x.clRefChr1 + ")"}
+                                      getOptionLabel={(x) => x.clRefChr3 + ' (' + x.clRefChr1 + ')'}
                                       getOptionValue={(x) => x.clRefChr1}
                                       components={{
-                                        SingleValue:({children, ...props}) =>{
-                                          return (
-                                            <components.SingleValue{...props}>
-                                              {props.data.clRefChr3}
-                                            </components.SingleValue>
-                                          )
-                                        }
+                                        SingleValue: ({ children, ...props }) => {
+                                          return <components.SingleValue {...props}>{props.data.clRefChr3}</components.SingleValue>
+                                        },
                                       }}
                                       isClearable={false}
                                       isDisabled={true}
@@ -2027,7 +2025,11 @@ export default function Estimate({}) {
                                   <input
                                     type="text"
                                     className="input-light al-r"
-                                    value={convertNumberToPriceDecimal(item?.showSalePrice === '0' ? null : item?.salePrice?.replaceAll(',', ''))}
+                                    value={
+                                      item.openFlg === '1'
+                                        ? 'OPEN'
+                                        : convertNumberToPriceDecimal(item?.showSalePrice === '0' ? null : item?.salePrice?.replaceAll(',', ''))
+                                    }
                                     disabled={
                                       item.openFlg === '1'
                                         ? true

src/components/floor-plan/modal/basic/BasicSetting.jsx

@@ -84,6 +84,18 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
     useModuleBasicSetting(tabNum)
   const { updateObjectDate } = useMasterController()
 
+  useEffect(() => {
+    let hasModules = canvas
+      .getObjects()
+      .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
+      .some((obj) => obj.modules?.length > 0)
+
+    if (hasModules) {
+      orientationRef.current.handleNextStep()
+      setTabNum(3)
+    }
+  }, [])
+
   useEffect(() => {
     if (roofsStore && addedRoofs) {
       setRoofs(
@@ -113,18 +125,6 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
     }
   }, [roofsStore, addedRoofs])
 
-  useEffect(() => {
-    let hasModules = canvas
-      .getObjects()
-      .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
-      .some((obj) => obj.modules?.length > 0)
-
-    if (hasModules) {
-      orientationRef.current.handleNextStep()
-      setTabNum(3)
-    }
-  }, [])
-
   useEffect(() => {
     if (basicSetting.roofSizeSet !== '3') {
       manualModuleSetup()
@@ -144,18 +144,10 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
     if (tabNum === 1) {
       orientationRef.current.handleNextStep()
       setAddedRoofs(roofs)
-      setTabNum(tabNum + 1)
+      // setTabNum(tabNum + 1)
       return
     } else if (tabNum === 2) {
       if (basicSetting.roofSizeSet !== '3') {
-        if (!isObjectNotEmpty(moduleSelectionData.module)) {
-          Swal.fire({
-            title: getMessage('module.not.found'),
-            icon: 'warning',
-          })
-          return
-        }
-
         // if (addedRoofs.length !== moduleSelectionData.roofConstructions.length) {
         //   Swal.fire({
         //     title: getMessage('construction.length.difference'),

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

@@ -9,6 +9,7 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
 import { roofsState } from '@/store/roofAtom'
+import Swal from 'sweetalert2'
 
 export const Orientation = forwardRef((props, ref) => {
   const { getMessage } = useMessage()
@@ -50,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)
@@ -92,7 +94,7 @@ export const Orientation = forwardRef((props, ref) => {
 
   useEffect(() => {
     if (addedRoofs) {
-      setRoofs(addedRoofs)
+      // setRoofs(addedRoofs)
       // setAddedRoofs(roofsStore)
     }
   }, [addedRoofs])
@@ -112,6 +114,7 @@ export const Orientation = forwardRef((props, ref) => {
         saleStoreNorthFlg: managementState?.saleStoreNorthFlg,
         moduleTpCd: selectedModules.itemTp,
         moduleItemId: selectedModules.itemId,
+        margin: inputMargin,
       }
       setCompasDeg(inputCompasDeg)
       setInstallHeight(inputInstallHeight)
@@ -150,6 +153,14 @@ export const Orientation = forwardRef((props, ref) => {
         userId: loginUserState.userId, //작성자아아디
       })
       setTabNum(2)
+    } else {
+      if (!selectedModules || !selectedModules.itemId) {
+        Swal.fire({
+          title: getMessage('module.not.found'),
+          icon: 'warning',
+        })
+        return
+      }
     }
   }
 
@@ -172,7 +183,7 @@ export const Orientation = forwardRef((props, ref) => {
   }
 
   const isComplete = () => {
-    if (!selectedModules) return false
+    if (!selectedModules || !selectedModules.itemId) return false
     if (basicSetting && basicSetting.roofSizeSet !== '3') {
       if (inputInstallHeight <= 0) {
         return false
@@ -373,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
-                        type="text"
-                        className="input-origin block"
-                        value={inputInstallHeight}
-                        onChange={(e) => setInputInstallHeight(e.target.value)}
-                      />
+                      <input type="text" className="input-origin block" value={inputMargin} onChange={(e) => setInputMargin(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/components/floor-plan/modal/basic/step/Trestle.jsx

@@ -266,6 +266,8 @@ const Trestle = forwardRef((props, ref) => {
   }
 
   const isComplete = async () => {
+    console.log('roofs', roofs)
+
     const newAddedRoofs = roofs.map((roof, i) => {
       if (i === selectedRoof?.index) {
         return {
@@ -291,6 +293,7 @@ const Trestle = forwardRef((props, ref) => {
     })
 
     let result = true
+    console.log('newAddedRoofs', newAddedRoofs)
     newAddedRoofs.forEach((roof) => {
       if (!roof?.eavesMargin || !roof?.ridgeMargin || !roof?.kerabaMargin) result = false
       if (!roof.trestle?.trestleMkrCd) result = false

src/hooks/module/useModuleBasicSetting.js

@@ -91,16 +91,10 @@ export function useModuleBasicSetting(tabNum) {
         const roofConstructions = moduleSelectionData.roofConstructions
 
         if (roofConstructions && roofConstructions.length > 0) {
-          const listParams = roofConstructions.map((item) => {
-            return {
-              ...common,
-              ...item.addRoof,
-              ...item.trestle,
-              roofPitch: item.addRoof.hajebichi ? item.addRoof.hajebichi : 0,
-              inclCd: String(item.addRoof.pitch),
-            }
-          })
-          setTrestleDetailParams(listParams)
+          //roofIndex 넣기
+          const roofConstructionArray = roofConstructions.map((detail) => ({ ...detail.trestleDetail, roofIndex: detail.roofIndex }))
+
+          setTrestleDetailList(roofConstructionArray)
 
           //북면 설치 가능 판매점
           if (moduleSelectionData.common.saleStoreNorthFlg === '1') {
@@ -119,23 +113,10 @@ export function useModuleBasicSetting(tabNum) {
     }
   }
 
-  //가대 상세 데이터 조회
-  const getTrestleDetailListData = async () => {
-    const trestleDetailList = await getTrestleDetailList(trestleDetailParams)
-    if (trestleDetailList.length > 0) {
-      setTrestleDetailList(trestleDetailList)
-    }
-  }
-
-  //가대 상세 데이터 파라메터 담기면 실행
-  useEffect(() => {
-    if (trestleDetailParams.length > 0) {
-      getTrestleDetailListData(trestleDetailParams)
-    }
-  }, [trestleDetailParams])
-
   //가대 상세 데이터 들어오면 실행
   useEffect(() => {
+    console.log('trestleDetailList', trestleDetailList)
+
     if (trestleDetailList.length > 0) {
       let rowColArray = []
       //지붕을 가져옴
@@ -147,11 +128,11 @@ export function useModuleBasicSetting(tabNum) {
           const roofIndex = roof.roofMaterial.index //지붕의 지붕재의 순번
 
           trestleDetailList.forEach((detail) => {
-            if (detail.data !== null) {
-              if (Number(detail.data.roofIndex) === roofIndex) {
+            if (isObjectNotEmpty(detail)) {
+              if (Number(detail.roofIndex) === roofIndex) {
                 //roof에 상세 데이터 추가
                 roof.set({
-                  trestleDetail: detail.data,
+                  trestleDetail: detail,
                   stroke: roofOutlineColor(roofIndex),
                   strokeWidth: 7,
                 })
@@ -162,7 +143,7 @@ export function useModuleBasicSetting(tabNum) {
                   line.attributes = { ...line.attributes, offset: getOffset(offsetObjects.addRoof, line.attributes.type) }
                 })
                 //배치면 설치 영역
-                makeModuleInstArea(roof, detail.data)
+                makeModuleInstArea(roof, detail)
               }
             }
           })
@@ -170,8 +151,8 @@ export function useModuleBasicSetting(tabNum) {
 
       trestleDetailList.forEach((detail) => {
         const moduleRowArray = []
-        if (detail.data !== null && detail.data.module.length > 0) {
-          detail.data.module.forEach((module) => {
+        if (isObjectNotEmpty(detail) && detail.module.length > 0) {
+          detail.module.forEach((module) => {
             moduleRowArray.push({ moduleMaxRows: module.moduleMaxRows, mixModuleMaxRows: module.mixModuleMaxRows })
           })
         }
@@ -407,6 +388,8 @@ export function useModuleBasicSetting(tabNum) {
 
   //모듈,회로에서 다른메뉴 -> 배치면으로 갈 경수 초기화
   const restoreModuleInstArea = () => {
+    console.log('tabnum', tabNum)
+
     //설치면 삭제
     const setupArea = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE || obj.name === POLYGON_TYPE.OBJECT_SURFACE)
 

src/hooks/module/useModuleSelection.js

@@ -96,7 +96,7 @@ export function useModuleSelection(props) {
     getModuleData(roofsIds)
 
     //모듈설치면 초기화
-    restoreModuleInstArea()
+    // restoreModuleInstArea()
     resetStatisticsData()
   }, [])
 

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) => {
+    })
+      .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) => {
+    })
+      .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) => {
+    })
+      .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) => {
+    })
+      .then((res) => {
         if (res?.data) setConstructionList(res.data)
+        setPopSpinnerStore(false)
+      })
+      .catch((e) => {
+        setPopSpinnerStore(false)
       })
   }
 
   const handleSetTrestleDetailData = () => {
+    setPopSpinnerStore(true)
     getTrestleDetailList([
       {
         moduleTpCd: trestleState.moduleTpCd ?? '',
@@ -189,7 +216,8 @@ export function useModuleTrestle(props) {
         roofPitch: trestleState.roofPitch ?? '',
         workingWidth: trestleState.workingWidth ?? '',
       },
-    ]).then((res) => {
+    ])
+      .then((res) => {
         if (res.length > 0) {
           if (!res[0].data) return
           setEavesMargin(res[0].data.eaveIntvl)
@@ -206,6 +234,10 @@ export function useModuleTrestle(props) {
           //   },
           // })
         }
+        setPopSpinnerStore(false)
+      })
+      .catch((e) => {
+        setPopSpinnerStore(false)
       })
   }
 

src/hooks/useCirCuitTrestle.js

@@ -31,7 +31,7 @@ export function useCircuitTrestle(executeEffect = false) {
   const { getMessage } = useMessage()
 
   useEffect(() => {
-    if (Object.keys(selectedModules).length > 0 && executeEffect) setModuleStatisticsData()
+    if (selectedModules && Object.keys(selectedModules).length > 0 && executeEffect) setModuleStatisticsData()
   }, [selectedModules])
 
   const getOptYn = () => {

src/store/selectedModuleOptions.js

@@ -2,7 +2,7 @@ import { atom } from 'recoil'
 
 export const selectedModuleState = atom({
   key: 'selectedModuleState',
-  default: [],
+  default: null,
   dangerouslyAllowMutability: true,
 })