From 312a34bd0bc5a631a78a4d9fefa060873f12160a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?=
 <43837214+Minsiki@users.noreply.github.com>
Date: Fri, 14 Feb 2025 16:16:51 +0900
Subject: [PATCH] =?UTF-8?q?-=20=EB=A9=B4=ED=98=95=EC=83=81=20=EB=B0=B0?=
 =?UTF-8?q?=EC=B9=98=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95(=EB=8B=A8?=
 =?UTF-8?q?=EC=9C=84=ED=85=8C=EC=8A=A4=ED=8A=B8(Unit=20Test)=20#618)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../placementSurface/PlacementSurface.jsx     |  4 ++--
 .../PlacementSurfaceSetting.jsx               | 22 ++++++++++++++++---
 src/hooks/surface/useSurfaceShapeBatch.js     | 10 ++++-----
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
index f95f9c2f..c06386b5 100644
--- a/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
+++ b/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
@@ -12,7 +12,7 @@ const PlacementSurface = forwardRef((props, refs) => {
   const num = ['①', '②', '③', '④', '⑤']
   const getImageUrl = () => {
     if (xInversion && !yInversion) {
-      return `/static/images/canvas/shape/re_${(rotate - 2) % 4 !== 0 ? Math.abs((rotate - 2) % 4) * 90 + 'deg' : 'normal'}/plane_tab${id < 10 ? '0' + id : id}.svg`
+      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 (!xInversion && yInversion) {
@@ -20,7 +20,7 @@ const PlacementSurface = forwardRef((props, refs) => {
     }
 
     if (xInversion && yInversion) {
-      return `/static/images/canvas/shape/${(rotate + 2) % 4 !== 0 ? Math.abs((rotate + 2) % 4) * 90 + 'deg' : 'normal'}/plane_tab${id < 10 ? '0' + id : id}.svg`
+      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) {
diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
index 263054cf..e321c52a 100644
--- a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
+++ b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
@@ -224,7 +224,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
   }
 
   const getScale = () => {
-    return `scale(${yInversion ? -1 : 1}, ${xInversion ? -1 : 1})`
+    return `scale(${xInversion !== yInversion ? -1 : 1}, 1)`
   }
 
   const getRotate = () => {
@@ -236,9 +236,23 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
     surfaceRefs.yInversion = yInversion //상하반전
     surfaceRefs.rotate = rotate * 90 //앵글
     setIsHidden(true)
+    console.log('surfaceRefs', surfaceRefs)
     applySurfaceShape(surfaceRefs, selectedType, id)
   }
 
+  const handleRotate = () => {}
+
+  const handleInversion = (type) => {
+    if (type === 'x') {
+      setXInversion(!xInversion)
+      setRotate(xInversion ? rotate + 2 : rotate - 2)
+      // setXInversion(!xInversion)
+    } else if (type === 'y') {
+      // setRotate(rotate + 2)
+      setYInversion(!yInversion)
+    }
+  }
+
   useEffect(() => {
     setSelectedType(types[0])
   }, [])
@@ -280,8 +294,10 @@ 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 ico02" onClick={() => setYInversion(!yInversion)}></button>
-                <button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></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>
+                <button className="library-btn ico03" onClick={() => handleInversion('x')}></button>
               </div>
             </div>
             <div className="plane-detail-wrap">
diff --git a/src/hooks/surface/useSurfaceShapeBatch.js b/src/hooks/surface/useSurfaceShapeBatch.js
index 10201c8c..0e08f45b 100644
--- a/src/hooks/surface/useSurfaceShapeBatch.js
+++ b/src/hooks/surface/useSurfaceShapeBatch.js
@@ -88,7 +88,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
         console.log('surfaceRefs.xInversion', surfaceRefs.xInversion)
         console.log('surfaceRefs.yInversion', surfaceRefs.yInversion)
         console.log('surfaceRefs.rotate', surfaceRefs.rotate)
-
+        const { xInversion, yInversion, rotate } = surfaceRefs
         const options = {
           fill: 'transparent',
           stroke: 'black',
@@ -102,9 +102,9 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
           lockScalingX: true, // X 축 크기 조정 잠금
           lockScalingY: true, // Y 축 크기 조정 잠금
           name: MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH_TEMP,
-          flipX: surfaceRefs.yInversion,
-          flipY: surfaceRefs.xInversion,
-          angle: Math.abs(surfaceRefs.rotate),
+          flipX: xInversion !== yInversion ? surfaceRefs.yInversion : false,
+          flipY: xInversion !== yInversion ? surfaceRefs.xInversion : false,
+          angle: xInversion && yInversion ? Math.abs((surfaceRefs.rotate + 180) % 360) : Math.abs(surfaceRefs.rotate),
           originX: 'center',
           originY: 'center',
           pitch: globalPitch,
@@ -199,7 +199,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
         swalFire({ text: getMessage('common.canvas.validate.size'), icon: 'error' })
         check = false
       }
-      if (surfaceId === 3 && length3 > length1) {
+      if (surfaceId === 3 && length3 >= length1) {
         swalFire({ text: getMessage('surface.shape.validate.size.1to3'), icon: 'error' })
         check = false
       }