0113

client/src/App.js

@@ -18,8 +18,6 @@ function App() {
 
   return (
     <div>
-      {/* {console.log("match.params=",match.params(product))} */}
-
       <Router>
         <MainNav />
         <SubNav />
@@ -27,7 +25,7 @@ function App() {
           <Route exact path="/" component={Home} />
           <Route path="/login" component={Login} />
           <Route path="/signup" component={Signup} />
-          {/* <Route path="/product" component={Product} /> */}
+          <Route path="/product" component={Product} />
           <Route path="/product/:product" component={ProductsList} />
           <Route path="/admin" component={Admin} />
           <Route path="/regist" component={ProductRegist} />

client/src/Components/CartCard.js

@@ -15,7 +15,7 @@ function CartCard(props) {
                             </Col>
                             <Col md={6} className="p-2">
                                 <Card.Body>
-                                    <input type="image" name={String(e._id)} alt="삭제버튼" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={props.deleteCart} />
+                                    <input type="image" name={String(e.productId._id)} alt="삭제버튼" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={props.deleteCart} />
                                     <Card.Title className="font-weight-bold mt-3">{e.productId.pro_name}</Card.Title>
                                     <Card.Text>가격: {e.productId.price}</Card.Text>
                                     <Card.Text>옵션: {e.sizes}/{e.colors}</Card.Text>

client/src/Pages/Product.js

@@ -21,7 +21,7 @@ function Product() {
     const [cart, setCart] = useState(INIT_PRODUCT)
     const [error, setError] = useState('')
     const [selected, setSelected] = useState({ sizes: false, colors: false })
-    const [n, setN] = useState(1)
+    const [price, setPrice] = useState(0)
 
     useEffect(() => {
         if (selected.sizes === true && selected.colors === true) {
@@ -40,7 +40,7 @@ function Product() {
         preCart.push(cart)
         selected.sizes = false
         selected.colors = false
-        setN(n+1)
+        setPrice(product.price+price)
     }
     function handleChange(e) {
         const { name, value } = e.target
@@ -90,9 +90,9 @@ function Product() {
     }
 
     async function addCart() {
-        // color, size, count, productId(productlist에서 props), userId(로컬) 를 보내줌
+        // preCart(color, size, count), productId(productlist에서 props), userId(로컬) 를 보내줌
         try {
-            // setError('')
+            setError('')
             const response = await axios.put('/api/cart/addcart', {
                 userId: localStorage.getItem('loginStatus'),
                 productId: "a8f4d63ead77717f940a2b27deb707a6",
@@ -102,14 +102,8 @@ function Product() {
         } catch (error) {
             catchErrors(error, setError)
         }
-
     }
 
-
-    // useEffect(() => {
-    //     handleCreate()
-    // }, [product])
-
     return (
         <div>
             {console.log(cart)}
@@ -128,11 +122,11 @@ function Product() {
             </style>
             <Row className="justify-content-center mt-5 mx-0">
                 <Col sm={11} md={4}>
-                    <img src="https://img.sonyunara.com/files/goods/65976/1601953605_0.jpg" style={{ objectFit: "contain", width: "100%" }} />
+                    <img src="/images/a8f4d63ead77717f940a2b27deb707a6" style={{ objectFit: "contain", width: "100%" }} />
                 </Col>
                 <Col sm={11} md={4} className="align-middle mt-4">
-                    <h3 className="mb-4">sop682 리본끈셋원피스</h3>
-                    <h5 className="mb-4">가격 : 14,000원</h5>
+                    <h3 className="mb-4">스키니진</h3>
+                    <h5 className="mb-4">가격 : 12000원</h5>
                     <Form style={{ borderBottom: "1px solid" }}>
                         <Form.Group style={{ borderBottom: "1px solid", paddingBottom: "2rem" }}>
                             <Form.Label>색상</Form.Label>
@@ -155,7 +149,7 @@ function Product() {
                         ))}
                         <Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}>
                             <Col>총 금액</Col>
-                            <Col className="text-right">14,000원</Col>
+                            <Col className="text-right">{price}원</Col>
                         </Row>
                         <Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}>
                             <Button onClick={addCart} style={{ width: "49%" }}>장바구니</Button>

client/src/Pages/ShoppingCart.js

@@ -9,9 +9,10 @@ import CartCard from '../Components/CartCard';
 
 
 function ShoppingCart() {
-    const [num, setNum] = useState(0)
+    const [num, setNum] = useState()
     const [error, setError] = useState('')
     const [cart, setCart] = useState()
+    const [finalPrice, setFinalPrice] = useState(0)
     const user = isAuthenticated()
 
     useEffect(() => {
@@ -19,6 +20,8 @@ function ShoppingCart() {
     }, [user])
 
     function plusNum() {
+        num = num + 1
+
         setNum(num + 1)
     }
     function minusNum() {
@@ -44,11 +47,14 @@ function ShoppingCart() {
     }
 
     async function getCart() {
-        // const userId= localStorage.getItem('loginStatus')
         try {
             const response = await axios.get(`/api/cart/showcart/${user}`)
             console.log(response.data)
             setCart(response.data)
+            const finalPrices = response.data.map((e)=>{
+                return e.count * e.productId.price
+            })
+            setFinalPrice( finalPrices.reduce((a,b) => (a+b)))
         } catch (error) {
             catchErrors(error, setError)
         }
@@ -56,9 +62,6 @@ function ShoppingCart() {
 
     return (
         <div>
-            {/* {getCart()} */}
-            {/* {console.log(user)} */}
-            {/* {console.log(cart)} */}
             <Container className="justify-content-center">
                 <h3 className="my-5 font-weight-bold text-center">장바구니</h3>
                 <div>
@@ -66,19 +69,19 @@ function ShoppingCart() {
                     {cart?<CartCard cart={cart} deleteCart={deleteCart} minusNum={minusNum} plusNum={plusNum} num={num} />:<div></div>}
 
                 </div>
-                <div className="p-5 m-5" style={{ background: '#F7F3F3' }}>
+                <div className="p-5 m-3" style={{ background: '#F7F3F3' }}>
                     <ul className="pl-0" style={{ listStyle: 'none' }}>
                         <li>
                             <span className="text-secondary">총 상품금액</span>
-                            <span className="text-secondary float-right">12,000원</span>
+                            <span className="text-secondary float-right">{finalPrice}원</span>
                         </li>
                         <li>
                             <span className="text-secondary">배송비</span>
-                            <span className="text-secondary float-right">2,500원</span>
+                            <span className="text-secondary float-right">2500원</span>
                         </li>
                     </ul>
                     <div className="my-1 pt-2 border-top font-weight-bold">
-                        결제금액<span className="float-right">14,500원</span>
+                        결제금액<span className="float-right">{finalPrice+2500}원</span>
                     </div>
                 </div>
                 <div className="text-center">

server/controllers/cart.controller.js

 import Cart from "../schemas/Cart.js";
 
 const addcart = async (req, res) => {
-    // console.log(req.body)
     const { userId, products} = req.body
     try {
         const cart = await Cart.findOne({ userId: userId })
-        console.log(cart)
-        // const newProduct = { products: products }
-        // const newProduct = {...newProduct}
-        // console.log(newProduct)
-        console.log(products)
         await Cart.updateOne(
             { _id: cart._id },
-            // { $addToSet: { products: newProduct } }
             {$set: {products: products}}
         )
-        res.status(200).send('Cart updated')
-
+        res.status(200).send('카트에 저장되었습니다.')
     } catch (error) {
         console.log(error)
-        res.status(500).send('죄송합니다. 다시 입력해 주십시오.')
+        res.status(500).send('카트에 저장할 수 없습니다.')
     }
 }
 
 const showcart = async (req, res) => {
-    // const {userId} = req.body
-    // console.log(req.cart)
-    // console.log(req.id)
-
     try {
         const cart = await Cart.findOne({ userId: req.id }).populate({
             path: 'products.productId',
@@ -44,9 +32,8 @@ const deletecart = async (req, res) => {
     console.log(req.body)
     const { cartId } = req.body
     try {
-        await Cart.remove({ _id: cartId })
+        await Cart.deleteOne({ _id: cartId })
         res.send("삭제완료")
-        // res.json()
     } catch (error) {
         console.log(error)
         res.status(500).send('해당 카트를 삭제하지 못했습니다.')