- 캔버스 renderAll 추가

- 배치면 초기설정 값 유지

src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx

@@ -23,6 +23,7 @@ export default function ContextRoofAllocationSetting(props) {
     onAddRoofMaterial,
     onDeleteRoofMaterial,
     roofMaterials,
+    currentRoofMaterial,
     setCurrentRoofMaterial,
     roofList,
     handleDefaultRoofMaterial,
@@ -67,7 +68,7 @@ export default function ContextRoofAllocationSetting(props) {
                     options={roofMaterials.map((roof) => {
                       return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp }
                     })}
-                    value={roofMaterials[0]}
+                    value={currentRoofMaterial}
                     onChange={(e) => {
                       // const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id)
                       setCurrentRoofMaterial(e)

src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx

@@ -1,10 +1,14 @@
 import { useMessage } from '@/hooks/useMessage'
 import { useRecoilValue } from 'recoil'
 import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
+import { selectedRoofMaterialSelector } from '@/store/settingAtom'
+import { useEffect } from 'react'
 
 export default function Eaves({ offsetRef, pitchRef, pitchText }) {
   const { getMessage } = useMessage()
   const currentAngleType = useRecoilValue(currentAngleTypeSelector)
+  const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
+
   return (
     <>
       <div className="outline-form mb10">
@@ -12,7 +16,12 @@ export default function Eaves({ offsetRef, pitchRef, pitchText }) {
           {getMessage('slope')}
         </span>
         <div className="input-grid mr5">
-          <input type="text" className="input-origin block" defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8} ref={pitchRef} />
+          <input
+            type="text"
+            className="input-origin block"
+            defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? selectedRoofMaterial.pitch : selectedRoofMaterial.angle}
+            ref={pitchRef}
+          />
         </div>
         <span className="thin">{pitchText}</span>
       </div>

src/hooks/module/useTrestle.js

@@ -672,7 +672,8 @@ export const useTrestle = () => {
     // roofSurfaceList 생성
     const roofSurfaceList = surfaces.map((surface) => {
       const parent = canvas.getObjects().find((obj) => obj.id === surface.parentId)
-      const { directionText, roofMaterial, pitch: slope, moduleCompass, surfaceCompass } = parent
+      const { directionText, roofMaterial, moduleCompass, surfaceCompass } = parent
+      const slope = Number(roofMaterial.pitch)
       const roofMaterialIndex = parent.roofMaterial.index
       const { nameJp: roofMaterialIdMulti } = roofMaterial
       const moduleSelection = moduleSelectionData?.roofConstructions?.find((construction) => construction.roofIndex === roofMaterialIndex)

src/hooks/roofcover/useEavesGableEdit.js

@@ -190,6 +190,8 @@ export function useEavesGableEdit(id) {
       convertPolygonToLines(wallLine)
     })
 
+    canvas.renderAll()
+
     addCanvasMouseEventListener('mouse:over', mouseOverEvent)
     addCanvasMouseEventListener('mouse:down', mouseDownEvent)
   }

src/hooks/roofcover/useRoofShapeSetting.js

@@ -11,7 +11,13 @@ import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
 import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
 import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
-import { addedRoofsState, basicSettingState, correntObjectNoState, settingModalFirstOptionsState } from '@/store/settingAtom'
+import {
+  addedRoofsState,
+  basicSettingState,
+  correntObjectNoState,
+  selectedRoofMaterialSelector,
+  settingModalFirstOptionsState,
+} from '@/store/settingAtom'
 import { useAxios } from '@/hooks/useAxios'
 import { globalLocaleStore } from '@/store/localeAtom'
 
@@ -25,15 +31,16 @@ export function useRoofShapeSetting(id) {
   const currentAngleType = useRecoilValue(currentAngleTypeSelector)
   const pitchText = useRecoilValue(pitchTextSelector)
   const { addPolygonByLines } = usePolygon()
+  const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
 
-  const [pitch, setPitch] = useState(currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8) // 경사
+  const [pitch, setPitch] = useState(currentAngleType === ANGLE_TYPE.SLOPE ? selectedRoofMaterial.pitch : selectedRoofMaterial.angle) // 경사
   const [eavesOffset, setEavesOffset] = useState(500) // 처마출폭
   const [gableOffset, setGableOffset] = useState(300) // 케라바출폭
   const [sleeveOffset, setSleeveOffset] = useState(300) // 소매출폭
   const [jerkinHeadWidth, setJerkinHeadWidth] = useState(800) // 반절처 폭
   const [jerkinHeadPitch, setJerkinHeadPitch] = useState(currentAngleType === ANGLE_TYPE.SLOPE ? 4.5 : 20) // 반절처 경사
   const [hipAndGableWidth, setHipAndGableWidth] = useState(800) // 팔작지붕 폭
-  const [shedPitch, setShedPitch] = useState(currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8) // 팔작지붕 폭
+  const [shedPitch, setShedPitch] = useState(currentAngleType === ANGLE_TYPE.SLOPE ? selectedRoofMaterial.pitch : selectedRoofMaterial.angle) // 팔작지붕 폭
   const [shedWidth, setShedWidth] = useState(300) // 한쪽흐름 폭
   const [hasSleeve, setHasSleeve] = useState('0')
   const currentObject = useRecoilValue(currentObjectState)