Commit 7fb9abbe authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

paymentCompleted페이지 완료

parent a73da7bd
...@@ -7,10 +7,11 @@ import { Link } from 'react-router-dom'; ...@@ -7,10 +7,11 @@ import { Link } from 'react-router-dom';
function PaymentCompleted() { function PaymentCompleted() {
const [order, setOrder] = useState([])
const user = isAuthenticated() const user = isAuthenticated()
const [error, setError] = useState() const [error, setError] = useState()
const [order, setOrder] = useState([])
const [total, setTotal] = useState(0) const [total, setTotal] = useState(0)
const [receiverInfo, setReceiverInfo] = useState({})
useEffect(() => { useEffect(() => {
getOrder() getOrder()
...@@ -23,6 +24,7 @@ function PaymentCompleted() { ...@@ -23,6 +24,7 @@ function PaymentCompleted() {
console.log(response.data) console.log(response.data)
setOrder(response.data.products) setOrder(response.data.products)
setTotal(response.data.total) setTotal(response.data.total)
setReceiverInfo(response.data.receiverInfo)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
} }
...@@ -40,11 +42,25 @@ function PaymentCompleted() { ...@@ -40,11 +42,25 @@ function PaymentCompleted() {
</div> </div>
<h3 className="text-center font-weight-bold my-3">주문내역</h3> <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> <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> <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문 상품 정보</h5>
{order.map((e) => ( {order.map((e) => (
<Card> <Card className="mx-2">
<Row className="mx-1"> <Row className="mx-1">
<Col className="text-center"> <Col className="text-center">
<Card.Img className="img-fluid" variant="top" src={e.productId.main_imgUrl && `/images/${e.productId.main_imgUrl}`} style={{ width: '20rem' }} /> <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() { ...@@ -61,6 +77,10 @@ function PaymentCompleted() {
</Card> </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"> <div className="text-center my-3">
<Button href="/" className="mx-1" style={{ background: "#91877F", borderColor: '#91877F', width: "7rem" }}>홈으로</Button> <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> <Button href="/account" className="mx-1" style={{ background: "#91877F", borderColor: '#91877F', width: "7rem" }}>마이페이지</Button>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment