refactor: 글로벌세팅 팝업 저장 로직 수정

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

@@ -7,7 +7,7 @@ import { useEvent } from '@/hooks/useEvent'
 
 export default function FirstOption() {
   const { getMessage } = useMessage()
-  const { canvas, settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
+  const { canvas, settingModalFirstOptions, setSettingModalFirstOptions, settingsData, setSettingsData } = useCanvasSetting()
   const { option1, option2, dimensionDisplay } = settingModalFirstOptions
   const { initEvent } = useEvent()
 
@@ -24,13 +24,17 @@ export default function FirstOption() {
         return option
       })
 
+      setSettingModalFirstOptions({ ...settingModalFirstOptions, dimensionDisplay: [...options] })
+
       //화면 표시(단 건 선택)
     } else if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
-      const options2 = settingModalFirstOptions?.option2.map((option2) => {
+      const options = settingModalFirstOptions?.option2.map((option2) => {
         option2.selected = option2.id === item.id
         return option2
       })
 
+      setSettingModalFirstOptions({ ...settingModalFirstOptions, option2: [...options] })
+
       const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
 
       polygons.forEach((polygon) => {
@@ -38,10 +42,17 @@ export default function FirstOption() {
       })
       //디스플레이 설정 표시(단 건 선택)
     } else {
-      item.selected = !item.selected
+      const options = settingModalFirstOptions?.option1.map((opt) => {
+        if (opt.id === item.id) {
+          opt.selected = !opt.selected
+        }
+        return opt
+      })
+
+      setSettingModalFirstOptions({ ...settingModalFirstOptions, option1: [...options] })
     }
 
-    setSettingModalFirstOptions({ ...settingModalFirstOptions, option1, option2, dimensionDisplay, fontFlag: true })
+    setSettingsData({ ...settingsData, ...settingModalFirstOptions })
   }
 
   // useEffect(() => {

src/hooks/option/useCanvasSetting.js

@@ -46,6 +46,7 @@ export function useCanvasSetting() {
 
   const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
   const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
+  const [settingsData, setSettingsData] = useState({ ...settingModalFirstOptions, ...settingModalSecondOptions })
   const { option1, option2, dimensionDisplay } = settingModalFirstOptions
   const { option4 } = settingModalSecondOptions
 
@@ -120,7 +121,7 @@ export function useCanvasSetting() {
   }, [corridorDimension])
 
   useEffect(() => {
-    console.log('useCanvasSetting 실행1', correntObjectNo)
+    console.log('🚀 ~ useCanvasSetting ~ settingsData:', settingsData)
   }, [])
 
   // 배치면 초기설정 변경 시
@@ -131,54 +132,58 @@ export function useCanvasSetting() {
     }
   }, [canvasSetting])
 
-  //흡착점 ON/OFF 변경 시
   useEffect(() => {
-    //console.log('useCanvasSetting 실행2', adsorptionPointMode.fontFlag, correntObjectNo)
+    console.log('useCanvasSetting ------------->', settingsData)
-    if (adsorptionPointMode.fontFlag) {
+  }, [settingsData])
-      onClickOption2()
+
-    }
+  //흡착점 ON/OFF 변경 시
-  }, [adsorptionPointMode])
+  // useEffect(() => {
+  //   //console.log('useCanvasSetting 실행2', adsorptionPointMode.fontFlag, correntObjectNo)
+  //   if (adsorptionPointMode.fontFlag) {
+  //     onClickOption2()
+  //   }
+  // }, [adsorptionPointMode])
 
   // 1 과 2 변경 시
-  useEffect(() => {
+  // useEffect(() => {
-    //console.log('useCanvasSetting 실행3', settingModalFirstOptions.fontFlag, settingModalSecondOptions.fontFlag, correntObjectNo)
+  //   //console.log('useCanvasSetting 실행3', settingModalFirstOptions.fontFlag, settingModalSecondOptions.fontFlag, correntObjectNo)
-    if (settingModalFirstOptions.fontFlag || settingModalSecondOptions.fontFlag) {
+  //   if (settingModalFirstOptions.fontFlag || settingModalSecondOptions.fontFlag) {
-      onClickOption2()
+  //     onClickOption2()
-    }
+  //   }
-  }, [settingModalFirstOptions, settingModalSecondOptions])
+  // }, [settingModalFirstOptions, settingModalSecondOptions])
 
   // 글꼴 변경 시
-  useEffect(() => {
+  // useEffect(() => {
-    //console.log('useCanvasSetting 실행4', globalFont.fontFlag, correntObjectNo)
+  //   //console.log('useCanvasSetting 실행4', globalFont.fontFlag, correntObjectNo)
-    if (globalFont.fontFlag) {
+  //   if (globalFont.fontFlag) {
-      onClickOption2()
+  //     onClickOption2()
-    }
+  //   }
-  }, [globalFont])
+  // }, [globalFont])
 
   // 도명크기 변경 시
-  useEffect(() => {
+  // useEffect(() => {
-    //console.log('useCanvasSetting 실행5', planSizeSettingMode.flag, correntObjectNo)
+  //   //console.log('useCanvasSetting 실행5', planSizeSettingMode.flag, correntObjectNo)
-    if (planSizeSettingMode.flag) {
+  //   if (planSizeSettingMode.flag) {
-      onClickOption2()
+  //     onClickOption2()
-    }
+  //   }
-  }, [planSizeSettingMode])
+  // }, [planSizeSettingMode])
 
   // 점/선 그리드 변경 시
-  useEffect(() => {
+  // useEffect(() => {
-    //console.log('useCanvasSetting 실행6', dotLineGridSetting.flag)
+  //   //console.log('useCanvasSetting 실행6', dotLineGridSetting.flag)
-    if (dotLineGridSetting.flag) {
+  //   if (dotLineGridSetting.flag) {
-      onClickOption2()
+  //     onClickOption2()
-    }
+  //   }
-  }, [dotLineGridSetting])
+  // }, [dotLineGridSetting])
 
   // 그리드 색 설정 변경 시
-  useEffect(() => {
+  // useEffect(() => {
-    console.log('useCanvasSetting 실행7', colorTemp, gridColor)
+  //   console.log('useCanvasSetting 실행7', colorTemp, gridColor)
-    //colorTemp는 변경 전.. 값이 있고 변경된 컬러와 다를 때 실행
+  //   //colorTemp는 변경 전.. 값이 있고 변경된 컬러와 다를 때 실행
-    if (colorTemp !== undefined && colorTemp !== gridColor) {
+  //   if (colorTemp !== undefined && colorTemp !== gridColor) {
-      onClickOption2()
+  //     onClickOption2()
-    }
+  //   }
-  }, [color])
+  // }, [color])
 
   const getFonts = (itemValue) => {
     if (!itemValue) return { id: 1, name: 'MS PGothic', value: 'MS PGothic' }
@@ -491,7 +496,7 @@ export function useCanvasSetting() {
   }
 
   // CanvasSetting 옵션 클릭 후 저장
-  const onClickOption2 = useCallback(async () => {
+  const onClickOption2 = async () => {
     // 서버에 전송할 데이터
     const dataToSend = {
       firstOption1: option1.map((item) => ({
@@ -613,7 +618,7 @@ export function useCanvasSetting() {
       })
 
     //setAdsorptionRange(item.range)
-  }, [settingModalFirstOptions, settingModalSecondOptions, adsorptionPointMode, globalFont, planSizeSettingMode, dotLineGridSetting, color])
+  }
 
   // Canvas 디스플레이 설정 시 해당 옵션 적용
   const frontSettings = async () => {
@@ -734,5 +739,7 @@ export function useCanvasSetting() {
     setBasicSettings,
     fetchBasicSettings,
     basicSettingSave,
+    settingsData,
+    setSettingsData,
   }
 }