Canvas 그리드색 설정 수정

src/components/common/color-picker/ColorPickerModal.jsx

@@ -8,13 +8,13 @@ import { contextPopupPositionState } from '@/store/popupAtom'
 
 export default function ColorPickerModal(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState) // 현재 메뉴
-  const { isShow, setIsShow, pos = contextPopupPosition, color = '#ff0000', setColor, id, isConfig = false } = props
+  const { isShow, setIsShow, pos = contextPopupPosition, color, setColor, id, isConfig = false } = props //color = '#ff0000'
-  const { getMessage } = useMessage()
   const [originColor, setOriginColor] = useState(color)
+  const { getMessage } = useMessage()
   const { closePopup } = usePopup()
 
   useEffect(() => {
-    setOriginColor(color)
+    setOriginColor(originColor)
   }, [isShow])
 
   return (

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

@@ -1,54 +1,44 @@
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import QSelectBox from '@/components/common/select/QSelectBox'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { useMessage } from '@/hooks/useMessage'
-import { canvasState, dotLineGridSettingState, dotLineIntervalSelector } from '@/store/canvasAtom'
+import { canvasState } from '@/store/canvasAtom'
-import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
+import { useRecoilValue } from 'recoil'
 import { onlyNumberInputChange } from '@/util/input-utils'
-import { settingModalGridOptionsState } from '@/store/settingAtom'
-import { useAxios } from '@/hooks/useAxios'
-import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
+import { useSwal } from '@/hooks/useSwal'
 
 const TYPE = {
   DOT: 'DOT',
   LINE: 'LINE',
 }
 
-const defaultDotLineGridSetting = {
-  INTERVAL: {
-    type: 2, // 1: 가로,세로 간격 수동, 2: 비율 간격
-    ratioInterval: 910,
-    verticalInterval: 910,
-    horizontalInterval: 910,
-    dimension: 1, // 치수
-  },
-  DOT: false,
-  LINE: false,
-}
-
 export default function DotLineGrid(props) {
   // const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state
-  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
+  //const interval = useRecoilValue(dotLineIntervalSelector)
-  const [close, setClose] = useState(false)
   const { id, setIsShow, pos = { x: 840, y: -815 }, isConfig = false } = props
-  const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
-
   const canvas = useRecoilValue(canvasState)
 
-  const [dotLineGridSetting, setDotLineGridSettingState] = useRecoilState(dotLineGridSettingState)
-  const [currentSetting, setCurrentSetting] = useState(
-    JSON.stringify(dotLineGridSetting) === JSON.stringify(defaultDotLineGridSetting) ? { ...defaultDotLineGridSetting } : { ...dotLineGridSetting },
-  )
-  const resetDotLineGridSetting = useResetRecoilState(dotLineGridSettingState)
-  const interval = useRecoilValue(dotLineIntervalSelector)
-
   const { getMessage } = useMessage()
-  const { get, post } = useAxios()
-  const { swalFire } = useSwal()
   const { closePopup } = usePopup()
+  const { swalFire } = useSwal()
 
+  const {
+    selectOption,
+    setSelectOption,
+    SelectOptions,
+    currentSetting,
+    setCurrentSetting,
+    dotLineGridSettingState,
+    setSettingModalGridOptions,
+    setDotLineGridSettingState,
+  } = useCanvasSetting()
+
+  // 데이터를 최초 한 번만 조회
   useEffect(() => {
+    console.log('DotLineGrid useEffect 실행')
+
     return () => {
       setSettingModalGridOptions((prev) => {
         const newSettingOptions = [...prev]
@@ -58,20 +48,6 @@ export default function DotLineGrid(props) {
     }
   }, [])
 
-  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 },
-    { id: 3, name: '1/4', value: 1 / 4 },
-    { id: 4, name: '1/10', value: 1 / 10 },
-  ]
-  const [selectOption, setSelectOption] = useState(SelectOption[0])
-
-  // 데이터를 최초 한 번만 조회
-  useEffect(() => {
-    console.log('DotLineGrid useEffect 실행')
-    fetchGridSettings()
-  }, [objectNo])
-
   const HandleClickClose = () => {
     // setClose(true)
     // setTimeout(() => {
@@ -90,61 +66,31 @@ export default function DotLineGrid(props) {
     })
   }
 
-  // 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 * 10,
-          verticalInterval: res.gridVertical * 10,
-          ratioInterval: res.gridRatio * 10,
-        },
-        dimension: res.gridDimen,
-        DOT: res.dotGridDisplay,
-        LINE: res.lineGridDisplay,
-      }
-
-      const matchedOption = SelectOption.find((option) => option.value == res.gridDimen)
-
-      // dimension 값에 맞는 옵션을 선택
-      setSelectOption(matchedOption)
-
-      // 서버에서 받은 데이터로 상태 업데이트
-      setCurrentSetting(patternData)
-    } catch (error) {
-      console.error('Data fetching error:', error)
-    }
-  }
-
   const handleSave = async () => {
     if (!currentSetting.DOT && !currentSetting.LINE) {
       swalFire({ text: '배치할 그리드를 설정해주세요.' })
       return
     }
-    try {
-      const patternData = {
-        objectNo,
-        dotGridDisplay: currentSetting.DOT,
-        lineGridDisplay: currentSetting.LINE,
-        gridType: currentSetting.INTERVAL.type,
-        gridHorizon: currentSetting.INTERVAL.horizontalInterval / 10,
-        gridVertical: currentSetting.INTERVAL.verticalInterval / 10,
-        gridRatio: currentSetting.INTERVAL.ratioInterval / 10,
-        gridDimen: currentSetting.INTERVAL.dimension,
-      }
 
-      // HTTP POST 요청 보내기
+    setDotLineGridSettingState((prev) => {
-      await post({ url: `/api/canvas-management/canvas-grid-settings`, data: patternData }).then((res) => {
+      return {
-        swalFire({ text: getMessage(res.returnMessage) })
+        ...prev,
-        setDotLineGridSettingState({ ...currentSetting })
+        INTERVAL: {
-        closePopup(id, isConfig)
+          type: currentSetting.INTERVAL.type,
-      })
+          horizontalInterval: currentSetting.INTERVAL.horizontalInterval,
-    } catch (error) {
+          verticalInterval: currentSetting.INTERVAL.verticalInterval,
-      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+          ratioInterval: currentSetting.INTERVAL.ratioInterval,
-    }
+          dimension: currentSetting.INTERVAL.dimension,
+        },
+        DOT: currentSetting.DOT,
+        LINE: currentSetting.LINE,
+        flag: true,
+      }
+      //setDotLineGridSettingState({ ...currentSetting })
+    })
+
+    setIsShow(false)
+    closePopup(id, isConfig)
   }
 
   const handleRadioChange = (e) => {
@@ -198,8 +144,19 @@ export default function DotLineGrid(props) {
       .filter((obj) => obj.name === 'dotGrid')
       .forEach((obj) => canvas?.remove(obj))
 
-    resetDotLineGridSetting()
+    // resetDotLineGridSetting()
-    setSelectOption(SelectOption[0])
+    setCurrentSetting({
+      INTERVAL: {
+        type: 2, // 1: 가로,세로 간격 수동, 2: 비율 간격
+        ratioInterval: 910,
+        verticalInterval: 910,
+        horizontalInterval: 910,
+        dimension: 1, // 치수
+      },
+      DOT: false,
+      LINE: false,
+    })
+    setSelectOption(SelectOptions[0])
   }
 
   return (
@@ -296,7 +253,7 @@ export default function DotLineGrid(props) {
                 <span>mm</span>
               </div>
               <div className="grid-select">
-                <QSelectBox options={SelectOption} onChange={changeDimension} value={selectOption} />
+                <QSelectBox options={SelectOptions} onChange={changeDimension} value={selectOption} />
               </div>
             </div>
           </div>

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

@@ -4,12 +4,11 @@ import { settingModalGridOptionsState } from '@/store/settingAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { adsorptionPointAddModeState } from '@/store/canvasAtom'
 import { useTempGrid } from '@/hooks/useTempGrid'
-import { gridColorState } from '@/store/gridAtom'
-import { useColor } from 'react-color-palette'
 import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal'
 import { usePopup } from '@/hooks/usePopup'
 import { v4 as uuidv4 } from 'uuid'
 import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid'
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 
 export default function GridOption() {
   const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
@@ -17,15 +16,16 @@ export default function GridOption() {
   const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
   const { getMessage } = useMessage()
   const { tempGridMode, setTempGridMode } = useTempGrid()
-  const [gridColor, setGridColor] = useRecoilState(gridColorState)
-  const [color, setColor] = useColor(gridColor)
   const [showColorPickerModal, setShowColorPickerModal] = useState(false)
   const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
   const { addPopup, closePopup, closePopups } = usePopup()
   const [colorId, setColorId] = useState(uuidv4())
   const [dotLineId, setDotLineId] = useState(uuidv4())
 
+  const { gridColor, setGridColor, color } = useCanvasSetting()
+
   useEffect(() => {
+    console.log(gridColor, color)
     setGridColor(color.hex)
   }, [color])
 

src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx

@@ -75,8 +75,6 @@ export default function PlanSizeSetting(props) {
                   className="input-origin block"
                   name={`originHorizon`}
                   value={planSizeSettingMode.originHorizon}
-                  //onChange={(e) => setPlanSizeSettingMode({ ...planSizeSettingMode, originHorizon: Number(e.target.value), flag: false })}
-                  //onFocus={(e) => (originHorizon.current.value = '')}
                   onChange={(e) => onlyNumberInputChange(e, changeInput)}
                 />
               </div>
@@ -90,8 +88,6 @@ export default function PlanSizeSetting(props) {
                   className="input-origin block"
                   name={`originVertical`}
                   value={planSizeSettingMode.originVertical}
-                  //onChange={(e) => setPlanSizeSettingMode({ ...planSizeSettingMode, originVertical: Number(e.target.value), flag: false })}
-                  //onFocus={(e) => (originVertical.current.value = '')}
                   onChange={(e) => onlyNumberInputChange(e, changeInput)}
                 />
               </div>

src/hooks/option/useCanvasSetting.js

@@ -1,16 +1,34 @@
 import { useCallback, useEffect, useState } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
-import { adsorptionPointModeState, adsorptionRangeState, canvasState, planSizeSettingState } from '@/store/canvasAtom'
+import { adsorptionPointModeState, adsorptionRangeState, canvasState, planSizeSettingState, dotLineGridSettingState } from '@/store/canvasAtom'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { useAxios } from '@/hooks/useAxios'
 import { useSwal } from '@/hooks/useSwal'
-import { correntObjectNoState, corridorDimensionSelector, settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
+import {
+  correntObjectNoState,
+  corridorDimensionSelector,
+  settingModalFirstOptionsState,
+  settingModalSecondOptionsState,
+  settingModalGridOptionsState,
+} from '@/store/settingAtom'
 import { POLYGON_TYPE } from '@/common/common'
 import { globalFontAtom } from '@/store/fontAtom'
 import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
+import { gridColorState } from '@/store/gridAtom'
+import { useColor } from 'react-color-palette'
 
-let objectNo
+const defaultDotLineGridSetting = {
+  INTERVAL: {
+    type: 2, // 1: 가로,세로 간격 수동, 2: 비율 간격
+    ratioInterval: 910,
+    verticalInterval: 910,
+    horizontalInterval: 910,
+    dimension: 1, // 치수
+  },
+  DOT: false,
+  LINE: false,
+}
 
 export function useCanvasSetting() {
   const canvas = useRecoilValue(canvasState)
@@ -21,7 +39,7 @@ export function useCanvasSetting() {
   const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
   const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
   const { option1, option2, dimensionDisplay } = settingModalFirstOptions
-  const { option3, option4 } = settingModalSecondOptions
+  const { option4 } = settingModalSecondOptions
 
   const corridorDimension = useRecoilValue(corridorDimensionSelector)
 
@@ -42,6 +60,24 @@ export function useCanvasSetting() {
   const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
   const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState)
 
+  const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
+  const [dotLineGridSetting, setDotLineGridSettingState] = useRecoilState(dotLineGridSettingState)
+  const resetDotLineGridSetting = useResetRecoilState(dotLineGridSettingState)
+  const [currentSetting, setCurrentSetting] = useState(
+    JSON.stringify(dotLineGridSetting) === JSON.stringify(defaultDotLineGridSetting) ? { ...defaultDotLineGridSetting } : { ...dotLineGridSetting },
+  )
+  const [gridColor, setGridColor] = useRecoilState(gridColorState)
+  const [color, setColor] = useColor(gridColor ?? '#FF0000')
+  const [colorTemp, setColorTemp] = useState()
+
+  const SelectOptions = [
+    { id: 1, name: getMessage('modal.canvas.setting.grid.dot.line.setting.line.origin'), value: 1 },
+    { id: 2, name: '1/2', value: 1 / 2 },
+    { id: 3, name: '1/4', value: 1 / 4 },
+    { id: 4, name: '1/10', value: 1 / 10 },
+  ]
+  const [selectOption, setSelectOption] = useState(SelectOptions[0])
+
   useEffect(() => {
     if (!canvas) {
       return
@@ -73,51 +109,58 @@ export function useCanvasSetting() {
   }, [corridorDimension])
 
   useEffect(() => {
-    console.log('useCanvasSetting useEffect 실행1', correntObjectNo)
+    console.log('useCanvasSetting 실행1', correntObjectNo)
   }, [])
 
   //흡착점 ON/OFF 변경 시
   useEffect(() => {
-    console.log('useCanvasSetting useEffect 실행2', adsorptionPointMode.fontFlag, correntObjectNo)
+    //console.log('useCanvasSetting 실행2', adsorptionPointMode.fontFlag, correntObjectNo)
-
     if (adsorptionPointMode.fontFlag) {
       onClickOption2()
-      frontSettings()
-      fetchSettings()
     }
   }, [adsorptionPointMode])
 
   // 1 과 2 변경 시
   useEffect(() => {
-    console.log('useCanvasSetting useEffect 실행3', settingModalFirstOptions.fontFlag, settingModalSecondOptions.fontFlag, correntObjectNo)
+    //console.log('useCanvasSetting 실행3', settingModalFirstOptions.fontFlag, settingModalSecondOptions.fontFlag, correntObjectNo)
     if (settingModalFirstOptions.fontFlag || settingModalSecondOptions.fontFlag) {
       onClickOption2()
-      frontSettings()
-      fetchSettings()
     }
   }, [settingModalFirstOptions, settingModalSecondOptions])
 
   // 글꼴 변경 시
   useEffect(() => {
-    console.log('useCanvasSetting useEffect 실행4', globalFont.fontFlag, correntObjectNo)
+    //console.log('useCanvasSetting 실행4', globalFont.fontFlag, correntObjectNo)
     if (globalFont.fontFlag) {
       onClickOption2()
-      frontSettings()
-      fetchSettings()
     }
   }, [globalFont])
 
   // 도명크기 변경 시
   useEffect(() => {
-    console.log('useCanvasSetting useEffect 실행5', planSizeSettingMode.flag, correntObjectNo)
+    //console.log('useCanvasSetting 실행5', planSizeSettingMode.flag, correntObjectNo)
-
     if (planSizeSettingMode.flag) {
       onClickOption2()
-      frontSettings()
-      fetchSettings()
     }
   }, [planSizeSettingMode])
 
+  // 점/선 그리드 변경 시
+  useEffect(() => {
+    //console.log('useCanvasSetting 실행6', dotLineGridSetting.flag)
+    if (dotLineGridSetting.flag) {
+      onClickOption2()
+    }
+  }, [dotLineGridSetting])
+
+  // 그리드 색 설정 변경 시
+  useEffect(() => {
+    console.log('useCanvasSetting 실행7', colorTemp, gridColor)
+    //colorTemp는 변경 전.. 값이 있고 변경된 컬러와 다를 때 실행
+    if (colorTemp !== undefined && colorTemp !== gridColor) {
+      onClickOption2()
+    }
+  }, [color])
+
   const getFonts = (itemValue) => {
     if (!itemValue) return { id: 1, name: 'MS PGothic', value: 'MS PGothic' }
     const data = [
@@ -269,10 +312,35 @@ export function useCanvasSetting() {
           //글꼴 설정 Flag
           fontFlag: false,
         }
-        console.log('fontPatternData', fontPatternData)
 
         //조회된 글꼴 데이터 set
         setGlobalFont(fontPatternData)
+
+        //점/선 그리드
+        const patternData = {
+          INTERVAL: {
+            type: res.gridType,
+            horizontalInterval: res.gridHorizon * 10,
+            verticalInterval: res.gridVertical * 10,
+            ratioInterval: res.gridRatio * 10,
+            dimension: res.gridDimen,
+          },
+          DOT: res.dotGridDisplay,
+          LINE: res.lineGridDisplay,
+          flag: false,
+        }
+
+        const matchedOption = SelectOptions.find((option) => option.value == res.gridDimen)
+
+        // dimension 값에 맞는 옵션을 선택
+        setSelectOption(matchedOption)
+
+        setDotLineGridSettingState(patternData)
+        //setCurrentSetting(patternData)
+
+        //그리드 색 설정
+        setGridColor(res.gridColor)
+        setColorTemp(res.gridColor)
       } else {
         //조회된 글꼴 데이터가 없는 경우
 
@@ -299,6 +367,14 @@ export function useCanvasSetting() {
         })
 
         setGlobalFont({ ...globalFont, fontFlag: false })
+
+        //점/선 그리드
+        setDotLineGridSettingState({ ...defaultDotLineGridSetting, flag: false })
+        //setCurrentSetting({ ...defaultDotLineGridSetting })
+
+        //그리드 색 설정
+        setGridColor('#FF0000')
+        setColorTemp('#FF0000')
       }
       frontSettings()
     } catch (error) {
@@ -394,13 +470,26 @@ export function useCanvasSetting() {
       originPixel: dimensionLineSettings.pixel,
       originColor: dimensionLineSettings.color,
 
-      //치수선 설정
+      //도면크기 설정
       originHorizon: planSizeSettingMode.originHorizon,
       originVertical: planSizeSettingMode.originVertical,
+
+      dotGridDisplay: dotLineGridSetting.DOT,
+      lineGridDisplay: dotLineGridSetting.LINE,
+      gridType: dotLineGridSetting.INTERVAL.type,
+      gridHorizon: dotLineGridSetting.INTERVAL.horizontalInterval / 10,
+      gridVertical: dotLineGridSetting.INTERVAL.verticalInterval / 10,
+      gridRatio: dotLineGridSetting.INTERVAL.ratioInterval / 10,
+      gridDimen: dotLineGridSetting.INTERVAL.dimension,
+
+      //gridColor: gridColor.gridColor,
+      gridColor: gridColor,
     }
 
     console.log('patternData ', patternData)
 
+    setColorTemp(gridColor)
+
     // HTTP POST 요청 보내기
     await post({ url: `/api/canvas-management/canvas-settings`, data: patternData })
       .then((res) => {
@@ -408,13 +497,15 @@ export function useCanvasSetting() {
 
         // Canvas 디스플레이 설정 시 해당 옵션 적용
         frontSettings()
+        // 저장 후 재조회
+        fetchSettings()
       })
       .catch((error) => {
         swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
       })
 
     //setAdsorptionRange(item.range)
-  }, [settingModalFirstOptions, settingModalSecondOptions, adsorptionPointMode, globalFont, planSizeSettingMode])
+  }, [settingModalFirstOptions, settingModalSecondOptions, adsorptionPointMode, globalFont, planSizeSettingMode, dotLineGridSetting, color])
 
   // Canvas 디스플레이 설정 시 해당 옵션 적용
   const frontSettings = async () => {
@@ -491,6 +582,7 @@ export function useCanvasSetting() {
 
   return {
     canvas,
+    correntObjectNo,
     settingModalFirstOptions,
     setSettingModalFirstOptions,
     settingModalSecondOptions,
@@ -516,5 +608,18 @@ export function useCanvasSetting() {
     setDimensionLineSettings,
     planSizeSettingMode,
     setPlanSizeSettingMode,
+    selectOption,
+    setSelectOption,
+    SelectOptions,
+    currentSetting,
+    setCurrentSetting,
+    dotLineGridSettingState,
+    setSettingModalGridOptions,
+    setDotLineGridSettingState,
+    resetDotLineGridSetting,
+    gridColor,
+    setGridColor,
+    color,
+    setColor,
   }
 }