면형상 방향 추가

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) => {

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}>
           닫기

src/hooks/useCanvas.js

@@ -427,6 +427,7 @@ export function useCanvas(id) {
       'minY',
       'x',
       'y',
+      'defense',
     ])
 
     const str = JSON.stringify(objs)

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'
       }