면형상 배치 버그 수정

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

@@ -11,23 +11,42 @@ const PlacementSurface = forwardRef((props, refs) => {
 
   const num = ['①', '②', '③', '④', '⑤']
   const getImageUrl = () => {
+    // re_는 normal의 y축 대칭 이미지
+    const imageName = id < 10 ? '0' + id : id
+    let imageRotate = 0
     if (xInversion && !yInversion) {
-      return `/static/images/canvas/shape/re_${rotate % 4 !== 0 ? Math.abs(rotate % 4) * 90 + 'deg' : 'normal'}/plane_tab${id < 10 ? '0' + id : id}.svg`
+      if (rotate % 2 === 0 || rotate < 0) {
+        imageRotate = Math.abs(rotate % 4)
+      } else {
+        if (rotate < 0) {
+          imageRotate = Math.abs((rotate - 2) % 4)
+        } else {
+          imageRotate = Math.abs((rotate + 2) % 4)
+        }
+      }
+    } else if (xInversion && yInversion) {
+      imageRotate = Math.abs((rotate + 4) % 4)
+    } else if (xInversion !== yInversion && rotate < 0) {
+      imageRotate = Math.abs(rotate)
+    } else if (!xInversion && yInversion) {
+      if (rotate % 2 === 0 || rotate < 0) {
+        imageRotate = Math.abs(rotate % 4)
+      } else {
+        if (rotate < 0) {
+          imageRotate = Math.abs((rotate + 2) % 4)
+        } else {
+          imageRotate = Math.abs((rotate - 2) % 4)
+        }
+      }
+    } else {
+      imageRotate = (rotate + 4) % 4
     }
-
+    const rotateType = imageRotate % 4 !== 0 ? (imageRotate % 4) * 90 + 'deg' : 'normal'
-    if (!xInversion && yInversion) {
+    if (xInversion !== yInversion) {
-      return `/static/images/canvas/shape/re_${rotate % 4 !== 0 ? Math.abs(rotate % 4) * 90 + 'deg' : 'normal'}/plane_tab${id < 10 ? '0' + id : id}.svg`
+      return `/static/images/canvas/shape/re_${rotateType}/plane_tab${imageName}.svg`
+    } else {
+      return `/static/images/canvas/shape/${rotateType}/plane_tab${imageName}.svg`
     }
-
-    if (xInversion && yInversion) {
-      return `/static/images/canvas/shape/${rotate % 4 !== 0 ? Math.abs(rotate % 4) * 90 + 'deg' : 'normal'}/plane_tab${id < 10 ? '0' + id : id}.svg`
-    }
-
-    if (rotate < 0) {
-      return `/static/images/canvas/shape/${rotate !== 0 ? Math.abs((rotate + 4) * 90) + 'deg' : 'normal'}/plane_tab${id < 10 ? '0' + id : id}.svg`
-    }
-
-    return `/static/images/canvas/shape/${rotate !== 0 ? Math.abs(rotate * 90) + 'deg' : 'normal'}/plane_tab${id < 10 ? '0' + id : id}.svg`
   }
 
   const azimuthButton = (direction, e) => {

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

@@ -239,12 +239,11 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
     applySurfaceShape(surfaceRefs, selectedType, id)
   }
 
-  const handleRotate = () => {}
-
   const handleInversion = (type) => {
     if (type === 'x') {
+      const x = xInversion
       setXInversion(!xInversion)
-      setRotate(xInversion ? rotate + 2 : rotate - 2)
+      setRotate(x ? rotate + 2 : rotate - 2)
       // setXInversion(!xInversion)
     } else if (type === 'y') {
       // setRotate(rotate + 2)
@@ -295,6 +294,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
               </div>
               <div className="shape-library">
                 <button className="library-btn ico01" onClick={() => setRotate((yInversion !== xInversion ? rotate - 1 : rotate + 1) % 4)}></button>
+                {/* <button className="library-btn ico01" onClick={() => setRotate((rotate + 1) % 4)}></button> */}
                 {/* <button className="library-btn ico02" onClick={() => setYInversion(!yInversion)}></button>
                 <button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></button> */}
                 <button className="library-btn ico02" onClick={() => handleInversion('y')}></button>

src/hooks/surface/useSurfaceShapeBatch.js

@@ -101,15 +101,40 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
           lockScalingX: true, // X 축 크기 조정 잠금
           lockScalingY: true, // Y 축 크기 조정 잠금
           name: MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH_TEMP,
-          flipX: xInversion !== yInversion ? yInversion : false,
+          flipX: xInversion !== yInversion,
-          flipY: xInversion !== yInversion ? xInversion : false,
+          // angle: xInversion && yInversion ? Math.abs((rotate + 180) % 360) : Math.abs(rotate),
-          angle: xInversion && yInversion ? Math.abs((rotate + 180) % 360) : Math.abs(rotate),
+          // angle: rotate,
           originX: 'center',
           originY: 'center',
           pitch: globalPitch,
         }
 
         obj = new QPolygon(points, options)
+        let imageRotate = 0
+        if (xInversion && !yInversion) {
+          if (rotate % 180 === 0 || rotate < 0) {
+            imageRotate = Math.abs(rotate % 360)
+          } else {
+            imageRotate = Math.abs((rotate - 180) % 4)
+          }
+        } else if (xInversion && yInversion) {
+          imageRotate = Math.abs((rotate + 360) % 360)
+        } else if (xInversion !== yInversion && rotate < 0) {
+          imageRotate = Math.abs(rotate)
+        } else if (!xInversion && yInversion) {
+          if (rotate % 180 === 0 || rotate < 0) {
+            imageRotate = Math.abs(rotate % 360)
+          } else {
+            if (rotate < 0) {
+              imageRotate = Math.abs((rotate + 180) % 360)
+            } else {
+              imageRotate = Math.abs((rotate - 180) % 360)
+            }
+          }
+        } else {
+          imageRotate = (rotate + 360) % 360
+        }
+        obj.set({ angle: imageRotate })
         obj.setCoords() //좌표 변경 적용
 
         canvas?.add(obj)