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,7 +75,52 @@ export default function DotLineGrid(props) {
     })
   }
 
-  const handleSave = () => {
+  // Canvas Grid Setting 조회 및 초기화
+  const fetchGridSettings = async () => {
+    try {
+      const res = await get({ url: `/api/canvas-management/canvas-grid-settings/by-object/${objectNo}` })
+
+      const patternData = {
+        INTERVAL: {
+          type: res.gridType,
+          horizontalInterval: res.gridHorizon,
+          verticalInterval: res.gridVertical,
+          ratioInterval: res.gridRatio,
+        },
+        dimension: res.gridDimen,
+        DOT: res.dotGridDisplay,
+        LINE: res.lineGridDisplay,
+      }
+
+      const matchedOption = SelectOption.find((option) => option.value == res.gridDimen)
+
+      // dimension 값에 맞는 옵션을 선택
+      setSelectOption(matchedOption)
+
+      // 서버에서 받은 데이터로 상태 업데이트
+      setDotLineGridSettingState(patternData)
+    } catch (error) {
+      console.error('Data fetching error:', error)
+    }
+  }
+
+  const handleSave = async () => {
+    try {
+      const patternData = {
+        objectNo,
+        dotGridDisplay: dotLineGridSetting.DOT,
+        lineGridDisplay: dotLineGridSetting.LINE,
+        gridType: dotLineGridSetting.INTERVAL.type,
+        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()
@@ -75,10 +131,10 @@ export default function DotLineGrid(props) {
           .filter((obj) => obj.name === 'dotGrid')
           .forEach((obj) => canvas?.remove(obj))
 
-    const horizontalInterval = interval.horizontalInterval
+        //const horizontalInterval = interval.horizontalInterval
-    const verticalInterval = interval.verticalInterval
+        //const verticalInterval = interval.verticalInterval
 
-    if (dotLineGridSetting.DOT) {
+        if (patternData.dotGridDisplay) {
           const circle = new fabric.Circle({
             radius: 2,
             fill: 'red',
@@ -94,8 +150,8 @@ export default function DotLineGrid(props) {
           })
 
           const patternSourceCanvas = new fabric.StaticCanvas(null, {
-        width: horizontalInterval,
+            width: patternData.gridHorizon,
-        height: verticalInterval,
+            height: patternData.gridVertical,
           })
 
           patternSourceCanvas.add(circle)
@@ -131,10 +187,15 @@ export default function DotLineGrid(props) {
           canvas.renderAll()
         }
 
-    if (dotLineGridSetting.LINE) {
+        if (patternData.lineGridDisplay) {
-      for (let i = 0; i < canvas.height / verticalInterval + 1; i++) {
+          for (let i = 0; i < canvas.height / patternData.gridVertical + 1; i++) {
             const horizontalLine = new fabric.Line(
-          [0, i * verticalInterval - verticalInterval / 2, canvas.width, i * verticalInterval - verticalInterval / 2],
+              [
+                0,
+                i * patternData.gridVertical - patternData.gridVertical / 2,
+                canvas.width,
+                i * patternData.gridVertical - patternData.gridVertical / 2,
+              ],
               {
                 stroke: gridColor,
                 strokeWidth: 1,
@@ -153,9 +214,14 @@ export default function DotLineGrid(props) {
             canvas.add(horizontalLine)
           }
 
-      for (let i = 0; i < canvas.width / horizontalInterval + 1; i++) {
+          for (let i = 0; i < canvas.width / patternData.gridHorizon + 1; i++) {
             const verticalLine = new fabric.Line(
-          [i * horizontalInterval - horizontalInterval / 2, 0, i * horizontalInterval - horizontalInterval / 2, canvas.height],
+              [
+                i * patternData.gridHorizon - patternData.gridHorizon / 2,
+                0,
+                i * patternData.gridHorizon - patternData.gridHorizon / 2,
+                canvas.height,
+              ],
               {
                 stroke: gridColor,
                 strokeWidth: 1,
@@ -176,6 +242,10 @@ export default function DotLineGrid(props) {
         }
 
         canvas.renderAll()
+      })
+    } catch (error) {
+      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+    }
   }
 
   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])