From 35573594a71d1c20b520b458001afa8c2f5aface Mon Sep 17 00:00:00 2001
From: subinsong01 <haely97@naver.com>
Date: Thu, 7 Nov 2024 21:56:45 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B2=B0=EC=A0=9C=EC=B7=A8=EC=86=8C=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PaymentPage/PaymentCancelDone.jsx | 85 ++++++++++++++-------
 1 file changed, 57 insertions(+), 28 deletions(-)

diff --git a/src/pages/PaymentPage/PaymentCancelDone.jsx b/src/pages/PaymentPage/PaymentCancelDone.jsx
index 27e2475..f363c5a 100644
--- a/src/pages/PaymentPage/PaymentCancelDone.jsx
+++ b/src/pages/PaymentPage/PaymentCancelDone.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import Lottie from 'lottie-react';
+import { useNavigate } from 'react-router-dom';
 import PayCancelAnimation from './PayCancelAnimation.json';
 import { useParams } from 'react-router-dom';
 import axios from '../../apis/AxiosInstance';
@@ -10,62 +11,64 @@ const Container = styled.div`
   flex-direction: column;
   align-items: center;
   padding: 20px;
-  background-color: #f8f8f8;
-  height: 100vh;
+  background-color: #fafafa;
+  min-height: 100vh;
 `;
 
 const ImageContainer = styled.div`
   width: 100%;
   display: flex;
   justify-content: center;
-  margin-bottom: 0px;
+  margin-bottom: 20px;
 `;
 
 const Header = styled.div`
   text-align: center;
-  margin-bottom: 20px;
+  margin-bottom: 30px;
 `;
 
 const CancelMessage = styled.h1`
   font-size: 24px;
   font-weight: bold;
-  color: #333;
+  color: #ff4d4f;
+  margin-top: -40px;
 `;
 
 const Content = styled.div`
-  width: 100%;
+  width: 90%;
   max-width: 600px;
   background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  padding: 20px;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  padding: 30px;
+  margin-top: 0px;
 `;
 
 const Item = styled.div`
-  margin-bottom: 20px;
+  margin-bottom: 15px;
 `;
 
 const ItemTitle = styled.h2`
-  font-size: 18px;
+  font-size: 15px;
   font-weight: bold;
   color: #333;
 `;
 
 const Details = styled.div`
-  margin-top: 10px;
+  margin-top: 12px;
 `;
 
 const Detail = styled.p`
-  font-size: 14px;
-  color: #666;
-  margin-bottom: 5px;
+  font-size: 12px;
+  color: #777;
+  margin-bottom: 6px;
 `;
 
 const TotalPrice = styled.p`
-  font-size: 16px;
+  font-size: 13px;
   font-weight: bold;
-  color: #333;
-  margin-top: 10px;
+  color: #444;
+  margin-top: 8px;
 `;
 
 const StyleStrong = styled.div`
@@ -76,18 +79,18 @@ const StyleStrong = styled.div`
 const PaymentDetailsContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  background-color: #f9f9f9;
-  border-radius: 8px;
-  padding: 15px;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  gap: 8px;
+  background-color: #f7f9fc;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 `;
 
 const PaymentDetailRow = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px;
+  padding: 10px 0;
   border-bottom: 1px solid #e0e0e0;
   &:last-child {
     border-bottom: none;
@@ -95,21 +98,46 @@ const PaymentDetailRow = styled.div`
 `;
 
 const PaymentDetailTitle = styled(StyleStrong)`
-  font-size: 16px;
-  font-weight: bold;
+  font-size: 13px;
+  font-weight: 600;
   color: #333;
 `;
 
 const PaymentDetailValue = styled.span`
-  font-size: 12px;
-  color: #666;
+  font-size: 13px;
+  color: #555;
 `;
 
+const PaymentDoneBtn = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #ff6e00;
+  background-color: transparent;
+  color: #ff6e00;
+  width: 100%;
+  height: 45px;
+  text-align: center;
+  border-radius: 10px;
+  margin-top: 15px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, color 0.3s ease;
+
+  &:hover {
+    background-color: #ff6e00;
+    color: #fff;
+  }
+`;
+
+
+
 const PaymentCancelDone = () => {
   const [content, setContent] = useState({});
   const { orderId } = useParams();
   const [payment, setPayment] = useState(null);
   const userId = localStorage.getItem('userId');
+  const navigate = useNavigate();
 
   useEffect(() => {
     const fetchOrderDetail = async () => {
@@ -204,6 +232,7 @@ const PaymentCancelDone = () => {
       </PaymentDetailRow>
     </>
   )}
+  <PaymentDoneBtn onClick={() => navigate('/')}>확인</PaymentDoneBtn>
 </PaymentDetailsContainer>
       </Content>
     </Container>