feat: 신규 canvas plan 생성 시 복제 여부 선택 로직 추가

src/components/floor-plan/CanvasLayout.jsx

@@ -21,7 +21,7 @@ export default function CanvasLayout() {
 
   const { getMessage } = useMessage()
   const { swalFire } = useSwal()
-  const { getCanvasByObjectNo, delCanvasById, checkModifiedCanvasPlan, saveCanvas } = usePlan()
+  const { getCanvasByObjectNo, delCanvasById, checkModifiedCanvasPlan, saveCanvas, currentCanvasData } = usePlan()
 
   const handleCurrentPlan = (newCurrentId) => {
     // console.log('currentPlan newCurrentId: ', newCurrentId)
@@ -84,12 +84,25 @@ export default function CanvasLayout() {
     }
   }
 
-  const addNewPlan = () => {
+  const addEmptyPlan = () => {
     setPlans([...plans, { id: planNum, name: `Plan ${planNum + 1}`, objectNo: `${objectNo}` }])
     handleCurrentPlan(planNum)
     setPlanNum(planNum + 1)
   }
 
+  const addCopyPlan = () => {
+    const copyPlan = {
+      id: planNum,
+      name: `Plan ${planNum + 1}`,
+      objectNo: `${objectNo}`,
+      userId: sessionState.userId,
+      canvasStatus: currentCanvasData(),
+    }
+    setPlans((plans) => [...plans, copyPlan])
+    handleCurrentPlan(planNum)
+    setPlanNum(planNum + 1)
+  }
+
   useEffect(() => {
     if (!currentCanvasPlan) {
       getCanvasByObjectNo(sessionState.userId, objectNo).then((res) => {
@@ -100,7 +113,7 @@ export default function CanvasLayout() {
           handleCurrentPlan(res.at(-1).id) // last 데이터에 포커싱
           setPlanNum(res.length)
         } else {
-          addNewPlan()
+          addEmptyPlan()
         }
       })
     }
@@ -128,9 +141,27 @@ export default function CanvasLayout() {
             </button>
           ))}
         </div>
-        <button className="plane-add" onClick={addNewPlan}>
+        {plans.length < 10 && (
-          <span></span>
+          <button
-        </button>
+            className="plane-add"
+            onClick={() =>
+              JSON.parse(currentCanvasData()).objects.length > 0
+                ? swalFire({
+                    html: `${currentCanvasPlan.name} 을 복제하시겠습니까?`,
+                    type: 'confirm',
+                    confirmFn: () => {
+                      addCopyPlan()
+                    },
+                    denyFn: () => {
+                      addEmptyPlan()
+                    },
+                  })
+                : addEmptyPlan()
+            }
+          >
+            <span></span>
+          </button>
+        )}
       </div>
       <CanvasFrame plan={plans.find((plan) => plan.isCurrent === true)} />
     </div>

src/hooks/usePlan.js

@@ -72,6 +72,11 @@ export function usePlan() {
     // }, 1000)
   }
 
+  const currentCanvasData = () => {
+    removeMouseLines()
+    return addCanvas()
+  }
+
   /**
    * 실시간 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단
    */
@@ -231,6 +236,7 @@ export function usePlan() {
   return {
     canvas,
     removeMouseLines,
+    currentCanvasData,
     saveCanvas,
     addCanvas,
     checkModifiedCanvasPlan,