floor-plan 실행 시 배치면초기설정 팝업 Open 처리 및 오류 수정

src/app/floor-plan/FloorPlanProvider.js

@@ -2,7 +2,7 @@
 
 import { correntObjectNoState } from '@/store/settingAtom'
 import { notFound, usePathname, useSearchParams } from 'next/navigation'
-import { createContext, useReducer, useState } from 'react'
+import { createContext, useReducer, useState, useEffect } from 'react'
 import { useSetRecoilState } from 'recoil'
 
 const reducer = (prevState, nextState) => {
@@ -48,12 +48,14 @@ const FloorPlanProvider = ({ children }) => {
   const objectNo = searchParams.get('objectNo')
   const pid = searchParams.get('pid')
 
-  if (pathname === '/floor-plan') {
+  useEffect(() => { // 오류 발생으로 useEffect 사용
-    if (pid === undefined || pid === '' || pid === null || objectNo === undefined || objectNo === '' || objectNo === null) {
+    if (pathname === '/floor-plan') {
-      notFound()
+      if (pid === undefined || pid === '' || pid === null || objectNo === undefined || objectNo === '' || objectNo === null) {
+        notFound()
+      }
+      setCurrentObjectNo(objectNo)
     }
-    setCurrentObjectNo(objectNo)
+  }, [pid, objectNo])
-  }
 
   const [floorPlanState, setFloorPlanState] = useState({
     // 플랜 파일 업로드 모달 오픈 제어

src/components/floor-plan/CanvasMenu.jsx

@@ -309,10 +309,9 @@ export default function CanvasMenu(props) {
   }, [type, globalLocale])
 
   useEffect(() => {
-    console.log('🚀 ~ useEffect ~ basicSetting:', basicSetting)
+    if (!selectedRoofMaterial) return
-    if (Object.keys(basicSetting).length === 0 || !basicSetting.roofSizeSet) return
+    //if (Object.keys(basicSetting).length === 0 || !basicSetting.roofSizeSet) return
-
+    setMenuNumber(1)
-    // setMenuNumber(1)
     // if ([2, 3].some((num) => num === canvasSetting?.roofSizeSet)) {
     //   setMenuNumber(3)
     //   setType('surface')
@@ -322,7 +321,8 @@ export default function CanvasMenu(props) {
     //   setType('outline')
     //   setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
     // }
-  }, [basicSetting])
+  }, [selectedRoofMaterial])
+  
   const checkMenuState = (menu) => {
     return (['2', '3'].includes(canvasSetting?.roofSizeSet) && menu.index === 2) || (menuNumber === 4 && menu.index === 2)
   }

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

@@ -43,15 +43,15 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
 
   //치수 입력방법(복시도입력/실측값입력/육지붕)
   const roofSizeSetArray = [
-    { id: 'ra01', name: 'roofSizeSet', value: '1', checked: 'ture', message: 'modal.placement.initial.setting.size.roof' },
+    { id: 'ra01', name: 'roofSizeSet', value: '1', message: 'modal.placement.initial.setting.size.roof' },
-    { id: 'ra02', name: 'roofSizeSet', value: '2', checked: 'false', message: 'modal.placement.initial.setting.size.actual' },
+    { id: 'ra02', name: 'roofSizeSet', value: '2', message: 'modal.placement.initial.setting.size.actual' },
-    { id: 'ra03', name: 'roofSizeSet', value: '3', checked: 'false', message: 'modal.placement.initial.setting.size.none.pitch' },
+    { id: 'ra03', name: 'roofSizeSet', value: '3', message: 'modal.placement.initial.setting.size.none.pitch' },
   ]
 
   //지붕각도 설정(경사/각도)
   const roofAngleSetArray = [
-    { id: 'ra04', name: 'roofAngleSet', value: 'slope', checked: 'true', message: 'modal.placement.initial.setting.roof.pitch'},
+    { id: 'ra04', name: 'roofAngleSet', value: 'slope', message: 'modal.placement.initial.setting.roof.pitch'},
-    { id: 'ra05', name: 'roofAngleSet', value: 'flat', checked: 'false', message: 'modal.placement.initial.setting.roof.angle' },
+    { id: 'ra05', name: 'roofAngleSet', value: 'flat', message: 'modal.placement.initial.setting.roof.angle' },
   ]
 
   // 데이터를 최초 한 번만 조회
@@ -59,12 +59,17 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
     if (!basicSetting || !currentRoof || Object.keys(currentRoof).length === 0 || Object.keys(basicSetting).length === 0) return
     const raftCodeList = findCommonCode('203800')
     setRaftCodes(raftCodeList)
-    setCurrentRoof({ ...currentRoof, roofSizeSet: basicSetting.roofSizeSet, roofAngleSet: basicSetting.roofAngleSet })
+
-    console.log('🚀 ~ fetchBasicSettings ~ currentRoof 11:', currentRoof)
+    if (addedRoofs.length > 0) {
+      setCurrentRoof({ ...currentRoof, roofSizeSet: addedRoofs[0].roofSizeSet, roofAngleSet: addedRoofs[0].roofAngleSet })
+    } else if (basicSetting.roofSizeSet.length > 0) {
+      setCurrentRoof({ ...currentRoof, roofSizeSet: basicSetting.roofSizeSet, roofAngleSet: basicSetting.roofAngleSet })
+    }
   }, [])
 
   useEffect(() => {
-    console.log('🚀 ~ fetchBasicSettings ~ currentRoof 22:', currentRoof)
+    console.log('🚀 ~ fetchBasicSettings ~ currentRoof :', currentRoof)
+    if(!currentRoof) return
     setBasicSettings({
       ...basicSetting,
       roofSizeSet: String(currentRoof.roofSizeSet),
@@ -194,14 +199,12 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                     <div className="pop-form-radio">                      
                       {currentRoof &&
                         roofSizeSetArray.map((item) => (
-                          <div className="d-check-radio pop">
+                          <div className="d-check-radio pop" key={item.id}>
                           <input type="radio" 
-                                key={item.id}
                                 id={item.id}
                                 name={item.name}
                                 value={item.value}
                                 checked={currentRoof?.roofSizeSet === item.value}
-                                defaultChecked={'1'}
                                 onChange={(e) => setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })}
                           />
                           <label htmlFor={item.id}>{getMessage(item.message)}</label>
@@ -217,14 +220,12 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                     <div className="pop-form-radio">                      
                       {currentRoof &&
                         roofAngleSetArray.map((item) => (
-                          <div className="d-check-radio pop">
+                          <div className="d-check-radio pop" key={item.id}>
                           <input type="radio"
-                                key={item.id}
                                 id={item.id}
                                 name={item.name}
                                 value={item.value}
                                 checked={currentRoof?.roofAngleSet === item.value}
-                                defaultChecked={'slope'}
                                 onChange={(e) => setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })}
                           />
                           <label htmlFor={item.id}>{getMessage(item.message)}</label>