Canvas 설정 수정

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

@@ -5,9 +5,10 @@ import { POLYGON_TYPE } from '@/common/common'
 import { setSurfaceShapePattern } from '@/util/canvas-util'
 import { useEvent } from '@/hooks/useEvent'
 
-export default function FirstOption() {
+export default function FirstOption(props) {
   const { getMessage } = useMessage()
-  const { canvas, settingModalFirstOptions, setSettingModalFirstOptions, settingsData, setSettingsData } = useCanvasSetting()
+  // const { canvas, settingModalFirstOptions, setSettingModalFirstOptions, settingsData, setSettingsData } = useCanvasSetting()
+  let { canvas, settingModalFirstOptions, setSettingModalFirstOptions, settingsData, setSettingsData } = props
   const { option1, option2, dimensionDisplay } = settingModalFirstOptions
   const { initEvent } = useEvent()
 
@@ -18,22 +19,26 @@ export default function FirstOption() {
 
   const onClickOption = async (item) => {
     //치수 표시(단 건 선택)
+    let dimensionDisplay = settingModalFirstOptions?.dimensionDisplay
+    let option1 = settingModalFirstOptions?.option1
+    let option2 = settingModalFirstOptions?.option2
+
     if (item.column === 'corridorDimension' || item.column === 'realDimension' || item.column === 'noneDimension') {
-      const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
+      dimensionDisplay = settingModalFirstOptions?.dimensionDisplay.map((option) => {
         option.selected = option.id === item.id
         return option
       })
 
-      setSettingModalFirstOptions({ ...settingModalFirstOptions, dimensionDisplay: [...options] })
+      // setSettingModalFirstOptions({ ...settingModalFirstOptions, dimensionDisplay: [...options] })
 
       //화면 표시(단 건 선택)
     } else if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
-      const options = settingModalFirstOptions?.option2.map((option2) => {
+      option2 = settingModalFirstOptions?.option2.map((option2) => {
         option2.selected = option2.id === item.id
         return option2
       })
 
-      setSettingModalFirstOptions({ ...settingModalFirstOptions, option2: [...options] })
+      // setSettingModalFirstOptions({ ...settingModalFirstOptions, option2: [...options] })
 
       const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
 
@@ -41,25 +46,18 @@ export default function FirstOption() {
         setSurfaceShapePattern(polygon, item.column)
       })
       //디스플레이 설정 표시(단 건 선택)
-    } else if (item.column === 'imageDisplay') {
+    } else {
-      item.selected = !item.selected
+      option1 = settingModalFirstOptions?.option1.map((opt) => {
-      canvas
-        .getObjects()
-        .filter((obj) => obj.name === 'backGroundImage')
-        .forEach((image) => (image.visible = item.selected))
-      canvas.renderAll()
-    }else {
-      const options = settingModalFirstOptions?.option1.map((opt) => {
         if (opt.id === item.id) {
           opt.selected = !opt.selected
         }
         return opt
       })
 
-      setSettingModalFirstOptions({ ...settingModalFirstOptions, option1: [...options] })
+      // setSettingModalFirstOptions({ ...settingModalFirstOptions, option1: [...options] })
     }
 
-    setSettingsData({ ...settingsData, ...settingModalFirstOptions })
+    setSettingsData({ ...settingsData, option1: [...option1], option2: [...option2], dimensionDisplay: [...dimensionDisplay] })
   }
 
   // useEffect(() => {

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

@@ -11,7 +11,7 @@ import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid'
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { useEvent } from '@/hooks/useEvent'
 
-export default function GridOption() {
+export default function GridOption(props) {
   const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
   const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState)
   const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
@@ -23,12 +23,13 @@ export default function GridOption() {
   const [colorId, setColorId] = useState(uuidv4())
   const [dotLineId, setDotLineId] = useState(uuidv4())
 
-  const { gridColor, setGridColor, color } = useCanvasSetting()
+  // const { gridColor, setGridColor, color } = useCanvasSetting()
+  const { gridColor, setGridColor, color } = props
 
   const { initEvent } = useEvent()
 
   useEffect(() => {
-    console.log(gridColor, color)
+    console.log('GridOption useEffect 실행')
     setGridColor(color.hex)
   }, [color])
 

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

@@ -10,7 +10,7 @@ import { useRecoilState, useRecoilValue } from 'recoil'
 import { fontSelector, globalFontAtom } from '@/store/fontAtom'
 import { useEvent } from '@/hooks/useEvent'
 
-export default function SecondOption() {
+export default function SecondOption(props) {
   const { getMessage } = useMessage()
   const { addPopup, closePopup } = usePopup()
   const [showFontSettingModal, setShowFontSettingModal] = useState(false)
@@ -27,6 +27,16 @@ export default function SecondOption() {
 
   const { initEvent } = useEvent()
 
+  // const {
+  //   fetchSettings,
+  //   planSizeSettingMode,
+  //   setPlanSizeSettingMode,
+  //   settingModalSecondOptions,
+  //   setSettingModalSecondOptions,
+  //   adsorptionPointMode,
+  //   setAdsorptionPointMode,
+  //   setAdsorptionRange,
+  // } = useCanvasSetting()
   const {
     fetchSettings,
     planSizeSettingMode,
@@ -36,7 +46,7 @@ export default function SecondOption() {
     adsorptionPointMode,
     setAdsorptionPointMode,
     setAdsorptionRange,
-  } = useCanvasSetting()
+  } = props
   const { option3, option4 } = settingModalSecondOptions
 
   // 데이터를 최초 한 번만 조회

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

@@ -9,6 +9,7 @@ import GridOption from '@/components/floor-plan/modal/setting01/GridOption'
 import { canGridOptionSeletor } from '@/store/canvasAtom'
 import { useRecoilValue } from 'recoil'
 import { usePopup } from '@/hooks/usePopup'
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 
 export default function SettingModal01(props) {
   const { id } = props
@@ -17,6 +18,37 @@ export default function SettingModal01(props) {
   const canGridOptionSeletorValue = useRecoilValue(canGridOptionSeletor)
   const { closePopup } = usePopup()
 
+  const {
+    canvas,
+    settingModalFirstOptions,
+    setSettingModalFirstOptions,
+    settingsData,
+    setSettingsData,
+    fetchSettings,
+    planSizeSettingMode,
+    setPlanSizeSettingMode,
+    settingModalSecondOptions,
+    setSettingModalSecondOptions,
+    adsorptionPointMode,
+    setAdsorptionPointMode,
+    setAdsorptionRange,
+    gridColor,
+    setGridColor,
+    color,
+  } = useCanvasSetting()
+  const firstProps = { canvas, settingModalFirstOptions, setSettingModalFirstOptions, settingsData, setSettingsData }
+  const secondProps = {
+    fetchSettings,
+    planSizeSettingMode,
+    setPlanSizeSettingMode,
+    settingModalSecondOptions,
+    setSettingModalSecondOptions,
+    adsorptionPointMode,
+    setAdsorptionPointMode,
+    setAdsorptionRange,
+  }
+  const gridProps = { gridColor, setGridColor, color }
+
   const handleBtnClick = (num) => {
     setButtonAct(num)
   }
@@ -46,9 +78,9 @@ export default function SettingModal01(props) {
                 </button>
               )}
             </div>
-            {buttonAct === 1 && <FirstOption />}
+            {buttonAct === 1 && <FirstOption {...firstProps} />}
-            {buttonAct === 2 && <SecondOption />}
+            {buttonAct === 2 && <SecondOption {...secondProps} />}
-            {buttonAct === 3 && <GridOption />}
+            {buttonAct === 3 && <GridOption {...gridProps} />}
           </div>
         </div>
       </WithDraggable>

src/hooks/option/useCanvasSetting.js

@@ -19,6 +19,7 @@ import {
   settingModalSecondOptionsState,
   settingModalGridOptionsState,
   basicSettingState,
+  settingsState,
 } from '@/store/settingAtom'
 import { POLYGON_TYPE } from '@/common/common'
 import { globalFontAtom } from '@/store/fontAtom'
@@ -46,7 +47,8 @@ export function useCanvasSetting() {
 
   const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
   const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
-  const [settingsData, setSettingsData] = useState({ ...settingModalFirstOptions, ...settingModalSecondOptions })
+
+  const [settingsData, setSettingsData] = useRecoilState(settingsState)
   const { option1, option2, dimensionDisplay } = settingModalFirstOptions
   const { option4 } = settingModalSecondOptions
 
@@ -120,10 +122,6 @@ export function useCanvasSetting() {
     canvas?.renderAll()
   }, [corridorDimension])
 
-  useEffect(() => {
-    console.log('🚀 ~ useCanvasSetting ~ settingsData:', settingsData)
-  }, [])
-
   // 배치면 초기설정 변경 시
   useEffect(() => {
     //console.log('useCanvasSetting canvasSetting 실행', canvasSetting)
@@ -132,9 +130,7 @@ export function useCanvasSetting() {
     }
   }, [canvasSetting])
 
-  useEffect(() => {
+  useEffect(() => {}, [settingsData])
-    console.log('useCanvasSetting ------------->', settingsData)
-  }, [settingsData])
 
   //흡착점 ON/OFF 변경 시
   // useEffect(() => {

src/store/settingAtom.js

@@ -77,6 +77,11 @@ export const settingModalSecondOptionsState = atom({
   dangerouslyAllowMutability: true,
 })
 
+export const settingsState = atom({
+  key: 'settingsData',
+  default: { ...settingModalFirstOptionsState, ...settingModalSecondOptionsState },
+})
+
 export const settingModalGridOptionsState = atom({
   key: 'settingModalGridOptions',
   default: [