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,12 +43,22 @@ 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
@@ -51,7 +70,53 @@ 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()
@@ -62,10 +127,7 @@ export default function DotLineGrid(props) {
           .filter((obj) => obj.name === 'dotGrid')
           .forEach((obj) => canvas?.remove(obj))
 
-    const horizontalInterval = interval.horizontalInterval
+        if (patternData.dotGridDisplay) {
-    const verticalInterval = interval.verticalInterval
-
-    if (dotLineGridSetting.DOT) {
           const circle = new fabric.Circle({
             radius: 2,
             fill: 'red',
@@ -81,8 +143,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)
@@ -118,10 +180,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,
@@ -140,9 +207,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: 'black',
                 strokeWidth: 1,
@@ -161,8 +233,11 @@ export default function DotLineGrid(props) {
             canvas.add(verticalLine)
           }
         }
-
         canvas.renderAll()
+      })
+    } catch (error) {
+      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+    }
   }
 
   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) => {
+    //화면 표시
+    if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
+      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])