From c9ae8f87e0274102c1d5d49c54a92170282bf8a5 Mon Sep 17 00:00:00 2001 From: Daseul Kim Date: Fri, 11 Oct 2024 16:35:36 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20canvas=20plan=20=EC=A0=80=EC=9E=A5?= =?UTF-8?q?=20=EC=8B=9C=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=8F=99=EA=B8=B0?= =?UTF-8?q?=ED=99=94=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/CanvasLayout.jsx | 43 +++++++------------- src/hooks/usePlan.js | 47 +++++++++++++++++----- src/store/canvasAtom.js | 6 +++ 3 files changed, 56 insertions(+), 40 deletions(-) diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx index 98f5f36d..7a3e9323 100644 --- a/src/components/floor-plan/CanvasLayout.jsx +++ b/src/components/floor-plan/CanvasLayout.jsx @@ -7,15 +7,15 @@ import { useMessage } from '@/hooks/useMessage' import { useSwal } from '@/hooks/useSwal' import { usePlan } from '@/hooks/usePlan' import { globalLocaleStore } from '@/store/localeAtom' -import { currentCanvasPlanState, initCanvasPlansState } from '@/store/canvasAtom' +import { currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom' import { sessionStore } from '@/store/commonAtom' export default function CanvasLayout() { const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요 - const [plans, setPlans] = useState([]) const [planNum, setPlanNum] = useState(0) const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState) const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState) + const [plans, setPlans] = useRecoilState(plansState) const globalLocaleState = useRecoilValue(globalLocaleStore) const sessionState = useRecoilValue(sessionStore) @@ -32,40 +32,25 @@ export default function CanvasLayout() { html: getMessage('common.message.confirm.save') + `
${currentCanvasPlan.name}`, type: 'confirm', confirmFn: async () => { - saveCanvas(sessionState.userId) - /** - * TODO: 신규 canvas plan 저장 시 id, name 등 데이터 동기화 필요 (40~51Line) - */ - initCanvasPlans.map((initPlan) => { - if ('isNew' in initPlan) { - // console.log('================ isNew initPlan: ', initPlan) - setPlans((plans) => - plans.map((plan) => { - initPlan.isNew === plan.id - ? { ...plan, id: initPlan.id, name: initPlan.name, canvasStatus: initPlan.canvasStatus, isCurrent: plan.id === newCurrentId } - : { ...plan, isCurrent: plan.id === newCurrentId } - }), - ) - } - }) + await saveCanvas(sessionState.userId) + updateCurrentPlan(newCurrentId) }, denyFn: () => { - setPlans((plans) => - plans.map((plan) => { - return { ...plan, isCurrent: plan.id === newCurrentId } - }), - ) + updateCurrentPlan(newCurrentId) }, }) } else { - setPlans((plans) => - plans.map((plan) => { - return { ...plan, isCurrent: plan.id === newCurrentId } - }), - ) + updateCurrentPlan(newCurrentId) } } } + const updateCurrentPlan = (newCurrentId) => { + setPlans((plans) => + plans.map((plan) => { + return { ...plan, isCurrent: plan.id === newCurrentId } + }), + ) + } useEffect(() => { setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null) }, [plans]) @@ -86,7 +71,7 @@ export default function CanvasLayout() { // console.error('[DELETE] canvas-statuses res error :::::::: %o', error) }) } else { - setPlans(plans.filter((plan) => plan.id !== id)) + setPlans((plans) => plans.filter((plan) => plan.id !== id)) swalFire({ text: getMessage('common.message.delete') }) } diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js index e861f9f8..c7f6620e 100644 --- a/src/hooks/usePlan.js +++ b/src/hooks/usePlan.js @@ -1,5 +1,5 @@ import { useRecoilState } from 'recoil' -import { canvasState, currentCanvasPlanState, initCanvasPlansState } from '@/store/canvasAtom' +import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom' import { useAxios } from '@/hooks/useAxios' import { useMessage } from '@/hooks/useMessage' import { useSwal } from '@/hooks/useSwal' @@ -8,6 +8,7 @@ export function usePlan() { const [canvas, setCanvas] = useRecoilState(canvasState) const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState) const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState) + const [plans, setPlans] = useRecoilState(plansState) const { swalFire } = useSwal() const { getMessage } = useMessage() const { get, promisePost, promisePut, promiseDel } = useAxios() @@ -77,11 +78,12 @@ export function usePlan() { removeMouseLines() const canvasStr = addCanvas() const canvasStatus = dbToCanvasFormat(canvasToDbFormat(canvasStr)) - if (JSON.parse(canvasStr).objects.length === 0 && currentCanvasPlan.canvasStatus === undefined) { - // 빈 캔버스 + const initPlanData = initCanvasPlans.find((plan) => plan.id === currentCanvasPlan.id) + if (JSON.parse(canvasStr).objects.length === 0 && initPlanData === undefined) { + // 저장 안 된 빈 캔버스 return false - } else if (canvasStatus === currentCanvasPlan.canvasStatus) { - // 변경사항 없는 캔버스 + } else if (initPlanData && canvasStatus === initPlanData.canvasStatus) { + // 저장 되어있고 변경사항 없는 캔버스 return false } else { return true @@ -121,13 +123,16 @@ export function usePlan() { canvasStatus: canvasToDbFormat(canvasStatus), } - await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData }) + return await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData }) .then((res) => { swalFire({ text: getMessage('common.message.save') }) // console.log('[PUT] canvas-statuses res :::::::: %o', res) setInitCanvasPlans((initCanvasPlans) => initCanvasPlans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)), ) + setPlans((plans) => + plans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)), + ) }) .catch((error) => { swalFire({ text: error.message, icon: 'error' }) @@ -142,14 +147,34 @@ export function usePlan() { canvasStatus: canvasToDbFormat(canvasStatus), } - await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData }) + return await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData }) .then((res) => { swalFire({ text: getMessage('common.message.save') }) - setInitCanvasPlans([ - ...initCanvasPlans, - { id: res.data, name: currentCanvasPlan.objectNo + '-' + res.data, userId: userId, canvasStatus: canvasStatus, isNew: currentCanvasPlan.id }, - ]) // console.log('[POST] canvas-statuses response :::::::: %o', res) + setInitCanvasPlans((initCanvasPlans) => [ + ...initCanvasPlans, + { + id: res.data, + name: currentCanvasPlan.objectNo + '-' + res.data, + userId: userId, + canvasStatus: canvasStatus, + isNew: currentCanvasPlan.id, + }, + ]) + setPlans((plans) => + plans.map((plan) => + plan.id === currentCanvasPlan.id + ? { + ...plan, + id: res.data, + name: currentCanvasPlan.objectNo + '-' + res.data, + userId: userId, + canvasStatus: canvasStatus, + isNew: currentCanvasPlan.id, + } + : plan, + ), + ) }) .catch((error) => { swalFire({ text: error.message, icon: 'error' }) diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js index 9fb440c6..c622283b 100644 --- a/src/store/canvasAtom.js +++ b/src/store/canvasAtom.js @@ -264,6 +264,12 @@ export const currentCanvasPlanState = atom({ default: {}, }) +// 전체 canvas plan +export const plansState = atom({ + key: 'plan', + default: [], +}) + export const tempGridModeState = atom({ key: 'tempGridModeState', default: false,