Canvas 설정 화면 수정

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 (
     <div className={`canvas-menu-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
       <div className="canvas-menu-inner">
@@ -104,7 +155,7 @@ export default function CanvasMenu(props) {
               </div>
               <div className="btn-from">
                 <button className="btn07"></button>
-                <button className="btn08"></button>
+                <button className="btn08" onClick={handleSaveSettings}></button>
                 <button className="btn09"></button>
               </div>
             </>

src/components/floor-plan/modal/setting01/FirstOption.jsx

@@ -5,18 +5,17 @@ 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()
-  const onClickOption = (option) => {
-    option.selected = !option.selected
-
-    setSettingModalOptions({ option1, option2 })
-  }
 
   // 초기 조회
   useEffect(() => {
+    console.log('useEffect 실행')
+    fetchSettings()
+  }, [])
+
   // Canvas Setting 조회 및 초기화
   const fetchSettings = async () => {
     try {
@@ -24,34 +23,28 @@ export default function FirstOption() {
 
       // console.log(res)
 
-        const data = {
+      const options1 = [
-          option1: [
+        'assignDisplay',
-            { id: 1, column: 'assignDisplay', name: 'modal.canvas.setting.first.option.alloc', selected: res.assignDisplay },
+        'drawDisplay',
-            { id: 2, column: 'drawDisplay', name: 'modal.canvas.setting.first.option.outline', selected: res.drawDisplay },
+        'gridDisplay',
-            { id: 3, column: 'gridDisplay', name: 'modal.canvas.setting.first.option.plan', selected: res.gridDisplay },
+        'charDisplay',
-            { id: 4, column: 'charDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: res.charDisplay },
+        'flowDisplay',
-            { id: 5, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.grid', selected: res.flowDisplay },
+        'hallwayDimenDisplay',
-            { id: 6, column: 'hallwayDimenDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: res.hallwayDimenDisplay },
+        'actualDimenDisplay',
-            { id: 7, column: 'actualDimenDisplay', name: 'modal.canvas.setting.first.option.word', selected: res.actualDimenDisplay },
+        'noDimenDisplay',
-            { id: 8, column: 'noDimenDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: res.noDimenDisplay },
+        'trestleDisplay',
-            { id: 9, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.flow', selected: res.trestleDisplay },
+        'coordiDisplay',
-            { id: 10, column: 'coordiDisplay', name: 'modal.canvas.setting.first.option.total', selected: res.coordiDisplay },
+        'drawConverDisplay',
-            { id: 11, column: 'drawConverDisplay', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: res.drawConverDisplay },
+      ]
-          ],
+      const option1 = settingsModalOptions.option1.map((item, index) => ({ ...item, selected: res[options1[index]] }))
-          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,
+      const options2 = ['onlyBorder', 'lineHatch', 'allPainted']
-          //gridSettings: [res.randomGrid, res.solidGrid, res.dotGrid, res.gridColorSet, res.adsorpPointAdd],
+      const option2 = settingsModalOptions.option2.map((item, index) => ({ ...item, selected: res[options2[index]] }))
-        }
 
       // 데이터 설정
       setSettingModalOptions({
-          option1: data.option1,
+        option1,
-          option2: data.option2,
+        option2,
         // rangeSetting: data.rangeSetting,
         // gridSettings: data.gridSettings,
       })
@@ -60,8 +53,11 @@ export default function FirstOption() {
     }
   }
 
-    fetchSettings()
+  const onClickOption = (option) => {
-  }, [])
+    option.selected = !option.selected
+
+    setSettingModalOptions({ option1, option2 })
+  }
 
   return (
     <>