그리드 생성 후 도면 크기 축소 했을 시, 그리드 작아지는 현상

src/hooks/common/useGrid.js

@@ -71,10 +71,10 @@ export function useGrid() {
 
       const backgroundPolygon = new fabric.Polygon(
         [
-          { x: 0, y: 0 },
-          { x: canvas.width, y: 0 },
-          { x: canvas.width, y: canvas.height },
-          { x: 0, y: canvas.height },
+          { x: -1500, y: -1500 },
+          { x: 2500, y: -1500 },
+          { x: 2500, y: 2500 },
+          { x: -1500, y: 2500 },
         ],
         {
           fill: pattern,
@@ -90,9 +90,14 @@ export function useGrid() {
     }
 
     if (patternData.lineGridDisplay) {
-      for (let i = 0; i < canvas.height / patternData.gridVertical + 1; i++) {
+      for (let i = 0; i < 5000 / patternData.gridVertical + 1; i++) {
         const horizontalLine = new fabric.Line(
-          [0, i * patternData.gridVertical - patternData.gridVertical / 2, canvas.width, i * patternData.gridVertical - patternData.gridVertical / 2],
+          [
+            -1500,
+            -1500 + i * patternData.gridVertical - patternData.gridVertical / 2,
+            3000,
+            -1500 + i * patternData.gridVertical - patternData.gridVertical / 2,
+          ],
           {
             stroke: gridColor,
             strokeWidth: 1,
@@ -113,9 +118,14 @@ export function useGrid() {
         canvas.add(horizontalLine)
       }
 
-      for (let i = 0; i < canvas.width / patternData.gridHorizon + 1; i++) {
+      for (let i = 0; i < 5000 / patternData.gridHorizon + 1; i++) {
         const verticalLine = new fabric.Line(
-          [i * patternData.gridHorizon - patternData.gridHorizon / 2, 0, i * patternData.gridHorizon - patternData.gridHorizon / 2, canvas.height],
+          [
+            -1500 + i * patternData.gridHorizon - patternData.gridHorizon / 2,
+            -1500,
+            -1500 + i * patternData.gridHorizon - patternData.gridHorizon / 2,
+            3000,
+          ],
           {
             stroke: gridColor,
             strokeWidth: 1,