checked

client/src/Components/ListCard.js

@@ -69,7 +69,7 @@ function ListCard(props) {
                     <Card>
                         <Row className="mx-1">
                             <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 className="text-center">
                                 <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) {
                                     <Card.Text >수량</Card.Text>
                                     <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="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} />
                                     </div>
                                 </Card.Body>

client/src/Pages/ShoppingCart.js

@@ -17,6 +17,10 @@ function ShoppingCart() {
         getCart()
     }, [user])
 
+    useEffect(() => {
+        price()
+    }, [cart])
+
     function plusNum(e) {
         const addCount = cart.map((el) => {
             if (el._id === e.target.name) {
@@ -27,6 +31,7 @@ function ShoppingCart() {
         })
         setCart(addCount)
     }
+
     function minusNum(e) {
         const addCount = cart.map((el) => {
             if (el._id === e.target.name) {
@@ -38,8 +43,17 @@ function ShoppingCart() {
         setCart(addCount)
     }
 
-    function checkedCart(e) {
+    function price() {
         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) => {
             if (el._id === e.target.name) {
                 return { ...el, checked: !el.checked }
@@ -47,13 +61,7 @@ function ShoppingCart() {
                 return { ...el }
             }
         })
-        const list = cartCheck.filter((el) => el.checked === true)
-        list.map((el) => {
-            price = el.count * el.productId.price + price
-        })
-        setFinalPrice(price)
         setCart(cartCheck)
-        setFinalCart(list)
     }
 
     async function deleteCart(e) {
@@ -74,7 +82,7 @@ function ShoppingCart() {
             setError('')
             const response = await axios.get(`/api/cart/showcart/${user}`)
             const addChecked = response.data.map((el) => {
-                return { ...el, checked: false }
+                return { ...el, checked: true }
             })
             setCart(addChecked)
         } catch (error) {