Merge branch 'dev' into feature/qcast-229

src/components/estimate/Estimate.jsx

@@ -19,7 +19,10 @@ import { convertNumberToPriceDecimal, convertNumberToPriceDecimalToFixed } from
 import ProductFeaturesPop from './popup/ProductFeaturesPop'
 import { v4 as uuidv4 } from 'uuid'
 import { correntObjectNoState } from '@/store/settingAtom'
-import { useSearchParams } from 'next/navigation'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
+import { usePlan } from '@/hooks/usePlan'
+import { usePopup } from '@/hooks/usePopup'
 
 export default function Estimate({}) {
   const [uniqueData, setUniqueData] = useState([])
@@ -70,6 +73,9 @@ export default function Estimate({}) {
   //견적서 상세데이터
   const { estimateContextState, setEstimateContextState, addItem, handleEstimateFileDownload } = useEstimateController(currentPid)
 
+  const { selectedPlan } = usePlan()
+  const router = useRouter()
+
   //견적특이사항 List
   const [specialNoteList, setSpecialNoteList] = useState([])
   const [popShowSpecialNoteList, setPopShowSpecialNoteList] = useState([])
@@ -81,6 +87,8 @@ export default function Estimate({}) {
 
   const { setMenuNumber } = useCanvasMenu()
 
+  const { closeAll } = usePopup()
+
   const currentObjectNo = searchParams.get('objectNo')
   setCurrentObjectNo(currentObjectNo)
 
@@ -90,11 +98,12 @@ export default function Estimate({}) {
     setUploadFiles: setFiles,
   }
 
-  useEffect(() => {
+  const initEstimate = (currPid = currentPid) => {
+    console.log('🚀 ~ initEstimate ~ currPid:', currPid)
     setMenuNumber(5)
     setObjectNo(objectRecoil.floorPlanObjectNo)
 
-    setPlanNo(currentPid)
+    setPlanNo(currPid)
 
     // 공통코드
     const code1 = findCommonCode(200800)
@@ -121,6 +130,16 @@ export default function Estimate({}) {
         setPopShowSpecialNoteList(res)
       }
     })
+  }
+
+  useEffect(() => {
+    console.log('🚀 ~ Estimate ~ selectedPlan:', selectedPlan)
+    if (selectedPlan) initEstimate(selectedPlan.ordering)
+  }, [selectedPlan])
+
+  useEffect(() => {
+    closeAll()
+    initEstimate()
   }, [])
 
   useEffect(() => {

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

@@ -71,6 +71,10 @@ export default function Module({}) {
 
   useEffect(() => {}, [roofTab])
 
+  useEffect(() => {
+    console.log('moduleSelectionData', moduleSelectionData)
+  }, [])
+
   const handleRoofTab = (tab) => {
     setRoofTab(tab)
   }
@@ -226,8 +230,9 @@ export default function Module({}) {
                 key={index}
                 index={index}
                 addRoof={roof}
-                roofTab={roofTab}
+                roofTab={index}
-                moduleSelectionData={moduleSelectionData}
+                moduleCommonSelectionData={moduleSelectionData.common}
+                moduleConstructionSelectionData={moduleSelectionData.roofConstructions[index]}
                 setModuleSelectionData={setModuleSelectionData}
                 tempModuleSelectionData={tempModuleSelectionData}
                 setTempModuleSelectionData={setTempModuleSelectionData}

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

@@ -1,24 +1,25 @@
-import { useEffect, useState, useRef, useReducer } from 'react'
+import { useEffect, useState, useRef } from 'react'
-import { useRecoilValue, useRecoilState } from 'recoil'
+import { useRecoilValue } from 'recoil'
 import { canvasSettingState, pitchSelector, pitchTextSelector } from '@/store/canvasAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { useMasterController } from '@/hooks/common/useMasterController'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
 import { moduleSelectionInitParamsState, selectedModuleState } from '@/store/selectedModuleOptions'
-import { isNotEmptyArray, isObjectNotEmpty } from '@/util/common-utils'
+import { isObjectNotEmpty } from '@/util/common-utils'
 import QSelectBox from '@/components/common/select/QSelectBox'
 
 export default function ModuleTabContents({
   addRoof,
   roofTab,
-  moduleSelectionData,
+  moduleCommonSelectionData,
+  moduleConstructionSelectionData,
   setModuleSelectionData,
   tempModuleSelectionData,
   setTempModuleSelectionData,
 }) {
   const { getMessage } = useMessage()
   const canvasSetting = useRecoilValue(canvasSettingState) //캔버스 기본 셋팅
-  const [roofMaterial, setRoofMaterial] = useState(addRoof) //지붕재
+  const [roofMaterial, setRoofMaterial] = useState(addRoof) //지붕재`
 
   const globalPitch = useRecoilValue(pitchSelector) //피치
   const globalPitchText = useRecoilValue(pitchTextSelector) //피치 텍스트
@@ -54,6 +55,10 @@ export default function ModuleTabContents({
 
   const [isExistData, setIsExistData] = useState(false)
 
+  useEffect(() => {
+    console.log('addRoof', addRoof)
+  }, [])
+
   //서까래간격 변경
   const handleChangeRaftBase = (option) => {
     setSelectedRaftBase(option)
@@ -89,11 +94,12 @@ export default function ModuleTabContents({
 
   const getModuleOptionsListData = async (params) => {
     const optionsList = await getTrestleList(params)
+
     if (optionsList.data.length > 0) {
       if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd === null) {
         setTrestleList(optionsList.data)
         if (isExistData) {
-          setSelectedTrestle({ ...moduleSelectionData.roofConstructions[roofTab].trestle })
+          setSelectedTrestle({ ...moduleConstructionSelectionData.trestle })
         } else {
           setConstMthdList([])
           setRoofBaseList([])
@@ -103,7 +109,7 @@ export default function ModuleTabContents({
       if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd === null) {
         setConstMthdList(optionsList.data)
         if (isExistData) {
-          setSelectedConstMthd({ ...moduleSelectionData.roofConstructions[roofTab].trestle })
+          setSelectedConstMthd({ ...moduleConstructionSelectionData.trestle })
         } else {
           setRoofBaseList([])
         }
@@ -112,7 +118,7 @@ export default function ModuleTabContents({
       if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd) {
         setRoofBaseList(optionsList.data)
         if (isExistData) {
-          setSelectedRoofBase({ ...moduleSelectionData.roofConstructions[roofTab].trestle })
+          setSelectedRoofBase({ ...moduleConstructionSelectionData.trestle })
         }
       }
     }
@@ -139,8 +145,6 @@ export default function ModuleTabContents({
     constructionRef.current[index].classList.remove('white')
     constructionRef.current[index].classList.add('blue')
 
-    debugger
-
     const selectedConstruction = constructionList[index]
     selectedConstruction.roofIndex = roofTab
     selectedConstruction.setupCover = false //처마력바 설치 여부
@@ -197,8 +201,8 @@ export default function ModuleTabContents({
   }, [selectedRoofBase])
 
   useEffect(() => {
-    if (isExistData) {
+    if (isExistData && constructionList.length > 0) {
-      const selectedIndex = moduleSelectionData.roofConstructions[roofTab].construction.selectedIndex
+      const selectedIndex = moduleConstructionSelectionData.construction.selectedIndex
       handleConstruction(selectedIndex)
     }
   }, [constructionList])
@@ -227,9 +231,11 @@ export default function ModuleTabContents({
         setTrestleParams({ moduleTpCd: moduleSelectionInitParams.moduleTpCd, roofMatlCd: addRoof.roofMatlCd, raftBaseCd: addRoof.raftBaseCd })
         setConstructionList([])
 
-        if (isObjectNotEmpty(moduleSelectionData.roofConstructions[roofTab])) {
+        if (isObjectNotEmpty(moduleConstructionSelectionData)) {
-          setConstructionParams({ ...moduleSelectionData.roofConstructions[roofTab].trestle, constMthdCd: '', roofBaseCd: '' })
+          setConstructionParams({ ...moduleConstructionSelectionData.trestle, constMthdCd: '', roofBaseCd: '' })
-          setRoofBaseParams({ ...moduleSelectionData.roofConstructions[roofTab].trestle, roofBaseCd: '' })
+          setRoofBaseParams({ ...moduleConstructionSelectionData.trestle, roofBaseCd: '' })
+          setCvrChecked(moduleConstructionSelectionData.construction.setupCover)
+          setSnowGdChecked(moduleConstructionSelectionData.construction.setupSnowCover)
           setIsExistData(true)
         }
       }
@@ -437,18 +443,24 @@ export default function ModuleTabContents({
             </div>
             <div className="grid-check-form">
               <div className="d-check-box pop">
-                <input type="checkbox" id="ch01" disabled={cvrYn === 'N' ? true : false} checked={cvrChecked} onChange={handleCvrChecked} />
+                <input
-                <label htmlFor="ch01">{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
+                  type="checkbox"
+                  id={`ch01_${roofTab}`}
+                  disabled={cvrYn === 'N' ? true : false}
+                  checked={cvrChecked}
+                  onChange={handleCvrChecked}
+                />
+                <label htmlFor={`ch01_${roofTab}`}>{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
               </div>
               <div className="d-check-box pop">
                 <input
                   type="checkbox"
-                  id="ch02"
+                  id={`ch02_${roofTab}`}
                   disabled={snowGdPossYn === 'N' ? true : false}
                   checked={snowGdChecked}
                   onChange={handleSnowGdChecked}
                 />
-                <label htmlFor="ch02">{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
+                <label htmlFor={`ch02_${roofTab}`}>{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
               </div>
             </div>
           </div>

src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx

@@ -45,13 +45,13 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   useEffect(() => {
     const raftCodeList = findCommonCode('203800')
     setRaftCodes(raftCodeList)
+    setCurrentRoof({...currentRoof, roofSizeSet: basicSetting.roofMaterials.roofSizeSet, roofAngleSet: basicSetting.roofMaterials.roofAngleSet})
   }, [])
 
   useEffect(() => {
-    console.log('🚀 ~ useEffect ~ basicSetting:', currentRoof)
       setBasicSettings({
         ...basicSetting,
-        roofSizeSet: currentRoof.roofSizeSet,
+        roofSizeSet:  String(currentRoof.roofSizeSet),
         roofAngleSet: currentRoof.roofAngleSet,
         roofsData: {
           roofApply: true,
@@ -62,6 +62,8 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
           roofHajebichi: currentRoof.hajebichi,
           roofGap: currentRoof.raft,
           roofLayout: currentRoof.layout,
+          roofPitch: currentRoof.pitch,
+          roofAngle: currentRoof.angle,
         },
       })
   }, [currentRoof])
@@ -77,8 +79,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   // Function to update the roofType and corresponding values
   const handleRoofTypeChange = (value) => {
     const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value)
-    console.log('🚀 ~ handleRoofTypeChange ~ selectedRoofMaterial:', selectedRoofMaterial)
+    setCurrentRoof({...selectedRoofMaterial, index: 0, roofSizeSet: String(currentRoof.roofSizeSet), roofAngleSet: currentRoof.roofAngleSet})
-    setCurrentRoof({...selectedRoofMaterial, index: 0, roofSizeSet: currentRoof.roofSizeSet, roofAngleSet: currentRoof.roofAngleSet})
   }
 
   const changeInput = (value, e) => {
@@ -139,6 +140,8 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
         roofLayout: currentRoof.layout,
         roofSizeSet: currentRoof.roofSizeSet,
         roofAngleSet: currentRoof.roofAngleSet,
+        roofPitch: currentRoof.pitch,
+        roofAngle: currentRoof.angle,
       },
     })
 
@@ -183,7 +186,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           value="1" // roofSizeSet 값이 '1'인 경우
                           checked={currentRoof.roofSizeSet === '1'} // 선택 여부 확인
                           //onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
-                          onClick={() => handleRoofSizeSetChange(1)}
+                          onClick={() => handleRoofSizeSetChange('1')}
                         />
                         <label htmlFor="ra01">{getMessage('modal.placement.initial.setting.size.roof')}</label>
                       </div>
@@ -195,7 +198,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           value="2" // roofSizeSet 값이 '2'인 경우
                           checked={currentRoof.roofSizeSet === '2'} // 선택 여부 확인
                           //onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
-                          onClick={() => handleRoofSizeSetChange(2)}
+                          onClick={() => handleRoofSizeSetChange('2')}
                         />
                         <label htmlFor="ra02">{getMessage('modal.placement.initial.setting.size.actual')}</label>
                       </div>
@@ -207,7 +210,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           value="3" // roofSizeSet 값이 '3'인 경우
                           checked={currentRoof.roofSizeSet === '3'} // 선택 여부 확인
                           //onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
-                          onClick={() => handleRoofSizeSetChange(3)}
+                          onClick={() => handleRoofSizeSetChange('3')}
                         />
                         <label htmlFor="ra03">{getMessage('modal.placement.initial.setting.size.none.pitch')}</label>
                       </div>
@@ -256,17 +259,17 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                     <div className="placement-option">
                       <div className="grid-select no-flx" style={{ width: '171px' }}>
                         <QSelectBox
-                          title={currentRoof.roofSizeSet == 3 ? getMessage('modal.placement.initial.setting.size.none.pitch') : currentRoof.roofMatlNm}
+                          title={currentRoof.roofSizeSet === '3' ? getMessage('modal.placement.initial.setting.size.none.pitch') : currentRoof.roofMatlNm}
                           ref={roofRef.roofCd}
                           options={roofMaterials.map((roof, index) => {
                             return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp }
                           })}
-                          value={currentRoof.roofSizeSet == 3 ? null : currentRoof.roofMatlCd}                          
+                          value={currentRoof.roofSizeSet === '3' ? null : currentRoof.roofMatlCd}                          
                           onChange={(e) => handleRoofTypeChange(e.roofMatlCd)}
                           sourceKey="id"
                           targetKey="id"
                           showKey="name"
-                          disabled={currentRoof.roofSizeSet == 3}
+                          disabled={currentRoof.roofSizeSet === '3'}
                         />
                         {/* <select
                           className="select-light dark"
@@ -298,7 +301,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                               value={parseInt(currentRoof.width)}
                               onChange={(e) => onlyNumberInputChange(e, changeInput)}
                               readOnly={currentRoof.widAuth === 'R'}
-                              disabled={currentRoof.roofSizeSet == 3}
+                              disabled={currentRoof.roofSizeSet === '3'}
                             />
                           </div>
                           {/* <div className="input-grid" style={{ width: '63px' }}>
@@ -323,7 +326,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                               value={parseInt(currentRoof.length)}
                               onChange={(e) => onlyNumberInputChange(e, changeInput)}
                               readOnly={currentRoof.lenAuth === 'R'}
-                              disabled={currentRoof.roofSizeSet == 3}
+                              disabled={currentRoof.roofSizeSet === '3'}
                             />
                           </div>
                           {/* <div className="input-grid" style={{ width: '63px' }}>
@@ -350,7 +353,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                               sourceKey="clCode"
                               targetKey={currentRoof.raft ? 'raft' : 'raftBaseCd'}
                               showKey="clCodeNm"
-                              disabled={currentRoof.roofSizeSet == 3}
+                              disabled={currentRoof.roofSizeSet === '3'}
                             />
                             {/* <select className="select-light dark" name="roofGap" ref={roofRef.rafter}>
                               {raftCodes.map((raft, index) => {
@@ -377,7 +380,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                               value={parseInt(currentRoof.hajebichi)}
                               onChange={(e) => onlyNumberInputChange(e, changeInput)}
                               readOnly={currentRoof.roofPchAuth === 'R'}
-                              disabled={currentRoof.roofSizeSet == 3}
+                              disabled={currentRoof.roofSizeSet === '3'}
                             />
                           </div>
                         </div>

src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx

@@ -119,7 +119,7 @@ export default function RoofAllocationSetting(props) {
                               type="text"
                               className="input-origin block"
                               onChange={(e) => {
-                                handleChangeInput(e, 'pitch', index)
+                                handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index)
                               }}
                               defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
                             />

src/components/floor-plan/modal/roofShape/type/Pattern.jsx

@@ -29,7 +29,7 @@ export default function Pattern(props) {
           {getMessage('gable.offset')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={gableOffset} onChange={setGableOffset} />
+          <input type="text" className="input-origin block" value={gableOffset} onChange={(e) => onlyNumberInputChange(e, setGableOffset)} />
         </div>
         <span className="thin">mm</span>
       </div>

src/components/simulator/Simulator.jsx

@@ -15,6 +15,8 @@ import { useMessage } from '@/hooks/useMessage'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 
 import { convertNumberToPriceDecimal } from '@/util/common-utils'
+import { usePlan } from '@/hooks/usePlan'
+import { usePopup } from '@/hooks/usePopup'
 // import { useSearchParams } from 'next/navigation'
 
 export default function Simulator() {
@@ -24,6 +26,7 @@ export default function Simulator() {
   // const searchParams = useSearchParams()
   // const objectNo = searchParams.get('objectNo')
   // const pid = searchParams.get('pid')
+  const { selectedPlan } = usePlan()
 
   const chartRef = useRef(null)
 
@@ -40,12 +43,21 @@ export default function Simulator() {
   // 차트 관련
   const [chartData, setChartData] = useState([])
 
+  const { closeAll } = usePopup()
+
+  useEffect(() => {
+    closeAll()
+  }, [])
+
   const data = {
     labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
     datasets: [
       {
         label: 'kWh',
-        data: chartData.slice(0, 12),
+        data: chartData.slice(0, 12).map((item) => {
+          const num = Number(item.replaceAll(',', ''))
+          return isNaN(num) ? 0 : num
+        }),
 
         backgroundColor: [
           'rgba(255, 99, 132, 0.2)',
@@ -102,6 +114,7 @@ export default function Simulator() {
   }
 
   useEffect(() => {
+    console.log('🚀 ~ useEffect ~ selectedPlan:', selectedPlan)
     /* 초기화 작업 */
     setChartData([])
     setObjectDetail({})
@@ -118,7 +131,7 @@ export default function Simulator() {
       setPwrGnrSimType('D')
       setPwrRecoil({ ...pwrRecoil, type: 'D' })
     }
-  }, [objectNo, pid])
+  }, [objectNo, pid, selectedPlan])
 
   // 물건 상세 정보 조회
   const [objectDetail, setObjectDetail] = useState({})
@@ -222,12 +235,12 @@ export default function Simulator() {
               {/* 시스템용량 */}
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('simulator.title.sub3')}</div> 
-                <div className="estimate-name">{objectDetail.capacity ? `${convertNumberToPriceDecimal(objectDetail.capacity)}kW` : ''}</div>
+                <div className="estimate-name">{objectDetail.capacity ? `${convertNumberToPriceDecimal(objectDetail.capacity)} kW` : ''}</div>
               </div>
               {/* 연간예측발전량 */}
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('simulator.title.sub4')}</div>
-                <div className="estimate-name">{convertNumberToPriceDecimal(chartData[chartData.length - 1])}</div>
+                <div className="estimate-name">{chartData[chartData.length - 1]}</div>
               </div>
             </div>
             <div className="estimate-list-wrap">
@@ -244,7 +257,7 @@ export default function Simulator() {
               {/* 적설조건 */}
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('simulator.title.sub7')}</div>
-                <div className="estimate-name">{objectDetail.snowfall}</div>
+                <div className="estimate-name">{objectDetail.snowfall} cm</div>
               </div>
               {/* 풍속조건 */}
               <div className="estimate-box">
@@ -343,7 +356,7 @@ export default function Simulator() {
                                 {/* 지붕면 */}
                                 <td>{moduleInfo.roofSurface}</td>
                                 {/* 경사각 */}
-                                <td>{convertNumberToPriceDecimal(moduleInfo.slopeAngle)}寸</td>
+                                <td>{convertNumberToPriceDecimal(moduleInfo.slopeAngle)}{moduleInfo.classType == 0 ? "寸":"º"}</td>
                                 {/* 방위각(도) */}
                                 <td>{convertNumberToPriceDecimal(moduleInfo.azimuth)}</td>
                                 {/* 태양전지모듈 */}

src/hooks/module/useModuleBasicSetting.js

@@ -15,9 +15,11 @@ import { compasDegAtom } from '@/store/orientationAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
 import { useEffect } from 'react'
+import { useMessage } from '@/hooks/useMessage'
 
 export function useModuleBasicSetting() {
   const canvas = useRecoilValue(canvasState)
+  const { getMessage } = useMessage()
   const roofDisplay = useRecoilValue(roofDisplaySelector)
   const [moduleSetupSurface, setModuleSetupSurface] = useRecoilState(moduleSetupSurfaceState)
   const [moduleIsSetup, setModuleIsSetup] = useRecoilState(moduleIsSetupState)

src/hooks/module/useModulePlace.js

@@ -0,0 +1,184 @@
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { useContext, useEffect, useState } from 'react'
+import { GlobalDataContext } from '@/app/GlobalDataProvider'
+import { useMasterController } from '@/hooks/common/useMasterController'
+import { useCommonCode } from '@/hooks/common/useCommonCode'
+
+import { selectedModuleState, moduleSelectionInitParamsState } from '@/store/selectedModuleOptions'
+import { pitchSelector } from '@/store/canvasAtom'
+
+export function useModuleSelection(props) {
+  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
+  const globalPitch = useRecoilValue(pitchSelector) //피치
+
+  const [roughnessCodes, setRoughnessCodes] = useState([]) //면조도 목록
+  const [windSpeedCodes, setWindSpeedCodes] = useState([]) //기준풍속 목록
+  const [moduleList, setModuleList] = useState([{}]) //모듈 목록
+
+  const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈
+  const [selectedSurfaceType, setSelectedSurfaceType] = useState({}) //선택된 면조도
+  const [installHeight, setInstallHeight] = useState('0') //설치 높이
+  const [standardWindSpeed, setStandardWindSpeed] = useState({}) //기준풍속
+  const [verticalSnowCover, setVerticalSnowCover] = useState('0') //수직적설량
+  const [moduleSelectionInitParams, setModuleSelectionInitParams] = useRecoilState(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등
+
+  const { getModuleTypeItemList } = useMasterController()
+
+  const { findCommonCode } = useCommonCode()
+
+  //탭별 파라메터 초기화
+  useEffect(() => {
+    setInstallHeight(managementState?.installHeight)
+    setStandardWindSpeed(managementState?.standardWindSpeedId)
+    setVerticalSnowCover(managementState?.verticalSnowCover)
+    setSelectedSurfaceType(managementState?.surfaceType)
+
+    const initParams = {
+      illuminationTp: managementState?.surfaceTypeValue, //면조도
+      instHt: managementState?.installHeight, //설치높이
+      stdWindSpeed: managementState?.standardWindSpeedId, //기준풍속
+      stdSnowLd: managementState?.verticalSnowCover, //기준적설량
+      inclCd: globalPitch,
+    }
+    setModuleSelectionInitParams(initParams)
+  }, [managementState])
+
+  useEffect(() => {
+    // 113700 면조도
+    const roughnessCodeList = findCommonCode('113700')
+    roughnessCodeList.forEach((obj) => {
+      obj.name = obj.clCodeNm
+      obj.id = obj.clCode
+    })
+    setRoughnessCodes(roughnessCodeList)
+
+    // 202000 풍속
+    const windCodeList = findCommonCode('202000')
+    windCodeList.forEach((obj) => {
+      obj.name = obj.clCodeNm
+      obj.id = obj.clCode
+    })
+    setWindSpeedCodes(windCodeList)
+
+    //지붕재 선택
+    const roofsIds = props.addedRoofs.filter((obj) => obj.roofMatlCd).map((obj) => obj.roofMatlCd)
+
+    if (roofsIds.length === 0) {
+      return
+    }
+
+    //새로고침시 데이터 날아가는거 방지
+    if (!managementState) {
+      setManagementState(managementStateLoaded)
+    }
+
+    getModuleData(roofsIds)
+  }, [])
+
+  const getModuleData = async (roofsIds) => {
+    const list = await getModuleTypeItemList(roofsIds)
+    //selectbox에 이름을 넣는다
+    list.data.forEach((item) => {
+      item.name = item.itemNm
+    })
+    //셀렉트박스 데이터 초기화
+    setModuleList(list.data)
+  }
+
+  const handleChangeModule = (option) => {
+    //선택된 모듈
+    setSelectedModules(option) //선택값 저장
+
+    //init 데이터에 선택된 모듈 추가
+    setModuleSelectionInitParams({
+      ...moduleSelectionInitParams,
+      moduleTpCd: option.itemTp,
+    })
+  }
+
+  const handleChangeSurfaceType = (option) => {
+    setModuleSelectionInitParams({
+      ...moduleSelectionInitParams,
+      illuminationTp: option.clCode,
+    })
+  }
+
+  const handleChangeWindSpeed = (option) => {
+    setModuleSelectionInitParams({
+      ...moduleSelectionInitParams,
+      surfaceType: option.clCode,
+    })
+  }
+
+  const handleChangeInstallHeight = (option) => {
+    setInstallHeight(option)
+
+    setModuleSelectionInitParams({
+      ...moduleSelectionInitParams,
+      instHt: option,
+    })
+  }
+
+  const handleChangeVerticalSnowCover = (option) => {
+    setVerticalSnowCover(option)
+
+    setModuleSelectionInitParams({
+      ...moduleSelectionInitParams,
+      stdSnowLd: option,
+    })
+  }
+
+  useEffect(() => {
+    console.log('installHeight', installHeight)
+  }, [installHeight])
+
+  useEffect(() => {
+    console.log('verticalSnowCover', verticalSnowCover)
+  }, [verticalSnowCover])
+
+  //TODO: 설치높이, 기준적설량 debounce 적용해서 추가해야됨
+
+  // useEffect(() => {
+  //   getConstructionListData(constructionListParams)
+  // }, [constructionListParams])
+
+  // const getConstructionListData = async (params) => {
+  //   if (params.trestleMkrCd && params.constMthdCd && params.roofBaseCd) {
+  //     const optionsList = await getConstructionList(params)
+  //     console.log('optionsList', optionsList)
+  //     setConstructionList(optionsList.data)
+  //   }
+  // }
+
+  //state 배열에 데이터 추가 함수
+  // const addRoofTabParams = (key, value, excludeArray = []) => {
+  //   const index = roofTabParams.findIndex((obj) => obj.roofTab === roofTab)
+  //   if (index !== -1) {
+  //     roofTabParams[index][key] = value
+  //     if (excludeArray.length > 0) {
+  //       excludeArray.forEach((exclude) => {
+  //         roofTabParams[index][exclude] = ''
+  //       })
+  //     }
+  //     setRoofTabParams((prev) => [...prev.slice(0, index), roofTabParams[index], ...prev.slice(index + 1)])
+  //   }
+  // }
+
+  return {
+    moduleSelectionInitParams,
+    selectedModules,
+    roughnessCodes,
+    windSpeedCodes,
+    managementState,
+    moduleList,
+    selectedSurfaceType,
+    installHeight,
+    standardWindSpeed,
+    verticalSnowCover,
+    handleChangeModule,
+    handleChangeSurfaceType,
+    handleChangeWindSpeed,
+    handleChangeInstallHeight,
+    handleChangeVerticalSnowCover,
+  }
+}

src/hooks/module/useModuleSelection.js

@@ -1,16 +1,14 @@
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { useContext, useEffect, useReducer, useState, useRef } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import { useMasterController } from '@/hooks/common/useMasterController'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
 
 import { selectedModuleState, moduleSelectionInitParamsState } from '@/store/selectedModuleOptions'
 import { pitchSelector } from '@/store/canvasAtom'
-import { useDebounceValue } from 'usehooks-ts'
 
 export function useModuleSelection(props) {
   const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
-
   const globalPitch = useRecoilValue(pitchSelector) //피치
 
   const [roughnessCodes, setRoughnessCodes] = useState([]) //면조도 목록
@@ -20,7 +18,7 @@ export function useModuleSelection(props) {
   const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈
   const [selectedSurfaceType, setSelectedSurfaceType] = useState({}) //선택된 면조도
   const [installHeight, setInstallHeight] = useState('0') //설치 높이
-  const [standardWindSpeed, setStandardWindSpeed] = useState('0') //기준풍속
+  const [standardWindSpeed, setStandardWindSpeed] = useState({}) //기준풍속
   const [verticalSnowCover, setVerticalSnowCover] = useState('0') //수직적설량
   const [moduleSelectionInitParams, setModuleSelectionInitParams] = useRecoilState(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등
 
@@ -46,11 +44,6 @@ export function useModuleSelection(props) {
   }, [managementState])
 
   useEffect(() => {
-    //새로고침시 데이터 날아가는거 방지
-    if (!managementState) {
-      setManagementState(managementStateLoaded)
-    }
-
     // 113700 면조도
     const roughnessCodeList = findCommonCode('113700')
     roughnessCodeList.forEach((obj) => {
@@ -73,6 +66,12 @@ export function useModuleSelection(props) {
     if (roofsIds.length === 0) {
       return
     }
+
+    //새로고침시 데이터 날아가는거 방지
+    if (!managementState) {
+      setManagementState(managementStateLoaded)
+    }
+
     getModuleData(roofsIds)
   }, [])
 
@@ -129,6 +128,14 @@ export function useModuleSelection(props) {
     })
   }
 
+  useEffect(() => {
+    console.log('installHeight', installHeight)
+  }, [installHeight])
+
+  useEffect(() => {
+    console.log('verticalSnowCover', verticalSnowCover)
+  }, [verticalSnowCover])
+
   //TODO: 설치높이, 기준적설량 debounce 적용해서 추가해야됨
 
   // useEffect(() => {

src/hooks/option/useCanvasSetting.js

@@ -282,7 +282,7 @@ export function useCanvasSetting() {
         if (res.length > 0) {
           roofsRow = res.map((item) => {
             return {
-              roofSizeSet: item.roofSizeSet,
+              roofSizeSet: String(item.roofSizeSet),
               roofAngleSet: item.roofAngleSet,
             }
           })
@@ -296,12 +296,14 @@ export function useCanvasSetting() {
               roofHajebichi: item.roofHajebichi,
               roofGap: item.roofGap,
               roofLayout: item.roofLayout,
+              roofPitch: item.roofPitch,
+              roofAngle: item.roofAngle,
             }
           })
         } else {
           roofsRow = [
             {
-              roofSizeSet: 1,
+              roofSizeSet: '1',
               roofAngleSet: 'slope',
             },
           ]
@@ -316,6 +318,7 @@ export function useCanvasSetting() {
               roofHajebichi: 0,
               roofGap: 'HEI_455',
               roofLayout: 'P',
+              roofPitch: 4,
             },
           ]
         }
@@ -333,6 +336,8 @@ export function useCanvasSetting() {
                                       , layout: roofsArray[0].roofLayout
                                       , roofSizeSet: roofsRow[0].roofSizeSet
                                       , roofAngleSet: roofsRow[0].roofAngleSet
+                                      , pitch: roofsArray[0].roofPitch
+                                      , angle: roofsArray[0].roofAngle
                                       })
                                      
             setAddedRoofs(addRoofs)
@@ -359,7 +364,7 @@ export function useCanvasSetting() {
     try {
       const patternData = {
         objectNo: correntObjectNo,
-        roofSizeSet: basicSetting.roofSizeSet,
+        roofSizeSet: Number(basicSetting.roofSizeSet),
         roofAngleSet: basicSetting.roofAngleSet,
         roofMaterialsAddList: [
           {
@@ -371,8 +376,8 @@ export function useCanvasSetting() {
             roofHajebichi: basicSetting.roofsData.roofHajebichi === null || basicSetting.roofsData.roofHajebichi === undefined ? 0 : basicSetting.roofsData.roofHajebichi,
             roofGap: basicSetting.roofsData.roofGap === null || basicSetting.roofsData.roofGap === undefined ? 'HEI_455' : basicSetting.roofsData.roofGap,
             roofLayout: basicSetting.roofsData.roofLayout === null || basicSetting.roofsData.roofLayout === undefined ? 'P' : basicSetting.roofsData.roofLayout,
-            roofPitch: 4,
+            roofPitch: basicSetting.roofsData.roofPitch === null || basicSetting.roofsData.roofPitch === undefined ? 0 : basicSetting.roofsData.roofPitch,
-            roofAngle: 21.8,
+            roofAngle: basicSetting.roofsData.roofAngle === null || basicSetting.roofsData.roofAngle === undefined ? 0 : basicSetting.roofsData.roofAngle,
           },
         ],
       }
@@ -380,11 +385,12 @@ export function useCanvasSetting() {
       console.log('basicSettingSave patternData ', patternData)
 
       await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => {
+        console.log('basicSettingSave res ', res)
         swalFire({ text: getMessage(res.returnMessage) })
       })
 
       //Recoil 설정
-      setCanvasSetting({ ...basicSetting })
+      //setCanvasSetting({ ...basicSetting })
       fetchBasicSettings()
     } catch (error) {
       swalFire({ text: error.message, icon: 'error' })

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -33,9 +33,7 @@ export function useRoofAllocationSetting(id) {
   const { drawDirectionArrow, addLengthText, splitPolygonWithLines, splitPolygonWithSeparate } = usePolygon()
   const [popupId, setPopupId] = useState(uuidv4())
   const { addPopup, closePopup, closeAll } = usePopup()
-  const { getMessage } = useMessage()
   const currentObject = useRecoilValue(currentObjectState)  
-  const { swalFire } = useSwal()
   const { setMenuNumber } = useCanvasMenu()
   const setMenuType = useSetRecoilState(menuTypeState)
   const roofMaterials = useRecoilValue(roofMaterialsSelector)
@@ -46,9 +44,10 @@ export function useRoofAllocationSetting(id) {
   const [editingLines, setEditingLines] = useState([])
   const [currentRoofList, setCurrentRoofList] = useState(roofList)
   const currentAngleType = useRecoilValue(currentAngleTypeSelector)
-
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get, post } = useAxios(globalLocaleState)
+  const { getMessage } = useMessage()
+  const { swalFire } = useSwal()
 
   const { setSurfaceShapePattern } = useRoofFn()
 
@@ -165,38 +164,38 @@ export function useRoofAllocationSetting(id) {
 
   // 지붕면 할당 저장
   const basicSettingSave = async () => {
-    const patternData = {
+    try {
-      objectNo: correntObjectNo,
+      const patternData = {
-      roofSizeSet: basicSetting.roofSizeSet,
+        objectNo: correntObjectNo,      
-      roofAngleSet: basicSetting.roofAngleSet,
+        roofSizeSet: Number(basicSetting.roofSizeSet),
-      roofMaterialsAddList: currentRoofList.map((item, index) => ({
+        roofAngleSet: basicSetting.roofAngleSet,
-        roofApply: item.selected === null || item.selected === undefined ? 'true' : item.selected,
+        roofAllocationList: currentRoofList.map((item, index) => ({          
-        roofSeq: index,
+          roofApply: item.selected === null || item.selected === undefined ? 'true' : item.selected,
-        roofMatlCd: item.roofMatlCd === null || item.roofMatlCd === undefined ? 'ROOF_ID_WA_53A' : item.roofMatlCd,
+          roofSeq: index,
-        roofWidth: item.width === null || item.width === undefined ? 0 : item.width,
+          roofMatlCd: item.roofMatlCd === null || item.roofMatlCd === undefined ? 'ROOF_ID_WA_53A' : item.roofMatlCd,
-        roofHeight: item.length === null || item.length === undefined ? 0 : item.length,
+          roofWidth: item.width === null || item.width === undefined ? 0 : Number(item.width),
-        roofHajebichi: item.hajebichi === null || item.hajebichi === undefined ? 0 : item.hajebichi,
+          roofHeight: item.length === null || item.length === undefined ? 0 : Number(item.length),
-        roofGap: item.raft === null || item.raft === undefined ? 'HEI_455' : item.raft,
+          roofHajebichi: item.hajebichi === null || item.hajebichi === undefined ? 0 : Number(item.hajebichi),
-        roofLayout: item.layout === null || item.layout === undefined ? 'P' : item.layout,
+          roofGap: item.raft === null || item.raft === undefined ? 'HEI_455' : item.raft,
-        roofPitch: item.pitch === null || item.pitch === undefined ? 4 : item.pitch,
+          roofLayout: item.layout === null || item.layout === undefined ? 'P' : item.layout,
-        roofAngle: item.angle === null || item.angle === undefined ? 21.8 : item.angle,
+          roofPitch: item.pitch === null || item.pitch === undefined ? 4 : Number(item.pitch),
-      })),
+          roofAngle: item.angle === null || item.angle === undefined ? 21.8 : Number(item.angle),
-    }
+        })),
+      }
 
     console.log('🚀 ~ basicSettingSave ~ patternData >>>>>>>>>>>>> :', patternData)
 
-    // HTTP POST 요청 보내기
+    await post({ url: `/api/canvas-management/roof-allocation-settings`, data: patternData }).then((res) => {
-    await post({ url: `/api/canvas-management/roof-allocation-settings`, data: patternData })
+    console.log('roof-allocation-settings res ', res)
-      .then((res) => {
+      swalFire({ text: getMessage(res.returnMessage) })
-        swalFire({ text: getMessage(res.returnMessage) })
+    })
 
-        //Recoil 설정
+    //Recoil 설정
-        // setCanvasSetting({ ...basicSetting })
+    //setCanvasSetting({ ...basicSetting })
-        fetchBasicSettings()
+    fetchBasicSettings()
-      })
+  } catch (error) {
-      .catch((error) => {
+    swalFire({ text: error.message, icon: 'error' })
-        swalFire({ text: error.message, icon: 'error' })
+  }
-      })
   }
 
   const onAddRoofMaterial = () => {
@@ -457,6 +456,7 @@ export function useRoofAllocationSetting(id) {
 
       return
     }
+
     const newRoofList = currentRoofList.map((roof, idx) => {
       if (idx === index) {
         return { ...roof, [type]: value }

src/hooks/usePlan.js

@@ -1,7 +1,7 @@
 'use client'
 
 import { useContext, useEffect, useState } from 'react'
-import { usePathname, useRouter } from 'next/navigation'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 
 import { useRecoilState } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'
@@ -218,16 +218,18 @@ export function usePlan(params = {}) {
       }),
     )
   }
+
   useEffect(() => {
     setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null)
     setSelectedPlan(plans.find((plan) => plan.isCurrent))
+    handleCurrentPlanUrl()
     // setBgImage()
   }, [plans])
 
-  // 현재 plan이 변경될 때 마다 현재 plan의 링크로 이동
+  const handleCurrentPlanUrl = () => {
-  useEffect(() => {
+    const currentPlan = plans.find((plan) => plan.isCurrent)
-    handlePlanMove()
+    if (currentPlan) router.push(`${pathname}?pid=${currentPlan?.ordering}&objectNo=${floorPlanState?.objectNo}`)
-  }, [currentCanvasPlan])
+  }
 
   const setBgImage = () => {
     // readImage(selectedPlan?.id)