From eee569c37cb7ffc09126f4105953b6cfdc6089e6 Mon Sep 17 00:00:00 2001 From: nalpari Date: Fri, 6 Dec 2024 11:26:31 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20=EA=B8=80=EB=A1=9C=EB=B2=8C?= =?UTF-8?q?=EC=84=B8=ED=8C=85=20=ED=8C=9D=EC=97=85=20=EC=A0=80=EC=9E=A5=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modal/setting01/FirstOption.jsx | 19 +++- src/hooks/option/useCanvasSetting.js | 87 ++++++++++--------- 2 files changed, 62 insertions(+), 44 deletions(-) diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx index 566e38b5..7f2f5aaa 100644 --- a/src/components/floor-plan/modal/setting01/FirstOption.jsx +++ b/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(() => { diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js index 6c73efcc..08063193 100644 --- a/src/hooks/option/useCanvasSetting.js +++ b/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) - if (adsorptionPointMode.fontFlag) { - onClickOption2() - } - }, [adsorptionPointMode]) + console.log('useCanvasSetting ------------->', settingsData) + }, [settingsData]) + + //흡착점 ON/OFF 변경 시 + // useEffect(() => { + // //console.log('useCanvasSetting 실행2', adsorptionPointMode.fontFlag, correntObjectNo) + // if (adsorptionPointMode.fontFlag) { + // onClickOption2() + // } + // }, [adsorptionPointMode]) // 1 과 2 변경 시 - useEffect(() => { - //console.log('useCanvasSetting 실행3', settingModalFirstOptions.fontFlag, settingModalSecondOptions.fontFlag, correntObjectNo) - if (settingModalFirstOptions.fontFlag || settingModalSecondOptions.fontFlag) { - onClickOption2() - } - }, [settingModalFirstOptions, settingModalSecondOptions]) + // useEffect(() => { + // //console.log('useCanvasSetting 실행3', settingModalFirstOptions.fontFlag, settingModalSecondOptions.fontFlag, correntObjectNo) + // if (settingModalFirstOptions.fontFlag || settingModalSecondOptions.fontFlag) { + // onClickOption2() + // } + // }, [settingModalFirstOptions, settingModalSecondOptions]) // 글꼴 변경 시 - useEffect(() => { - //console.log('useCanvasSetting 실행4', globalFont.fontFlag, correntObjectNo) - if (globalFont.fontFlag) { - onClickOption2() - } - }, [globalFont]) + // useEffect(() => { + // //console.log('useCanvasSetting 실행4', globalFont.fontFlag, correntObjectNo) + // if (globalFont.fontFlag) { + // onClickOption2() + // } + // }, [globalFont]) // 도명크기 변경 시 - useEffect(() => { - //console.log('useCanvasSetting 실행5', planSizeSettingMode.flag, correntObjectNo) - if (planSizeSettingMode.flag) { - onClickOption2() - } - }, [planSizeSettingMode]) + // useEffect(() => { + // //console.log('useCanvasSetting 실행5', planSizeSettingMode.flag, correntObjectNo) + // if (planSizeSettingMode.flag) { + // onClickOption2() + // } + // }, [planSizeSettingMode]) // 점/선 그리드 변경 시 - useEffect(() => { - //console.log('useCanvasSetting 실행6', dotLineGridSetting.flag) - if (dotLineGridSetting.flag) { - onClickOption2() - } - }, [dotLineGridSetting]) + // 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]) + // 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' } @@ -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, } }