diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx
index 92e9f3d5..f3ef9b8b 100644
--- a/src/components/floor-plan/modal/setting01/FirstOption.jsx
+++ b/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') {
- item.selected = !item.selected
- canvas
- .getObjects()
- .filter((obj) => obj.name === 'backGroundImage')
- .forEach((image) => (image.visible = item.selected))
- canvas.renderAll()
- }else {
- const options = settingModalFirstOptions?.option1.map((opt) => {
+ } else {
+ option1 = 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(() => {
diff --git a/src/components/floor-plan/modal/setting01/GridOption.jsx b/src/components/floor-plan/modal/setting01/GridOption.jsx
index 8c66534a..1d40ddbc 100644
--- a/src/components/floor-plan/modal/setting01/GridOption.jsx
+++ b/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])
diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx
index 0b350067..df60763d 100644
--- a/src/components/floor-plan/modal/setting01/SecondOption.jsx
+++ b/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
// 데이터를 최초 한 번만 조회
diff --git a/src/components/floor-plan/modal/setting01/SettingModal01.jsx b/src/components/floor-plan/modal/setting01/SettingModal01.jsx
index 222226c1..73ce8fa2 100644
--- a/src/components/floor-plan/modal/setting01/SettingModal01.jsx
+++ b/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) {
)}
- {buttonAct === 1 && }
- {buttonAct === 2 && }
- {buttonAct === 3 && }
+ {buttonAct === 1 && }
+ {buttonAct === 2 && }
+ {buttonAct === 3 && }
diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js
index 08063193..238b956d 100644
--- a/src/hooks/option/useCanvasSetting.js
+++ b/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(() => {
- console.log('useCanvasSetting ------------->', settingsData)
- }, [settingsData])
+ useEffect(() => {}, [settingsData])
//흡착점 ON/OFF 변경 시
// useEffect(() => {
diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js
index 9e64d72f..54944142 100644
--- a/src/store/settingAtom.js
+++ b/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: [