📌fix: popupstatus hooks 구조 변경

src/components/floor-plan/CanvasFrame.jsx

@@ -25,6 +25,7 @@ import {
   selectedModelsState,
   seriesState,
 } from '@/store/circuitTrestleAtom'
+import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
 
 export default function CanvasFrame() {
   const canvasRef = useRef(null)
@@ -43,6 +44,7 @@ export default function CanvasFrame() {
   const resetModelsState = useResetRecoilState(modelsState)
   const resetSelectedModelsState = useResetRecoilState(selectedModelsState)
   const resetPcsCheckState = useResetRecoilState(pcsCheckState)
+  const { handleModuleSelectionTotal } = useCanvasPopupStatusController()
   const loadCanvas = () => {
     if (canvas) {
       canvas?.clear() // 캔버스를 초기화합니다.
@@ -59,6 +61,7 @@ export default function CanvasFrame() {
   useEffect(() => {
     loadCanvas()
     resetRecoilData()
+    Object.keys(currentCanvasPlan).length > 0 && handleModuleSelectionTotal()
   }, [currentCanvasPlan, canvas])
 
   useEffect(() => {

src/hooks/common/useCanvasPopupStatusController.js

@@ -1,12 +1,11 @@
 'use client'
 
-import { useEffect } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import useSWR from 'swr'
 import useSWRMutation from 'swr/mutation'
 import { useAxios } from '../useAxios'
 import { unescapeString } from '@/util/common-utils'
-import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
+import { moduleSelectionDataState, moduleSelectionTotalState } from '@/store/selectedModuleOptions'
 import { compasDegAtom } from '@/store/orientationAtom'
 import { currentCanvasPlanState } from '@/store/canvasAtom'
 
@@ -17,62 +16,91 @@ export function useCanvasPopupStatusController(param = 1) {
   const [moduleSelectionDataStore, setModuleSelectionDataStore] = useRecoilState(moduleSelectionDataState)
   const { getFetcher, postFetcher } = useAxios()
 
+  const [moduleSelectionTotal, setModuleSelectionTotal] = useRecoilState(moduleSelectionTotalState)
+
   const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
   // console.log('🚀 ~ Orientation ~ currentCanvasPlan:', currentCanvasPlan)
 
-  const {
+  /**
-    data: popupStatus,
+   * 팝업 상태 조회
-    error,
+   * @param {number} popupTypeParam
-    isLoading,
+   * @returns
-  } = useSWR(
+   */
-    popupType ? `/api/v1/canvas-popup-status?objectNo=${currentCanvasPlan.objectNo}&planNo=${currentCanvasPlan.planNo}&popupType=${popupType}` : null,
+  const getModuleSelection = async (popupTypeParam) => {
-    getFetcher,
+    const {
-  )
+      data: popupStatus,
+      error,
+      isLoading,
+    } = useSWR(
+      `/api/v1/canvas-popup-status?objectNo=${currentCanvasPlan.objectNo}&planNo=${currentCanvasPlan.planNo}&popupType=${popupTypeParam}`,
+      getFetcher,
+    )
 
-  useEffect(() => {
+    return popupStatus
-    // console.log('🚀 ~ useEffect ~ popupStatus:', popupStatus)
+  }
-    if (popupStatus) {
+
-      switch (parseInt(popupStatus?.popupType)) {
+  /**
-        case 1:
+   * 전체 팝업 상태 조회
-          setCompasDeg(popupStatus.popupStatus)
+   * 조회 후 전체 데이터 recoil에 저장
-          break
+   */
-        case 2:
+  const handleModuleSelectionTotal = async () => {
-          setModuleSelectionDataStore(JSON.parse(unescapeString(popupStatus.popupStatus)))
+    for (let i = 1; i < 3; i++) {
-          break
+      const result = await getModuleSelection(i)
-        case 3:
+      // setModuleSelectionTotal((prev) => ({ ...prev, [i]: JSON.parse(unescapeString(result.popupStatus)) }))
-          break
+      if (i === 1) {
-        case 4:
+        setCompasDeg(result.popupStatus)
-          break
+      } else if (i === 2) {
-        case 5:
+        setModuleSelectionDataStore(JSON.parse(unescapeString(result.popupStatus)))
-          break
-        case 6:
-          break
-        default:
-      }
-    } else {
-      switch (popupType) {
-        case 1:
-          setCompasDeg(0)
-          break
-        case 2:
-          setModuleSelectionDataStore({
-            common: {},
-            roofConstructions: [],
-          })
-          break
-        case 3:
-          break
-        case 4:
-          break
-        case 5:
-          break
-        case 6:
-          break
-        default:
       }
     }
-  }, [popupStatus])
+  }
 
+  // useEffect(() => {
+  //   if (popupStatus) {
+  //     switch (parseInt(popupStatus?.popupType)) {
+  //       case 1:
+  //         setCompasDeg(popupStatus.popupStatus)
+  //         break
+  //       case 2:
+  //         setModuleSelectionDataStore(JSON.parse(unescapeString(popupStatus.popupStatus)))
+  //         break
+  //       case 3:
+  //         break
+  //       case 4:
+  //         break
+  //       case 5:
+  //         break
+  //       case 6:
+  //         break
+  //       default:
+  //     }
+  //   } else {
+  //     switch (popupType) {
+  //       case 1:
+  //         setCompasDeg(0)
+  //         break
+  //       case 2:
+  //         setModuleSelectionDataStore({
+  //           common: {},
+  //           roofConstructions: [],
+  //         })
+  //         break
+  //       case 3:
+  //         break
+  //       case 4:
+  //         break
+  //       case 5:
+  //         break
+  //       case 6:
+  //         break
+  //       default:
+  //     }
+  //   }
+  // }, [popupStatus])
+
+  /**
+   * 팝업 상태 저장
+   */
   const { trigger, isMutating } = useSWRMutation(
     `/api/v1/canvas-popup-status?objectNo=${currentCanvasPlan.objectNo}&planNo=${currentCanvasPlan.planNo}&popupType=${popupType}`,
     (url, { arg }) => {
@@ -86,5 +114,5 @@ export function useCanvasPopupStatusController(param = 1) {
     },
   )
 
-  return { trigger }
+  return { handleModuleSelectionTotal, trigger }
 }