Merge remote-tracking branch 'origin/jiwon' into jaeyeon

client/src/Components/CartCard.js

@@ -2,8 +2,6 @@ import React from 'react'
 import { Card, Button, Container, Row, Col } from 'react-bootstrap';
 
 function CartCard(props) {
-
-
     return (
         <>
             {props.cart.map((e) => (
@@ -13,13 +11,13 @@ function CartCard(props) {
                                 <input className="" type="checkbox" id="exampleCheck1" />
                             </Col>
                             <Col className="text-center">
-                                <Card.Img className="img-fluid" variant="top" src={e.main_image && `/images/${e.main_image}`} style={{ width: '20rem' }} />
+                                <Card.Img className="img-fluid" variant="top" src={e.productId.main_image && `/images/${e.productId.main_image}`} style={{ width: '20rem' }} />
                             </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} />
-                                    <Card.Title className="font-weight-bold mt-3">{e.pro_name}</Card.Title>
-                                    <Card.Text>가격: {e.price}</Card.Text>
+                                    <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>
                                     <Card.Text>수량</Card.Text>
                                     <div>

client/src/Pages/Product.js

@@ -6,18 +6,29 @@ import catchErrors from '../utils/catchErrors';
 const INIT_PRODUCT = {
     pro_name: '스키니진',
     price: 12000,
-    count:1,
+    count: 1,
     main_category: 'PANTS',
     sub_category: ['SKINNY JEANS'],
-    sizes: [ 'L', 'M'],
+    sizes: ['L', 'M'],
     colors: ['연청', '진청'],
-    main_image: "a8f4d63ead77717f940a2b27deb707a6"
+    main_image: "a8f4d63ead77717f940a2b27deb707a6",
+    productId:"5ffda03428faf35de8319360"
 }
+const preCart = []
 
 function Product() {
     const [product, setProduct] = useState(INIT_PRODUCT)
     const [cart, setCart] = useState(INIT_PRODUCT)
     const [error, setError] = useState('')
+    const [selected, setSelected] = useState({ sizes: false, colors: false })
+    const [n, setN] = useState(1)
+
+    useEffect(() => {
+        if (selected.sizes === true && selected.colors === true) {
+            pushOptions()
+            console.log(preCart)
+        }
+    }, [cart])
 
 
     function handleClick(e) {
@@ -25,10 +36,24 @@ function Product() {
         box.style.display = "none"
     }
 
+    function pushOptions() {
+        preCart.push(cart)
+        selected.sizes = false
+        selected.colors = false
+        setN(n+1)
+    }
     function handleChange(e) {
         const { name, value } = e.target
+        if (e.target.name === "sizes") {
+            setCart({ ...cart, [name]: value })
+            selected.sizes = true
+        } else if (e.target.name === "colors") {
+            setCart({ ...cart, [name]: value })
+            selected.colors = true
+        }
+        // setCart({ ...cart, [name]: value })
+
         // handleCreate()
-        setCart({ ...cart, [name]: value })
     }
 
     function listDelete(e) {
@@ -39,29 +64,29 @@ function Product() {
 
     function handleCreate() {
         console.log("실행", "cart=", product)
-        if (product !== undefined) {
-            if (product.colors !== "" && product.sizes !== "") {
-                cart.push(
-                    <div className="d-flex justify-content-between my-2" >
-                        <p>{product.color}  {product.size} </p>  
-                        <input name="count" type="number" min="0" max="10" style="width: 40px" onChange={handleChange} />
-                        <p style="margin-bottom: 0px">{product.price}</p>
-                    </div>
-                )
-                // const list = document.getElementById('list')
-                // list.style.borderBottom = "1px solid"
-                // const shopping = document.createElement('div')
-                // shopping.className = "d-flex justify-content-between my-2"
-                // shopping.innerHTML = `${product.color} / ${product.size}
-                // <input type="number" min="0" max="10" value="1" style="width: 40px" />
-                // <p style="margin-bottom: 0px">14,000원</p>`
-                // const deleteA = document.createElement('a')
-                // deleteA.innerText = 'X'
-                // deleteA.addEventListener('click', listDelete)
-                // shopping.appendChild(deleteA)
-                // list.appendChild(shopping)
-            }
-        }
+        // if (product !== undefined) {
+        //     if (product.colors !== "" && product.sizes !== "") {
+        //         cart.push(
+        //             <div className="d-flex justify-content-between my-2" >
+        //                 <p>{product.color}  {product.size} </p>
+        //                 <input name="count" type="number" min="0" max="10" style="width: 40px" onChange={handleChange} />
+        //                 <p style="margin-bottom: 0px">{product.price}</p>
+        //             </div>
+        //         )
+        // const list = document.getElementById('list')
+        // list.style.borderBottom = "1px solid"
+        // const shopping = document.createElement('div')
+        // shopping.className = "d-flex justify-content-between my-2"
+        // shopping.innerHTML = `${product.color} / ${product.size}
+        // <input type="number" min="0" max="10" value="1" style="width: 40px" />
+        // <p style="margin-bottom: 0px">14,000원</p>`
+        // const deleteA = document.createElement('a')
+        // deleteA.innerText = 'X'
+        // deleteA.addEventListener('click', listDelete)
+        // shopping.appendChild(deleteA)
+        // list.appendChild(shopping)
+        // }
+        // }
     }
 
     async function addCart() {
@@ -69,8 +94,9 @@ function Product() {
         try {
             // setError('')
             const response = await axios.put('/api/cart/addcart', {
-                count: cart.count,
-                productId: "5ffd153b41bada58d8b12d92",
+                userId: localStorage.getItem('loginStatus'),
+                productId: "a8f4d63ead77717f940a2b27deb707a6",
+                products: preCart
             })
             console.log(response)
         } catch (error) {
@@ -124,8 +150,9 @@ function Product() {
                                 ))}
                             </Form.Control>
                         </Form.Group>
-                        {/* {cart.map((e)=>(<div>{e}</div>
-                        ))} */}
+                        {preCart.map((e) => (
+                            <div>{e.colors}/{e.sizes}</div>
+                        ))}
                         <Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}>
                             <Col>총 금액</Col>
                             <Col className="text-right">14,000원</Col>

client/src/Pages/ShoppingCart.js

@@ -6,21 +6,12 @@ import catchErrors from '../utils/catchErrors';
 import { isAuthenticated } from '../utils/auth'
 import CartCard from '../Components/CartCard';
 
-const INIT_PRODUCT = [{
-    pro_name: '체크셔츠',
-    price: 21000,
-    count: 1,
-    main_category: 'TOP',
-    sub_category: ['SHIRT'],
-    sizes: ['XL', 'L', 'M', 'S'],
-    colors: ['베이지', '블랙', '카키'],
-    main_image: 'e46b641ae11e6568c86f689d3dce7748'
-}]
+function ShoppingCart() {
 
 function ShoppingCart() {
     const [num, setNum] = useState(0)
     const [error, setError] = useState('')
-    const [cart, setCart] = useState(INIT_PRODUCT)
+    const [cart, setCart] = useState()
     const user = isAuthenticated()
 
     useEffect(() => {
@@ -72,7 +63,7 @@ function ShoppingCart() {
                 <h3 className="my-5 font-weight-bold text-center">장바구니</h3>
                 <div>
                     <h4 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h4>
-                    <CartCard cart={cart} deleteCart={deleteCart} minusNum={minusNum} plusNum={plusNum} num={num} />
+                    {cart?<CartCard cart={cart} deleteCart={deleteCart} minusNum={minusNum} plusNum={plusNum} num={num} />:<div></div>}
 
                 </div>
                 <div className="p-5 m-5" style={{ background: '#F7F3F3' }}>

server/controllers/cart.controller.js

 import Cart from "../schemas/Cart.js";
 
 const addcart = async (req, res) => {
-    console.log(req.body)
-    const { count, productId } = req.body
+    // console.log(req.body)
+    const { userId, products} = req.body
     try {
-        const newProduct = { count, product: productId }
-        await Cart.findOneAndUpdate(
+        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 } }
+            // { $addToSet: { products: newProduct } }
+            {$set: {products: products}}
         )
-        res.json(newCart)
+        res.status(200).send('Cart updated')
+
     } catch (error) {
         console.log(error)
         res.status(500).send('죄송합니다. 다시 입력해 주십시오.')
@@ -18,15 +25,15 @@ const addcart = async (req, res) => {
 
 const showcart = async (req, res) => {
     // const {userId} = req.body
-    console.log(req.cart)
+    // console.log(req.cart)
+    // console.log(req.id)
+
     try {
-        const cart = await Cart.findOne({ user: userId }).populate({
-            path: 'products.product',
+        const cart = await Cart.findOne({ userId: req.id }).populate({
+            path: 'products.productId',
             model: 'Product'
         })
         res.status(200).json(cart.products)
-
-
     } catch (error) {
         console.log(error)
         res.status(500).send('쇼핑카트를 불러오지 못했습니다.')
@@ -53,6 +60,7 @@ const userById = async (req, res, next, id) => {
             res.status(404).send("사용자를 찾을 수 없습니다.")
         }
         req.cart = cart
+        req.id = id
         next()
     } catch (error) {
         res.status(500).send("사용자 아이디 검색 실패")

server/controllers/user.controller.js

+import Cart from "../schemas/Cart.js";
 import User from "../schemas/User.js";
 import isLength from 'validator/lib/isLength.js';
 import bcrypt from 'bcryptjs';
@@ -16,7 +17,6 @@ const signup = async (req, res) => {
             return res.status(422).send(`${id}가 이미 사용중입니다.`)
         }
 
-
         const hash = await bcrypt.hash(password, 10)
 
         const newUser = await new User({
@@ -27,7 +27,7 @@ const signup = async (req, res) => {
             password: hash,
             tel,
         }).save()
-        await new Cart({ user: newUser._id }).save()
+        await new Cart({ userId: newUser._id }).save()
         console.log(newUser)
         res.json(newUser)
 

server/schemas/Cart.js

@@ -13,9 +13,15 @@ const CartSchema = new mongoose.Schema({
                     type: Number,
                     default: 1
                 },
-                product: {
+                productId: {
                     type: ObjectId,
                     ref: 'Product'
+                },
+                sizes: {
+                    type: String
+                },
+                colors: {
+                    type: String
                 }
             }
         ]