src/common/common.js

@@ -214,6 +214,7 @@ export const SAVE_KEY = [
   'isSortedPoints',
   'isMultipleOf45',
   'from',
+  'originColor',
 ]
 
 export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype, fabric.Group.prototype]

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

@@ -262,6 +262,12 @@ export const Orientation = forwardRef((props, ref) => {
     setRoofsStore(newRoofs)
   }
 
+  useEffect(() => {
+    // 컴포넌트가 마운트될 때 selectedModules가 없으면 handleChangeModule 호출
+    if (moduleList.length > 0 && (!selectedModules || !selectedModules.itemId)) {
+      handleChangeModule(moduleList[0]);
+    }
+  }, [moduleList]); // 빈 의존성 배열로 마운트 시 한 번만 실행
   return (
     <>
       <div className="properties-setting-wrap">

src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx

@@ -103,11 +103,11 @@ export default function CircuitTrestleSetting({ id }) {
   }, [])
 
   const capture = async (type) => {
-    beforeCapture()
+    beforeCapture(type)
 
     await handleCanvasToPng(type)
 
-    afterCapture()
+    afterCapture(type)
 
     return new Promise((resolve) => {
       setTimeout(() => {
@@ -117,11 +117,23 @@ export default function CircuitTrestleSetting({ id }) {
   }
 
   // 캡쳐 전 처리
-  const beforeCapture = () => {
+  const beforeCapture = (type) => {
     setCanvasZoom(100)
     canvas.set({ zoom: 1 })
     canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
 
+    const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
+    const circuitNumberTexts = canvas.getObjects().filter((obj) => obj.name === 'circuitNumber')
+
+    if (type === 2) {
+      modules.forEach((module) => {
+        module.set({ originColor: module.fill, fill: null, strokeWidth: 2 })
+      })
+      circuitNumberTexts.forEach((text) => {
+        text.set({ visible: false })
+      })
+    }
+
     canvas.renderAll()
 
     // roof polygon들의 중간점 계산
@@ -169,13 +181,27 @@ export default function CircuitTrestleSetting({ id }) {
   }
 
   // 캡쳐 후 처리
-  const afterCapture = () => {
+  const afterCapture = (type) => {
     setCanvasZoom(100)
     canvas.set({ zoom: 1 })
     canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
     changeFontSize('lengthText', lengthText.fontSize.value)
     changeFontSize('circuitNumber', circuitNumberText.fontSize.value)
     changeFontSize('flowText', flowText.fontSize.value)
+
+    const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
+    const circuitNumberTexts = canvas.getObjects().filter((obj) => obj.name === 'circuitNumber')
+    if (type === 2) {
+      modules.forEach((module) => {
+        module.set({
+          fill: module.originColor,
+          strokeWidth: 0.3,
+        })
+      })
+      circuitNumberTexts.forEach((text) => {
+        text.set({ visible: true })
+      })
+    }
     canvas.renderAll()
   }
 

src/hooks/usePolygon.js

@@ -847,7 +847,8 @@ export const usePolygon = () => {
           // innerLine의 type을 polygonLine의 type으로 변경
           if (polygonLine.attributes?.type && innerLine.attributes) {
             // polygonLine.need = false
-            innerLine.attributes = { ...polygonLine.attributes }
+            innerLine.attributes.planeSize = innerLine.attributes.planeSize ?? polygonLine.attributes.planeSize
+            innerLine.attributes.actualSize = innerLine.attributes.actualSize ?? polygonLine.attributes.actualSize
             innerLine.direction = polygonLine.direction
             innerLine.attributes.isStart = true
           }