diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index 656bae3e..23b9626d 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -1,15 +1,16 @@ 'use client' + import { useEffect, useState } from 'react' import MenuDepth01 from './MenuDepth01' import QSelectBox from '@/components/common/select/QSelectBox' import { useMessage } from '@/hooks/useMessage' import { post } from '@/lib/Axios' import { useRecoilState } from 'recoil' -import { settingModalFirstOptionsState } from '@/store/settingAtom' +import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom' import { verticalHorizontalModeState } from '@/store/canvasAtom' export default function CanvasMenu(props) { - const [objectNo] = useState('test123240912001') + const [objectNo] = useState('test123240912001') // 이후 삭제 필요 const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal } = props const [menuNumber, setMenuNumber] = useState(null) const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState) @@ -28,7 +29,8 @@ export default function CanvasMenu(props) { type, } - const settingsModalOptions = useRecoilState(settingModalFirstOptionsState) + const firstOptions = useRecoilState(settingModalFirstOptionsState) + const secondOptions = useRecoilState(settingModalSecondOptionsState) useEffect(() => {}, [menuNumber, type]) @@ -37,11 +39,19 @@ export default function CanvasMenu(props) { try { // 서버에 전송할 데이터 const dataToSend = { - option1: settingsModalOptions[0].option1.map((item) => ({ + firstOption1: firstOptions[0].option1.map((item) => ({ column: item.column, selected: item.selected, })), - option2: settingsModalOptions[0].option2.map((item) => ({ + firstOption2: firstOptions[0].option2.map((item) => ({ + column: item.column, + selected: item.selected, + })), + // secondOption1: secondOptions[0].option1.map((item) => ({ + // name: item.name, + // // 필요한 경우 추가 데이터 항목 + // })), + secondOption2: secondOptions[0].option2.map((item) => ({ column: item.column, selected: item.selected, })), @@ -49,20 +59,24 @@ export default function CanvasMenu(props) { const patternData = { objectNo, - assignDisplay: dataToSend.option1[0].selected, - drawDisplay: dataToSend.option1[1].selected, - gridDisplay: dataToSend.option1[2].selected, - charDisplay: dataToSend.option1[3].selected, - flowDisplay: dataToSend.option1[4].selected, - hallwayDimenDisplay: dataToSend.option1[5].selected, - actualDimenDisplay: dataToSend.option1[6].selected, - noDimenDisplay: dataToSend.option1[7].selected, - trestleDisplay: dataToSend.option1[8].selected, - coordiDisplay: dataToSend.option1[9].selected, - drawConverDisplay: dataToSend.option1[10].selected, - onlyBorder: dataToSend.option2[0].selected, - lineHatch: dataToSend.option2[1].selected, - allPainted: dataToSend.option2[2].selected, + assignDisplay: dataToSend.firstOption1[0].selected, + drawDisplay: dataToSend.firstOption1[1].selected, + gridDisplay: dataToSend.firstOption1[2].selected, + charDisplay: dataToSend.firstOption1[3].selected, + flowDisplay: dataToSend.firstOption1[4].selected, + hallwayDimenDisplay: dataToSend.firstOption1[5].selected, + actualDimenDisplay: dataToSend.firstOption1[6].selected, + noDimenDisplay: dataToSend.firstOption1[7].selected, + trestleDisplay: dataToSend.firstOption1[8].selected, + coordiDisplay: dataToSend.firstOption1[9].selected, + drawConverDisplay: dataToSend.firstOption1[10].selected, + onlyBorder: dataToSend.firstOption2[0].selected, + lineHatch: dataToSend.firstOption2[1].selected, + allPainted: dataToSend.firstOption2[2].selected, + adsorpRangeSmall: dataToSend.secondOption2[0].selected, + adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected, + adsorpRangeMedium: dataToSend.secondOption2[2].selected, + adsorpRangeLarge: dataToSend.secondOption2[3].selected, } // HTTP POST 요청 보내기 diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx index fd2577a5..8c292a05 100644 --- a/src/components/floor-plan/modal/setting01/FirstOption.jsx +++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx @@ -5,24 +5,27 @@ import React, { useEffect, useState } from 'react' import { get } from '@/lib/Axios' export default function FirstOption() { - const [objectNo] = useState('test123240912001') + const [objectNo] = useState('test123240912001') // 이후 삭제 필요 const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalFirstOptionsState) const { option1, option2 } = settingsModalOptions const { getMessage } = useMessage() - // 초기 조회 + const [isFetched, setIsFetched] = useState(false) // 조회 여부 상태 + + // 데이터를 최초 한 번만 조회 useEffect(() => { - console.log('useEffect 실행') - fetchSettings() - }, []) + console.log('FirstOption useEffect 실행') + if (!isFetched) { + // 조회가 안 되었을 때만 fetchSettings 실행 + fetchSettings() + } + }, [isFetched]) // isFetched 상태가 변할 때마다 확인 // Canvas Setting 조회 및 초기화 const fetchSettings = async () => { try { const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` }) - // console.log(res) - const options1 = [ 'assignDisplay', 'drawDisplay', @@ -45,9 +48,9 @@ export default function FirstOption() { setSettingModalOptions({ option1, option2, - // rangeSetting: data.rangeSetting, - // gridSettings: data.gridSettings, }) + + setIsFetched(true) // 조회가 완료되면 isFetched를 true로 설정 } catch (error) { console.error('Data fetching error:', error) } diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx index 499b316c..0a568b67 100644 --- a/src/components/floor-plan/modal/setting01/SecondOption.jsx +++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx @@ -1,23 +1,61 @@ import { useRecoilState } from 'recoil' import { settingModalSecondOptionsState } from '@/store/settingAtom' import { useMessage } from '@/hooks/useMessage' +import React, { useEffect, useState } from 'react' +import { get } from '@/lib/Axios' export default function SecondOption() { + const [objectNo] = useState('test123240912001') // 이후 삭제 필요 const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalSecondOptionsState) const { option1, option2 } = settingsModalOptions const { getMessage } = useMessage() - const onClickOption = (option) => { - option.selected = !option.selected - setSettingModalOptions({ option1: option1, option2: option2 }) + const [isFetched, setIsFetched] = useState(false) // 조회 여부 상태 + + // 데이터를 최초 한 번만 조회 + useEffect(() => { + console.log('SecondOption useEffect 실행') + if (!isFetched) { + // 조회가 안 되었을 때만 fetchSettings 실행 + fetchSettings() + } + }, [isFetched]) // isFetched 상태가 변할 때마다 확인 + + const fetchSettings = async () => { + try { + const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` }) + + //const options1 = ['1', '2', '3', '4'] + //const option1 = settingsModalOptions.option1.map((item, index) => ({ ...item, selected: res[options1[index]] })) + + const options2 = ['adsorpRangeSmall', 'adsorpRangeSmallSemi', 'adsorpRangeMedium', 'adsorpRangeLarge'] + const option2 = settingsModalOptions.option2.map((item, index) => ({ ...item, selected: res[options2[index]] })) + + // 데이터 설정 + setSettingModalOptions({ + option1, + option2, + }) + + setIsFetched(true) // 조회가 완료되면 isFetched를 true로 설정 + } catch (error) { + console.error('Data fetching error:', error) + } + } + + const onClickOption = (option) => { + // option2에서 한 개만 선택 가능하도록 처리 + const updatedOption2 = option2.map((item) => (item.id === option.id ? { ...item, selected: true } : { ...item, selected: false })) + + setSettingModalOptions({ option1, option2: updatedOption2 }) } return ( <>

{getMessage('modal.canvas.setting.font.plan.edit')}

- {settingsModalOptions.option1.map((item) => ( - ))} @@ -26,8 +64,8 @@ export default function SecondOption() {

{getMessage('modal.canvas.setting.font.plan.absorption')}

- {settingsModalOptions.option2.map((item) => ( - diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js index 26afc275..2e09ba2e 100644 --- a/src/store/settingAtom.js +++ b/src/store/settingAtom.js @@ -35,10 +35,10 @@ export const settingModalSecondOptionsState = atom({ { id: 4, name: 'modal.canvas.setting.font.plan.edit.circuit.num' }, ], option2: [ - { id: 1, name: 'modal.canvas.setting.font.plan.absorption.small', selected: false }, - { id: 2, name: 'modal.canvas.setting.font.plan.absorption.small.semi', selected: false }, - { id: 3, name: 'modal.canvas.setting.font.plan.absorption.medium', selected: false }, - { id: 4, name: 'modal.canvas.setting.font.plan.absorption.large', selected: false }, + { id: 1, column: 'adsorpRangeSmall', name: 'modal.canvas.setting.font.plan.absorption.small', selected: true }, + { id: 2, column: 'adsorpRangeSmallSemi', name: 'modal.canvas.setting.font.plan.absorption.small.semi', selected: false }, + { id: 3, column: 'adsorpRangeMedium', name: 'modal.canvas.setting.font.plan.absorption.medium', selected: false }, + { id: 4, column: 'adsorpRangeLarge', name: 'modal.canvas.setting.font.plan.absorption.large', selected: false }, ], }, dangerouslyAllowMutability: true,