コード
app/InventoryPricing.tsx
"use client";
import React, { useEffect, useState } from "react";
import { db } from "@/lib/firebase";
import { collection, getDocs } from "firebase/firestore";
import { productConverter } from "@/lib/productConverter";
import { ProductData } from "@/types/product";
export default function LogisticsInfo() {
const [products, setProducts] = useState<ProductData[]>([]);
//Firestoreのprodactsコレクションから取得
useEffect(() => {
const fetchProducts = async () => {
const ref = collection(db, "products").withConverter(productConverter);
const snapshot = await getDocs(ref);
const data = snapshot.docs.map((doc) => doc.data());
setProducts(data);
};
fetchProducts();
}, []);
return (
<table className="w-full border-collapse text-left text-sm">
<thead className="bg-gray-100 text-gray-700">
<tr>
<th className="p-2 border">保管場所</th>
<th className="p-2 border">保管温度区分</th>
<th className="p-2 border">出荷拠点</th>
<th className="p-2 border">梱包サイズ</th>
<th className="p-2 border">重量</th>
<th className="p-2 border">出荷制限</th>
</tr>
</thead>
<tbody>
{products.map((item, index) => (
<tr key={index}>
<td className="p-2 border">{item.storageLocation}</td>
<td className="p-2 border">{item.temperatureZone}</td>
<td className="p-2 border">{item.shippingBase}</td>
<td className="p-2 border">{item.packageSize}</td>
<td className="p-2 border">{item.weight}</td>
<td className="p-2 border">{item.shippingRestriction}</td>
</tr>
))}
</tbody>
</table>
);
}