배치면초기설정 수정 - setCurrentRoof 사용 및 roofMaterials 초기 설정 적용

src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx

@@ -49,7 +49,6 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   }, [])
 
   useEffect(() => {
-    if (currentRoof.roofMatlCd.length > 0) {
       setBasicSettings({
         ...basicSetting,
         roofsData: {
@@ -63,7 +62,6 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
           roofLayout: currentRoof.layout,
         },
       })
-    }
   }, [basicSetting.roofSizeSet, basicSetting.roofAngleSet, currentRoof])
 
   // Function to update the roofType and corresponding values
@@ -245,13 +243,11 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           options={roofMaterials.map((roof, index) => {
                             return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp }
                           })}
-                          //value={roofMaterials.find((r) => r.roofMatlCd === basicSetting.roofs[0]?.roofMatlCd)}
-                          //title={basicSetting.roofs[0]?.roofMatlNm}
                           value={basicSetting.roofSizeSet == 3 ? null : currentRoof.roofMatlCd}                          
                           onChange={(e) => handleRoofTypeChange(e.roofMatlCd)}
-                          //sourceKey="id"
+                          sourceKey="id"
-                          //targetKey="id"
+                          targetKey="id"
-                          //showKey="name"
+                          showKey="name"
                           disabled={basicSetting.roofSizeSet == 3}
                         />
                         {/* <select

src/hooks/option/useCanvasSetting.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
 import {
   adsorptionPointModeState,
@@ -145,11 +145,20 @@ export function useCanvasSetting() {
     setBasicSettings({ ...basicSetting, selectedRoofMaterial: selectedRoofMaterial })
   }
 
-  useEffect(() => {
+  const previousRoofMaterialsRef = useRef(null);
+
+  useEffect(() => { // 지붕재 select 정보 비교 후 변경된 것이 없으면 1회만 실행
+    if (JSON.stringify(previousRoofMaterialsRef.current) !== JSON.stringify(roofMaterials)) {
+
+      // 지붕재 select 정보가 존재해야 배치면초기설정 DB 정보 비교 후 지붕재 정보를 가져올 수 있음
       if (roofMaterials) {
-    fetchBasicSettings()
+        fetchBasicSettings();
       }
-  }, [roofMaterials])
+
+      // 이전 값을 업데이트
+      previousRoofMaterialsRef.current = roofMaterials;
+    }
+  }, [roofMaterials]);
 
   useEffect(() => {
     if (!canvas) {