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

2025-02-18 16:47:48 +09:00 · 2025-02-18 16:47:48 +09:00 · e4916b1a06
commit e4916b1a06
parent 84b5ae2ff0
6 changed files with 39 additions and 41 deletions
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/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(() => {
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/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',
  }
  /**
   * 배치면 초기설정 팝업 열기
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/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(() => {
--- a/src/hooks/option/useCanvasSetting.js
+++ b/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({
-          ...basicSetting,
-          roofMaterials: addRoofs[0],
-          planNo: roofsRow[0].planNo,
-          roofSizeSet: roofsRow[0].roofSizeSet,
-          roofAngleSet: roofsRow[0].roofAngleSet,
-          roofsData: roofsArray,
-          selectedRoofMaterial: addRoofs.find((roof) => roof.selected),
-        })
+
+        if (addRoofs.length > 0) {
+          setAddedRoofs(addRoofs)
+          setBasicSettings({
+            ...basicSetting,
+            roofMaterials: addRoofs[0],
+            planNo: roofsRow[0].planNo,
+            roofSizeSet: roofsRow[0].roofSizeSet,
+            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 })

        /**
         * 그리드 색 설정
--- a/src/hooks/roofcover/useRoofAllocationSetting.js
+++ b/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) })
      })

--- a/src/hooks/usePlan.js
+++ b/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}` })
  }