[1036] : [プランをコピー/移動する時の自動保存について]

[작업내용] : 탭간 이동, 복사시 저장 여부 확인 로직 추가

src/components/floor-plan/CanvasLayout.jsx

@@ -37,7 +37,7 @@ export default function CanvasLayout({ children }) {
             <button
               key={`plan-${plan.id}`}
               className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`}
-              onClick={() => handleCurrentPlan(plan.id)}
+              onClick={() => (plan.isCurrent ? '' : handleCurrentPlan(plan.id))}
             >
               <span>{`Plan ${plan.planNo}`}</span>
               {plans.length > 1 && !pathname.includes('/estimate') && !pathname.includes('/simulator') && (

src/components/floor-plan/modal/basic/step/Placement.jsx

@@ -180,8 +180,8 @@ const Placement = forwardRef((props, refs) => {
                   ))}
                 </thead>
                 <tbody>
-                  {selectedModules.itemList &&
-                    selectedModules.itemList.map((item, index) => (
+                  {selectedModules?.itemList &&
+                    selectedModules?.itemList?.map((item, index) => (
                       <tr key={index}>
                         <td className="al-c">
                           <div className="d-check-box no-text pop">
@@ -329,7 +329,7 @@ const Placement = forwardRef((props, refs) => {
                 <tr>
                   <th rowSpan={2} style={{ width: '22%' }}></th>
                   {selectedModules &&
-                    selectedModules.itemList.map((item) => (
+                    selectedModules.itemList?.map((item) => (
                       // <th colSpan={colspan}>
                       <th>
                         <div className="color-wrap">
@@ -341,12 +341,13 @@ const Placement = forwardRef((props, refs) => {
                   {colspan > 1 && <th rowSpan={2}>{getMessage('modal.module.basic.setting.module.placement.max.rows.multiple')}</th>}
                 </tr>
                 <tr>
-                  {selectedModules.itemList.map((item) => (
-                    <>
-                      <th>{getMessage('modal.module.basic.setting.module.placement.max.row')}</th>
-                      {/* {colspan > 1 && <th>{getMessage('modal.module.basic.setting.module.placement.max.rows.multiple')}</th>} */}
-                    </>
-                  ))}
+                  {selectedModules &&
+                    selectedModules.itemList?.map((item) => (
+                      <>
+                        <th>{getMessage('modal.module.basic.setting.module.placement.max.row')}</th>
+                        {/* {colspan > 1 && <th>{getMessage('modal.module.basic.setting.module.placement.max.rows.multiple')}</th>} */}
+                      </>
+                    ))}
                 </tr>
               </thead>
               <tbody>

src/hooks/useCanvasEvent.js

@@ -206,9 +206,17 @@ export function useCanvasEvent() {
         selected.forEach((obj) => {
           // if (obj.type === 'QPolygon' && currentMenu !== MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING) {
           if (obj.type === 'QPolygon') {
+            const originStroke = obj.stroke
             obj.set({ stroke: 'red' })
-            if (obj.name === POLYGON_TYPE.MODULE && currentMenu === MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING) {
-              obj.set({ strokeWidth: 3 })
+
+            if (currentMenu === MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING) {
+              if (obj.name === POLYGON_TYPE.MODULE) {
+                obj.set({ strokeWidth: 3 })
+              }
+              if (obj.name === POLYGON_TYPE.ROOF) {
+                canvas.discardActiveObject()
+                obj.set({ stroke: originStroke })
+              }
             }
           }
         })

src/hooks/usePlan.js

@@ -407,12 +407,21 @@ export function usePlan(params = {}) {
           }
         })
     } else {
-      if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
-        await saveCanvas(true)
-        clearRecoilState()
-      }
-      setCurrentCanvasPlan(plans.find((plan) => plan.id === newCurrentId))
-      setPlans((plans) => plans.map((plan) => ({ ...plan, isCurrent: plan.id === newCurrentId })))
+      swalFire({
+        text: getMessage('plan.message.confirm.save'),
+        type: 'confirm',
+        confirmFn: async () => {
+          //저장 전에 플랜이 이동되어 state가 변경되는 이슈가 있음
+          await saveCanvas(true)
+          clearRecoilState()
+          setCurrentCanvasPlan(plans.find((plan) => plan.id === newCurrentId))
+          setPlans((plans) => plans.map((plan) => ({ ...plan, isCurrent: plan.id === newCurrentId })))
+        },
+        denyFn: async () => {
+          setCurrentCanvasPlan(plans.find((plan) => plan.id === newCurrentId))
+          setPlans((plans) => plans.map((plan) => ({ ...plan, isCurrent: plan.id === newCurrentId })))
+        },
+      })
     }
   }
 
@@ -447,9 +456,25 @@ export function usePlan(params = {}) {
    * @param {string} objectNo - 물건번호
    */
   const handleAddPlan = async (userId, objectNo) => {
+    let isSelected = false
+
     if (currentCanvasPlan?.id) {
-      await saveCanvas(false)
+      swalFire({
+        text: getMessage('plan.message.confirm.save'),
+        type: 'confirm',
+        confirmFn: async () => {
+          //저장 전에 플랜이 이동되어 state가 변경되는 이슈가 있음
+          await saveCanvas(true)
+          handleAddPlanCopyConfirm(userId, objectNo)
+        },
+        denyFn: async () => {
+          handleAddPlanCopyConfirm(userId, objectNo)
+        },
+      })
     }
+  }
+
+  const handleAddPlanCopyConfirm = async (userId, objectNo) => {
     if (JSON.parse(currentCanvasData()).objects.length > 0) {
       swalFire({
         text: `Plan ${currentCanvasPlan.planNo} ` + getMessage('plan.message.confirm.copy'),
@@ -471,7 +496,6 @@ export function usePlan(params = {}) {
       setIsGlobalLoading(false)
     }
   }
-
   /**
    * 물건번호(object) plan 삭제 (canvas 삭제 전 planNo 삭제)
    *