Canvas 그리그 설정 수정

src/components/floor-plan/modal/grid/DotLineGrid.jsx

@@ -8,6 +8,8 @@ import { onlyNumberInputChange } from '@/util/input-utils'
 import { fabric } from 'fabric'
 import { gridColorState } from '@/store/gridAtom'
 import { settingModalGridOptionsState } from '@/store/settingAtom'
+import { useAxios } from '@/hooks/useAxios'
+import { useSwal } from '@/hooks/useSwal'
 
 const TYPE = {
   DOT: 'DOT',
@@ -16,6 +18,7 @@ const TYPE = {
 
 export default function DotLineGrid(props) {
   // const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state
+  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
   const [close, setClose] = useState(false)
   const { setShowDotLineGridModal } = props
   const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
@@ -27,6 +30,8 @@ export default function DotLineGrid(props) {
   const interval = useRecoilValue(dotLineIntervalSelector)
 
   const { getMessage } = useMessage()
+  const { get, post } = useAxios()
+  const { swalFire } = useSwal()
 
   useEffect(() => {
     return () => {
@@ -46,6 +51,12 @@ export default function DotLineGrid(props) {
   ]
   const [selectOption, setSelectOption] = useState(SelectOption[0])
 
+  // 데이터를 최초 한 번만 조회
+  useEffect(() => {
+    console.log('DotLineGrid useEffect 실행')
+    fetchGridSettings()
+  }, [objectNo])
+
   const HandleClickClose = () => {
     // setClose(true)
     // setTimeout(() => {
@@ -64,118 +75,177 @@ export default function DotLineGrid(props) {
     })
   }
 
-  const handleSave = () => {
+  // Canvas Grid Setting 조회 및 초기화
-    // 1. 점.선 그리드 설정으로 만들어진 기존 오브젝트 제거
+  const fetchGridSettings = async () => {
-    canvas
+    try {
-      ?.getObjects()
+      const res = await get({ url: `/api/canvas-management/canvas-grid-settings/by-object/${objectNo}` })
-      .filter((obj) => obj.name === 'lineGrid')
-      .forEach((obj) => canvas?.remove(obj))
-    canvas
-      ?.getObjects()
-      .filter((obj) => obj.name === 'dotGrid')
-      .forEach((obj) => canvas?.remove(obj))
 
-    const horizontalInterval = interval.horizontalInterval
+      const patternData = {
-    const verticalInterval = interval.verticalInterval
+        INTERVAL: {
-
+          type: res.gridType,
-    if (dotLineGridSetting.DOT) {
+          horizontalInterval: res.gridHorizon,
-      const circle = new fabric.Circle({
+          verticalInterval: res.gridVertical,
-        radius: 2,
+          ratioInterval: res.gridRatio,
-        fill: 'red',
-        strokeWidth: 0.7,
-        originX: 'center',
-        originY: 'center',
-        selectable: false,
-        lockMovementX: true,
-        lockMovementY: true,
-        lockRotation: true,
-        lockScalingX: true,
-        lockScalingY: true,
-      })
-
-      const patternSourceCanvas = new fabric.StaticCanvas(null, {
-        width: horizontalInterval,
-        height: verticalInterval,
-      })
-
-      patternSourceCanvas.add(circle)
-
-      circle.set({
-        left: patternSourceCanvas.width / 2,
-        top: patternSourceCanvas.height / 2,
-      })
-
-      patternSourceCanvas.renderAll()
-
-      const pattern = new fabric.Pattern({
-        source: patternSourceCanvas.getElement(),
-        repeat: 'repeat',
-      })
-
-      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 },
-        ],
-        {
-          fill: pattern,
-          selectable: false,
-          name: 'dotGrid',
         },
-      )
+        dimension: res.gridDimen,
+        DOT: res.dotGridDisplay,
+        LINE: res.lineGridDisplay,
+      }
 
-      canvas.add(backgroundPolygon)
+      const matchedOption = SelectOption.find((option) => option.value == res.gridDimen)
-      backgroundPolygon.sendToBack()
+
-      canvas.renderAll()
+      // dimension 값에 맞는 옵션을 선택
+      setSelectOption(matchedOption)
+
+      // 서버에서 받은 데이터로 상태 업데이트
+      setDotLineGridSettingState(patternData)
+    } catch (error) {
+      console.error('Data fetching error:', error)
     }
+  }
 
-    if (dotLineGridSetting.LINE) {
+  const handleSave = async () => {
-      for (let i = 0; i < canvas.height / verticalInterval + 1; i++) {
+    try {
-        const horizontalLine = new fabric.Line(
+      const patternData = {
-          [0, i * verticalInterval - verticalInterval / 2, canvas.width, i * verticalInterval - verticalInterval / 2],
+        objectNo,
-          {
+        dotGridDisplay: dotLineGridSetting.DOT,
-            stroke: gridColor,
+        lineGridDisplay: dotLineGridSetting.LINE,
-            strokeWidth: 1,
+        gridType: dotLineGridSetting.INTERVAL.type,
-            selectable: true,
+        gridHorizon: dotLineGridSetting.INTERVAL.horizontalInterval,
+        gridVertical: dotLineGridSetting.INTERVAL.verticalInterval,
+        gridRatio: dotLineGridSetting.INTERVAL.ratioInterval,
+        gridDimen: dotLineGridSetting.INTERVAL.dimension,
+      }
+
+      // HTTP POST 요청 보내기
+      await post({ url: `/api/canvas-management/canvas-grid-settings`, data: patternData }).then((res) => {
+        swalFire({ text: getMessage(res.returnMessage) })
+
+        // 1. 점.선 그리드 설정으로 만들어진 기존 오브젝트 제거
+        canvas
+          ?.getObjects()
+          .filter((obj) => obj.name === 'lineGrid')
+          .forEach((obj) => canvas?.remove(obj))
+        canvas
+          ?.getObjects()
+          .filter((obj) => obj.name === 'dotGrid')
+          .forEach((obj) => canvas?.remove(obj))
+
+        //const horizontalInterval = interval.horizontalInterval
+        //const verticalInterval = interval.verticalInterval
+
+        if (patternData.dotGridDisplay) {
+          const circle = new fabric.Circle({
+            radius: 2,
+            fill: 'red',
+            strokeWidth: 0.7,
+            originX: 'center',
+            originY: 'center',
+            selectable: false,
             lockMovementX: true,
             lockMovementY: true,
             lockRotation: true,
             lockScalingX: true,
             lockScalingY: true,
-            name: 'lineGrid',
+          })
-            strokeDashArray: [5, 2],
-            opacity: 0.3,
-            direction: 'horizontal',
-          },
-        )
-        canvas.add(horizontalLine)
-      }
 
-      for (let i = 0; i < canvas.width / horizontalInterval + 1; i++) {
+          const patternSourceCanvas = new fabric.StaticCanvas(null, {
-        const verticalLine = new fabric.Line(
+            width: patternData.gridHorizon,
-          [i * horizontalInterval - horizontalInterval / 2, 0, i * horizontalInterval - horizontalInterval / 2, canvas.height],
+            height: patternData.gridVertical,
-          {
+          })
-            stroke: gridColor,
+
-            strokeWidth: 1,
+          patternSourceCanvas.add(circle)
-            selectable: true,
+
-            lockMovementX: true,
+          circle.set({
-            lockMovementY: true,
+            left: patternSourceCanvas.width / 2,
-            lockRotation: true,
+            top: patternSourceCanvas.height / 2,
-            lockScalingX: true,
+          })
-            lockScalingY: true,
+
-            name: 'lineGrid',
+          patternSourceCanvas.renderAll()
-            strokeDashArray: [5, 2],
+
-            opacity: 0.3,
+          const pattern = new fabric.Pattern({
-            direction: 'vertical',
+            source: patternSourceCanvas.getElement(),
-          },
+            repeat: 'repeat',
-        )
+          })
-        canvas.add(verticalLine)
+
-      }
+          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 },
+            ],
+            {
+              fill: pattern,
+              selectable: false,
+              name: 'dotGrid',
+            },
+          )
+
+          canvas.add(backgroundPolygon)
+          backgroundPolygon.sendToBack()
+          canvas.renderAll()
+        }
+
+        if (patternData.lineGridDisplay) {
+          for (let i = 0; i < canvas.height / patternData.gridVertical + 1; i++) {
+            const horizontalLine = new fabric.Line(
+              [
+                0,
+                i * patternData.gridVertical - patternData.gridVertical / 2,
+                canvas.width,
+                i * patternData.gridVertical - patternData.gridVertical / 2,
+              ],
+              {
+                stroke: gridColor,
+                strokeWidth: 1,
+                selectable: true,
+                lockMovementX: true,
+                lockMovementY: true,
+                lockRotation: true,
+                lockScalingX: true,
+                lockScalingY: true,
+                name: 'lineGrid',
+                strokeDashArray: [5, 2],
+                opacity: 0.3,
+                direction: 'horizontal',
+              },
+            )
+            canvas.add(horizontalLine)
+          }
+
+          for (let i = 0; i < canvas.width / patternData.gridHorizon + 1; i++) {
+            const verticalLine = new fabric.Line(
+              [
+                i * patternData.gridHorizon - patternData.gridHorizon / 2,
+                0,
+                i * patternData.gridHorizon - patternData.gridHorizon / 2,
+                canvas.height,
+              ],
+              {
+                stroke: gridColor,
+                strokeWidth: 1,
+                selectable: true,
+                lockMovementX: true,
+                lockMovementY: true,
+                lockRotation: true,
+                lockScalingX: true,
+                lockScalingY: true,
+                name: 'lineGrid',
+                strokeDashArray: [5, 2],
+                opacity: 0.3,
+                direction: 'vertical',
+              },
+            )
+            canvas.add(verticalLine)
+          }
+        }
+
+        canvas.renderAll()
+      })
+    } catch (error) {
+      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
     }
-
-    canvas.renderAll()
   }
 
   const handleRadioChange = (e) => {

src/components/floor-plan/modal/setting01/GridOption.jsx

@@ -18,6 +18,7 @@ export default function GridOption(props) {
   const [color, setColor] = useColor(gridColor)
 
   useEffect(() => {
+    console.log('GridOption useEffect 실행')
     setGridColor(color.hex)
   }, [color])