CartItemレイアウト作り

src/components/CartContainer.tsx

@@ -1,4 +1,4 @@
-import { Box, Container, Typography } from "@mui/material";
+import { Box, Container, Typography, Stack } from "@mui/material";
 import React from "react";
 import { useAppSelector } from "../store";
 import { CartItem } from "./CartItem";
@@ -25,11 +25,11 @@ const CartContainer = () => {
         <Typography variant="h2" gutterBottom>
           Cart
         </Typography>
-        <div>
+        <Stack spacing={4}>
           {cartItems.map((item) => {
             return <CartItem key={item.id} />;
           })}
-        </div>
+        </Stack>
       </Box>
     </Container>
   );

src/components/CartItem.tsx

@@ -1,13 +1,54 @@
 import React from "react";
-import { Snackbar, Alert, Stack } from "@mui/material";
+import {
+  Card,
+  Box,
+  CardContent,
+  Typography,
+  IconButton,
+  CardMedia,
+} from "@mui/material";
+import SkipNextIcon from "@mui/icons-material/SkipNext";
 export const CartItem = () => {
   return (
-    <Stack spacing={2} sx={{ width: "100%" }}>
-      <Snackbar open>
-        <Alert severity="success" sx={{ width: "100%" }}>
-          This is a success message!
-        </Alert>
-      </Snackbar>
-    </Stack>
+    <Card elevation={2} sx={{ display: "flex" }}>
+      <CardMedia
+        component="img"
+        sx={{ width: 200 }}
+        image="https://placehold.jp/600x400.png"
+        alt=""
+      />
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
+        <CardContent sx={{ p: 3 }}>
+          <Typography
+            component="div"
+            variant="h5"
+            sx={{ wordBreak: "break-all" }}
+          >
+            TitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitle
+          </Typography>
+          <Typography
+            variant="h5"
+            color="primary.dark"
+            sx={{ fontWeight: "medium", textAlign: "right" }}
+            component="div"
+          >
+            ￥10,000
+          </Typography>
+        </CardContent>
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end",
+            px: 3,
+            pb: 1,
+          }}
+        >
+          <IconButton aria-label="previous">
+            <SkipNextIcon />
+          </IconButton>
+        </Box>
+      </Box>
+    </Card>
   );
 };