diff --git a/src/components/Playground.jsx b/src/components/Playground.jsx
index b650f940..519b23df 100644
--- a/src/components/Playground.jsx
+++ b/src/components/Playground.jsx
@@ -51,51 +51,8 @@ export default function Playground() {
 
   const [users, setUsers] = useState([])
 
-  const [trestleRequestData, setTrestleRequestData] = useState(trestleRequestModels)
-  const [constructionRequestData, setConstructionRequestData] = useState(constructionRequestModels)
-  const [trestleDetailRequestData, setTrestleDetailRequestData] = useState(trestleDetailRequestModels)
-
   useEffect(() => {
     console.log('textInput:', textInput)
-    setTrestleRequestData({
-      moduleTpCd: '',
-      roofMatlCd: '',
-      raftBaseCd: '',
-      trestleMkrCd: '',
-      constMthdCd: '',
-      roofBaseCd: '',
-    })
-
-    setConstructionRequestData({
-      moduleTpCd: 'testData_1',
-      roofMatlCd: 'testData_2',
-      trestleMkrCd: 'testData_3',
-      constMthdCd: 'testData_4',
-      roofBaseCd: 'testData_5',
-      illuminationTp: 'testData_6',
-      instHt: 'testData_7',
-      stdWindSpeed: 'testData_8',
-      stdSnowLd: 'testData_9',
-      inclCd: 'testData_10',
-      raftBaseCd: 'testData_11',
-      roofPitch: 30,
-    })
-
-    setTrestleDetailRequestData({
-      moduleTpCd: 'testData_1',
-      roofMatlCd: 'testData_2',
-      trestleMkrCd: 'testData_3',
-      constMthdCd: 'testData_4',
-      roofBaseCd: 'testData_5',
-      illuminationTp: 'testData_6',
-      instHt: 'testData_7',
-      stdWindSpeed: 'testData_8',
-      stdSnowLd: 'testData_9',
-      inclCd: 'testData_10',
-      constTp: 'testData_11',
-      mixMatlNo: 10,
-      roofPitch: 20,
-    })
   }, [textInput])
   useEffect(() => {
     console.log('numberInput:', numberInput)
@@ -288,8 +245,8 @@ export default function Playground() {
           </button>{' '}
           <button
             className="btn-frame deepgray"
-            onClick={() => {
-              getTrestleList(trestleRequestData)
+            onClick={() => { 
+              getTrestleList({moduleTpCd: '', roofMatlCd: '', raftBaseCd: '', trestleMkrCd: '', constMthdCd: '', roofBaseCd: '',}) //임시 데이터
             }}
           >
             가대 목록 조회 API 호출
@@ -297,7 +254,20 @@ export default function Playground() {
           <button
             className="btn-frame deepgray"
             onClick={() => {
-              getConstructionList(constructionRequestData)
+              getConstructionList({ //임시 데이터
+                moduleTpCd: 'testData_1',
+                roofMatlCd: 'testData_2',
+                trestleMkrCd: 'testData_3',
+                constMthdCd: 'testData_4',
+                roofBaseCd: 'testData_5',
+                illuminationTp: 'testData_6',
+                instHt: 'testData_7',
+                stdWindSpeed: 'testData_8',
+                stdSnowLd: 'testData_9',
+                inclCd: 'testData_10',
+                raftBaseCd: '',
+                roofPitch: 30,
+              })
             }}
           >
             시공법 목록 조회 API 호출
@@ -305,7 +275,21 @@ export default function Playground() {
           <button
             className="btn-frame deepgray"
             onClick={() => {
-              getTrestleDetailList(trestleDetailRequestData)
+              getTrestleDetailList({ //임시 데이터
+                moduleTpCd: 'testData_1',
+                roofMatlCd: 'testData_2',
+                trestleMkrCd: 'testData_3',
+                constMthdCd: 'testData_4',
+                roofBaseCd: 'testData_5',
+                illuminationTp: 'testData_6',
+                instHt: 'testData_7',
+                stdWindSpeed: 'testData_8',
+                stdSnowLd: 'testData_9',
+                inclCd: 'testData_10',
+                constTp: 'testData_11',
+                mixMatlNo: 30,
+                roofPitch: 0,
+              })
             }}
           >
             가대 상세 조회 API 호출
diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
index dc59b20b..341b31f7 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@@ -28,9 +28,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   const { basicSetting, setBasicSettings, fetchBasicSettings, basicSettingSave } = useCanvasSetting()
   const { findCommonCode } = useCommonCode()
   const [raftCodes, setRaftCodes] = useState([])
-  const [currentRoofMaterial, setCurrentRoofMaterial] = useState(basicSetting.selectedRoofMaterial)
-
-  const [roofLayout, setRoofLayout] = useState(basicSetting.selectedRoofMaterial.layout)
+  //const [currentRoofMaterial, setCurrentRoofMaterial] = useState(basicSetting.selectedRoofMaterial)
+  const [currentRoofMaterial, setCurrentRoofMaterial] = useState(basicSetting.roofs[0]) // 지붕재 정보
+  const [roofLayout, setRoofLayout] = useState(basicSetting.roofs[0].layout) // 지붕 레이아웃
 
   const roofRef = {
     roofCd: useRef(null),
@@ -49,8 +49,11 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
 
   useEffect(() => {
 
-    console.log('currentRoofMaterial', currentRoofMaterial)
-    console.log('basicSetting', basicSetting)
+     //console.log('currentRoofMaterial >>>>>>>>>>>>>>>>>>> ', currentRoofMaterial)
+    
+     console.log(' basicSetting.roofs[0] >>>>>>>>>>>>>>>>>>> ',  basicSetting.roofs[0])
+     //console.log('basicSetting >>>>>>>>>>>>>>>>>>> ', basicSetting)
+     console.log('roofLayout >>>>>>>>>>>>>>>>>>> ', roofLayout)
 
      setBasicSettings({
       ...basicSetting, 
@@ -70,6 +73,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   // Function to update the roofType and corresponding values
   const handleRoofTypeChange = (value) => {
     const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value)
+    console.log('selectedRoofMaterial >>>>>>>>>>>>>>>>>>> ', selectedRoofMaterial)
     setRoofLayout(selectedRoofMaterial.layout)
     setCurrentRoofMaterial(selectedRoofMaterial)
   }
diff --git a/src/hooks/common/useRoofFn.js b/src/hooks/common/useRoofFn.js
index 31e31d13..afe1c71e 100644
--- a/src/hooks/common/useRoofFn.js
+++ b/src/hooks/common/useRoofFn.js
@@ -12,8 +12,8 @@ export function useRoofFn() {
     const ratio = window.devicePixelRatio || 1
     const layout = roofMaterial.layout
 
-    let width = roofMaterial.width / 10
-    let height = roofMaterial.length / 10
+    let width = (roofMaterial.width ?? 226) / 10
+    let height = (roofMaterial.length ?? 158) / 10
     let roofStyle = 2
     const inputPatternSize = { width: width, height: height } //임시 사이즈
     const patternSize = { ...inputPatternSize } // 입력된 값을 뒤집기 위해
diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js
index a0936682..35d304c9 100644
--- a/src/hooks/option/useCanvasSetting.js
+++ b/src/hooks/option/useCanvasSetting.js
@@ -120,7 +120,6 @@ export function useCanvasSetting() {
     }
 
     const { id } = selectedRoofMaterial
-    //console.log('id', id)
     if (id !== undefined) console.log(getModuleTypeItemList(id))
   }, [selectedRoofMaterial])
 
@@ -130,7 +129,7 @@ export function useCanvasSetting() {
       return
     }
     const { data } = await getRoofMaterialList()
-
+    
     const roofLists = data.map((item, idx) => ({
       ...item,
       id: item.roofMatlCd,
@@ -266,7 +265,7 @@ export function useCanvasSetting() {
       let roofsRow = {}
       let roofsArray = {}
 
-      if (res) {
+      if (res.length > 0) {
         roofsRow = res.map((item) => {
           return {
             roofSizeSet: item.roofSizeSet,
@@ -289,12 +288,12 @@ export function useCanvasSetting() {
 
       } else {
 
-        roofsRow = {
+        roofsRow = [{
           roofSizeSet: 1,
           roofAngleSet: 'slope',
-        }
+        }]
 
-        roofsArray = {
+        roofsArray = [{
           roofApply: true,
           roofSeq: 1,
           roofMatlCd: 'ROOF_ID_WA_53A',
@@ -303,11 +302,8 @@ export function useCanvasSetting() {
           roofHajebichi: 0,
           roofGap: 'HEI_455',
           roofLayout: 'P',
-        }
+        }]
       }
-
-      console.log('roofsRow ', roofsRow)
-      console.log('roofsArray ', roofsArray)
       
       // 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
       const patternData = {
@@ -317,9 +313,21 @@ export function useCanvasSetting() {
       }
 
       console.log('patternData', patternData)
-
+      
       // 데이터 설정
-      setBasicSettings({ ...basicSetting, roofSizeSet: roofsRow[0].roofSizeSet, roofAngleSet: roofsRow[0].roofAngleSet, roofsData: roofsArray})
+      //setBasicSettings({ ...basicSetting, roofSizeSet: roofsRow[0].roofSizeSet, roofAngleSet: roofsRow[0].roofAngleSet, roofsData: roofsArray})
+    const addRoofs = []
+    roofMaterials.map((material) => {
+      if (material.id === roofsArray[0].roofMatlCd) {
+        //setRoofMaterials({ ...roofMaterials, layout: roofsArray[0].roofLayout })
+        addRoofs.push({ ...material, selected: true, layout: roofsArray[0].roofLayout })
+        setBasicSettings({ ...basicSetting, roofMaterials: material
+                                          , roofs: addRoofs
+                                          , roofSizeSet: roofsRow[0].roofSizeSet
+                                          , roofAngleSet: roofsRow[0].roofAngleSet
+                                          , roofsData: roofsArray })
+      }
+    })
 
       })
     } catch (error) {