팝업 전 처리 추가

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,11 +1,14 @@
-import { useRecoilState } from 'recoil'
+import { useRecoilState, useResetRecoilState } from 'recoil'
 import { contextPopupState, popupState } from '@/store/popupAtom'
+import { useEffect } from 'react'
+import { commonUtilsState } from '@/store/commonUtilsAtom'
 
 /**
  * 팝업 관리 훅
  * @returns
  */
 export function usePopup() {
+  const resetCommonUtils = useResetRecoilState(commonUtilsState)
   const [popup, setPopup] = useRecoilState(popupState)
   const [contextMenuPopup, setContextMenuPopup] = useRecoilState(contextPopupState)
 
@@ -17,6 +20,9 @@ export function usePopup() {
    * @param {*} isConfig 팝업 타입
    */
   const addPopup = (id, depth, component, isConfig = false) => {
+    //팝업 전 처리
+    resetCommonUtils()
+    //
     setPopup({
       config: isConfig ? [...filterDepth(depth, isConfig), { id, depth, component, isConfig }] : [...popup.config],
       other: !isConfig ? [...filterDepth(depth, isConfig), { id, depth, component, isConfig }] : [...popup.other],