From a0de73083601603f022d61abced2697a0ba4094f Mon Sep 17 00:00:00 2001 From: Daseul Kim Date: Fri, 14 Feb 2025 11:17:20 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20=ED=95=A8=EC=88=98=20=EC=84=A4=EB=AA=85?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=88=98=EC=A0=95,=20?= =?UTF-8?q?=EB=B6=88=ED=95=84=EC=9A=94=20=EC=BD=94=EB=93=9C=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/usePlan.js | 102 ++++++++++++++++++++++++++++--------------- 1 file changed, 67 insertions(+), 35 deletions(-) diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js index 440a6319..c78448db 100644 --- a/src/hooks/usePlan.js +++ b/src/hooks/usePlan.js @@ -1,7 +1,7 @@ 'use client' import { useContext, useEffect, useState } from 'react' -import { usePathname, useRouter, useSearchParams } from 'next/navigation' +import { usePathname, useRouter } from 'next/navigation' import { useRecoilState, useResetRecoilState } from 'recoil' @@ -9,9 +9,8 @@ import { canvasState, currentCanvasPlanState, plansState } from '@/store/canvasA import { useAxios } from '@/hooks/useAxios' import { useMessage } from '@/hooks/useMessage' import { useSwal } from '@/hooks/useSwal' -import { useCanvas } from '@/hooks/useCanvas' import { SAVE_KEY } from '@/common/common' -import { readImage, removeImage } from '@/lib/fileAction' +import { removeImage } from '@/lib/fileAction' import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider' import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateController' import { outerLinePointsState } from '@/store/outerLineAtom' @@ -25,7 +24,7 @@ export function usePlan(params = {}) { const [canvas, setCanvas] = useRecoilState(canvasState) const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState) - const [plans, setPlans] = useRecoilState(plansState) // 전체 plan + const [plans, setPlans] = useRecoilState(plansState) const router = useRouter() const pathname = usePathname() @@ -40,7 +39,7 @@ export function usePlan(params = {}) { const resetPlacementShapeDrawingPoints = useResetRecoilState(placementShapeDrawingPointsState) /** - * 마우스 포인터의 가이드라인을 제거합니다. + * 마우스 포인터의 가이드라인 제거 */ const removeMouseLines = () => { if (canvas?._objects.length > 0) { @@ -50,26 +49,22 @@ export function usePlan(params = {}) { canvas?.renderAll() } + /** + * 현재 캔버스 데이터를 JSON 문자열로 직렬화 + * + * @returns {string} 직렬화된 캔버스 데이터 + */ const addCanvas = () => { const objs = canvas?.toJSON(SAVE_KEY) - const str = JSON.stringify(objs) - - // canvas?.clear() return str - - // setTimeout(() => { - // // 역직렬화하여 캔버스에 객체를 다시 추가합니다. - // canvas?.loadFromJSON(JSON.parse(str), function () { - // // 모든 객체가 로드되고 캔버스에 추가된 후 호출됩니다. - // console.log(canvas?.getObjects().filter((obj) => obj.name === 'roof')) - // canvas?.renderAll() // 캔버스를 다시 그립니다. - // }) - // }, 1000) } /** * 현재 캔버스에 그려진 데이터를 추출 + * + * @param {string} mode + * @returns {string} 캔버스 데이터 */ const currentCanvasData = (mode = '') => { removeMouseLines() @@ -111,6 +106,9 @@ export function usePlan(params = {}) { /** * DB에 저장된 데이터를 canvas에서 사용할 수 있도록 포맷화 + * + * @param {string} cs - DB에 저장된 캔버스 데이터 문자열 + * @returns {string} 캔버스에서 사용할 수 있도록 포맷팅된 문자열 */ const dbToCanvasFormat = (cs) => { return cs.replace(/##/g, '"').replace(/∠/g, '∠').replace(/°/g, '°') @@ -118,6 +116,9 @@ export function usePlan(params = {}) { /** * canvas의 데이터를 DB에 저장할 수 있도록 포맷화 + * + * @param {string} cs - 캔버스 데이터 문자열 + * @returns {string} DB 저장용 포맷 문자열 */ const canvasToDbFormat = (cs) => { return cs.replace(/"/g, '##') @@ -125,6 +126,8 @@ export function usePlan(params = {}) { /** * 페이지 내 캔버스를 저장 + * + * @param {boolean} saveAlert - 저장 완료 알림 표시 여부 */ const saveCanvas = async (saveAlert = true) => { const canvasStatus = currentCanvasData('save') @@ -133,6 +136,10 @@ export function usePlan(params = {}) { /** * objectNo에 해당하는 canvas 목록을 조회 + * + * @param {string} objectNo - 물건번호 + * @param {string} planNo - 플랜번호 + * @returns {Promise} canvas 목록 */ const getCanvasByObjectNo = async (objectNo, planNo) => { return await get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` }).then((res) => @@ -152,6 +159,11 @@ export function usePlan(params = {}) { /** * 신규 plan 추가 * + * @param {string} userId - 사용자 ID + * @param {string} objectNo - 물건번호 + * @param {boolean} isCopy - 복제 여부 + * @param {boolean} isInitPlan - 초기 플랜 생성 여부 + * * case 1) 초기 플랜 생성 : isInitPlan = true, isCopy = false * case 2) 빈 플랜 생성 : isInitPlan = false, isCopy = false * case 3) 복제 플랜 생성 : isInitPlan = false, isCopy = true @@ -183,12 +195,12 @@ export function usePlan(params = {}) { } if (isInitPlan) { - // 초기 플랜 생성인 경우 플랜 목록 초기화 + /* 초기 플랜 생성인 경우 플랜 목록 초기화 */ setCurrentCanvasPlan(newPlan) setPlans([newPlan]) } else { if (isCopy) { - // 복제 플랜 생성인 경우 현재 캔버스 데이터를 복제 + /* 복제 플랜 생성인 경우 현재 캔버스 데이터를 복제 */ newPlan.canvasStatus = currentCanvasData() newPlan.bgImageName = currentCanvasPlan?.bgImageName ?? null newPlan.mapPositionAddress = currentCanvasPlan?.mapPositionAddress ?? null @@ -205,6 +217,9 @@ export function usePlan(params = {}) { /** * id에 해당하는 canvas 데이터를 수정 + * + * @param {string} canvasStatus - 캔버스 데이터 + * @param {boolean} saveAlert - 저장 완료 알림 표시 여부 */ const putCanvasStatus = async (canvasStatus, saveAlert = true) => { const planData = { @@ -225,6 +240,9 @@ export function usePlan(params = {}) { /** * id에 해당하는 canvas 데이터를 삭제 + * + * @param {string} id - canvas ID + * @returns {Promise} 결과 */ const delCanvasById = async (id) => { return await promiseDel({ url: `/api/canvas-management/canvas-statuses/by-id/${id}` }) @@ -232,6 +250,9 @@ export function usePlan(params = {}) { /** * objectNo에 해당하는 canvas 데이터들을 삭제 + * + * @param {string} objectNo - 물건번호 + * @returns {Promise} 결과 */ const delCanvasByObjectNo = async (objectNo) => { return await promiseDel({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` }) @@ -240,6 +261,8 @@ export function usePlan(params = {}) { /** * plan 이동 * 현재 plan의 작업상태를 저장 후 이동 + * + * @param {string} newCurrentId - 이동할 plan ID */ const handleCurrentPlan = async (newCurrentId) => { const planNo = plans?.find((obj) => obj.id === newCurrentId).planNo @@ -298,7 +321,6 @@ export function usePlan(params = {}) { } else { if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) { await saveCanvas(true) - clearRecoilState() } setCurrentCanvasPlan(plans.find((plan) => plan.id === newCurrentId)) @@ -309,27 +331,30 @@ export function usePlan(params = {}) { useEffect(() => { setSelectedPlan(currentCanvasPlan) handleCurrentPlanUrl() - // setBgImage() }, [currentCanvasPlan]) + /** + * clear가 필요한 recoil state 관리 + */ const clearRecoilState = () => { - //clear가 필요한 recoil state 관리 resetOuterLinePoints() resetPlacementShapeDrawingPoints() } + /** + * 현재 plan의 정보를 URL에 추가 + */ const handleCurrentPlanUrl = () => { if (currentCanvasPlan?.planNo && currentCanvasPlan?.objectNo) router.push(`${pathname}?pid=${currentCanvasPlan?.planNo}&objectNo=${currentCanvasPlan?.objectNo}`) } - const setBgImage = () => { - // readImage(selectedPlan?.id) - } - /** * 새로운 plan 생성 * 현재 plan의 데이터가 있을 경우 현재 plan 저장 및 복제 여부를 확인 + * + * @param {string} userId - 사용자 ID + * @param {string} objectNo - 물건번호 */ const handleAddPlan = async (userId, objectNo) => { if (currentCanvasPlan?.id) { @@ -351,6 +376,11 @@ export function usePlan(params = {}) { /** * 물건번호(object) plan 삭제 (canvas 삭제 전 planNo 삭제) + * + * @param {string} userId - 사용자 ID + * @param {string} objectNo - 물건번호 + * @param {string} planNo - 플랜번호 + * @returns {Promise} 결과 */ const deleteObjectPlan = async (userId, objectNo, planNo) => { return await promiseDel({ url: `/api/object/plan/${objectNo}/${planNo}?userId=${userId}` }) @@ -365,6 +395,9 @@ export function usePlan(params = {}) { /** * plan 삭제 + * + * @param {Event} e - 이벤트 + * @param {Object} targetPlan - 삭제할 plan */ const handleDeletePlan = async (e, targetPlan) => { e.stopPropagation() // 이벤트 버블링 방지 @@ -382,7 +415,7 @@ export function usePlan(params = {}) { swalFire({ text: error.message, icon: 'error' }) }) - // 삭제 후 last 데이터에 포커싱 + /* 삭제 후 last 데이터에 포커싱 */ const lastPlan = plans.filter((plan) => plan.id !== targetPlan.id).at(-1) if (!lastPlan) { setCurrentCanvasPlan(null) @@ -394,6 +427,10 @@ export function usePlan(params = {}) { /** * plan 조회 + * + * @param {string} userId - 사용자 ID + * @param {string} objectNo - 물건번호 + * @param {string} planNo - 플랜번호 */ const loadCanvasPlanData = async (userId, objectNo, planNo) => { console.log('🚀 ~ loadCanvasPlanData ~ userId, objectNo, planNo:', userId, objectNo, planNo) @@ -417,8 +454,10 @@ export function usePlan(params = {}) { /** * plan canvasStatus 불러오기 - * * 견적서/발전시뮬레이션에서 플랜 이동 시 현재 플랜의 canvasStatus를 불러오기 위해 사용 + * + * @param {string} objectNo - 물건번호 + * @param {string} planNo - 플랜번호 */ const reloadCanvasStatus = async (objectNo, planNo) => { if (pathname === '/floor-plan/estimate/5' || pathname === '/floor-plan/simulator/6') { @@ -431,13 +470,6 @@ export function usePlan(params = {}) { } } - /** - * 현재 plan 이동 -> 새로운 링크로 이동 - */ - const handlePlanMove = () => { - router.push(`${pathname}?objectNo=${floorPlanState.objectNo}&pid=${currentCanvasPlan?.planNo}`) - } - return { canvas, plans,