Storeの中身から商品情報を取り出して出力してみる

s-yoshiii · Sep 14, 2022 · 6eeb160 · 6eeb160
1 parent 5f2f6a4
commit 6eeb160
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 31 deletions.
diff --git a/src/cartItems.ts b/src/cartItems.ts
@@ -1,38 +1,32 @@
-interface CartItems {
-  id: number;
-  title: string;
-  price: number;
-  img: string;
-  amount: number;
-}
+import { CartItems } from "./types/cartItem";
 
 const cartItems: CartItems[] = [
   {
     id: 1,
     title: "Next.js入門講座",
     price: 12000,
-    img: "https://uploda1.ysklog.net/uploda/3f3dc982dc.png",
+    img: "https://placehold.jp/3d4070/ffffff/600x400.png",
     amount: 1,
   },
   {
     id: 2,
     title: "MERNスタックで本格的なSNSアプリ構築講座",
     price: 24000,
-    img: "https://uploda1.ysklog.net/uploda/bf73156667.png",
+    img: "https://placehold.jp/3e704d/ffffff/600x400.png",
     amount: 1,
   },
   {
     id: 3,
     title: "GraphQLとApollo入門講座",
     price: 8900,
-    img: "https://uploda1.ysklog.net/uploda/9a99f8ca04.png",
+    img: "https://placehold.jp/da07be/ffffff/600x400.png",
     amount: 1,
   },
   {
     id: 4,
     title: "Three.jsでモダンウェブサイト構築講座",
     price: 14000,
-    img: "https://uploda1.ysklog.net/uploda/59060b3cd3.png",
+    img: "https://placehold.jp/3d4070/ffffff/600x400.png",
     amount: 1,
   },
 ];

diff --git a/src/components/CartContainer.tsx b/src/components/CartContainer.tsx
@@ -35,7 +35,7 @@ const CartContainer = () => {
         </Typography>
         <Stack spacing={4}>
           {cartItems.map((item) => {
-            return <CartItem key={item.id} />;
+            return <CartItem key={item.id} {...item} />;
           })}
         </Stack>
         <Divider sx={{ my: 7 }} />

diff --git a/src/components/CartItem.tsx b/src/components/CartItem.tsx
@@ -1,22 +1,23 @@
-import React from "react";
+import React, { FC } from "react";
 import {
   Card,
   Box,
   CardContent,
   Typography,
   IconButton,
   CardMedia,
+  Stack,
 } from "@mui/material";
-import SkipNextIcon from "@mui/icons-material/SkipNext";
-export const CartItem = () => {
+import DeleteIcon from "@mui/icons-material/Delete";
+import AddCircleRoundedIcon from "@mui/icons-material/AddCircleRounded";
+import RemoveCircleRoundedIcon from "@mui/icons-material/RemoveCircleRounded";
+import { CartItems } from "../types/cartItem";
+type Props = CartItems;
+export const CartItem: FC<Props> = (props) => {
+  const { id, img, title, price, amount } = props;
   return (
     <Card elevation={2} sx={{ display: "flex" }}>
-      <CardMedia
-        component="img"
-        sx={{ width: 200 }}
-        image="https://placehold.jp/600x400.png"
-        alt=""
-      />
+      <CardMedia component="img" sx={{ width: 200 }} image={img} alt="" />
       <Box
         sx={{
           display: "flex",
@@ -30,16 +31,32 @@ export const CartItem = () => {
             variant="h5"
             sx={{ wordBreak: "break-all" }}
           >
-            TitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitle
+            {title}
           </Typography>
-          <Typography
-            variant="h5"
-            color="primary.dark"
-            sx={{ fontWeight: "medium", textAlign: "right" }}
-            component="div"
+
+          <Stack
+            direction="row"
+            justifyContent="flex-end"
+            alignItems="center"
+            spacing={1}
           >
-            ￥10,000
-          </Typography>
+            <Typography
+              variant="h5"
+              color="primary.dark"
+              sx={{ fontWeight: "medium", textAlign: "right" }}
+              component="div"
+            >
+              ￥{price.toLocaleString()}
+            </Typography>
+            <Stack>
+              <IconButton aria-label="remove">
+                <AddCircleRoundedIcon />
+              </IconButton>
+              <IconButton aria-label="remove">
+                <RemoveCircleRoundedIcon />
+              </IconButton>
+            </Stack>
+          </Stack>
         </CardContent>
         <Box
           sx={{
@@ -50,8 +67,8 @@ export const CartItem = () => {
             pb: 1,
           }}
         >
-          <IconButton aria-label="previous">
-            <SkipNextIcon />
+          <IconButton aria-label="delete">
+            <DeleteIcon />
           </IconButton>
         </Box>
       </Box>

diff --git a/src/types/cartItem.d.ts b/src/types/cartItem.d.ts
@@ -0,0 +1,7 @@
+export interface CartItems {
+  id: number;
+  title: string;
+  price: number;
+  img: string;
+  amount: number;
+}