From 7bde2776d637f921114140968bcf8727e777a083 Mon Sep 17 00:00:00 2001 From: changkyu choi Date: Mon, 23 Sep 2024 14:47:44 +0900 Subject: [PATCH] =?UTF-8?q?Canvas=20=EC=84=A4=EC=A0=95=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20=EC=8B=9C=20=EB=B0=94=EB=A1=9C=20=EC=A0=80=EC=9E=A5?= =?UTF-8?q?=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/CanvasMenu.jsx | 65 +--------- .../modal/setting01/FirstOption.jsx | 99 ++++++++++++--- .../modal/setting01/SecondOption.jsx | 117 +++++++++++++++--- 3 files changed, 182 insertions(+), 99 deletions(-) diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index 71d23481..04f68a25 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -5,20 +5,15 @@ import MenuDepth01 from './MenuDepth01' import QSelectBox from '@/components/common/select/QSelectBox' import { useMessage } from '@/hooks/useMessage' import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' -import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom' import { canvasState, canvasZoomState, currentMenuState, verticalHorizontalModeState } from '@/store/canvasAtom' import { outerLinePointsState } from '@/store/outerLineAtom' import { appMessageStore, globalLocaleStore } from '@/store/localeAtom' import { MENU } from '@/common/common' -import { useAxios } from '@/hooks/useAxios' -import { toastUp } from '@/hooks/useToast' - import KO from '@/locales/ko.json' import JA from '@/locales/ja.json' export default function CanvasMenu(props) { - const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal } = props const [menuNumber, setMenuNumber] = useState(null) const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState) @@ -30,7 +25,6 @@ export default function CanvasMenu(props) { const setPoints = useSetRecoilState(outerLinePointsState) const globalLocale = useRecoilValue(globalLocaleStore) const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore) - const { post } = useAxios() const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }] const onClickNav = (number) => { @@ -44,9 +38,6 @@ export default function CanvasMenu(props) { type, } - const firstOptions = useRecoilState(settingModalFirstOptionsState) - const secondOptions = useRecoilState(settingModalSecondOptionsState) - useEffect(() => { if (globalLocale === 'ko') { setAppMessageState(KO) @@ -56,61 +47,7 @@ export default function CanvasMenu(props) { }, [menuNumber, type, globalLocale]) // 저장버튼(btn08) 클릭 시 호출되는 함수 - const handleSaveSettings = async () => { - try { - // 서버에 전송할 데이터 - const dataToSend = { - firstOption1: firstOptions[0].option1.map((item) => ({ - column: item.column, - selected: item.selected, - })), - 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, - })), - } - - const patternData = { - objectNo, - //디스플레이 설정(다중) - 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 요청 보내기 - await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => { - toastUp({ message: res.returnMessage, type: 'success' }) - }) - } catch (error) { - toastUp({ message: res.returnMessage, type: 'error' }) - } - } + const handleSaveSettings = async () => {} const handleClear = () => { setPoints([]) diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx index e0c4170d..f5e2dea2 100644 --- a/src/components/floor-plan/modal/setting01/FirstOption.jsx +++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx @@ -1,15 +1,18 @@ import { useRecoilState } from 'recoil' -import { settingModalFirstOptionsState } from '@/store/settingAtom' +import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom' import { useMessage } from '@/hooks/useMessage' import React, { useCallback, useEffect, useState } from 'react' import { useAxios } from '@/hooks/useAxios' +import { toastUp } from '@/hooks/useToast' export default function FirstOption() { const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 - const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalFirstOptionsState) - const { option1, option2 } = settingsModalOptions + const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState) + const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState) + const { option1, option2 } = settingModalFirstOptions + const { option3, option4 } = settingModalSecondOptions const { getMessage } = useMessage() - const { get } = useAxios() + const { get, post } = useAxios() // 데이터를 최초 한 번만 조회 useEffect(() => { @@ -18,10 +21,9 @@ export default function FirstOption() { }, [objectNo]) // Canvas Setting 조회 및 초기화 - const fetchSettings = useCallback(async () => { + const fetchSettings = async () => { try { const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` }) - const options1 = [ 'assignDisplay', 'drawDisplay', @@ -35,25 +37,90 @@ export default function FirstOption() { 'coordiDisplay', 'drawConverDisplay', ] - const option1 = settingsModalOptions.option1.map((item, index) => ({ ...item, selected: res[options1[index]] })) + const option1 = settingModalFirstOptions.option1.map((item, index) => ({ ...item, selected: res[options1[index]] })) const options2 = ['onlyBorder', 'lineHatch', 'allPainted'] - const option2 = settingsModalOptions.option2.map((item, index) => ({ ...item, selected: res[options2[index]] })) + const option2 = settingModalFirstOptions.option2.map((item, index) => ({ ...item, selected: res[options2[index]] })) + + const option3 = settingModalSecondOptions.option1.map((item) => ({ ...item })) + + const options4 = ['adsorpRangeSmall', 'adsorpRangeSmallSemi', 'adsorpRangeMedium', 'adsorpRangeLarge'] + const option4 = settingModalSecondOptions.option2.map((item, index) => ({ ...item, selected: res[options4[index]] })) // 데이터 설정 - setSettingModalOptions({ + setSettingModalFirstOptions({ option1, option2, }) + setSettingModalSecondOptions({ + option3, + option4, + }) } catch (error) { console.error('Data fetching error:', error) } - }, [objectNo]) + } - const onClickOption = (option) => { + const onClickOption = async (option) => { option.selected = !option.selected - setSettingModalOptions({ option1, option2 }) + setSettingModalFirstOptions({ option1, option2 }) + setSettingModalSecondOptions({ option3, option4 }) + + try { + // 서버에 전송할 데이터 + const dataToSend = { + firstOption1: option1.map((item) => ({ + column: item.column, + selected: item.selected, + })), + firstOption2: option2.map((item) => ({ + column: item.column, + selected: item.selected, + })), + // secondOption1: secondOptions[0].option1.map((item) => ({ + // name: item.id, + // name: item.name, + // // 필요한 경우 데이터 항목 추가 + // })), + secondOption2: option4.map((item) => ({ + column: item.column, + selected: item.selected, + })), + } + + const patternData = { + objectNo, + //디스플레이 설정(다중) + 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 요청 보내기 + await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => { + toastUp({ message: res.returnMessage, type: 'success' }) + }) + } catch (error) { + toastUp({ message: res.returnMessage, type: 'error' }) + } } return ( @@ -61,8 +128,8 @@ export default function FirstOption() {

{getMessage('modal.canvas.setting.first.option.info')}

- {settingsModalOptions && - settingsModalOptions.option1.map((item) => ( + {settingModalFirstOptions && + settingModalFirstOptions.option1.map((item) => ( @@ -60,8 +139,8 @@ export default function SecondOption() {

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

- {settingsModalOptions && - settingsModalOptions.option2.map((item) => ( + {settingModalSecondOptions && + settingModalSecondOptions.option4.map((item) => (