설치 가능 모듈 추가

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

@@ -8,10 +8,12 @@ export default function RoofSelect() {
   const [roofMaterials, setRoofMaterials] = useState([])
   const [manufacturers, setManufacturers] = useState([])
   const [trestles, setTrestles] = useState([])
+  const [modules, setModules] = useState([])
   const [originTrestles, setOriginTrestles] = useState([])
 
   const [roofMaterialId, setRoofMaterialId] = useState(null)
   const [manufacturerId, setManufacturerId] = useState(null)
+  const [trestleId, setTrestleId] = useState(null)
 
   const { get } = useAxios()
 
@@ -55,44 +57,73 @@ export default function RoofSelect() {
     setTrestles(trestles)
   }, [manufacturerId])
 
+  useEffect(() => {
+    if (!trestleId) {
+      return
+    }
+    console.log(roofMaterialId, trestleId)
+    get({ url: `/api/module/v1.0/modules/${roofMaterialId}/${trestleId}` }).then((res) => {
+      if (res.length === 0) {
+        return
+      }
+      setModules(res)
+    })
+  }, [trestleId])
+
   const handleRoofMaterialOnChange = (e) => {
-    const id = e.target.value
-    setRoofMaterialId(id)
+    const roofMaterialId = e.target.value
+    setRoofMaterialId(roofMaterialId)
     setManufacturers([])
     setManufacturerId(null)
+    setTrestleId(null)
     setTrestles([])
+    setModules([])
   }
 
   const handleManufacturersOnChange = (e) => {
-    const id = Number(e.target.value)
+    const manufacturerId = Number(e.target.value)
     setTrestles([])
-    setManufacturerId(id)
+    setManufacturerId(manufacturerId)
+    setTrestleId(null)
+    setModules([])
   }
+
+  const handleTrestlesOnChange = (e) => {
+    const trestleId = Number(e.target.value)
+    setTrestleId(trestleId)
+    setModules([])
+  }
+
   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>
-        )}
-        {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) => (
-              <SelectItem key={trestle.id}>{trestle.name}</SelectItem>
-            ))}
-          </Select>
-        )}
-      </div>
-    </>
+    <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>
+      )}
+      {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" onChange={handleTrestlesOnChange}>
+          {trestles.map((trestle) => (
+            <SelectItem key={trestle.id}>{trestle.name}</SelectItem>
+          ))}
+        </Select>
+      )}
+      {modules.length > 0 && (
+        <Select label="설치가능 모듈" className="max-w-xs">
+          {modules.map((module) => (
+            <SelectItem key={module.id}>{module.name}</SelectItem>
+          ))}
+        </Select>
+      )}
+    </div>
   )
 }