src/components/floor-plan/modal/setting01/FirstOption.jsx

@@ -1,8 +1,10 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { POLYGON_TYPE } from '@/common/common'
 import { useEvent } from '@/hooks/useEvent'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
+import { outlineDisplaySelector } from '@/store/settingAtom'
+import { useRecoilValue } from 'recoil'
 
 export default function FirstOption(props) {
   const { getMessage } = useMessage()
@@ -11,6 +13,7 @@ export default function FirstOption(props) {
   const { option1, option2, dimensionDisplay } = settingModalFirstOptions
   const { initEvent } = useEvent()
   const { setSurfaceShapePattern } = useRoofFn()
+  const outlineDisplay = useRecoilValue(outlineDisplaySelector)
 
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
@@ -18,6 +21,13 @@ export default function FirstOption(props) {
     setSettingsDataSave({ ...settingsData })
   }, [])
 
+  useEffect(() => {
+    const outline = canvas.getObjects().filter((obj) => obj.name === 'originRoofOuterLine')
+    outline.forEach((obj) => {
+      obj.visible = outlineDisplay
+    })
+  }, [outlineDisplay])
+
   const onClickOption = async (item) => {
     let dimensionDisplay = settingModalFirstOptions?.dimensionDisplay
     let option1 = settingModalFirstOptions?.option1
@@ -58,7 +68,12 @@ export default function FirstOption(props) {
       // setSettingModalFirstOptions({ ...settingModalFirstOptions, option1: [...options] })
     }
 
-    setSettingsData({ ...settingsData, option1: [...option1], option2: [...option2], dimensionDisplay: [...dimensionDisplay] })
+    setSettingsData({
+      ...settingsData,
+      option1: [...option1],
+      option2: [...option2],
+      dimensionDisplay: [...dimensionDisplay],
+    })
   }
 
   // useEffect(() => {

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -9,6 +9,7 @@ import {
   basicSettingState,
   correntObjectNoState,
   corridorDimensionSelector,
+  outlineDisplaySelector,
   roofDisplaySelector,
   roofMaterialsSelector,
   selectedRoofMaterialSelector,
@@ -59,9 +60,11 @@ export function useRoofAllocationSetting(id) {
   const { saveCanvas } = usePlan()
   const [roofsStore, setRoofsStore] = useRecoilState(roofsState)
   const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
+  const outerLinePoints = useRecoilValue(outerLinePointsState)
   const resetPoints = useResetRecoilState(outerLinePointsState)
   const [corridorDimension, setCorridorDimension] = useRecoilState(corridorDimensionSelector)
   const { changeCorridorDimensionText } = useText()
+  const outlineDisplay = useRecoilValue(outlineDisplaySelector)
 
   useEffect(() => {
     /** 배치면 초기설정에서 선택한 지붕재 배열 설정 */
@@ -303,11 +306,53 @@ export function useRoofAllocationSetting(id) {
       addPopup(popupId, 1, <ActualSizeSetting id={popupId} />)
     } else {
       apply()
+      //기존 지붕 선은 남겨둔다.
+      drawOriginRoofLine()
       resetPoints()
+
       basicSettingSave()
     }
   }
 
+  const drawOriginRoofLine = () => {
+    // outerLinePoints 배열을 이용하여 빨간색 Line 객체들 생성
+    if (outerLinePoints && outerLinePoints.length > 1) {
+      // 연속된 점들을 연결하여 라인 생성
+      for (let i = 0; i < outerLinePoints.length - 1; i++) {
+        const point1 = outerLinePoints[i]
+        const point2 = outerLinePoints[i + 1]
+
+        const line = new fabric.Line([point1.x, point1.y, point2.x, point2.y], {
+          stroke: 'black',
+          strokeDashArray: [5, 2],
+          strokeWidth: 1,
+          selectable: false,
+          name: 'originRoofOuterLine',
+          visible: outlineDisplay,
+        })
+
+        canvas.add(line)
+      }
+
+      // 마지막 점과 첫 점을 연결하여 폐곡선 만들기
+      if (outerLinePoints.length > 2) {
+        const lastPoint = outerLinePoints[outerLinePoints.length - 1]
+        const firstPoint = outerLinePoints[0]
+
+        const closingLine = new fabric.Line([lastPoint.x, lastPoint.y, firstPoint.x, firstPoint.y], {
+          stroke: 'red',
+          strokeWidth: 2,
+          selectable: false,
+          name: 'originRoofOuterLine',
+        })
+
+        canvas.add(closingLine)
+      }
+
+      canvas.renderAll()
+    }
+  }
+
   /**
    * 지붕재 오른쪽 마우스 클릭 후 단일로 지붕재 변경 필요한 경우
    */