Skip to content

GitLab

Commit 6cde4f49 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

shoppingCart, payment 부트스트랩 보완

parent 46a0dc89
Hide whitespace changes
Inline Side-by-side
client/src/Pages/Payment.js
View file @ 6cde4f49
...@@ -54,13 +54,13 @@ function Payment() { ...@@ -54,13 +54,13 @@ function Payment() {
}; };
function handleClick() { function handleClick() {
if (paymentWay.length !== 0) { if (paymentWay.length !== 0) {
setPaymentWay([]) setPaymentWay([])
} }
else { else {
const a = ( const a = (
<div> <Row className="justify-content-md-center">
<Col md={6} className="border m-5 p-5">
<Form> <Form>
<Form.Group controlId="exampleForm.ControlSelect1"> <Form.Group controlId="exampleForm.ControlSelect1">
<Form.Label>입금은행</Form.Label> <Form.Label>입금은행</Form.Label>
...@@ -79,7 +79,9 @@ function Payment() { ...@@ -79,7 +79,9 @@ function Payment() {
<Form.Control type="date" /> <Form.Control type="date" />
</Form.Group> </Form.Group>
</Form> </Form>
</div>) </Col>
</Row>)
setPaymentWay(a) setPaymentWay(a)
} }
} }
...@@ -89,7 +91,24 @@ function Payment() { ...@@ -89,7 +91,24 @@ function Payment() {
setPaymentWay([]) setPaymentWay([])
} }
} }
const [num, setNum] = useState(0)
function plusNum() {
setNum(num + 1)
}
function minusNum() {
if (num === 0) {
setNum(0)
}
else {
setNum(num - 1)
}
}
function deleteCart() {
//장바구니 DB에서 해당 항목 삭제
console.log('카트에 담긴 항목을 삭제했습니다.')
}
return ( return (
<div> <div>
<MainNav /> <MainNav />
...@@ -98,20 +117,25 @@ function Payment() { ...@@ -98,20 +117,25 @@ function Payment() {
<h3 className="my-5 font-weight-bold text-center">주문/결제</h3> <h3 className="my-5 font-weight-bold text-center">주문/결제</h3>
<div> <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>
<Form> <Row className="justify-content-md-center">
<Form.Group controlId="formBasicName"> <Col md={4}>
<Form.Label>이름</Form.Label> <Form>
<Form.Control type="text" placeholder="윤지원" /> <Form.Group controlId="formBasicName">
</Form.Group> <Form.Label>이름</Form.Label>
<Form.Group controlId="formBasicEmail"> <Form.Control type="text" placeholder="윤지원" />
<Form.Label>이메일</Form.Label> </Form.Group>
<Form.Control type="email" placeholder="jiwon5393@naver.com" /> <Form.Group controlId="formBasicEmail">
</Form.Group> <Form.Label>이메일</Form.Label>
<Form.Group controlId="formBasicTel"> <Form.Control type="email" placeholder="jiwon5393@naver.com" />
<Form.Label>휴대전화</Form.Label> </Form.Group>
<Form.Control type="tel" placeholder="010-0000-0000" /> <Form.Group controlId="formBasicTel">
</Form.Group> <Form.Label>휴대전화</Form.Label>
</Form> <Form.Control type="tel" placeholder="010-0000-0000" />
</Form.Group>
</Form>
</Col>
</Row>
</div> </div>
...@@ -129,24 +153,24 @@ function Payment() { ...@@ -129,24 +153,24 @@ function Payment() {
<div> <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>
<Card > <Card >
<Row> <Row className="mx-1">
<Col className="text-center align-self-center"> <Col xs={2} sm={2} className="text-center my-auto">
<input className="" type="checkbox" id="exampleCheck1"></input> <input className="" type="checkbox" id="exampleCheck1" />
</Col> </Col>
<Col> <Col className="text-center">
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} /> <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} />
</Col> </Col>
<Col> <Col md={6} className="p-2">
<Card.Body> <Card.Body>
<img src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" /> <input type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={deleteCart} />
<Card.Title className="font-weight-bold mt-3">제품명</Card.Title> <Card.Title className="font-weight-bold mt-3">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
<Card.Text>옵션</Card.Text> <Card.Text>옵션</Card.Text>
<div className="align-items-center" > <Card.Text>수량</Card.Text>
<input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" /> <div>
<input type="text" placeholder="1" style={{ width: '30px' }} className="text-center align-middle mx-1" readOnly></input> <input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={minusNum} />
<input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" /> <input type="text" style={{ width: '30px' }} className="text-center align-middle mx-1" placeholder="1" value={num} readOnly></input>
<input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={plusNum} />
</div> </div>
</Card.Body> </Card.Body>
</Col> </Col>
...@@ -172,7 +196,7 @@ function Payment() { ...@@ -172,7 +196,7 @@ function Payment() {
<div> <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>
<div className="text-center"> <div className="text-center mt-5">
<Button variant="success" onClick={handleClick} >무통장입금</Button> <Button variant="success" onClick={handleClick} >무통장입금</Button>
<Button variant="warning" style={{ color: '#ffffff' }} onClick={handleClick2}>카카오페이</Button> <Button variant="warning" style={{ color: '#ffffff' }} onClick={handleClick2}>카카오페이</Button>
</div> </div>
......
client/src/Pages/ProductsRegist.js
View file @ 6cde4f49
...@@ -38,9 +38,9 @@ function ProductsRegist() { ...@@ -38,9 +38,9 @@ function ProductsRegist() {
</Col> </Col>
<Col md={6}> <Col md={6}>
<Form.Control as="select" placeholder="하위분류"> <Form.Control as="select" placeholder="하위분류">
<option>긴바지</option> <option>JEANS</option>
<option>반바지</option> <option>SKINNY JEANS</option>
<option>청바지</option> <option>BANDING PANTS</option>
</Form.Control> </Form.Control>
</Col> </Col>
</Row> </Row>
......
client/src/Pages/ShoppingCart.js
View file @ 6cde4f49
...@@ -6,6 +6,25 @@ import { Card, Button, Container, Row, Col } from 'react-bootstrap'; ...@@ -6,6 +6,25 @@ import { Card, Button, Container, Row, Col } from 'react-bootstrap';
function ShoppingCart() { function ShoppingCart() {
const [num, setNum] = useState(0)
function plusNum() {
setNum(num + 1)
}
function minusNum() {
if (num === 0) {
setNum(0)
}
else {
setNum(num - 1)
}
}
function deleteCart() {
//장바구니 DB에서 해당 항목 삭제
console.log('카트에 담긴 항목을 삭제했습니다.')
}
return ( return (
<div> <div>
<MainNav /> <MainNav />
...@@ -14,52 +33,32 @@ function ShoppingCart() { ...@@ -14,52 +33,32 @@ function ShoppingCart() {
<h3 className="my-5 font-weight-bold text-center">장바구니</h3> <h3 className="my-5 font-weight-bold text-center">장바구니</h3>
<div> <div>
<h4 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h4> <h4 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h4>
<Card >
<Row>
<Col>
<input className="mx-5" type="checkbox" id="exampleCheck1"></input>
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} />
</Col>
<Col md={6}>
<Card.Body>
<input type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" />
<Card.Title className="font-weight-bold mt-3">제품명</Card.Title>
<Card.Text>가격</Card.Text>
<Card.Text>옵션</Card.Text>
<Card.Text>수량</Card.Text>
<div>
<input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" />
<input type="text" placeholder="1" style={{ width: '30px' }} className="text-center align-middle mx-1" readOnly></input>
<input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" />
</div>
</Card.Body>
</Col>
</Row>
</Card>
<Card> <Card>
<Row> <Row className="mx-1">
<Col> <Col xs={2} sm={2} className="text-center my-auto">
<input className="mx-5" type="checkbox" id="exampleCheck1"></input> <input className="" type="checkbox" id="exampleCheck1" />
</Col>
<Col className="text-center">
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} /> <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} />
</Col> </Col>
<Col> <Col md={6} className="p-2">
<Card.Body> <Card.Body>
<input type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" /> <input type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={deleteCart} />
<Card.Title className="font-weight-bold mt-3">제품명</Card.Title> <Card.Title className="font-weight-bold mt-3">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
<Card.Text>옵션</Card.Text> <Card.Text>옵션</Card.Text>
<Card.Text>수량</Card.Text> <Card.Text>수량</Card.Text>
<div className="align-items-center" > <div>
<input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" /> <input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={minusNum} />
<input type="text" placeholder="1" style={{ width: '30px' }} className="text-center align-middle mx-1" readOnly></input> <input type="text" style={{ width: '30px' }} className="text-center align-middle mx-1" placeholder="1" value={num} readOnly></input>
<input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" /> <input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={plusNum} />
</div> </div>
</Card.Body> </Card.Body>
</Col> </Col>
</Row> </Row>
</Card> </Card>
</div> </div>
<div className="p-5 m-5" style={{background:'#F7F3F3'}}> <div className="p-5 m-5" style={{ background: '#F7F3F3' }}>
<ul className="pl-0" style={{ listStyle: 'none' }}> <ul className="pl-0" style={{ listStyle: 'none' }}>
<li> <li>
<span className="text-secondary">총 상품금액</span> <span className="text-secondary">총 상품금액</span>
......
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