모듈 선택 탭 작업중

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

@@ -11,6 +11,10 @@ import { usePopup } from '@/hooks/usePopup'
 import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
 import { useEvent } from '@/hooks/useEvent'
+import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
+import { addedRoofsState } from '@/store/settingAtom'
+import { isObjectNotEmpty } from '@/util/common-utils'
+import Swal from 'sweetalert2'
 
 export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
@@ -20,13 +24,32 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   const orientationRef = useRef(null)
   const { initEvent } = useEvent()
   const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
+  const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
+  const addedRoofs = useRecoilValue(addedRoofsState)
 
   // const { initEvent } = useContext(EventContext)
   const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup } = useModuleBasicSetting()
   const handleBtnNextStep = () => {
     if (tabNum === 1) {
       orientationRef.current.handleNextStep()
+    } else if (tabNum === 2) {
+      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'),
+          icon: 'warning',
+        })
+        return
+      }
     }
+
     setTabNum(tabNum + 1)
   }
 

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

@@ -8,6 +8,7 @@ import { useModuleSelection } from '@/hooks/module/useModuleSelection'
 import ModuleTabContents from './ModuleTabContents'
 import { useDebounceValue } from 'usehooks-ts'
 import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
+import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
 
 export default function Module({ setTabNum }) {
   const { getMessage } = useMessage()
@@ -31,8 +32,8 @@ export default function Module({ setTabNum }) {
     handleChangeVerticalSnowCover,
   } = useModuleSelection({ addedRoofs })
 
-  const [inputInstallHeight, setInputInstallHeight] = useState(installHeight)
+  const [inputInstallHeight, setInputInstallHeight] = useState()``
-  const [inputVerticalSnowCover, setInputVerticalSnowCover] = useState(verticalSnowCover)
+  const [inputVerticalSnowCover, setInputVerticalSnowCover] = useState()
 
   const [debouncedInstallHeight] = useDebounceValue(inputInstallHeight, 500)
   const [debouncedVerticalSnowCover] = useDebounceValue(inputVerticalSnowCover, 500)
@@ -43,15 +44,31 @@ export default function Module({ setTabNum }) {
   }, moduleSelectionData)
 
   useEffect(() => {
-    setModuleSelectionData(tempModuleSelectionData)
+    if (installHeight) {
+      setInputInstallHeight(installHeight)
+    }
+    if (verticalSnowCover) {
+      setInputVerticalSnowCover(verticalSnowCover)
+    }
+  }, [installHeight, verticalSnowCover])
+
+  useEffect(() => {
+    if (tempModuleSelectionData) {
+      setModuleSelectionData(tempModuleSelectionData)
+      moduleSelectedDataTrigger(tempModuleSelectionData)
+    }
   }, [tempModuleSelectionData])
 
   useEffect(() => {
-    handleChangeInstallHeight(debouncedInstallHeight)
+    if (debouncedInstallHeight) {
+      handleChangeInstallHeight(debouncedInstallHeight)
+    }
   }, [debouncedInstallHeight])
 
   useEffect(() => {
-    handleChangeVerticalSnowCover(debouncedVerticalSnowCover)
+    if (debouncedVerticalSnowCover) {
+      handleChangeVerticalSnowCover(debouncedVerticalSnowCover)
+    }
   }, [debouncedVerticalSnowCover])
 
   const moduleData = {
@@ -71,6 +88,12 @@ export default function Module({ setTabNum }) {
     setRoofTab(tab)
   }
 
+  const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2)
+
+  useEffect(() => {
+    console.log('moduleSelectionData', moduleSelectionData)
+  }, [])
+
   return (
     <>
       <div className="roof-module-tab2-overflow">

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

@@ -464,7 +464,7 @@ export default function ModuleTabContents({ addRoof, roofTab, tempModuleSelectio
                   type="checkbox"
                   id={`ch01_${roofTab}`}
                   disabled={cvrYn === 'N' ? true : false}
-                  defaultChecked={cvrChecked}
+                  checked={cvrChecked}
                   onChange={handleCvrChecked}
                 />
                 <label htmlFor={`ch01_${roofTab}`}>{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
@@ -474,7 +474,7 @@ export default function ModuleTabContents({ addRoof, roofTab, tempModuleSelectio
                   type="checkbox"
                   id={`ch02_${roofTab}`}
                   disabled={snowGdPossYn === 'N' ? true : false}
-                  defaultChecked={snowGdChecked}
+                  checked={snowGdChecked}
                   onChange={handleSnowGdChecked}
                 />
                 <label htmlFor={`ch02_${roofTab}`}>{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>

src/hooks/common/useCanvasPopupStatusController.js

@@ -18,7 +18,7 @@ export function useCanvasPopupStatusController(param = 1) {
   const { getFetcher, postFetcher } = useAxios()
 
   const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
-  console.log('🚀 ~ Orientation ~ currentCanvasPlan:', currentCanvasPlan)
+  // console.log('🚀 ~ Orientation ~ currentCanvasPlan:', currentCanvasPlan)
 
   const {
     data: popupStatus,
@@ -30,7 +30,7 @@ export function useCanvasPopupStatusController(param = 1) {
   )
 
   useEffect(() => {
-    console.log('🚀 ~ useEffect ~ popupStatus:', popupStatus)
+    // console.log('🚀 ~ useEffect ~ popupStatus:', popupStatus)
     if (popupStatus) {
       switch (parseInt(popupStatus?.popupType)) {
         case 1:

src/hooks/module/useModuleBasicSetting.js

@@ -1308,13 +1308,13 @@ export function useModuleBasicSetting() {
       const pointX2 = coords[2].x + ((coords[2].y - top) / (coords[2].y - coords[1].y)) * (coords[1].x - coords[2].x)
       const pointY2 = top
 
-      const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], {
+      // const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], {
-        stroke: 'red',
+      //   stroke: 'red',
-        strokeWidth: 1,
+      //   strokeWidth: 1,
-        selectable: true,
+      //   selectable: true,
-      })
+      // })
-      canvas?.add(finalLine)
+      // canvas?.add(finalLine)
-      canvas?.renderAll()
+      // canvas?.renderAll()
 
       let rtnObj
       //평평하면
@@ -1431,13 +1431,13 @@ export function useModuleBasicSetting() {
       const pointX2 = top
       const pointY2 = coords[2].y + ((coords[2].x - top) / (coords[2].x - coords[1].x)) * (coords[1].y - coords[2].y)
 
-      const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], {
+      // const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], {
-        stroke: 'red',
+      //   stroke: 'red',
-        strokeWidth: 1,
+      //   strokeWidth: 1,
-        selectable: true,
+      //   selectable: true,
-      })
+      // })
-      canvas?.add(finalLine)
+      // canvas?.add(finalLine)
-      canvas?.renderAll()
+      // canvas?.renderAll()
 
       let rtnObj
       //평평하면

src/hooks/module/useModuleSelection.js

@@ -15,28 +15,37 @@ export function useModuleSelection(props) {
 
   const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈
   const [selectedSurfaceType, setSelectedSurfaceType] = useState({}) //선택된 면조도
-  const [installHeight, setInstallHeight] = useState(managementState?.installHeight) //설치 높이
+  const [installHeight, setInstallHeight] = useState() //설치 높이
   const [standardWindSpeed, setStandardWindSpeed] = useState({}) //기준풍속
-  const [verticalSnowCover, setVerticalSnowCover] = useState(managementState?.verticalSnowCover) //수직적설량
+  const [verticalSnowCover, setVerticalSnowCover] = useState() //수직적설량
   const [moduleSelectionInitParams, setModuleSelectionInitParams] = useRecoilState(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등
 
   const { getModuleTypeItemList } = useMasterController()
 
   const { findCommonCode } = useCommonCode()
 
-  //탭별 파라메터 초기화
+  const bindInitData = () => {
-  useEffect(() => {
     setInstallHeight(managementState?.installHeight)
     setStandardWindSpeed(managementState?.standardWindSpeedId)
     setVerticalSnowCover(managementState?.verticalSnowCover)
     setSelectedSurfaceType(managementState?.surfaceType)
+  }
 
+  //탭별 파라메터 초기화
+  useEffect(() => {
+    bindInitData()
     const initParams = {
       illuminationTp: managementState?.surfaceTypeValue, //면조도
       instHt: managementState?.installHeight, //설치높이
       stdWindSpeed: managementState?.standardWindSpeedId, //기준풍속
       stdSnowLd: managementState?.verticalSnowCover, //기준적설량
     }
+
+    if (selectedModules) {
+      initParams.moduleTpCd = selectedModules.itemTp
+      initParams.moduleItemId = selectedModules.itemId
+    }
+
     setModuleSelectionInitParams(initParams)
   }, [managementState])
 
@@ -64,9 +73,13 @@ export function useModuleSelection(props) {
       return
     }
 
+    console.log('managementState', managementState)
+
     //새로고침시 데이터 날아가는거 방지
-    if (!managementState) {
+    if (managementState === null) {
       setManagementState(managementStateLoaded)
+    } else {
+      bindInitData()
     }
 
     getModuleData(roofsIds)
@@ -101,12 +114,23 @@ export function useModuleSelection(props) {
       ...moduleSelectionInitParams,
       illuminationTp: option.clCode,
     })
+
+    setManagementState({
+      ...managementState,
+      surfaceType: option.clCodeNm,
+      surfaceTypeValue: option.clCode,
+    })
   }
 
   const handleChangeWindSpeed = (option) => {
     setModuleSelectionInitParams({
       ...moduleSelectionInitParams,
-      surfaceType: option.clCode,
+      stdWindSpeed: option.clCode,
+    })
+
+    setManagementState({
+      ...managementState,
+      standardWindSpeedId: option.clCode,
     })
   }
 
@@ -116,15 +140,24 @@ export function useModuleSelection(props) {
       ...moduleSelectionInitParams,
       instHt: option,
     })
+
+    setManagementState({
+      ...managementState,
+      installHeight: option,
+    })
   }
 
   const handleChangeVerticalSnowCover = (option) => {
     setVerticalSnowCover(option)
-
     setModuleSelectionInitParams({
       ...moduleSelectionInitParams,
       stdSnowLd: option,
     })
+
+    setManagementState({
+      ...managementState,
+      verticalSnowCover: option,
+    })
   }
 
   useEffect(() => {

src/locales/ko.json

@@ -987,5 +987,7 @@
   "module.place.no.surface": "선택된 모듈 설치면이 없습니다.",
   "module.place.select.module": "모듈을 선택해주세요.",
   "module.place.select.one.module": "모듈은 하나만 선택해주세요.",
-  "batch.canvas.delete.all": "배치면 내용을 전부 삭제하시겠습니까?"
+  "batch.canvas.delete.all": "배치면 내용을 전부 삭제하시겠습니까?",
+  "module.not.found": "설치 모듈을 선택하세요.",
+  "construction.length.difference": "지붕면 공법을 전부 선택해주세요."
 }