From 602f43d695ab0c5f8a0811da0b771869e7138e5b Mon Sep 17 00:00:00 2001
From: sa_yoshiii <sayako.yoshikawa1129@gmail.com>
Date: Tue, 13 Sep 2022 09:56:37 +0900
Subject: [PATCH] =?UTF-8?q?=E8=B2=B7=E3=81=84=E7=89=A9=E3=81=8B=E3=81=94?=
 =?UTF-8?q?=E3=81=AE=E4=B8=AD=E8=BA=AB=E3=82=92=E5=87=BA=E5=8A=9B=E3=81=99?=
 =?UTF-8?q?=E3=82=8B=E3=82=B3=E3=83=B3=E3=83=86=E3=83=8A=E3=82=92=E4=BD=9C?=
 =?UTF-8?q?=E6=88=90=E3=81=97=E3=82=88=E3=81=86=EF=BC=9A=E3=81=9D=E3=81=AE?=
 =?UTF-8?q?=EF=BC=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CartContainer.tsx | 17 ++++++++++++++++-
 src/components/CartItem.tsx      | 13 +++++++++++++
 src/features/cart/CartSlice.ts   |  6 +++---
 3 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 src/components/CartItem.tsx

diff --git a/src/components/CartContainer.tsx b/src/components/CartContainer.tsx
index 6e0fe1a..c5e3e99 100644
--- a/src/components/CartContainer.tsx
+++ b/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;
diff --git a/src/components/CartItem.tsx b/src/components/CartItem.tsx
new file mode 100644
index 0000000..f4ae9e8
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/features/cart/CartSlice.ts b/src/features/cart/CartSlice.ts
index c144350..c72f344 100644
--- a/src/features/cart/CartSlice.ts
+++ b/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({