feat: ReceptionCardに画像を追加

ricora · Nov 17, 2024 · f835848 · f835848
1 parent b665517
commit f835848
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/app/components/organisms/reception/ReceptionCard.tsx b/app/components/organisms/reception/ReceptionCard.tsx
@@ -16,7 +16,7 @@ export const ReceptionCard: FC<Props> = memo((props) => {
   return (
     <Box
       w="300px"
-      h="250px"
+      h="fit-content"
       bg={
         product.stock - quantity === 0
           ? "red.200"
@@ -33,6 +33,7 @@ export const ReceptionCard: FC<Props> = memo((props) => {
         <Text>{product.product_name}</Text>
         <Text>価格：{product.price}</Text>
         <Text>在庫：{product.stock - quantity}</Text>
+        <img src={product.image} alt={`${product.product_name}の商品画像`} />
         <Button
           isDisabled={
             quantity ? product.stock - quantity <= 0 : product.stock <= 0
@@ -59,6 +60,7 @@ ReceptionCard.propTypes = {
     product_name: PropTypes.string.isRequired,
     price: PropTypes.number.isRequired,
     stock: PropTypes.number.isRequired,
+    image: PropTypes.string.isRequired,
   }).isRequired,
   addOrder: PropTypes.func.isRequired,
   cancelOrder: PropTypes.func.isRequired,