클릭업 내용 수정

src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx

@@ -13,7 +13,7 @@ export default function LinePropertySetting(props) {
   const { id, pos = contextPopupPosition, target } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
-  const { changeSurfaceLinePropertyEvent, changeSurfaceLineProperty, changeSurfaceLinePropertyReset } = useSurfaceShapeBatch()
+  const { changeSurfaceLinePropertyEvent, changeSurfaceLineProperty, changeSurfaceLinePropertyReset } = useSurfaceShapeBatch({})
   const { initEvent } = useEvent()
   // const { initEvent } = useContext(EventContext)
 

src/components/floor-plan/modal/object/SizeSetting.jsx

@@ -17,7 +17,7 @@ export default function SizeSetting(props) {
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const { resizeObjectBatch } = useObjectBatch({})
-  const { resizeSurfaceShapeBatch } = useSurfaceShapeBatch()
+  const { resizeSurfaceShapeBatch } = useSurfaceShapeBatch({})
   const widthRef = useRef(null)
   const heightRef = useRef(null)
 

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

@@ -1,3 +1,4 @@
+'use client'
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useEffect, useRef, useState } from 'react'
@@ -17,7 +18,9 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
   const [yInversion, setYInversion] = useState(false)
   const canvas = useRecoilValue(canvasState)
   const { closePopup } = usePopup()
-  const { applySurfaceShape } = useSurfaceShapeBatch()
+  const [isHidden, setIsHidden] = useState(false)
+
+  const { applySurfaceShape } = useSurfaceShapeBatch({ isHidden, setIsHidden })
 
   const surfaceShapePolygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
 
@@ -232,6 +235,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
     surfaceRefs.xInversion = xInversion //좌우반전
     surfaceRefs.yInversion = yInversion //상하반전
     surfaceRefs.rotate = rotate * 90 //앵글
+    setIsHidden(true)
     applySurfaceShape(surfaceRefs, selectedType, id)
   }
 
@@ -241,7 +245,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap lr-2`}>
+      <div className={`modal-pop-wrap lr-2`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
         <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>

src/hooks/common/useCommonUtils.js

@@ -657,6 +657,7 @@ export function useCommonUtils() {
   const closeDistancePopup = () => {
     const obj = canvas?.getObjects().filter((obj) => obj.name === 'distance')
     if (obj) canvas.remove(...obj)
+    initEvent()
   }
 
   //선택된 그룹객체 restore 하고 item으로 다시 그리고 그 그린 객체 가지고 수정해서 재그룹화 시킨다

src/hooks/common/useMenu.js

@@ -25,7 +25,7 @@ export default function useMenu() {
   const currentMenu = useRecoilValue(currentMenuState)
   const [popupId, setPopupId] = useState(uuidv4())
   const { addPopup } = usePopup()
-  const { deleteAllSurfacesAndObjects } = useSurfaceShapeBatch()
+  const { deleteAllSurfacesAndObjects } = useSurfaceShapeBatch({})
   const handleMenu = (type) => {
     if (type === 'outline') {
       switch (currentMenu) {

src/hooks/object/useObjectBatch.js

@@ -196,33 +196,33 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
         surfaceShapePolygons.forEach((surface) => {
           if (surface.inPolygon({ x: pointer.x, y: pointer.y })) {
             selectedSurface = surface
+
+            rect = new fabric.Rect({
+              fill: 'white',
+              stroke: 'black',
+              strokeWidth: 1,
+              width: width,
+              height: height,
+              left: pointer.x - width / 2,
+              top: pointer.y - height / 2,
+              selectable: true,
+              lockMovementX: true,
+              lockMovementY: true,
+              lockRotation: true,
+              lockScalingX: true,
+              lockScalingY: true,
+              parentId: selectedSurface.id,
+            })
+
+            //개구냐 그림자냐에 따라 변경
+            rect.set({
+              fill: buttonAct === 1 ? 'white' : 'rgba(0, 0, 0, 0.4)',
+              name: objTempName,
+            })
+
+            canvas?.add(rect)
           }
         })
-
-        rect = new fabric.Rect({
-          fill: 'white',
-          stroke: 'black',
-          strokeWidth: 1,
-          width: width,
-          height: height,
-          left: pointer.x - width / 2,
-          top: pointer.y - height / 2,
-          selectable: true,
-          lockMovementX: true,
-          lockMovementY: true,
-          lockRotation: true,
-          lockScalingX: true,
-          lockScalingY: true,
-          parentId: selectedSurface.id,
-        })
-
-        //개구냐 그림자냐에 따라 변경
-        rect.set({
-          fill: buttonAct === 1 ? 'white' : 'rgba(0, 0, 0, 0.4)',
-          name: objTempName,
-        })
-
-        canvas?.add(rect)
       })
 
       addCanvasMouseEventListener('mouse:up', (e) => {
@@ -726,7 +726,6 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
           initEvent()
 
           dbClickEvent()
-          if (setIsHidden) setIsHidden(false)
         }
       })
     }

src/hooks/surface/useSurfaceShapeBatch.js

@@ -1,5 +1,6 @@
 'use client'
 
+import { useEffect } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { canvasState, globalPitchState } from '@/store/canvasAtom'
 import { MENU, POLYGON_TYPE } from '@/common/common'
@@ -18,7 +19,7 @@ import { QLine } from '@/components/fabric/QLine'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
 import { outerLinePointsState } from '@/store/outerLineAtom'
 
-export function useSurfaceShapeBatch() {
+export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
   const { getMessage } = useMessage()
   const { drawDirectionArrow } = usePolygon()
   const lengthTextFont = useRecoilValue(fontSelector('lengthText'))
@@ -72,6 +73,9 @@ export function useSurfaceShapeBatch() {
     let isDrawing = true
     let obj = null
     let points = []
+
+    //일단 팝업을 가린다
+
     if (checkSurfaceShape(surfaceId, { length1, length2, length3, length4, length5 })) {
       addCanvasMouseEventListener('mouse:move', (e) => {
         if (!isDrawing) {
@@ -106,9 +110,7 @@ export function useSurfaceShapeBatch() {
         obj.setCoords() //좌표 변경 적용
 
         canvas?.add(obj)
-
         canvas?.renderAll()
-        closePopup(id)
       })
 
       addCanvasMouseEventListener('mouse:down', (e) => {
@@ -156,9 +158,14 @@ export function useSurfaceShapeBatch() {
         canvas?.add(batchSurface)
         setSurfaceShapePattern(batchSurface, roofDisplay.column)
         drawDirectionArrow(batchSurface)
-        closePopup(id)
+
+        if (setIsHidden) setIsHidden(false)
+
+        // closePopup(id)
         initEvent()
       })
+    } else {
+      if (setIsHidden) setIsHidden(false)
     }
   }
 
@@ -205,6 +212,13 @@ export function useSurfaceShapeBatch() {
           check = false
         }
       }
+
+      if (surfaceId === 6) {
+        if (length2 >= length3) {
+          swalFire({ text: getMessage('surface.shape.validate.size.3to2'), icon: 'error' })
+          check = false
+        }
+      }
     } else if ([8, 12, 13, 16, 17].includes(surfaceId)) {
       if (length1 === 0 || length2 === 0 || length3 === 0 || length4 === 0) {
         swalFire({ text: getMessage('common.canvas.validate.size'), icon: 'error' })
@@ -222,7 +236,7 @@ export function useSurfaceShapeBatch() {
         }
       }
 
-      if (surfaceId === 12 || surfaceId === 13 || surfaceId === 16 || surfaceId === 17) {
+      if (surfaceId === 12 || surfaceId === 13 || surfaceId === 16) {
         if (length2 >= length1) {
           swalFire({ text: getMessage('surface.shape.validate.size.1to2'), icon: 'error' })
           check = false
@@ -233,6 +247,18 @@ export function useSurfaceShapeBatch() {
           check = false
         }
       }
+
+      if (surfaceId === 17) {
+        if (length2 >= length1) {
+          swalFire({ text: getMessage('surface.shape.validate.size.1to2'), icon: 'error' })
+          check = false
+        }
+
+        if (length3 >= length4) {
+          swalFire({ text: getMessage('surface.shape.validate.size.4to3'), icon: 'error' })
+          check = false
+        }
+      }
     } else if ([7, 9, 10, 11, 14].includes(surfaceId)) {
       if (length1 === 0 || length2 === 0 || length3 === 0 || length4 === 0 || length5 === 0) {
         swalFire({ text: getMessage('common.canvas.validate.size'), icon: 'error' })

src/hooks/useContextMenu.js

@@ -59,7 +59,7 @@ export function useContextMenu() {
   const [column, setColumn] = useState(null)
   const { handleZoomClear } = useCanvasEvent()
   const { moveObjectBatch } = useObjectBatch({})
-  const { moveSurfaceShapeBatch } = useSurfaceShapeBatch()
+  const { moveSurfaceShapeBatch } = useSurfaceShapeBatch({})
   const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
   const { addLine, removeLine } = useLine()
   const { removeGrid } = useGrid()

src/locales/ko.json

@@ -860,6 +860,7 @@
   "surface.shape.validate.size.2to3": "②길이는 ③보다 큰 값을 넣어주세요.",
   "surface.shape.validate.size.3to2": "③길이는 ②보다 큰 값을 넣어주세요.",
   "surface.shape.validate.size.3to4": "③길이는 ④보다 큰 값을 넣어주세요.",
+  "surface.shape.validate.size.4to3": "④길이는 ③보다 큰 값을 넣어주세요.",
   "surface.shape.validate.size.4to5": "④길이는 ⑤보다 큰 값을 넣어주세요.",
   "estimate.detail.header.title": "기본정보",
   "estimate.detail.objectNo": "물건번호",