외벽선 속성 설정 추가

src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx

@@ -6,14 +6,19 @@ export default function PropertiesSetting(props) {
   const { getMessage } = useMessage()
   const { setShowPropertiesSettingModal } = props
 
-  const { handleSetEaves, handleSetGable, handleRollback, handleFix } = usePropertiesSetting()
+  const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting()
 
   return (
     <WithDraggable isShow={true}>
       <div className={`modal-pop-wrap ssm`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.canvas.setting.wallline.properties.setting')}</h1>
-          <button className="modal-close" onClick={() => setShowPropertiesSettingModal(false)}>
+          <button
+            className="modal-close"
+            onClick={() => {
+              closeModal(setShowPropertiesSettingModal)
+            }}
+          >
             닫기
           </button>
         </div>
@@ -34,7 +39,13 @@ export default function PropertiesSetting(props) {
             <button className="btn-frame modal mr5" onClick={handleRollback}>
               {getMessage('modal.cover.outline.rollback')}
             </button>
-            <button className="btn-frame modal act" onClick={handleFix}>
+            <button
+              className="btn-frame modal act"
+              onClick={() => {
+                handleFix()
+                setShowPropertiesSettingModal(false)
+              }}
+            >
               {getMessage('modal.cover.outline.finish')}
             </button>
           </div>

src/hooks/roofcover/usePropertiesSetting.js

@@ -1,27 +1,17 @@
 import { useEffect, useRef } from 'react'
+import { LINE_TYPE } from '@/common/common'
 import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
-import { LINE_TYPE } from '@/common/common'
 
 export function usePropertiesSetting() {
   const currentLine = useRef(null)
+  const currentIdx = useRef(-1)
   const canvas = useRecoilValue(canvasState)
 
   useEffect(() => {
-    initLineSetting()
+    selectNextLine()
   }, [])
 
-  useEffect(() => {
-    const lines = canvas?.getObjects().filter((obj) => obj.name === 'outerLine')
-    lines.forEach((line) => {
-      line.set({
-        type: line.type,
-        stroke: line.type === LINE_TYPE.WALLLINE.EAVES ? '#45CD7D' : line.type === LINE_TYPE.WALLLINE.GABLE ? '#3FBAE6' : '#000000',
-        strokeWidth: 4,
-      })
-    })
-  }, [currentLine.current])
-
   const handleSetEaves = () => {
     currentLine.current.set({
       stroke: '#45CD7D',
@@ -32,13 +22,12 @@ export function usePropertiesSetting() {
         pitch: 4,
       },
     })
-
-    nextLineSetting()
+    canvas.renderAll()
+    selectNextLine()
   }
 
   const handleSetGable = () => {
     currentLine.current.set({
-      type: LINE_TYPE.WALLLINE.GABLE,
       stroke: '#3FBAE6',
       strokeWidth: 4,
       attributes: {
@@ -46,44 +35,95 @@ export function usePropertiesSetting() {
         type: LINE_TYPE.WALLLINE.GABLE,
       },
     })
-
-    nextLineSetting()
+    canvas.renderAll()
+    selectNextLine()
   }
 
-  const initLineSetting = () => {
-    currentLine.current = canvas?.getObjects().filter((obj) => obj.name === 'outerLine')[0]
+  const selectNextLine = () => {
+    const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+    currentIdx.current++
+
+    if (currentIdx.current >= lines.length) {
+      currentIdx.current = lines.length
+      currentLine.current = lines[currentIdx.current - 1]
+      return
+    }
+
+    currentLine.current = lines[currentIdx.current]
 
     currentLine.current.set({
       stroke: '#EA10AC',
       strokeWidth: 4,
     })
 
-    canvas?.renderAll()
+    canvas.renderAll()
   }
 
-  const nextLineSetting = () => {
-    // currentLine.current의 값은 currentLine.current의 idx 다음 값, 없을 경우는 null
-    currentLine.current = canvas?.getObjects().find((obj) => obj.idx === currentLine.current.idx + 1)
+  const selectPrevLine = () => {
+    const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
 
-    if (!currentLine.current) {
-      canvas?.renderAll()
-      handleFix()
+    currentIdx.current--
+
+    if (currentIdx.current <= -1) {
+      currentIdx.current = -1
+      selectNextLine()
+      return
+    } else {
+      lines.forEach((line, index) => {
+        if (index >= currentIdx.current) {
+          delete line.attributes
+          line.set({
+            stroke: '#000000',
+            strokeWidth: 4,
+          })
+        }
+        currentIdx.current--
+        canvas.renderAll()
+        selectNextLine()
+      })
+    }
+  }
+
+  const handleRollback = () => {
+    selectPrevLine()
+  }
+
+  const handleFix = () => {
+    if (!confirm('외벽선 속성 설정을 완료하시겠습니까?')) {
+      return
+    }
+    const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+
+    lines.forEach((line) => {
+      line.set({
+        attributes: line.attributes ? line.attributes : { offset: 0, type: LINE_TYPE.WALLLINE.WALL },
+        stroke: '#000000',
+        strokeWidth: 4,
+      })
+    })
+
+    canvas.renderAll()
+  }
+
+  const closeModal = (fn) => {
+    if (!confirm('외벽선 속성 설정을 종료 하시겠습니까?')) {
       return
     }
 
-    currentLine.current = currentLine.current.set({
-      stroke: '#EA10AC',
-      strokeWidth: 4,
+    const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+
+    lines.forEach((line) => {
+      line.set({
+        attributes: { offset: 0, type: LINE_TYPE.WALLLINE.WALL },
+        stroke: '#000000',
+        strokeWidth: 4,
+      })
     })
 
-    canvas?.renderAll()
+    canvas.renderAll()
+
+    fn(false)
   }
 
-  const currentLineSetting = () => {}
-
-  const handleRollback = () => {}
-
-  const handleFix = () => {}
-
-  return { handleSetEaves, handleSetGable, handleRollback, handleFix }
+  return { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal }
 }