줌 상태 변경에 따라 그리드 상태 수정, 흡착점 모드 시작 시 ON

src/hooks/common/useGrid.js

@@ -1,15 +1,18 @@
 import { useRecoilValue } from 'recoil'
-import { canvasState, dotLineGridSettingState } from '@/store/canvasAtom'
+import { canvasState, canvasZoomState, dotLineGridSettingState } from '@/store/canvasAtom'
 import { useEffect } from 'react'
 import { gridColorState } from '@/store/gridAtom'
 import { gridDisplaySelector } from '@/store/settingAtom'
+
 const GRID_PADDING = 5
+
 export function useGrid() {
   const canvas = useRecoilValue(canvasState)
 
   const dotLineGridSetting = useRecoilValue(dotLineGridSettingState)
   const gridColor = useRecoilValue(gridColorState)
   const isGridDisplay = useRecoilValue(gridDisplaySelector)
+  const zoom = useRecoilValue(canvasZoomState)
 
   useEffect(() => {
     if (!canvas) {
@@ -90,14 +93,32 @@ export function useGrid() {
     }
 
     if (patternData.lineGridDisplay) {
-      for (let i = 0; i < 5000 / patternData.gridVertical + 1; i++) {
+      // 캔버스의 실제 보이는 영역 계산
+      const canvasWidth = canvas.getWidth()
+      const canvasHeight = canvas.getHeight()
+      const currentZoom = canvas.getZoom()
+      const viewportTransform = canvas.viewportTransform
+
+      const visibleLeft = -viewportTransform[4] / currentZoom
+      const visibleTop = -viewportTransform[5] / currentZoom
+      const visibleRight = visibleLeft + canvasWidth / currentZoom
+      const visibleBottom = visibleTop + canvasHeight / currentZoom
+
+      // 여유 공간 추가
+      const padding = 200
+      const gridLeft = visibleLeft - padding
+      const gridTop = visibleTop - padding
+      const gridRight = visibleRight + padding
+      const gridBottom = visibleBottom + padding
+
+      // 가로선 생성 (수평선)
+      const horizontalGridRange = gridBottom - gridTop
+      const horizontalGridCount = Math.ceil(horizontalGridRange / patternData.gridVertical) + 2
+      
+      for (let i = 0; i < horizontalGridCount; i++) {
+        const y = gridTop + i * patternData.gridVertical
         const horizontalLine = new fabric.Line(
-          [
+          [gridLeft, y, gridRight, y],
-            -1500,
-            -1500 + i * patternData.gridVertical - patternData.gridVertical / 2,
-            3000,
-            -1500 + i * patternData.gridVertical - patternData.gridVertical / 2,
-          ],
           {
             stroke: gridColor,
             strokeWidth: 1,
@@ -118,14 +139,14 @@ export function useGrid() {
         canvas.add(horizontalLine)
       }
 
-      for (let i = 0; i < 5000 / patternData.gridHorizon + 1; i++) {
+      // 세로선 생성 (수직선)
+      const verticalGridRange = gridRight - gridLeft
+      const verticalGridCount = Math.ceil(verticalGridRange / patternData.gridHorizon) + 2
+      
+      for (let i = 0; i < verticalGridCount; i++) {
+        const x = gridLeft + i * patternData.gridHorizon
         const verticalLine = new fabric.Line(
-          [
+          [x, gridTop, x, gridBottom],
-            -1500 + i * patternData.gridHorizon - patternData.gridHorizon / 2,
-            -1500,
-            -1500 + i * patternData.gridHorizon - patternData.gridHorizon / 2,
-            3000,
-          ],
           {
             stroke: gridColor,
             strokeWidth: 1,
@@ -148,7 +169,7 @@ export function useGrid() {
     }
 
     canvas.renderAll()
-  }, [dotLineGridSetting])
+  }, [dotLineGridSetting, zoom])
 
   const move = (object, x, y) => {
     object.set({

src/hooks/option/useCanvasSetting.js

@@ -1,29 +1,29 @@
-import { useEffect, useState, useRef, useContext } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
 import {
   adsorptionPointModeState,
   adsorptionRangeState,
-  canvasState,
-  planSizeSettingState,
-  dotLineGridSettingState,
   canvasSettingState,
+  canvasState,
   currentMenuState,
+  dotLineGridSettingState,
+  planSizeSettingState,
 } from '@/store/canvasAtom'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { useAxios } from '@/hooks/useAxios'
 import { useSwal } from '@/hooks/useSwal'
 import {
+  addedRoofsState,
+  basicSettingState,
   correntObjectNoState,
   corridorDimensionSelector,
-  settingModalFirstOptionsState,
+  fetchRoofMaterialsState,
-  settingModalSecondOptionsState,
-  settingModalGridOptionsState,
-  basicSettingState,
   roofMaterialsAtom,
   selectedRoofMaterialSelector,
-  addedRoofsState,
+  settingModalFirstOptionsState,
-  fetchRoofMaterialsState,
+  settingModalGridOptionsState,
+  settingModalSecondOptionsState,
 } from '@/store/settingAtom'
 import { MENU, POLYGON_TYPE } from '@/common/common'
 import { globalFontAtom } from '@/store/fontAtom'
@@ -339,11 +339,11 @@ export function useCanvasSetting(executeEffect = true) {
    */
   const fetchBasicSettings = async (planNo, openPoint) => {
     // 지붕재 데이터가 없으면 먼저 로드
-    let materials = roofMaterials;
+    let materials = roofMaterials
     if (!materials || materials.length === 0) {
-      logger.log("Waiting for roofMaterials to be loaded...");
+      logger.log('Waiting for roofMaterials to be loaded...')
-      materials = await addRoofMaterials();
+      materials = await addRoofMaterials()
-      logger.log("roofMaterials loaded:", materials);
+      logger.log('roofMaterials loaded:', materials)
     }
 
     try {
@@ -529,8 +529,14 @@ export function useCanvasSetting(executeEffect = true) {
                 ? params.selectedRoofMaterial.raftBaseCd
                 : params.roofsData.raft,
             roofLayout: params.roofsData.roofLayout === null || params.roofsData.roofLayout === undefined ? 'P' : params.roofsData.roofLayout,
-            roofPitch: params.roofsData.roofPitch === null || params.roofsData.roofPitch === undefined  || params.roofsData.roofPitch === '' ? 0 : params.roofsData.roofPitch,
+            roofPitch:
-            roofAngle: params.roofsData.roofAngle === null || params.roofsData.roofAngle === undefined || params.roofsData.roofAngle === '' ? 0 : params.roofsData.roofAngle,
+              params.roofsData.roofPitch === null || params.roofsData.roofPitch === undefined || params.roofsData.roofPitch === ''
+                ? 0
+                : params.roofsData.roofPitch,
+            roofAngle:
+              params.roofsData.roofAngle === null || params.roofsData.roofAngle === undefined || params.roofsData.roofAngle === ''
+                ? 0
+                : params.roofsData.roofAngle,
           },
         ],
       }
@@ -643,7 +649,11 @@ export function useCanvasSetting(executeEffect = true) {
         setDimensionLineSettings({ ...dimensionLineSettings, pixel: res.originPixel, color: res.originColor })
 
         /** 도면크기 설정 */
-        setPlanSizeSettingMode({ ...planSizeSettingMode, originHorizon: res.originHorizon, originVertical: res.originVertical })
+        setPlanSizeSettingMode({
+          ...planSizeSettingMode,
+          originHorizon: res.originHorizon,
+          originVertical: res.originVertical,
+        })
         canvas.setWidth(res.originHorizon)
         canvas.setHeight(res.originVertical)
         canvas.renderAll()
@@ -723,7 +733,7 @@ export function useCanvasSetting(executeEffect = true) {
         /** 조회된 글꼴 데이터가 없는 경우 (데이터 초기화) */
 
         /** 흡착점 ON/OFF */
-        setAdsorptionPointMode(false)
+        setAdsorptionPointMode(true)
 
         /** 치수선 설정 */
         resetDimensionLineSettings()

src/hooks/useCanvas.js

@@ -26,6 +26,7 @@ export function useCanvas(id) {
   const isImageDisplay = useRecoilValue(imageDisplaySelector)
   const {} = useFont()
   const resetCanvasZoom = useResetRecoilState(canvasZoomState)
+  const zoom = useRecoilValue(canvasZoomState)
 
   /**
    * 처음 셋팅
@@ -50,8 +51,53 @@ export function useCanvas(id) {
   }, [])
 
   useEffect(() => {
-    // canvas 사이즈가 변경되면 다시
+    // zoom 상태가 변경될 때 tempGrid 라인들의 크기를 캔버스에 맞게 조정
-  }, [canvasSize])
+    if (canvas) {
+      adjustTempGridLines()
+    }
+  }, [zoom])
+
+  const adjustTempGridLines = () => {
+    if (!canvas) return
+
+    const canvasWidth = canvas.getWidth()
+    const canvasHeight = canvas.getHeight()
+    const currentZoom = canvas.getZoom()
+    const viewportTransform = canvas.viewportTransform
+
+    // 실제 보이는 캔버스 영역 계산 (zoom과 pan 고려)
+    const visibleLeft = -viewportTransform[4] / currentZoom
+    const visibleTop = -viewportTransform[5] / currentZoom
+    const visibleRight = visibleLeft + canvasWidth / currentZoom
+    const visibleBottom = visibleTop + canvasHeight / currentZoom
+
+    // tempGrid 라인들을 찾아서 크기 조정
+    const tempGridLines = canvas.getObjects().filter((obj) => ['tempGrid', 'lineGrid'].includes(obj.name))
+
+    tempGridLines.forEach((line) => {
+      if (line.direction === 'vertical') {
+        // 세로 라인: y축을 캔버스 전체 높이로 설정
+        line.set({
+          x1: line.x1,
+          y1: visibleTop - 100, // 여유 공간 추가
+          x2: line.x1,
+          y2: visibleBottom + 100, // 여유 공간 추가
+        })
+      } else if (line.direction === 'horizontal') {
+        // 가로 라인: x축을 캔버스 전체 너비로 설정
+        line.set({
+          x1: visibleLeft - 100, // 여유 공간 추가
+          y1: line.y1,
+          x2: visibleRight + 100, // 여유 공간 추가
+          y2: line.y1,
+        })
+      }
+
+      line.setCoords()
+    })
+
+    canvas.renderAll()
+  }
 
   useEffect(() => {
     canvas