안쓰는거 삭제

src/components/Roof2.jsx

@@ -93,7 +93,6 @@ export default function Roof2() {
       )
 
       canvas?.add(polygon)
-      console.log(polygon)
 
       polygon.fillCell({ width: 50, height: 30, padding: 10 })
     }
@@ -122,47 +121,7 @@ export default function Roof2() {
     canvasSizeMode()
   }, [verticalSize, horizontalSize])
 
-  const addPolygonType1 = () => {
+  const makeQPolygon = () => {
-    if (canvas) {
-      const polygon = new QPolygon(
-        [
-          { x: 100, y: 100 },
-          { x: 800, y: 100 },
-          { x: 800, y: 800 },
-          { x: 500, y: 800 },
-          { x: 500, y: 400 },
-          { x: 100, y: 400 },
-        ],
-        {
-          fill: 'transparent',
-          stroke: 'black',
-          strokeWidth: 2,
-          selectable: true,
-          fontSize: fontSize,
-        },
-        canvas,
-      )
-
-      canvas?.add(polygon)
-
-      polygon.fillCell({ width: 20, height: 20, padding: 10 })
-    }
-  }
-
-  const rotate = () => {
-    const rect = canvas?.getObjects().find((obj) => obj.type === 'QRect')
-    if (!rect) {
-      alert('사각형을 먼저 만들어주세요.')
-      return
-    }
-    const angle = prompt('각도를 입력해주세요.', '0')
-    if (rect) {
-      rect.angle = parseInt(angle)
-      canvas?.renderAll()
-    }
-  }
-
-  const makeQPolygon2 = () => {
     if (canvas) {
       const polygon2 = new QPolygon(
         [
@@ -180,10 +139,11 @@ export default function Roof2() {
           selectable: true,
           fontSize: fontSize,
         },
-        canvas,
+        canvas, // 필수로 넣어줘야 함
       )
 
       canvas?.add(polygon2)
+      console.log(polygon2)
     }
   }
 
@@ -305,14 +265,6 @@ export default function Roof2() {
             >
               점선 추가
             </button>
-            <button
-              className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
-              onClick={() => {
-                addPolygonType1()
-              }}
-            >
-              폴리곤 type 1
-            </button>
             <button
               className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
               onClick={() => {
@@ -323,15 +275,9 @@ export default function Roof2() {
             </button>
             <button
               className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
-              onClick={rotate}
+              onClick={makeQPolygon}
             >
-              회전
+              QPolygon
-            </button>
-            <button
-              className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
-              onClick={makeQPolygon2}
-            >
-              QPolygon2
             </button>
           </div>
           <div className="flex justify-center flex-col items-center">

src/components/fabric/QPolygon.js

@@ -8,6 +8,7 @@ export default class QPolygon extends fabric.Group {
   texts = []
   canvas
   fontSize
+  qCells = []
   constructor(points, options, canvas) {
     if (!options.fontSize) {
       throw new Error('Font size is required.')
@@ -22,7 +23,6 @@ export default class QPolygon extends fabric.Group {
     this.points = points
     this.polygon = polygon
     this.canvas = canvas
-
     this.#init()
     this.#addEvent()
   }