Canvas 설정 변경 시 바로 저장 처리

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 () => {
+  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 handleClear = () => {
     setPoints([])

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 [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
-  const { option1, option2 } = settingsModalOptions
+  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() {
       <div className="modal-check-btn-wrap">
         <h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.first.option.info')}</h3>
         <div className="flex-check-box for2">
-          {settingsModalOptions &&
+          {settingModalFirstOptions &&
-            settingsModalOptions.option1.map((item) => (
+            settingModalFirstOptions.option1.map((item) => (
               <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
                 <span className="check-area"></span>
                 <span className="title-area">{getMessage(item.name)}</span>
@@ -73,8 +140,8 @@ export default function FirstOption() {
       <div className="modal-check-btn-wrap">
         <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.display')}</h3>
         <div className="flex-check-box for-line">
-          {settingsModalOptions &&
+          {settingModalFirstOptions &&
-            settingsModalOptions.option2.map((item) => (
+            settingModalFirstOptions.option2.map((item) => (
               <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
                 <span className="check-area"></span>
                 <span className="title-area">{getMessage(item.name)}</span>

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

@@ -1,15 +1,18 @@
 import { useRecoilState } from 'recoil'
-import { settingModalSecondOptionsState } 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 SecondOption() {
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
-  const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalSecondOptionsState)
+  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
-  const { option1, option2 } = settingsModalOptions
+  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,39 +21,115 @@ export default function SecondOption() {
   }, [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 = ['1', '2', '3', '4']
+      const options1 = [
-      //const option1 = settingsModalOptions.option1.map((item, index) => ({ ...item, selected: res[options1[index]] }))
+        'assignDisplay',
+        'drawDisplay',
+        'gridDisplay',
+        'charDisplay',
+        'flowDisplay',
+        'hallwayDimenDisplay',
+        'actualDimenDisplay',
+        'noDimenDisplay',
+        'trestleDisplay',
+        'coordiDisplay',
+        'drawConverDisplay',
+      ]
+      const option1 = settingModalFirstOptions.option1.map((item, index) => ({ ...item, selected: res[options1[index]] }))
 
-      const options2 = ['adsorpRangeSmall', 'adsorpRangeSmallSemi', 'adsorpRangeMedium', 'adsorpRangeLarge']
+      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) => {
-    // option2에서 한 개만 선택 가능하도록 처리
+    // option4에서 한 개만 선택 가능하도록 처리
-    const updatedOption2 = option2.map((item) => (item.id === option.id ? { ...item, selected: true } : { ...item, selected: false }))
+    const updatedOption4 = option4.map((item) => (item.id === option.id ? { ...item, selected: true } : { ...item, selected: false }))
 
-    setSettingModalOptions({ option1, option2: updatedOption2 })
+    setSettingModalFirstOptions({ option1, option2 })
+    setSettingModalSecondOptions({ option3, option4: updatedOption4 })
+
+    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].option3.map((item) => ({
+        //   name: item.id,
+        //   name: item.name,
+        //   // 필요한 경우 데이터 항목 추가
+        // })),
+        secondOption2: updatedOption4.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 (
     <>
       <div className="modal-check-btn-wrap">
         <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.font.plan.edit')}</h3>
         <div className="flex-check-box for2">
-          {settingsModalOptions &&
+          {settingModalSecondOptions &&
-            settingsModalOptions.option1.map((item) => (
+            settingModalSecondOptions.option3.map((item) => (
               <button key={item.id} className="arr-btn">
                 <span>{getMessage(item.name)}</span>
               </button>
@@ -60,8 +139,8 @@ export default function SecondOption() {
       <div className="modal-check-btn-wrap">
         <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.font.plan.absorption')}</h3>
         <div className="flex-check-box for-line">
-          {settingsModalOptions &&
+          {settingModalSecondOptions &&
-            settingsModalOptions.option2.map((item) => (
+            settingModalSecondOptions.option4.map((item) => (
               <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={() => onClickOption(item)}>
                 <span className="check-area"></span>
                 <span className="title-area">{getMessage(item.name)}</span>