買い物かごの中身を出力するコンテナを作成しよう：その２

src/components/CartContainer.tsx

@@ -1,9 +1,10 @@
 import { Box, Container, Typography } from "@mui/material";
 import React from "react";
 import { useAppSelector } from "../store";
+import { CartItem } from "./CartItem";
 
 const CartContainer = () => {
-  const { amount } = useAppSelector((store) => store.cart);
+  const { amount, cartItems } = useAppSelector((store) => store.cart);
   if (amount < 1) {
     return (
       <Container>
@@ -18,6 +19,20 @@ const CartContainer = () => {
       </Container>
     );
   }
+  return (
+    <Container>
+      <Box sx={{ my: 14 }}>
+        <Typography variant="h2" gutterBottom>
+          Cart
+        </Typography>
+        <div>
+          {cartItems.map((item) => {
+            return <CartItem key={item.id} />;
+          })}
+        </div>
+      </Box>
+    </Container>
+  );
 };
 
 export default CartContainer;

src/components/CartItem.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Snackbar, Alert, Stack } from "@mui/material";
+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>
+  );
+};

src/features/cart/CartSlice.ts

@@ -10,14 +10,14 @@ interface CartItemState {
   amount: number;
 }
 interface CartState {
-  cartItem: CartItemState[];
+  cartItems: CartItemState[];
   amount: number;
   total: number;
 }
 
 const initialState = {
-  cartItem: cartItems,
-  amount: 0,
+  cartItems: cartItems,
+  amount: 4,
   total: 0,
 };
 const cartSlice = createSlice({