src/components/floor-plan/CanvasMenu.jsx

@@ -4,7 +4,7 @@ import { useContext, useEffect, useState } from 'react'
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
 
 import { v4 as uuidv4 } from 'uuid'
 
@@ -98,7 +98,7 @@ export default function CanvasMenu(props) {
   const [lockButtonStyle, setLockButtonStyle] = useState('') //잠금 버튼
 
   const setFloorPlanObjectNo = useSetRecoilState(floorPlanObjectState) //견적서 화면용 물건번호리코일
-
+  const resetCommonUtils = useResetRecoilState(commonUtilsState)
   // 발전시뮬레이션 메뉴 이동
   const { objectNo, pid } = floorPlanState
 
@@ -166,6 +166,7 @@ export default function CanvasMenu(props) {
   }
 
   const onClickNav = async (menu) => {
+    resetCommonUtils()
     switch (menu.type) {
       case 'drawing':
         swalFire({
@@ -241,7 +242,7 @@ export default function CanvasMenu(props) {
           return
         }
         setIsGlobalLoading(true)
-        promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan?.planNo??pid}/detail` }).then((res) => {
+        promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan?.planNo ?? pid}/detail` }).then((res) => {
           if (res.status === 200) {
             const estimateDetail = res.data
             if (estimateDetail.estimateDate !== null) {
@@ -249,7 +250,7 @@ export default function CanvasMenu(props) {
               setCurrentMenu(menu.title)
               setFloorPlanObjectNo({ floorPlanObjectNo: objectNo })
               setIsGlobalLoading(false)
-              router.push(`/floor-plan/estimate/5?pid=${selectedPlan?.planNo??pid}&objectNo=${objectNo}`)
+              router.push(`/floor-plan/estimate/5?pid=${selectedPlan?.planNo ?? pid}&objectNo=${objectNo}`)
               if (pathname === '/floor-plan/estimate/5') {
                 setIsGlobalLoading(false)
               }
@@ -262,13 +263,13 @@ export default function CanvasMenu(props) {
         break
       case 'simulation':
         setIsGlobalLoading(true)
-        promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan?.planNo??pid}/detail` }).then((res) => {
+        promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan?.planNo ?? pid}/detail` }).then((res) => {
           if (res.status === 200) {
             const estimateDetail = res.data
             if (estimateDetail.estimateDate !== null && estimateDetail.docNo) {
               setSelectedMenu(menu.type)
               setCurrentMenu(menu.title)
-              router.push(`/floor-plan/simulator/6?pid=${selectedPlan?.planNo??pid}&objectNo=${objectNo}`)
+              router.push(`/floor-plan/simulator/6?pid=${selectedPlan?.planNo ?? pid}&objectNo=${objectNo}`)
               if (pathname === '/floor-plan/simulator/6') {
                 setIsGlobalLoading(false)
               }

src/components/floor-plan/MenuDepth01.jsx

@@ -5,9 +5,10 @@ import { useEffect } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import useMenu from '@/hooks/common/useMenu'
 import { canvasState, currentMenuState } from '@/store/canvasAtom'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
 import { subMenusState } from '@/store/menuAtom'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
+import { commonUtilsState } from '@/store/commonUtilsAtom'
 
 export default function MenuDepth01() {
   const canvas = useRecoilValue(canvasState)
@@ -16,8 +17,10 @@ export default function MenuDepth01() {
   const { selectedMenu, setSelectedMenu } = useCanvasMenu()
   const [currentMenu, setCurrentMenu] = useRecoilState(currentMenuState)
   const subMenus = useRecoilValue(subMenusState)
+  const resetCommonUtils = useResetRecoilState(commonUtilsState)
 
   const onClickMenu = ({ id, menu }) => {
+    resetCommonUtils()
     if (menu === currentMenu) {
       handleMenu(selectedMenu)
     } else {

src/hooks/common/useCommonUtils.js

@@ -1,11 +1,11 @@
 import { useEffect } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
 import { wordDisplaySelector } from '@/store/settingAtom'
 import { useEvent } from '@/hooks/useEvent'
 import { checkLineOrientation, getDistance } from '@/util/canvas-util'
 import { commonUtilsState, dimensionLineSettingsState } from '@/store/commonUtilsAtom'
 import { fontSelector } from '@/store/fontAtom'
-import { canvasState } from '@/store/canvasAtom'
+import { canvasState, currentMenuState } from '@/store/canvasAtom'
 import { v4 as uuidv4 } from 'uuid'
 import { usePopup } from '@/hooks/usePopup'
 import Distance from '@/components/floor-plan/modal/distance/Distance'
@@ -16,7 +16,7 @@ import { BATCH_TYPE } from '@/common/common'
 export function useCommonUtils() {
   const canvas = useRecoilValue(canvasState)
   const wordDisplay = useRecoilValue(wordDisplaySelector)
-  const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent()
+  const { addCanvasMouseEventListener, addDocumentEventListener, initEvent, removeMouseEvent } = useEvent()
   const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
   const dimensionLineTextFont = useRecoilValue(fontSelector('dimensionLineText'))
   const lengthTextFont = useRecoilValue(fontSelector('lengthText'))
@@ -27,12 +27,14 @@ export function useCommonUtils() {
   const { applyDormers } = useObjectBatch({})
 
   useEffect(() => {
-    if (commonUtils.text || !commonUtils.text) {
+    commonTextMode()
-      commonTextMode()
+    if (commonUtils.dimension) {
-    } else if (commonUtils.dimension) {
       commonDimensionMode()
-    } else if (commonUtils.distance) {
+      return
+    }
+    if (commonUtils.distance) {
       commonDistanceMode()
+      return
     }
   }, [commonUtils, dimensionSettings, commonTextFont, dimensionLineTextFont])
 
@@ -72,8 +74,17 @@ export function useCommonUtils() {
         })
       }, 100)
     } else {
+      removeMouseEvent('mouse:down')
       const activeObject = canvas?.getActiveObject()
-      if (activeObject && activeObject.name === 'commonText') {
+      const commonTexts = canvas?.getObjects().filter((obj) => obj.name === 'commonText')
+      if (commonTexts) {
+        commonTexts.forEach((text) => {
+          if (text.text === '') {
+            canvas?.remove(text)
+          }
+        })
+      }
+      /*if (activeObject && activeObject.name === 'commonText') {
         if (activeObject && activeObject.isEditing) {
           if (activeObject.text === '') {
             canvas?.remove(activeObject)
@@ -87,7 +98,7 @@ export function useCommonUtils() {
           })
           canvas.renderAll()
         }
-      }
+      }*/
 
       initEvent()
     }

src/hooks/usePopup.js

@@ -1,5 +1,7 @@
-import { useRecoilState } from 'recoil'
+import { useRecoilState, useResetRecoilState } from 'recoil'
 import { contextPopupState, popupState } from '@/store/popupAtom'
+import { useEffect } from 'react'
+import { commonUtilsState } from '@/store/commonUtilsAtom'
 
 /**
  * 팝업 관리 훅