paymentCompleted페이지 완료

client/src/Pages/PaymentCompleted.js

@@ -7,10 +7,11 @@ import { Link } from 'react-router-dom';
 
 function PaymentCompleted() {
 
-    const [order, setOrder] = useState([])
     const user = isAuthenticated()
     const [error, setError] = useState()
+    const [order, setOrder] = useState([])
     const [total, setTotal] = useState(0)
+    const [receiverInfo, setReceiverInfo] = useState({})
 
     useEffect(() => {
         getOrder()
@@ -23,6 +24,7 @@ function PaymentCompleted() {
             console.log(response.data)
             setOrder(response.data.products)
             setTotal(response.data.total)
+            setReceiverInfo(response.data.receiverInfo)
         } catch (error) {
             catchErrors(error, setError)
         }
@@ -31,20 +33,34 @@ function PaymentCompleted() {
         <div>
             <div className="mx-3 my-5 text-center px-3 py-4 border">
                 <div className="mb-1">
-                <h5 className=" font-weight-bold" style={{ display: 'inline' }}>고객님의 </h5>
-                <h5 className=" font-weight-bold text-danger" style={{ display: 'inline' }}>주문이 완료</h5>
-                <h5 className=" font-weight-bold " style={{ display: 'inline' }}>되었습니다!</h5>
+                    <h5 className=" font-weight-bold" style={{ display: 'inline' }}>고객님의 </h5>
+                    <h5 className=" font-weight-bold text-danger" style={{ display: 'inline' }}>주문이 완료</h5>
+                    <h5 className=" font-weight-bold " style={{ display: 'inline' }}>되었습니다!</h5>
                 </div>
                 <div className="mb-0">주문내역 확인은 마이페이지의 </div>
                 <div> "주문/배송조회"에서 하실 수 있습니다.</div>
             </div>
             <h3 className="text-center font-weight-bold my-3">주문내역</h3>
             <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>받는사람 정보</h5>
+            <div className="m-3">
 
+            <Row>
+                <Col xs={4} className="text-right">이름</Col>
+                <Col>{receiverInfo.name}</Col>
+            </Row>
+            <Row>
+                <Col xs={4} className="text-right">전화번호</Col>
+                <Col>{receiverInfo.tel}</Col>
+            </Row>
+            <Row>
+                <Col xs={4} className="text-right">주소</Col>
+                <Col>{receiverInfo.address}{receiverInfo.address2}</Col>
+            </Row>
+            </div>
             <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문 상품 정보</h5>
 
             {order.map((e) => (
-                <Card>
+                <Card className="mx-2">
                     <Row className="mx-1">
                         <Col className="text-center">
                             <Card.Img className="img-fluid" variant="top" src={e.productId.main_imgUrl && `/images/${e.productId.main_imgUrl}`} style={{ width: '20rem' }} />
@@ -61,6 +77,10 @@ function PaymentCompleted() {
                 </Card>
             ))
             }
+            <Row className="m-3 font-weight-bold py-3" style={{ background: '#F7F3F3' }}>
+                <Col xs={6} className="text-right">총 결제금액:</Col>
+                <Col>{total}원</Col>
+            </Row>
             <div className="text-center my-3">
                 <Button href="/" className="mx-1" style={{ background: "#91877F", borderColor: '#91877F', width: "7rem" }}>홈으로</Button>
                 <Button href="/account" className="mx-1" style={{ background: "#91877F", borderColor: '#91877F', width: "7rem" }}>마이페이지</Button>