Merge branch 'qcast-pub' into dev

src/components/common/color-picker/ColorPickerModal.jsx

@@ -52,7 +52,7 @@ export default function ColorPickerModal(props) {
                 closePopup(id, isConfig)
               }}
             >
-              {getMessage('common.message.save')}
+              {getMessage('modal.common.save')}
             </button>
           </div>
         </div>

src/components/common/context-menu/QContextMenu.jsx

@@ -1,16 +1,20 @@
 'use client'
 import { useEffect } from 'react'
 import '@/styles/contents.scss'
-import { useRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
 import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
 import { useTempGrid } from '@/hooks/useTempGrid'
+import { useContextMenu } from '@/hooks/useContextMenu'
+import { useEvent } from '@/hooks/useEvent'
 
 export default function QContextMenu(props) {
-  const { contextRef, canvasProps, handleKeyup } = props
+  const { contextRef, canvasProps } = props
   const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
-  const [contextMenuList, setContextMenuList] = useRecoilState(contextMenuListState)
+  const contextMenuList = useRecoilValue(contextMenuListState)
   const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
   const { tempGridMode, setTempGridMode } = useTempGrid()
+  const { handleKeyup } = useContextMenu()
+  const { addDocumentEventListener, removeDocumentEvent } = useEvent()
 
   let contextType = ''
 
@@ -22,13 +26,13 @@ export default function QContextMenu(props) {
       }
     }
   }
-
   const getYPosition = (e) => {
     const contextLength = contextMenuList.reduce((acc, cur, index) => {
       return acc + cur.length
     }, 0)
     return e?.clientY - (contextLength * 25 + contextMenuList.length * 2 * 17)
   }
+
   useEffect(() => {
     if (!contextRef.current) return
 
@@ -40,7 +44,7 @@ export default function QContextMenu(props) {
         y: window.innerHeight / 2 < e.pageY ? getYPosition(e) : e.pageY,
       }
       setContextMenu({ visible: true, ...position })
-      document.addEventListener('keyup', (e) => handleKeyup(e))
+      addDocumentEventListener('keyup', document, handleKeyup)
       canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
     }
 
@@ -51,8 +55,9 @@ export default function QContextMenu(props) {
 
     const handleOutsideClick = (e) => {
       // e.preventDefault()
-      if (contextMenu.visible && !ref.current.contains(e.target)) {
+      if (contextMenu.visible) {
         setContextMenu({ ...contextMenu, visible: false })
+        removeDocumentEvent('keyup')
       }
     }
 
@@ -61,10 +66,11 @@ export default function QContextMenu(props) {
     document.addEventListener('click', handleOutsideClick)
 
     return () => {
+      removeDocumentEvent('keyup')
       document.removeEventListener('click', handleClick)
       document.removeEventListener('click', handleOutsideClick)
     }
-  }, [contextRef, contextMenu])
+  }, [contextRef, contextMenuList])
 
   const handleObjectMove = () => {
     activeObject.set({

src/components/common/draggable/WithDraggable.jsx

@@ -1,18 +1,18 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import Draggable from 'react-draggable'
 
-export default function WithDraggable({ isShow, children, pos, handle = '' }) {
-  const [position, setPosition] = useState({ x: 0, y: 0 })
+export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 }, handle = '' }) {
+  const [position, setPosition] = useState(pos)
 
   const handleOnDrag = (e, data) => {
     e.stopPropagation()
     setPosition({ x: data.x, y: data.y })
   }
-  useEffect(() => {
-    setPosition({ ...pos })
-  }, [])
+  // useEffect(() => {
+  //   setPosition({ ...pos })
+  // }, [])
 
   return (
     <>

src/components/common/popupManager/PopupManager.jsx

@@ -1,10 +1,10 @@
 'use client'
-import { useRecoilState } from 'recoil'
+import { useRecoilValue } from 'recoil'
 import { popupState } from '@/store/popupAtom'
 import { Fragment } from 'react'
 
 export default function PopupManager() {
-  const [popup, setPopup] = useRecoilState(popupState)
+  const popup = useRecoilValue(popupState)
 
   return [
     ...popup?.config.map((child) => <Fragment key={child.id}>{child.component}</Fragment>),

src/components/floor-plan/CanvasFrame.jsx

@@ -19,7 +19,7 @@ export default function CanvasFrame() {
   const { canvas } = useCanvas('canvas')
   const { canvasLoadInit, gridInit } = useCanvasConfigInitialize()
   const currentMenu = useRecoilValue(currentMenuState)
-  const { contextMenu, handleClick, handleKeyup } = useContextMenu()
+  const { contextMenu, handleClick } = useContextMenu()
   const { selectedPlan, modifiedPlanFlag, checkCanvasObjectEvent, resetModifiedPlans } = usePlan()
   useEvent()
 
@@ -57,7 +57,7 @@ export default function CanvasFrame() {
     <div className="canvas-frame">
       <canvas ref={canvasRef} id="canvas" style={{ position: 'relative' }}></canvas>
 
-      <QContextMenu contextRef={canvasRef} canvasProps={canvas} handleKeyup={handleKeyup}>
+      <QContextMenu contextRef={canvasRef} canvasProps={canvas}>
         {contextMenu?.map((menus, index) => (
           <ul key={index}>
             {menus.map((menu) => (

src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx

@@ -240,7 +240,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
   }, [])
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lr-2`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>

src/components/floor-plan/modal/setting01/SettingModal01.jsx

@@ -11,12 +11,12 @@ import { useRecoilValue } from 'recoil'
 import { usePopup } from '@/hooks/usePopup'
 
 export default function SettingModal01(props) {
-  const { setShowDotLineGridModal, setShowFontSettingModal, id, isConfig } = props
-  console.log(props)
+  const { id } = props
   const [buttonAct, setButtonAct] = useState(1)
   const { getMessage } = useMessage()
   const canGridOptionSeletorValue = useRecoilValue(canGridOptionSeletor)
-  const { addPopup, closePopup } = usePopup()
+  const { closePopup } = usePopup()
+
   const handleBtnClick = (num) => {
     setButtonAct(num)
   }

src/hooks/useContextMenu.js

@@ -231,12 +231,12 @@ export function useContextMenu() {
       y: 180,
     })
     setCurrentContextMenu(menu)
+    currentMenuSetting()
     setQContextMenu({ ...qContextMenu, visible: false })
   }
 
   const handleKeyup = (e) => {
     let menu = null
-
     for (let i = 0; i < contextMenu.length; i++) {
       const temp = contextMenu[i].filter((menu) => {
         return menu.shortcut?.includes(e.key)
@@ -259,7 +259,6 @@ export function useContextMenu() {
   useEffect(() => {
     console.log('currentObject', currentObject)
     if (currentObject?.name) {
-      console.log(currentObject?.name)
       switch (currentObject.name) {
         case 'triangleDormer':
         case 'pentagonDormer':

src/hooks/useEvent.js

@@ -1,12 +1,11 @@
 import { useEffect, useRef } from 'react'
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { canvasState, canvasZoomState, currentMenuState, textModeState } from '@/store/canvasAtom'
 import { fabric } from 'fabric'
-import { calculateDistance, calculateIntersection, distanceBetweenPoints, findClosestPoint, polygonToTurfPolygon } from '@/util/canvas-util'
+import { calculateDistance, calculateIntersection, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
 import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
 import { useDotLineGrid } from '@/hooks/useDotLineGrid'
 import { useTempGrid } from '@/hooks/useTempGrid'
-import { gridDisplaySelector } from '@/store/settingAtom'
 
 export function useEvent() {
   const canvas = useRecoilValue(canvasState)
@@ -100,7 +99,13 @@ export function useEvent() {
           const distance = calculateDistance(pointer, closestLine)
 
           if (distance < adsorptionRange) {
-            arrivalPoint = closestLine.direction === 'vertical' ? { x: closestLine.x1, y: pointer.y } : { x: pointer.x, y: closestLine.y1 }
+            arrivalPoint =
+              closestLine.direction === 'vertical'
+                ? { x: closestLine.x1, y: pointer.y }
+                : {
+                    x: pointer.x,
+                    y: closestLine.y1,
+                  }
           }
         }
       }
@@ -261,6 +266,7 @@ export function useEvent() {
     addCanvasMouseEventListener,
     removeAllMouseEventListeners,
     removeAllDocumentEventListeners,
+    removeDocumentEvent,
     removeMouseEvent,
     removeMouseLine,
     initEvent,