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)
         }
@@ -40,11 +42,25 @@ function PaymentCompleted() {
             </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>