지붕재 선택 보완

src/app/[locale]/roof2/RoofSelect.jsx

@@ -6,23 +6,68 @@ import { useAxios } from '@/hooks/useAxios'
 
 export default function RoofSelect() {
   const [roofMaterials, setRoofMaterials] = useState([])
+  const [manufacturers, setManufacturers] = useState([])
   const [trestles, setTrestles] = useState([])
+  const [originTrestles, setOriginTrestles] = useState([])
+
+  const [roofMaterialId, setRoofMaterialId] = useState(null)
+  const [manufacturerId, setManufacturerId] = useState(null)
 
   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) => {
+      if (res.length === 0) {
+        return
+      }
       setRoofMaterials(res)
     })
   }, [])
+
+  useEffect(() => {
+    if (!roofMaterialId) {
+      return
+    }
+
+    get({ url: `/api/trestle/v1.0/trestles/${roofMaterialId}` }).then((res) => {
+      if (res.length === 0) {
+        return
+      }
+      setOriginTrestles(res)
+      const manufactural = res.map((trestle) => {
+        return { id: trestle.manufacturerId, name: trestle.manufacturerName }
+      })
+      // Remove duplicates
+      const uniqueManufactural = Array.from(new Set(manufactural.map((a) => a.id))).map((id) => {
+        return manufactural.find((a) => a.id === id)
+      })
+
+      setManufacturers(uniqueManufactural)
+    })
+  }, [roofMaterialId])
+
+  useEffect(() => {
+    if (!manufacturerId) {
+      return
+    }
+
+    const trestles = originTrestles.filter((trestle) => trestle.manufacturerId === manufacturerId)
+    setTrestles(trestles)
+  }, [manufacturerId])
+
+  const handleRoofMaterialOnChange = (e) => {
+    const id = e.target.value
+    setRoofMaterialId(id)
+    setManufacturers([])
+    setManufacturerId(null)
+    setTrestles([])
+  }
+
+  const handleManufacturersOnChange = (e) => {
+    const id = Number(e.target.value)
+    setTrestles([])
+    setManufacturerId(id)
+  }
   return (
     <>
       <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
@@ -33,7 +78,13 @@ export default function RoofSelect() {
             ))}
           </Select>
         )}
-
+        {manufacturers.length > 0 && (
+          <Select label="제조 회사" className="max-w-xs" onChange={handleManufacturersOnChange}>
+            {manufacturers.map((manufacturer) => (
+              <SelectItem key={manufacturer.id}>{manufacturer.name}</SelectItem>
+            ))}
+          </Select>
+        )}
         {trestles.length > 0 && (
           <Select label="가대" className="max-w-xs">
             {trestles.map((trestle) => (

src/components/Roof2.jsx

@@ -18,7 +18,6 @@ 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'
 import ThumbnailLIst from './ui/ThumbnailLIst'
 
 export default function Roof2() {