가대 생성 useMode로 옮김

src/components/Roof2.jsx

@@ -48,6 +48,7 @@ export default function Roof2() {
     handleOuterlinesTest2,
     applyTemplateB,
     makeRoofPatternPolygon,
+    createRoofRack,
   } = useMode()
 
   // const [canvasState, setCanvasState] = useRecoilState(canvasAtom)
@@ -432,41 +433,6 @@ export default function Roof2() {
     makeRoofPatternPolygon(roofStyle)
   }
 
-  const createRoofRack = () => {
-    const roofs = canvas?.getObjects().filter((obj) => obj.name === 'roof')
-    roofs.forEach((roof, index) => {
-      let maxLengthLine = roof.lines.reduce((acc, cur) => {
-        return acc.length > cur.length ? acc : cur
-      })
-
-      const offsetPolygonPoint = offsetPolygon(roof.points, -20, 0)
-
-      const trestlePoly = new QPolygon(offsetPolygonPoint, {
-        fill: 'transparent',
-        stroke: 'red',
-        strokeDashArray: [5, 5],
-        strokeWidth: 1,
-        selectable: true,
-        fontSize: fontSize,
-        name: 'trestle',
-        lockMovementX: true, // X 축 이동 잠금
-        lockMovementY: true, // Y 축 이동 잠금
-        lockRotation: true, // 회전 잠금
-        lockScalingX: true, // X 축 크기 조정 잠금
-        lockScalingY: true, // Y 축 크기 조정 잠금
-        idx: index,
-      })
-
-      canvas?.add(trestlePoly)
-
-      if (maxLengthLine.direction === 'right' || maxLengthLine.direction === 'left') {
-        trestlePoly.fillCell({ width: 100, height: 50, padding: 10 })
-      } else {
-        trestlePoly.fillCell({ width: 50, height: 100, padding: 10 })
-      }
-    })
-  }
-
   return (
     <>
       {canvas && (

src/components/fabric/QPolygon.js

@@ -224,6 +224,8 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
     const drawCellsArray = [] //그려진 셀의 배열
 
+    let idx = 1
+
     for (let i = 0; i < cols; i++) {
       for (let j = 0; j < rows; j++) {
         const rectLeft = minX + i * (rectWidth + cell.padding) + tmpWidth
@@ -253,8 +255,10 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
             lockScalingY: true, // Y 축 크기 조정 잠금
             opacity: 0.8,
             name: 'cell',
+            idx: idx,
           })
 
+          idx++
           drawCellsArray.push(rect) //배열에 넣어서 반환한다
           this.canvas.add(rect)
         }

src/hooks/useMode.js

@@ -3346,6 +3346,51 @@ export function useMode() {
     setMode(Mode.DEFAULT) //default 모드로 변경
   }
 
+  const createRoofRack = () => {
+    const roofs = canvas?.getObjects().filter((obj) => obj.name === 'roof')
+    let roofCells = [] // roof에 적재된 cell들
+    roofs.forEach((roof, index) => {
+      let maxLengthLine = roof.lines.reduce((acc, cur) => {
+        return acc.length > cur.length ? acc : cur
+      })
+
+      const offsetPolygonPoint = offsetPolygon(roof.points, -20, 0)
+
+      const trestlePoly = new QPolygon(offsetPolygonPoint, {
+        fill: 'transparent',
+        stroke: 'red',
+        strokeDashArray: [5, 5],
+        strokeWidth: 1,
+        selectable: true,
+        fontSize: fontSize,
+        name: 'trestle',
+        lockMovementX: true, // X 축 이동 잠금
+        lockMovementY: true, // Y 축 이동 잠금
+        lockRotation: true, // 회전 잠금
+        lockScalingX: true, // X 축 크기 조정 잠금
+        lockScalingY: true, // Y 축 크기 조정 잠금
+        idx: index,
+      })
+
+      canvas?.add(trestlePoly)
+
+      let drawRoofCells
+      if (maxLengthLine.direction === 'right' || maxLengthLine.direction === 'left') {
+        drawRoofCells = trestlePoly.fillCell({ width: 100, height: 50, padding: 10 })
+        trestlePoly.direction = 'south'
+      } else {
+        drawRoofCells = trestlePoly.fillCell({ width: 50, height: 100, padding: 10 })
+        trestlePoly.direction = 'east'
+      }
+
+      drawRoofCells.forEach((cell) => {
+        roofCells.push(cell)
+      })
+    })
+
+    setDrewRoofCells(roofCells)
+  }
+
   return {
     mode,
     setMode,
@@ -3360,5 +3405,6 @@ export function useMode() {
     handleOuterlinesTest2,
     makeRoofPatternPolygon,
     makeRoofTrestle,
+    createRoofRack,
   }
 }