Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev

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,
+        assignDisplay: dataToSend.firstOption1[0].selected,
-        drawDisplay: dataToSend.option1[1].selected,
+        drawDisplay: dataToSend.firstOption1[1].selected,
-        gridDisplay: dataToSend.option1[2].selected,
+        gridDisplay: dataToSend.firstOption1[2].selected,
-        charDisplay: dataToSend.option1[3].selected,
+        charDisplay: dataToSend.firstOption1[3].selected,
-        flowDisplay: dataToSend.option1[4].selected,
+        flowDisplay: dataToSend.firstOption1[4].selected,
-        hallwayDimenDisplay: dataToSend.option1[5].selected,
+        hallwayDimenDisplay: dataToSend.firstOption1[5].selected,
-        actualDimenDisplay: dataToSend.option1[6].selected,
+        actualDimenDisplay: dataToSend.firstOption1[6].selected,
-        noDimenDisplay: dataToSend.option1[7].selected,
+        noDimenDisplay: dataToSend.firstOption1[7].selected,
-        trestleDisplay: dataToSend.option1[8].selected,
+        trestleDisplay: dataToSend.firstOption1[8].selected,
-        coordiDisplay: dataToSend.option1[9].selected,
+        coordiDisplay: dataToSend.firstOption1[9].selected,
-        drawConverDisplay: dataToSend.option1[10].selected,
+        drawConverDisplay: dataToSend.firstOption1[10].selected,
-        onlyBorder: dataToSend.option2[0].selected,
+        onlyBorder: dataToSend.firstOption2[0].selected,
-        lineHatch: dataToSend.option2[1].selected,
+        lineHatch: dataToSend.firstOption2[1].selected,
-        allPainted: dataToSend.option2[2].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 요청 보내기

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 실행')
+    console.log('FirstOption useEffect 실행')
-    fetchSettings()
+    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)
     }

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 (
     <>
       <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.option1.map((item) => (
+          {settingsModalOptions.option1.map((item, index) => (
-            <button className="arr-btn">
+            <button key={item.id || index} className="arr-btn">
               <span>{getMessage(item.name)}</span>
             </button>
           ))}
@@ -26,8 +64,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.option2.map((item) => (
+          {settingsModalOptions.option2.map((item, index) => (
-            <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={() => onClickOption(item)}>
+            <button key={item.id || index} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={() => onClickOption(item)}>
               <span className="check-area"></span>
               <span className="title-area">{getMessage(item.name)}</span>
             </button>

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: 1, column: 'adsorpRangeSmall', name: 'modal.canvas.setting.font.plan.absorption.small', selected: true },
-      { id: 2, name: 'modal.canvas.setting.font.plan.absorption.small.semi', selected: false },
+      { id: 2, column: 'adsorpRangeSmallSemi', name: 'modal.canvas.setting.font.plan.absorption.small.semi', selected: false },
-      { id: 3, name: 'modal.canvas.setting.font.plan.absorption.medium', selected: false },
+      { id: 3, column: 'adsorpRangeMedium', name: 'modal.canvas.setting.font.plan.absorption.medium', selected: false },
-      { id: 4, name: 'modal.canvas.setting.font.plan.absorption.large', selected: false },
+      { id: 4, column: 'adsorpRangeLarge', name: 'modal.canvas.setting.font.plan.absorption.large', selected: false },
     ],
   },
   dangerouslyAllowMutability: true,