floor-plan 초기 진입 시 배치면초기설정 데이터 로드 오류 수정

src/components/floor-plan/CanvasFrame.jsx

@@ -26,6 +26,7 @@ import {
   seriesState,
 } from '@/store/circuitTrestleAtom'
 import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 
 export default function CanvasFrame() {
   const canvasRef = useRef(null)
@@ -45,6 +46,7 @@ export default function CanvasFrame() {
   const resetSelectedModelsState = useResetRecoilState(selectedModelsState)
   const resetPcsCheckState = useResetRecoilState(pcsCheckState)
   const { handleModuleSelectionTotal } = useCanvasPopupStatusController()
+  const { fetchBasicSettings } = useCanvasSetting()
 
   const loadCanvas = () => {
     if (!canvas) return
@@ -66,6 +68,14 @@ export default function CanvasFrame() {
     loadCanvas()
     resetRecoilData()
     Object.keys(currentCanvasPlan).length > 0 && handleModuleSelectionTotal()
+
+    /* 플랜번호가 있으면 베이직세팅 팝업 데이터 로드 */
+    if (currentCanvasPlan.planNo) {
+      /* 약간의 지연을 줘서 roofMaterials가 로드될 시간을 확보 */
+      setTimeout(() => {
+        fetchBasicSettings(Number(currentCanvasPlan.planNo), null)
+      }, 100)
+    }
   }, [currentCanvasPlan, canvas])
 
   useEffect(() => {

src/components/floor-plan/CanvasMenu.jsx

@@ -330,7 +330,7 @@ export default function CanvasMenu(props) {
       y: 180,
     },
     planNo: selectedPlan?.planNo ? selectedPlan.planNo : pid,
-    openPiont: 'canvasMenus',
+    openPoint: 'canvasMenus',
   }
   /**
    * 배치면 초기설정 팝업 열기

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

@@ -21,7 +21,7 @@ export const ROOF_MATERIAL_LAYOUT = {
   PARALLEL: 'P',
   STAIRS: 'S',
 }
-export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, planNo, openPiont }) {
+export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, planNo, openPoint }) {
   const [showSizeGuideModal, setShowSizeGuidModal] = useState(false)
   const [showMaterialGuideModal, setShowMaterialGuidModal] = useState(false)
   const { closePopup } = usePopup()
@@ -93,11 +93,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
   }
 
   useEffect(() => {
-    console.log('🚀 ~ useEffect ~ planNo:', planNo, openPiont)
     /**
      * 메뉴에서 배치면초기설정 선택 시 조회
      */
-    if (openPiont && openPiont === 'canvasMenus') fetchBasicSettings(planNo, openPiont)
+    if (openPoint && openPoint === 'canvasMenus') fetchBasicSettings(planNo, openPoint)
   }, [])
 
   useEffect(() => {

src/hooks/option/useCanvasSetting.js

@@ -188,11 +188,6 @@ export function useCanvasSetting() {
     setBasicSettings({ ...basicSetting, selectedRoofMaterial: selectedRoofMaterial })
   }
 
-  // // ObjectNo 최초 데이터 설정 확인
-  // const previousObjectNoRef = useRef(null)
-  // // 지붕재 정보 최초 데이터 설정 확인
-  // const previousRoofMaterialsRef = useRef(null)
-
   // useEffect(() => {
   //   // 지붕재 select 정보가 존재해야 배치면초기설정 DB 정보 비교 후 지붕재 정보를 가져올 수 있음
   //   if (
@@ -334,11 +329,15 @@ export function useCanvasSetting() {
   /**
    * 기본설정(PlacementShapeSetting) 조회 및 초기화
    */
-  const fetchBasicSettings = async (planNo, openPiont) => {
+  const fetchBasicSettings = async (planNo, openPoint) => {
+    /*  roofMaterials가 로드될 때까지 대기 */
+    if (!roofMaterials || roofMaterials.length === 0) {
+      console.log('Waiting for roofMaterials to load...')
+      return
+    }
+
     try {
       await get({
-        //url: `/api/canvas-management/canvas-basic-settings/by-object?objectNo=${correntObjectNo}&planNo=${pid}`,
-        // url: `http://localhost:8080/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}/${planNo}`,
         url: `/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}/${planNo}`,
       }).then((res) => {
         let roofsRow = {}
@@ -393,7 +392,7 @@ export function useCanvasSetting() {
           ]
 
           /* 메뉴에서 배치면 초기설정 클릭 시 실행하지 않음 */
-          if (openPiont === null) {
+          if (openPoint === null) {
             /* 배치면 초기설정 미저장 상태이면 화면 열기 */
             const placementInitialProps = {
               id: popupId,
@@ -402,7 +401,7 @@ export function useCanvasSetting() {
                 y: 180,
               },
               planNo: planNo,
-              openPiont: 'useCanvasSetting',
+              openPoint: 'useCanvasSetting',
             }
             addPopup(popupId, 1, <PlacementShapeSetting {...placementInitialProps} />)
           }
@@ -431,16 +430,19 @@ export function useCanvasSetting() {
             }
           })
         }
-        setAddedRoofs(addRoofs)
+
-        setBasicSettings({
+        if (addRoofs.length > 0) {
-          ...basicSetting,
+          setAddedRoofs(addRoofs)
-          roofMaterials: addRoofs[0],
+          setBasicSettings({
-          planNo: roofsRow[0].planNo,
+            ...basicSetting,
-          roofSizeSet: roofsRow[0].roofSizeSet,
+            roofMaterials: addRoofs[0],
-          roofAngleSet: roofsRow[0].roofAngleSet,
+            planNo: roofsRow[0].planNo,
-          roofsData: roofsArray,
+            roofSizeSet: roofsRow[0].roofSizeSet,
-          selectedRoofMaterial: addRoofs.find((roof) => roof.selected),
+            roofAngleSet: roofsRow[0].roofAngleSet,
-        })
+            roofsData: roofsArray,
+            selectedRoofMaterial: addRoofs.find((roof) => roof.selected),
+          })
+        }
       })
     } catch (error) {
       console.error('Data fetching error:', error)
@@ -478,8 +480,6 @@ export function useCanvasSetting() {
         ],
       }
 
-      //await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData })
-      // await post({ url: `http://localhost:8080/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => {
       await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => {
         swalFire({ text: getMessage(res.returnMessage) })
         /* 배치면초기설정 조회 */
@@ -521,7 +521,6 @@ export function useCanvasSetting() {
   const fetchSettings = async () => {
     try {
       const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${correntObjectNo}` })
-      console.log('res', res)
 
       if (Object.keys(res).length > 0) {
         const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
@@ -629,7 +628,6 @@ export function useCanvasSetting() {
         }
 
         setDotLineGridSettingState(patternData)
-        //setCurrentSetting(patternData)
 
         /**
          * 그리드 색 설정
@@ -668,7 +666,6 @@ export function useCanvasSetting() {
          * 점/선 그리드
          */
         setDotLineGridSettingState({ ...defaultDotLineGridSetting })
-        //setCurrentSetting({ ...defaultDotLineGridSetting })
 
         /**
          * 그리드 색 설정

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -106,14 +106,11 @@ export function useRoofAllocationSetting(id) {
   /**
    * 지붕면 할당 조회 및 초기화
    */
-  const fetchBasicSettings = async (planNo, openPiont) => {
+  const fetchBasicSettings = async (planNo, openPoint) => {
     try {
       await get({
-        //url: `/api/canvas-management/canvas-basic-settings/by-object/objectNo=${correntObjectNo}/planNo=${currentCanvasPlan.planNo}`,
-        // url: `http://localhost:8080/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}/${planNo}`,
         url: `/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}/${planNo}`,
       }).then((res) => {
-        console.log('🚀 ~ useRoofAllocationSetting ~ fetchBasicSettings ~ res >>>>>>>>>>>>>>>>>>>>> :', res)
         let roofsArray = {}
 
         if (res.length > 0) {
@@ -219,11 +216,7 @@ export function useRoofAllocationSetting(id) {
         })),
       }
 
-      console.log('🚀 ~ basicSettingSave ~ patternData >>>>>>>>>>>>> :', patternData)
-
-      // await post({ url: `http://localhost:8080/api/canvas-management/roof-allocation-settings`, data: patternData }).then((res) => {
       await post({ url: `/api/canvas-management/roof-allocation-settings`, data: patternData }).then((res) => {
-        console.log('roof-allocation-settings res ', res)
         swalFire({ text: getMessage(res.returnMessage) })
       })
 

src/hooks/usePlan.js

@@ -274,9 +274,6 @@ export function usePlan(params = {}) {
     const planNo = plans?.find((obj) => obj.id === newCurrentId).planNo
     const objectNo = floorPlanState.objectNo
 
-    /* 플랜 이동 시 배치면초기설정 정보 조회 */
-    fetchBasicSettings(planNo, null)
-
     //견적서 or 발전시뮬
 
     if (pathname !== '/floor-plan') {
@@ -307,6 +304,9 @@ export function usePlan(params = {}) {
                 // 클릭한 플랜 탭으로 이동
                 setCurrentCanvasPlan(plans.find((plan) => plan.id === newCurrentId))
                 setPlans((plans) => plans.map((plan) => ({ ...plan, isCurrent: plan.id === newCurrentId })))
+
+                /* 플랜 이동 시 배치면초기설정 정보 조회 (견적서 메뉴 제외) */
+                fetchBasicSettings(planNo, null)
               } else {
                 swalFire({ text: getMessage('estimate.menu.move.valid1') })
               }
@@ -494,7 +494,6 @@ export function usePlan(params = {}) {
    * @param {string} planNo - 플랜번호
    */
   const deleteBasicSettings = async (objectNo, planNo) => {
-    // await promiseDel({ url: `http://localhost:8080/api/canvas-management/delete-basic-settings/${objectNo}/${planNo}` })
     await promiseDel({ url: `/api/canvas-management/delete-basic-settings/${objectNo}/${planNo}` })
   }