From 7c39bb811fc87664c160df4dca200c4e141191b8 Mon Sep 17 00:00:00 2001 From: Daseul Kim Date: Thu, 26 Sep 2024 10:24:18 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20canvas=20status=20=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=20=EB=A1=9C=EC=A7=81=20=ED=95=A8=EC=88=98=EB=A1=9C=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC,=20canvas=20data=20=ED=8F=AC=EB=A7=B7=20?= =?UTF-8?q?=ED=95=A8=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/CanvasLayout.jsx | 38 ++++++++------------ src/hooks/usePlan.js | 40 +++++++++++++++++++--- 2 files changed, 50 insertions(+), 28 deletions(-) diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx index 2a5e3dcd..4f714d80 100644 --- a/src/components/floor-plan/CanvasLayout.jsx +++ b/src/components/floor-plan/CanvasLayout.jsx @@ -3,18 +3,19 @@ import { useEffect, useState } from 'react' import { useRecoilState, useRecoilValue } from 'recoil' import CanvasFrame from './CanvasFrame' -import { useAxios } from '@/hooks/useAxios' +import { usePlan } from '@/hooks/usePlan' import { globalLocaleStore } from '@/store/localeAtom' import { currentCanvasPlanState, initCanvasPlansState } from '@/store/canvasAtom' export default function CanvasLayout() { const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요 const [addCanvasPlans, setAddCanvasPlans] = useState([]) - const [idxNum, setIdxNum] = useState(0) + const [planNum, setPlanNum] = useState(0) const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState) const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState) const globalLocaleState = useRecoilValue(globalLocaleStore) - const { get } = useAxios(globalLocaleState) + + const { getObjectCanvasList } = usePlan() const handleCurrentPlan = (newCurrentId) => { if (!currentCanvasPlan?.id || currentCanvasPlan.id !== newCurrentId) { @@ -46,7 +47,7 @@ export default function CanvasLayout() { const combinedPlans = [...filterInitPlans, ...filterAddPlans] if (combinedPlans.length === 0) { // 모든 데이터가 삭제된 경우 - setIdxNum(0) + setPlanNum(0) } else { const lastPlanId = combinedPlans.at(-1).id if (id !== lastPlanId) { @@ -56,29 +57,18 @@ export default function CanvasLayout() { } const addNewPlan = () => { - setAddCanvasPlans([...addCanvasPlans, { id: idxNum, name: `Plan ${idxNum + 1}`, objectNo: `${objectNo}` }]) - handleCurrentPlan(idxNum) - setIdxNum(idxNum + 1) + setAddCanvasPlans([...addCanvasPlans, { id: planNum, name: `Plan ${planNum + 1}`, objectNo: `${objectNo}` }]) + handleCurrentPlan(planNum) + setPlanNum(planNum + 1) } useEffect(() => { - get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` }).then((res) => { - // console.log('canvas 목록 ', res) - const arrangeData = res.map((item) => { - const test = item.canvasStatus.replace(/##/g, '"').replace(/\\/g, '') - const test2 = test.substring(1, test.length - 1) - return { - id: item.id, - name: item.objectNo + '-' + item.id, // tab button에 표출될 이름 - userId: item.userId, - canvasStatus: JSON.stringify(test2), - isCurrent: false, - } - }) - if (arrangeData.length > 0) { - setInitCanvasPlans(arrangeData) - handleCurrentPlan(arrangeData.at(-1).id) // last 데이터에 포커싱 - setIdxNum(arrangeData.length) + getObjectCanvasList(objectNo).then((res) => { + console.log('canvas 목록 ', res) + if (res.length > 0) { + setInitCanvasPlans(res) + handleCurrentPlan(res.at(-1).id) // last 데이터에 포커싱 + setPlanNum(res.length) } else { addNewPlan() } diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js index 040c6ff1..d326f847 100644 --- a/src/hooks/usePlan.js +++ b/src/hooks/usePlan.js @@ -1,4 +1,3 @@ -import { useState } from 'react' import { useRecoilState } from 'recoil' import { canvasState, currentCanvasPlanState, initCanvasPlansState } from '@/store/canvasAtom' import { useAxios } from '@/hooks/useAxios' @@ -10,7 +9,7 @@ export function usePlan() { const [currentCanvasPlan, setcurrentCanvasPlan] = useRecoilState(currentCanvasPlanState) const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState) const { getMessage } = useMessage() - const { post, promisePost, put, promisePut } = useAxios() + const { get, promisePost, promisePut } = useAxios() /** * 마우스 포인터의 가이드라인을 제거합니다. @@ -65,6 +64,20 @@ export function usePlan() { // }, 1000) } + /** + * DB에 저장된 데이터를 canvas에서 사용할 수 있도록 포맷화 + */ + const dbToCanvasFormat = (cs) => { + return JSON.stringify(cs.replace(/##/g, '"').replace(/\\/g, '').slice(1, -1)) + } + + /** + * canvas의 데이터를 DB에 저장할 수 있도록 포맷화 + */ + const canvasToDbFormat = (cs) => { + return JSON.stringify(cs).replace(/"/g, '##') + } + /** * 페이지 내 캔버스를 저장하는 함수 * @@ -81,13 +94,16 @@ export function usePlan() { // canvas 수정 const planData = { id: currentCanvasPlan.id, - canvasStatus: JSON.stringify(canvasStatus).replace(/"/g, '##'), + canvasStatus: canvasToDbFormat(canvasStatus), } await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData }) .then((res) => { toastUp({ message: getMessage('res.message'), type: 'success' }) // 성공 시 메세지 없음 console.log('[PUT] canvas-statuses res :::::::: %o', res) + setInitCanvasPlans((initCanvasPlans) => + initCanvasPlans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)), + ) }) .catch((error) => { toastUp({ message: getMessage(error.message), type: 'error' }) @@ -99,7 +115,7 @@ export function usePlan() { userId: 'NEW016610', // userId, imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요 objectNo: currentCanvasPlan.objectNo, - canvasStatus: JSON.stringify(canvasStatus).replace(/"/g, '##'), + canvasStatus: canvasToDbFormat(canvasStatus), } await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData }) @@ -114,10 +130,26 @@ export function usePlan() { } } + /** + * objectNo에 해당하는 canvas 목록을 조회하는 함수 + */ + const getObjectCanvasList = (objectNo) => { + return get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` }).then((res) => + res.map((item) => ({ + id: item.id, + name: item.objectNo + '-' + item.id, // tab button에 표출될 이름 (임시) + userId: item.userId, + canvasStatus: dbToCanvasFormat(item.canvasStatus), + isCurrent: false, + })), + ) + } + return { canvas, removeMouseLines, saveCanvas, addCanvas, + getObjectCanvasList, } }