feat: 商品写真の登録機能を実装 (#39)

ricora · Nov 18, 2024 · 0d02d4b · 0d02d4b
1 parent 1aa638d
commit 0d02d4b
Show file tree

Hide file tree

Showing 7 changed files with 217 additions and 129 deletions.
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,

diff --git a/app/components/organisms/register/ProductCard.tsx b/app/components/organisms/register/ProductCard.tsx
@@ -13,12 +13,21 @@ export const ProductCard: FC<Props> = memo((props) => {
   const { product, clickDelete, clickChange } = props
 
   return (
-    <Box w="300px" h="250px" bg={"white"} borderRadius="10px" shadow="md" p={4}>
+    <Box
+      w="full"
+      maxW="300px"
+      h="fit-content"
+      bg={"white"}
+      borderRadius="10px"
+      shadow="md"
+      p={4}
+    >
       <h1>ID：{product.product_id}</h1>
       <Stack textAlign={"center"}>
         <Text>{product.product_name}</Text>
         <Text>価格：{product.price}</Text>
         <Text>在庫：{product.stock}</Text>
+        <img src={product.image} alt={`${product.product_name}の商品画像`} />
         <Button onClick={() => clickDelete(product)} colorScheme="red">
           削除
         </Button>
@@ -38,6 +47,7 @@ ProductCard.propTypes = {
     product_name: PropTypes.string.isRequired,
     price: PropTypes.number.isRequired,
     stock: PropTypes.number.isRequired,
+    image: PropTypes.string.isRequired,
   }).isRequired,
   clickDelete: PropTypes.func.isRequired,
   clickChange: PropTypes.func.isRequired,

diff --git a/app/crud/crud_products.ts b/app/crud/crud_products.ts
@@ -1,20 +1,13 @@
 //Productsの操作
 import { PrismaClient } from "@prisma/client"
+import { TypeProduct } from "~/type/typeproduct"
 
 const prisma = new PrismaClient()
 
 //productの追加
-export async function createProduct(data: {
-  product_name: string
-  price: number
-  stock: number
-}) {
+export async function createProduct(data: Omit<TypeProduct, "product_id">) {
   return await prisma.products.create({
-    data: {
-      product_name: data.product_name,
-      price: data.price,
-      stock: data.stock,
-    },
+    data,
   })
 }
 
@@ -26,19 +19,13 @@ export async function readProduct() {
 //商品の変更
 export async function updateProduct(
   product_id: number,
-  product_name: string,
-  price: number,
-  stock: number,
+  data: Omit<TypeProduct, "product_id">,
 ) {
   return await prisma.products.update({
     where: {
       product_id: product_id,
     },
-    data: {
-      product_name: product_name,
-      price: price,
-      stock: stock,
-    },
+    data,
   })
 }