Canvas 그리드 설정 조회/등록 추가

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

@@ -1,12 +1,15 @@
 import WithDraggable from '@/components/common/draggable/withDraggable'
 import QSelectBox from '@/components/common/select/QSelectBox'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { canvasState, dotLineGridSettingState, dotLineIntervalSelector } from '@/store/canvasAtom'
 import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
 import { onlyNumberInputChange } from '@/util/input-utils'
 import { fabric } from 'fabric'
+import { useAxios } from '@/hooks/useAxios'
+import { useSwal } from '@/hooks/useSwal'
 import { gridColorState } from '@/store/gridAtom'
+import { settingModalGridOptionsState } from '@/store/settingAtom'
 
 const TYPE = {
   DOT: 'DOT',
@@ -15,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 gridColor = useRecoilValue(gridColorState)
@@ -25,6 +29,11 @@ export default function DotLineGrid(props) {
   const interval = useRecoilValue(dotLineIntervalSelector)
 
   const { getMessage } = useMessage()
+  const { get, post } = useAxios()
+  const { swalFire } = useSwal()
+
+  const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
+
   const SelectOption = [
     { id: 1, name: getMessage('modal.canvas.setting.grid.dot.line.setting.line.origin'), value: 1 },
     { id: 2, name: '1/2', value: 1 / 2 },
@@ -34,13 +43,23 @@ export default function DotLineGrid(props) {
   const [selectOption, setSelectOption] = useState(SelectOption[0])
 
   const HandleClickClose = () => {
-    // setClose(true)
+    setShowDotLineGridModal(false) // 모달 닫기 처리
-    // setTimeout(() => {
+
-    //   setModalOption({ ...modalOption, gridoption: false })
+    const newGridOptions = [...gridOptions] // 모달 닫으면서 점선그리드 버튼 비활성화
-    //   setClose(false)
+    newGridOptions.map((item) => {
-    // }, 180)
+      if (item.id === 2) {
+        item.selected = false
+      }
+    })
+    setGridOptions(newGridOptions)
   }
 
+  // 데이터를 최초 한 번만 조회
+  useEffect(() => {
+    console.log('DotLineGrid useEffect 실행')
+    fetchGridSettings()
+  }, [objectNo])
+
   const handleCheckBoxChange = (e) => {
     const { value, checked } = e.target
     setDotLineGridSettingState((prev) => {
@@ -51,118 +70,174 @@ 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) {
+  // 저장 버튼 클릭 시
-      for (let i = 0; i < canvas.height / verticalInterval + 1; i++) {
+  const handleSave = async () => {
-        const horizontalLine = new fabric.Line(
+    try {
-          [0, i * verticalInterval - verticalInterval / 2, canvas.width, i * verticalInterval - verticalInterval / 2],
+      const patternData = {
-          {
+        objectNo,
-            stroke: gridColor,
+        dotGridDisplay: dotLineGridSetting.DOT,
-            strokeWidth: 1,
+        lineGridDisplay: dotLineGridSetting.LINE,
-            selectable: true,
+        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()
+          .filter((obj) => obj.name === 'lineGrid')
+          .forEach((obj) => canvas?.remove(obj))
+        canvas
+          ?.getObjects()
+          .filter((obj) => obj.name === 'dotGrid')
+          .forEach((obj) => canvas?.remove(obj))
+
+        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: 'black',
+
-            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: 'black',
+                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) => {
@@ -224,7 +299,7 @@ export default function DotLineGrid(props) {
       <div className={`modal-pop-wrap ssm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.canvas.setting.grid.dot.line.setting')}</h1>
-          <button className="modal-close" onClick={() => setShowDotLineGridModal(false)}>
+          <button className="modal-close" onClick={HandleClickClose}>
             닫기
           </button>
         </div>

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

@@ -116,11 +116,21 @@ export default function FirstOption() {
     }
   }
 
-  const onClickDimension = async (item) => {
+  const onClickOnlyOne = async (item) => {
-    const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
+    //화면 표시
-      option.selected = option.id === item.id
+    if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
-      return option
+      const options2 = settingModalFirstOptions?.option2.map((option2) => {
-    })
+        option2.selected = option2.id === item.id
+        return option2
+      })
+
+      //치수 표시
+    } else {
+      const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
+        option.selected = option.id === item.id
+        return option
+      })
+    }
 
     setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
 
@@ -205,7 +215,7 @@ export default function FirstOption() {
         <div className="flex-check-box for-line">
           {settingModalFirstOptions &&
             settingModalFirstOptions.dimensionDisplay.map((item) => (
-              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickDimension(item)}>
+              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOnlyOne(item)}>
                 <span className="check-area"></span>
                 <span className="title-area">{getMessage(item.name)}</span>
               </button>
@@ -217,7 +227,7 @@ export default function FirstOption() {
         <div className="flex-check-box for-line">
           {settingModalFirstOptions &&
             settingModalFirstOptions.option2.map((item) => (
-              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
+              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOnlyOne(item)}>
                 <span className="check-area"></span>
                 <span className="title-area">{getMessage(item.name)}</span>
               </button>

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useRecoilState } from 'recoil'
 import { settingModalGridOptionsState } from '@/store/settingAtom'
 import { useMessage } from '@/hooks/useMessage'
@@ -16,9 +16,11 @@ export default function GridOption(props) {
   const { tempGridMode, setTempGridMode } = useTempGrid()
 
   const [color, setColor] = useColor(gridColor)
+  const [colorPickerShow, setColorPickerShow] = useState(false)
 
   useEffect(() => {
-    console.log(color)
+    console.log('GridOption useEffect 실행')
+    //console.log(color)
     setGridColor(color.hex)
   }, [color])