48 lines
1.3 KiB
JavaScript
48 lines
1.3 KiB
JavaScript
'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>
|
|
</>
|
|
)
|
|
}
|