From 5f2f6a4ed266f8499a5c59d6f3347ca7c8ebafcc Mon Sep 17 00:00:00 2001
From: sa_yoshiii <sayako.yoshikawa1129@gmail.com>
Date: Wed, 14 Sep 2022 23:57:37 +0900
Subject: [PATCH] =?UTF-8?q?CartContainer=E3=81=AE=E3=83=AC=E3=82=A4?=
 =?UTF-8?q?=E3=82=A2=E3=82=A6=E3=83=88=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CartContainer.tsx | 13 +++++++++----
 src/components/CartItem.tsx      |  8 +++++++-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/CartContainer.tsx b/src/components/CartContainer.tsx
index 7d1acc4..d353b23 100644
--- a/src/components/CartContainer.tsx
+++ b/src/components/CartContainer.tsx
@@ -6,6 +6,7 @@ import {
   Divider,
   Button,
 } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
 import React from "react";
 import { useAppSelector } from "../store";
 import { CartItem } from "./CartItem";
@@ -37,10 +38,14 @@ const CartContainer = () => {
             return <CartItem key={item.id} />;
           })}
         </Stack>
-        <Divider sx={{ mt: 7 }} variant="middle" />
-        <Box>合計:{total}円</Box>
-        <Box>
-          <Button variant="contained">全削除</Button>
+        <Divider sx={{ my: 7 }} />
+        <Box sx={{ textAlign: "right" }}>
+          <Typography variant="h3">合計:{total}円</Typography>
+        </Box>
+        <Box sx={{ textAlign: "center" }}>
+          <Button variant="outlined" size="large" startIcon={<DeleteIcon />}>
+            全削除
+          </Button>
         </Box>
       </Box>
     </Container>
diff --git a/src/components/CartItem.tsx b/src/components/CartItem.tsx
index 91e307f..b975e6a 100644
--- a/src/components/CartItem.tsx
+++ b/src/components/CartItem.tsx
@@ -17,7 +17,13 @@ export const CartItem = () => {
         image="https://placehold.jp/600x400.png"
         alt=""
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          width: "calc(100% - 200px)",
+        }}
+      >
         <CardContent sx={{ p: 3 }}>
           <Typography
             component="div"