diff --git a/src/app/[locale]/roof2/RoofSelect.jsx b/src/app/[locale]/roof2/RoofSelect.jsx
new file mode 100644
index 00000000..3d14d535
--- /dev/null
+++ b/src/app/[locale]/roof2/RoofSelect.jsx
@@ -0,0 +1,47 @@
+'use client'
+
+import { Select, SelectItem } from '@nextui-org/react'
+import { useEffect, useState } from 'react'
+import { useAxios } from '@/hooks/useAxios'
+
+export default function RoofSelect() {
+  const [roofMaterials, setRoofMaterials] = useState([])
+  const [trestles, setTrestles] = useState([])
+
+  const { get } = useAxios()
+
+  const handleRoofMaterialOnChange = (e) => {
+    const id = e.target.value
+    setTrestles([])
+    get({ url: `/api/trestle/v1.0/trestles/${id}` }).then((res) => {
+      setTrestles(res)
+    })
+  }
+
+  useEffect(() => {
+    get({ url: '/api/roof-material/v1.0/roof-materials' }).then((res) => {
+      setRoofMaterials(res)
+    })
+  }, [])
+  return (
+    <>
+      <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+        {roofMaterials.length > 0 && (
+          <Select label="지붕재" className="max-w-xs" onChange={handleRoofMaterialOnChange}>
+            {roofMaterials.map((roofMaterial) => (
+              <SelectItem key={roofMaterial.id}>{roofMaterial.name}</SelectItem>
+            ))}
+          </Select>
+        )}
+
+        {trestles.length > 0 && (
+          <Select label="가대" className="max-w-xs">
+            {trestles.map((trestle) => (
+              <SelectItem key={trestle.id}>{trestle.name}</SelectItem>
+            ))}
+          </Select>
+        )}
+      </div>
+    </>
+  )
+}
diff --git a/src/app/[locale]/roof2/page.jsx b/src/app/[locale]/roof2/page.jsx
index c33a5a99..6e9df6bf 100644
--- a/src/app/[locale]/roof2/page.jsx
+++ b/src/app/[locale]/roof2/page.jsx
@@ -4,6 +4,7 @@ import Roof2 from '@/components/Roof2'
 import { textState } from '@/store/canvasAtom'
 import { useEffect } from 'react'
 import { useRecoilState } from 'recoil'
+import RoofSelect from '@/app/[locale]/roof2/RoofSelect'
 
 export default function Roof2Page() {
   const [text, setText] = useRecoilState(textState)
@@ -14,6 +15,11 @@ export default function Roof2Page() {
 
   return (
     <>
+      <div>
+        <div className="m-2">
+          <RoofSelect />
+        </div>
+      </div>
       <div className="flex flex-col justify-center my-8 pt-20">
         <Roof2 />
       </div>
diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 68303710..2a962254 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -18,6 +18,7 @@ import { QLine } from '@/components/fabric/QLine'
 import { getCanvasState, insertCanvasState } from '@/lib/canvas'
 import { calculateIntersection } from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
+import { useAxios } from '@/hooks/useAxios'
 
 export default function Roof2() {
   const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage, addCanvas } = useCanvas('canvas')
diff --git a/src/components/ui/QSelect.jsx b/src/components/ui/QSelect.jsx
index 6ebf2bd6..198595d5 100644
--- a/src/components/ui/QSelect.jsx
+++ b/src/components/ui/QSelect.jsx
@@ -1,5 +1,6 @@
 import { Select, SelectItem } from '@nextui-org/react'
 import styles from './QSelect.module.css'
+import { useEffect } from 'react'
 
 const animals = [
   { key: 'cat', label: 'Cat' },
@@ -18,6 +19,7 @@ const animals = [
 ]
 
 export default function QSelect() {
+  useEffect(() => {}, [])
   return (
     <>
       <div className="flex w-full flex-wrap md:flex-nowrap gap-4">