Commit 1f9aa29d authored by Kim, Subin's avatar Kim, Subin
Browse files

checked

parent c0a8d927
...@@ -69,7 +69,7 @@ function ListCard(props) { ...@@ -69,7 +69,7 @@ function ListCard(props) {
<Card> <Card>
<Row className="mx-1"> <Row className="mx-1">
<Col xs={2} sm={2} className="text-center my-auto"> <Col xs={2} sm={2} className="text-center my-auto">
<input className="" type="checkbox" name={String(e._id)} onChange={props.checkedCart} /> <input type="checkbox" name={String(e._id)} onChange={props.checkedCart} checked={e.checked} />
</Col> </Col>
<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' }} />
...@@ -83,7 +83,7 @@ function ListCard(props) { ...@@ -83,7 +83,7 @@ function ListCard(props) {
<Card.Text >수량</Card.Text> <Card.Text >수량</Card.Text>
<div> <div>
<input type="image" name={String(e._id)} alt="마이너스" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={props.minusNum} /> <input type="image" name={String(e._id)} alt="마이너스" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={props.minusNum} />
<input type="number" style={{ width: '30px' }} className="text-center align-middle mx-1" placeholder={e.count} value={e.count} readOnly></input> <input type="number" style={{ width: '35px' }} className="text-center align-middle mx-1" placeholder={e.count} value={e.count} readOnly></input>
<input type="image" name={String(e._id)} alt="플러스" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={props.plusNum} /> <input type="image" name={String(e._id)} alt="플러스" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={props.plusNum} />
</div> </div>
</Card.Body> </Card.Body>
......
...@@ -17,6 +17,10 @@ function ShoppingCart() { ...@@ -17,6 +17,10 @@ function ShoppingCart() {
getCart() getCart()
}, [user]) }, [user])
useEffect(() => {
price()
}, [cart])
function plusNum(e) { function plusNum(e) {
const addCount = cart.map((el) => { const addCount = cart.map((el) => {
if (el._id === e.target.name) { if (el._id === e.target.name) {
...@@ -27,6 +31,7 @@ function ShoppingCart() { ...@@ -27,6 +31,7 @@ function ShoppingCart() {
}) })
setCart(addCount) setCart(addCount)
} }
function minusNum(e) { function minusNum(e) {
const addCount = cart.map((el) => { const addCount = cart.map((el) => {
if (el._id === e.target.name) { if (el._id === e.target.name) {
...@@ -38,8 +43,17 @@ function ShoppingCart() { ...@@ -38,8 +43,17 @@ function ShoppingCart() {
setCart(addCount) setCart(addCount)
} }
function checkedCart(e) { function price() {
let price = 0 let price = 0
const list = cart.filter((el) => el.checked === true)
list.map((el) => {
price = el.count * el.productId.price + price
})
setFinalPrice(price)
setFinalCart(list)
}
function checkedCart(e) {
const cartCheck = cart.map((el) => { const cartCheck = cart.map((el) => {
if (el._id === e.target.name) { if (el._id === e.target.name) {
return { ...el, checked: !el.checked } return { ...el, checked: !el.checked }
...@@ -47,13 +61,7 @@ function ShoppingCart() { ...@@ -47,13 +61,7 @@ function ShoppingCart() {
return { ...el } return { ...el }
} }
}) })
const list = cartCheck.filter((el) => el.checked === true)
list.map((el) => {
price = el.count * el.productId.price + price
})
setFinalPrice(price)
setCart(cartCheck) setCart(cartCheck)
setFinalCart(list)
} }
async function deleteCart(e) { async function deleteCart(e) {
...@@ -74,7 +82,7 @@ function ShoppingCart() { ...@@ -74,7 +82,7 @@ function ShoppingCart() {
setError('') setError('')
const response = await axios.get(`/api/cart/showcart/${user}`) const response = await axios.get(`/api/cart/showcart/${user}`)
const addChecked = response.data.map((el) => { const addChecked = response.data.map((el) => {
return { ...el, checked: false } return { ...el, checked: true }
}) })
setCart(addChecked) setCart(addChecked)
} catch (error) { } catch (error) {
......
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