From e078940a5b28ddb84af3100ebdaf0525a2528838 Mon Sep 17 00:00:00 2001 From: changkyu choi Date: Tue, 24 Sep 2024 11:31:40 +0900 Subject: [PATCH] =?UTF-8?q?floor-plan=20=EC=8B=A4=ED=96=89=EC=8B=9C=20=20C?= =?UTF-8?q?anvas=20=EC=84=A4=EC=A0=95=20=EC=A0=95=EB=B3=B4=20=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.js | 1 + src/components/floor-plan/FloorPlan.jsx | 35 +++++++++++++++++-- .../modal/setting01/FirstOption.jsx | 19 +++++----- .../modal/setting01/SecondOption.jsx | 19 +++++----- 4 files changed, 52 insertions(+), 22 deletions(-) diff --git a/src/app/layout.js b/src/app/layout.js index 4f7acb9d..23419e0b 100644 --- a/src/app/layout.js +++ b/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'] }) diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index f7280734..446333b9 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/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 ( <> diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx index bf17944d..c5a02233 100644 --- a/src/components/floor-plan/modal/setting01/FirstOption.jsx +++ b/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 option1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] })) - const option2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] })) - const option3 = settingModalSecondOptions.option3.map((item) => ({ ...item })) - const option4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] })) + 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, - option2, + option1: optionData1, + option2: optionData2, }) setSettingModalSecondOptions({ - option3, - option4, + option3: optionData3, + option4: optionData4, }) } catch (error) { console.error('Data fetching error:', error) diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx index de453021..b031ac08 100644 --- a/src/components/floor-plan/modal/setting01/SecondOption.jsx +++ b/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 option1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] })) - const option2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] })) - const option3 = settingModalSecondOptions.option3.map((item) => ({ ...item })) - const option4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] })) + 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, - option2, + option1: optionData1, + option2: optionData2, }) setSettingModalSecondOptions({ - option3, - option4, + option3: optionData3, + option4: optionData4, }) } catch (error) { console.error('Data fetching error:', error)