floor-plan 실행시 Canvas 설정 정보 조회 처리

src/app/layout.js

@@ -15,6 +15,7 @@ import QModal from '@/components/common/modal/QModal'
 import './globals.css'
 import '../styles/style.scss'
 import Dimmed from '@/components/ui/Dimmed'
+import 'react-toastify/dist/ReactToastify.css'
 
 // const inter = Inter({ subsets: ['latin'] })
 

src/components/floor-plan/FloorPlan.jsx

@@ -1,9 +1,10 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { useRecoilValue } from 'recoil'
+import { useRecoilValue, useRecoilState } from 'recoil'
 import { useAxios } from '@/hooks/useAxios'
 import { globalLocaleStore } from '@/store/localeAtom'
+import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
 import CanvasMenu from '@/components/floor-plan/CanvasMenu'
 import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
 import CanvasLayout from '@/components/floor-plan/CanvasLayout'
@@ -16,6 +17,10 @@ export default function FloorPlan() {
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get } = useAxios(globalLocaleState)
 
+  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
+  const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
+  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
+
   const canvasSettingProps = {
     setShowCanvasSettingModal,
   }
@@ -30,7 +35,33 @@ export default function FloorPlan() {
     setShowOutlineModal,
   }
 
-  useEffect(() => {}, [showOutlineModal])
+  useEffect(() => {
+    console.log('FloorPlan useEffect 실행')
+    fetchSettings()
+  }, [showOutlineModal, objectNo])
+
+  // Canvas Setting 조회
+  const fetchSettings = async () => {
+    try {
+      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
+      const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
+      const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
+
+      // 데이터 설정
+      setSettingModalFirstOptions({
+        option1: optionData1,
+        option2: optionData2,
+      })
+      setSettingModalSecondOptions({
+        option3: optionData3,
+        option4: optionData4,
+      })
+    } catch (error) {
+      console.error('Data fetching error:', error)
+    }
+  }
 
   return (
     <>

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

@@ -1,7 +1,7 @@
 import { useRecoilState } from 'recoil'
 import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
 import { useMessage } from '@/hooks/useMessage'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useAxios } from '@/hooks/useAxios'
 import { toastUp } from '@/hooks/useToast'
 
@@ -24,20 +24,19 @@ export default function FirstOption() {
   const fetchSettings = async () => {
     try {
       const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
-      //const option1 = settingModalFirstOptions.option1.map((item, index) => ({ ...item, selected: res[optionsData1[index]] }))
+      const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
-      const option1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
-      const option2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
-      const option3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
+      const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
-      const option4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
 
       // 데이터 설정
       setSettingModalFirstOptions({
-        option1,
+        option1: optionData1,
-        option2,
+        option2: optionData2,
       })
       setSettingModalSecondOptions({
-        option3,
+        option3: optionData3,
-        option4,
+        option4: optionData4,
       })
     } catch (error) {
       console.error('Data fetching error:', error)

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

@@ -1,7 +1,7 @@
 import { useRecoilState } from 'recoil'
 import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
 import { useMessage } from '@/hooks/useMessage'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useAxios } from '@/hooks/useAxios'
 import { toastUp } from '@/hooks/useToast'
 
@@ -24,20 +24,19 @@ export default function SecondOption() {
   const fetchSettings = async () => {
     try {
       const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
-
+      const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
-      const option1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
-      const option2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
-      const option3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
+      const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
-      const option4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
 
       // 데이터 설정
       setSettingModalFirstOptions({
-        option1,
+        option1: optionData1,
-        option2,
+        option2: optionData2,
       })
       setSettingModalSecondOptions({
-        option3,
+        option3: optionData3,
-        option4,
+        option4: optionData4,
       })
     } catch (error) {
       console.error('Data fetching error:', error)