From 4b226a670a2455ce8047fa7b8a23c43de9c86f67 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Wed, 4 Sep 2024 13:53:36 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A9=B4=ED=98=95=EC=83=81=20=EB=B0=A9?=
 =?UTF-8?q?=ED=96=A5=20=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/fabric/QPolygon.js  |  1 +
 src/components/ui/SurfaceShape.jsx | 45 ++++++++++++++++++++++++++++++
 src/hooks/useCanvas.js             |  1 +
 src/hooks/useMode.js               | 12 ++------
 4 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index 355fdf7f..f255edc3 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -19,6 +19,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   innerLines: [],
   children: [],
   initOptions: null,
+  defense: null,
   initialize: function (points, options, canvas) {
     // 소수점 전부 제거
     points.forEach((point) => {
diff --git a/src/components/ui/SurfaceShape.jsx b/src/components/ui/SurfaceShape.jsx
index 21f3edd7..f6fda227 100644
--- a/src/components/ui/SurfaceShape.jsx
+++ b/src/components/ui/SurfaceShape.jsx
@@ -28,6 +28,8 @@ export const SurfaceShapeModal = ({ canvas }) => {
   const [length4, setLength4] = useState(0)
   const [length5, setLength5] = useState(0)
 
+  const [defense, setDefense] = useState('south')
+
   /**
    * 최대 5개의 length
    */
@@ -603,6 +605,11 @@ export const SurfaceShapeModal = ({ canvas }) => {
           strokeWidth: 2,
           selectable: true,
           fontSize: fontSize,
+          lockMovementX: true, // X 축 이동 잠금
+          lockMovementY: true, // Y 축 이동 잠금
+          lockRotation: true, // 회전 잠금
+          lockScalingX: true, // X 축 크기 조정 잠금
+          lockScalingY: true, // Y 축 크기 조정 잠금
           name: 'guideTriangle',
         })
       } else {
@@ -613,11 +620,17 @@ export const SurfaceShapeModal = ({ canvas }) => {
           selectable: true,
           fontSize: fontSize,
           name: 'guideTriangle',
+          lockMovementX: true, // X 축 이동 잠금
+          lockMovementY: true, // Y 축 이동 잠금
+          lockRotation: true, // 회전 잠금
+          lockScalingX: true, // X 축 크기 조정 잠금
+          lockScalingY: true, // Y 축 크기 조정 잠금
           flipX: true,
         })
       }
 
       canvas?.add(obj)
+      obj.set({ defense: defense })
       setCurrentPattern(obj)
       canvas?.renderAll()
     })
@@ -832,6 +845,38 @@ export const SurfaceShapeModal = ({ canvas }) => {
       ) : (
         <></>
       )}
+      <div className="flex flex-col items-center">
+        <div className="flex">
+          <Button
+            className={`p-4 border rounded-lg ${defense === 'north' ? 'bg-blue-200' : ''} flex items-center justify-center`}
+            onClick={() => setDefense('north')}
+          >
+            북
+          </Button>
+        </div>
+        <div className="flex space-x-4">
+          <Button
+            className={`p-4 border rounded-lg ${defense === 'west' ? 'bg-blue-200' : ''} flex items-center justify-center`}
+            onClick={() => setDefense('west')}
+          >
+            서
+          </Button>
+          <Button
+            className={`p-4 border rounded-lg ${defense === 'east' ? 'bg-blue-200' : ''} flex items-center justify-center`}
+            onClick={() => setDefense('east')}
+          >
+            동
+          </Button>
+        </div>
+        <div className="mt-4">
+          <Button
+            className={`p-4 border rounded-lg ${defense === 'south' ? 'bg-blue-200' : ''} flex items-center justify-center`}
+            onClick={() => setDefense('south')}
+          >
+            남
+          </Button>
+        </div>
+      </div>
       <div>
         <Button className="m-1 p-2" color={'primary'} onClick={closeModal}>
           닫기
diff --git a/src/hooks/useCanvas.js b/src/hooks/useCanvas.js
index 0dc724f3..378bbd3d 100644
--- a/src/hooks/useCanvas.js
+++ b/src/hooks/useCanvas.js
@@ -427,6 +427,7 @@ export function useCanvas(id) {
       'minY',
       'x',
       'y',
+      'defense',
     ])
 
     const str = JSON.stringify(objs)
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index b6c4680d..bcbf2c48 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -4572,13 +4572,7 @@ export function useMode() {
   }
 
   const createRoofRack = () => {
-    roof.divideLine()
-    const trestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'trestle')
-    // 이미 만들어진 가대가 있을 경우 return
-    if (trestlePolygons.length !== 0) {
-      return
-    }
-
+    removeMouseLines()
     canvas?.off('mouse:move')
     canvas?.off('mouse:out')
     const roofs = canvas?.getObjects().filter((obj) => obj.name === 'roof')
@@ -4637,10 +4631,10 @@ export function useMode() {
 
       let drawRoofCells
       if (maxLengthLine.direction === 'right' || maxLengthLine.direction === 'left') {
-        drawRoofCells = trestle.fillCell({ width: 50, height: 100, padding: 10 })
+        drawRoofCells = trestle.fillCell({ width: 113.4, height: 172.2, padding: 0 })
         trestle.direction = 'south'
       } else {
-        drawRoofCells = trestle.fillCell({ width: 100, height: 50, padding: 10 })
+        drawRoofCells = trestle.fillCell({ width: 172.2, height: 113.4, padding: 0 })
         trestle.direction = 'east'
       }