From 7a548fbcce4f756bfbfb98741eb19f3888c395c5 Mon Sep 17 00:00:00 2001
From: Daseul Kim <amekimm@gmail.com>
Date: Wed, 16 Oct 2024 11:14:28 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=8B=A0=EA=B7=9C=20canvas=20plan=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EC=8B=9C=20=EB=B3=B5=EC=A0=9C=20=EC=97=AC?=
 =?UTF-8?q?=EB=B6=80=20=EC=84=A0=ED=83=9D=20=EB=A1=9C=EC=A7=81=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
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                       |  6 +++
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx
index 62cc737b..c2c54251 100644
--- a/src/components/floor-plan/CanvasLayout.jsx
+++ b/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}>
-          <span></span>
-        </button>
+        {plans.length < 10 && (
+          <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>
diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js
index 427fe511..6d74cd93 100644
--- a/src/hooks/usePlan.js
+++ b/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,