- canvas object 선택시 제일 앞으로 오는 현상 제거

- 지붕형상 설정 시 지붕재 경사와 연동

src/hooks/roofcover/useRoofShapeSetting.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
-import { useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, currentMenuState, currentObjectState, pitchTextSelector } from '@/store/canvasAtom'
 import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
 import { usePolygon } from '@/hooks/usePolygon'
@@ -9,9 +9,9 @@ import { useLine } from '@/hooks/useLine'
 import { outerLineFixState } from '@/store/outerLineAtom'
 import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
-import { getChonByDegree } from '@/util/canvas-util'
+import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
 import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
-import { settingModalFirstOptionsState } from '@/store/settingAtom'
+import { addedRoofsState, basicSettingState, settingModalFirstOptionsState } from '@/store/settingAtom'
 
 // 지붕형상 설정
 export function useRoofShapeSetting(id) {
@@ -52,6 +52,10 @@ export function useRoofShapeSetting(id) {
 
   const settingModalFirstOptions = useRecoilValue(settingModalFirstOptionsState)
 
+  const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState)
+
+  const [basicSetting, setBasicSetting] = useRecoilState(basicSettingState)
+
   useEffect(() => {
     pitchRef.current = currentAngleType === ANGLE_TYPE.SLOPE ? pitch : getChonByDegree(pitch)
   }, [pitch])
@@ -179,6 +183,11 @@ export function useRoofShapeSetting(id) {
       return
     }
 
+    if ([1, 2, 3, 5, 6, 7, 8].includes(shapeNum)) {
+      // 변별로 설정이 아닌 경우 경사를 지붕재에 적용해주어야함
+      setRoofPitch()
+    }
+
     switch (shapeNum) {
       case 1: {
         outerLines = saveRidge()
@@ -479,6 +488,22 @@ export function useRoofShapeSetting(id) {
     canvas.remove(tempPolygon)
   }
 
+  // 저장된 경사를 addedRoof 첫번째요소, basicSettings의 selectedRoofMaterial에 적용
+  const setRoofPitch = () => {
+    const newAddedRoofs = addedRoofs.map((roof, index) => {
+      if (index === 0) {
+        return { ...roof, pitch: pitchRef.current, angle: getDegreeByChon(pitchRef.current) }
+      } else {
+        return { ...roof }
+      }
+    })
+
+    const newBasicSetting = { ...basicSetting, selectedRoofMaterial: { ...newAddedRoofs[0] } }
+
+    setBasicSetting(newBasicSetting)
+    setAddedRoofs(newAddedRoofs)
+  }
+
   // 동, 서 선택 시 가로라인을 케라바로 설정
   const setWestAndEastRoof = (line) => {
     if (line.direction === 'left' || line.direction === 'right') {

src/hooks/useCanvas.js

@@ -34,6 +34,7 @@ export function useCanvas(id) {
       height: canvasSize.vertical,
       width: canvasSize.horizontal,
       backgroundColor: 'white',
+      preserveObjectStacking: true,
       selection: false,
     })