From 33d2ba50e91fde2e19722641628afd9686fcc49b Mon Sep 17 00:00:00 2001 From: changkyu choi Date: Fri, 13 Sep 2024 14:56:25 +0900 Subject: [PATCH] =?UTF-8?q?Canvas=20=EC=84=A4=EC=A0=95=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/CanvasMenu.jsx | 53 ++++++++++- .../modal/setting01/FirstOption.jsx | 94 +++++++++---------- 2 files changed, 97 insertions(+), 50 deletions(-) diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index 65ac569d..477cdfde 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -3,8 +3,12 @@ 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' export default function CanvasMenu(props) { + const [objectNo] = useState('test123240912001') const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal } = props const [menuNumber, setMenuNumber] = useState(null) const [vertical, setVertical] = useState(true) @@ -21,8 +25,55 @@ export default function CanvasMenu(props) { setShowOutlineModal, type, } + + const settingsModalOptions = useRecoilState(settingModalFirstOptionsState) + useEffect(() => {}, [menuNumber, type]) + // 저장버튼(btn08) 클릭 시 호출되는 함수 + const handleSaveSettings = async () => { + try { + // 서버에 전송할 데이터 + const dataToSend = { + option1: settingsModalOptions[0].option1.map((item) => ({ + column: item.column, + selected: item.selected, + })), + option2: settingsModalOptions[0].option2.map((item) => ({ + column: item.column, + selected: item.selected, + })), + } + + 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, + } + + // HTTP POST 요청 보내기 + await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }) + + // 응답 처리 + alert('설정이 저장되었습니다.') + } catch (error) { + console.error('설정을 저장하는 동안 오류가 발생했습니다:', error) + alert('설정을 저장하는 중 오류가 발생했습니다.') + } + } + return (
@@ -104,7 +155,7 @@ export default function CanvasMenu(props) {
- +
diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx index 8489d1a5..fd2577a5 100644 --- a/src/components/floor-plan/modal/setting01/FirstOption.jsx +++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx @@ -5,64 +5,60 @@ import React, { useEffect, useState } from 'react' import { get } from '@/lib/Axios' export default function FirstOption() { - const [objectNo, setObjectNo] = useState('test123240912001') + const [objectNo] = useState('test123240912001') const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalFirstOptionsState) const { option1, option2 } = settingsModalOptions const { getMessage } = useMessage() + + // 초기 조회 + useEffect(() => { + console.log('useEffect 실행') + fetchSettings() + }, []) + + // 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', + 'gridDisplay', + 'charDisplay', + 'flowDisplay', + 'hallwayDimenDisplay', + 'actualDimenDisplay', + 'noDimenDisplay', + 'trestleDisplay', + 'coordiDisplay', + 'drawConverDisplay', + ] + const option1 = settingsModalOptions.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]] })) + + // 데이터 설정 + setSettingModalOptions({ + option1, + option2, + // rangeSetting: data.rangeSetting, + // gridSettings: data.gridSettings, + }) + } catch (error) { + console.error('Data fetching error:', error) + } + } + const onClickOption = (option) => { option.selected = !option.selected setSettingModalOptions({ option1, option2 }) } - // 초기 조회 - useEffect(() => { - // Canvas Setting 조회 및 초기화 - const fetchSettings = async () => { - try { - const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` }) - - // console.log(res) - - const data = { - option1: [ - { id: 1, column: 'assignDisplay', name: 'modal.canvas.setting.first.option.alloc', selected: res.assignDisplay }, - { id: 2, column: 'drawDisplay', name: 'modal.canvas.setting.first.option.outline', selected: res.drawDisplay }, - { id: 3, column: 'gridDisplay', name: 'modal.canvas.setting.first.option.plan', selected: res.gridDisplay }, - { id: 4, column: 'charDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: res.charDisplay }, - { id: 5, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.grid', selected: res.flowDisplay }, - { id: 6, column: 'hallwayDimenDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: res.hallwayDimenDisplay }, - { id: 7, column: 'actualDimenDisplay', name: 'modal.canvas.setting.first.option.word', selected: res.actualDimenDisplay }, - { id: 8, column: 'noDimenDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: res.noDimenDisplay }, - { id: 9, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.flow', selected: res.trestleDisplay }, - { id: 10, column: 'coordiDisplay', name: 'modal.canvas.setting.first.option.total', selected: res.coordiDisplay }, - { id: 11, column: 'drawConverDisplay', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: res.drawConverDisplay }, - ], - option2: [ - { id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: res.onlyBorder }, - { id: 2, column: 'lineHatch', name: 'modal.canvas.setting.first.option.line', selected: res.lineHatch }, - { id: 3, column: 'allPainted', name: 'modal.canvas.setting.first.option.all', selected: res.allPainted }, - ], - - //rangeSetting: res.adsorpRangeSetting, - //gridSettings: [res.randomGrid, res.solidGrid, res.dotGrid, res.gridColorSet, res.adsorpPointAdd], - } - - // 데이터 설정 - setSettingModalOptions({ - option1: data.option1, - option2: data.option2, - // rangeSetting: data.rangeSetting, - // gridSettings: data.gridSettings, - }) - } catch (error) { - console.error('Data fetching error:', error) - } - } - - fetchSettings() - }, []) - return ( <>