From 7a0db7abfbfbe1dcc4dd16e46740520e4ab3ed82 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Thu, 7 Aug 2025 18:21:54 +0900
Subject: [PATCH] =?UTF-8?q?capture=20=EC=B2=98=EB=A6=AC=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/common/common.js                          |  1 +
 .../circuitTrestle/CircuitTrestleSetting.jsx  | 34 ++++++++++++++++---
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/common/common.js b/src/common/common.js
index d2461d28..61fdabd1 100644
--- a/src/common/common.js
+++ b/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]
diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
index f7ad4d7c..44deb1a0 100644
--- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
+++ b/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()
   }