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

client/src/Components/ListCard.js

@@ -15,7 +15,7 @@ function ListCard({ id, name, price, main_img }) {
             <Card.Body>
                 <Card.Title style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{name}</Card.Title>
                 <Card.Text>{price} 원</Card.Text>
-                <Button className="float-right" onClick={handleDelete}>삭제</Button>
+                {/* <Button className="float-right" onClick={handleDelete}>삭제</Button> */}
             </Card.Body>
         </Card>
     )

client/src/Pages/Payment.js

@@ -2,15 +2,15 @@ import axios from 'axios';
 import React, { useState, useEffect, useRef } from 'react';
 import DaumPostcode from "react-daum-postcode";
 import { Container, Card, Row, Col, Button, Form, FormGroup } from 'react-bootstrap';
-import { Redirect } from 'react-router-dom';
+import { Redirect, Link } from 'react-router-dom';
 import PaymentCard from '../Components/PaymentCard';
 import { isAuthenticated } from '../utils/auth';
 import catchErrors from '../utils/catchErrors';
 
 function Payment({ match, location }) {
 
-    const [cart, setCart] = useState(location.state)
-    const [order, setOrder] = useState({products: location.state})
+    const [cart, setCart] = useState([])
+    const [order, setOrder] = useState({ products: [] })
     const [userData, setUserData] = useState({})
     const [error, setError] = useState()
     const [paymentWay, setPaymentWay] = useState([])
@@ -26,18 +26,31 @@ function Payment({ match, location }) {
 
     useEffect(() => {
         getUser()
+        getCart()
+    }, [user])
+
+    useEffect(() => {
         let price = 0
         cart.map((el) => {
             price = Number(el.count) * Number(el.productId.price) + price
         })
         setFinalPrice(price)
-    }, [user])
+    }, [cart])
 
     async function getUser() {
+        const name = localStorage.getItem('name')
+        const tel = localStorage.getItem('tel')
+        // const email = localStorage.getItem('email')
+        setUserData({ name: name, tel: tel })
+    }
+
+    async function getCart() {
         try {
-            const response = await axios.get(`/api/users/getuser/${user}`)
+            const response = await axios.get(`/api/cart/showcart/${user}`)
             console.log(response.data)
-            setUserData(response.data)
+            const preCart = response.data.filter((el) => el.checked === true)
+            setCart(preCart)
+            setOrder({ products: preCart })
         } catch (error) {
             catchErrors(error, setError)
         }
@@ -45,8 +58,8 @@ function Payment({ match, location }) {
 
     function handleReceiverInfo(e) {
         const { name, value } = e.target
-        console.log(name,value)
-        setOrder({ ...order, receiverInfo: {...order.receiverInfo, [name]: value } })
+        console.log(name, value)
+        setOrder({ ...order, receiverInfo: { ...order.receiverInfo, [name]: value } })
     }
 
     function postClick() {
@@ -78,7 +91,7 @@ function Payment({ match, location }) {
             fullAddress += extraAddress !== "" ? ` (${extraAddress})` : "";
         }
         setAddress({ full: fullAddress, code: data.zonecode });
-        setOrder({ ...order, receiverInfo: {...order.receiverInfo, address: fullAddress, postalCode: data.zonecode  } })
+        setOrder({ ...order, receiverInfo: { ...order.receiverInfo, address: fullAddress, postalCode: data.zonecode } })
         console.log(fullAddress);
     }
 
@@ -125,6 +138,12 @@ function Payment({ match, location }) {
     }
 
     async function kakaopay() {
+        let itemNames = ""
+        if (cart.length > 1) {
+            itemNames = cart[0].productId.pro_name + ' 외 ' + String(cart.length - 1) + '개'
+        } else {
+            itemNames = cart[0].productId.pro_name
+        }
         const response = await fetch('/api/kakaopay/test/single', {
             method: "POST",
             headers: {
@@ -133,15 +152,15 @@ function Payment({ match, location }) {
             body: JSON.stringify({
                 cid: 'TC0ONETIME',
                 partner_order_id: 'partner_order_id',
-                partner_user_id: 'partner_user_id',
-                item_name: '앙고라 반목 폴라 베이직 모헤어 니트 (T)',
-                quantity: 1,
-                total_amount: 22000,
+                partner_user_id: user,
+                item_name: itemNames,
+                quantity: cart.length,
+                total_amount: finalPrice + 2500,
                 vat_amount: 200,
                 tax_free_amount: 0,
-                approval_url: 'http://localhost:3000/account',
-                fail_url: 'http://localhost:3000/shoppingcart',
-                cancel_url: 'http://localhost:3000/kakaopay/payment',
+                approval_url: 'http://localhost:3000/payment',
+                fail_url: 'http://localhost:3000/payment',
+                cancel_url: 'http://localhost:3000/payment',
             })
         })
         const data = await response.json()
@@ -150,19 +169,31 @@ function Payment({ match, location }) {
         // setRedirect(data.redirect_url)
     }
 
-    async function paymentCompleted(){
-        console.log(user)
+    async function paymentCompleted() {
         console.log(order)
-        console.log(finalPrice)
+        const cartIds = []
+        order.products.map((el) => {
+            cartIds.push(el._id)
+        })
         try {
             const response = await axios.post(`/api/order/addorder`, {
-                userId : user,
+                userId: user,
                 ...order,
-                total : finalPrice+2500
+                total: finalPrice + 2500
+            })
+            const response2 = await axios.post(`/api/cart/deletecart2`, {
+                userId: user,
+                cartId: cartIds
+            })
+            const response3 = await axios.post(`/api/product/pluspurchase`, {
+                products: order.products
             })
             console.log(response.data)
+            alert("주문이 완료되었습니다.")
+            return <Redirect to={'/account'} />
         } catch (error) {
             catchErrors(error, setError)
+            alert("주문에 실패하셨습니다. 다시 확인해주세요.")
         }
     }
 
@@ -258,7 +289,7 @@ function Payment({ match, location }) {
 
                 <div>
                     <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>결제수단</h5>
-                    <div className="text-center mt-5">
+                    <div className="text-center m-3">
                         <Button variant="success" className="align-top" onClick={handleClick} >무통장입금</Button>
                         <input type="image" alt="카카오페이결제" src="icon/payment_icon_yellow_small.png" onClick={kakaopay} />
                     </div>

client/src/Pages/Product.js

@@ -14,6 +14,7 @@ function Product({ match, location }) {
     const [selected, setSelected] = useState({ sizes: false, colors: false })
     const [count, setCount] = useState(1)
     const [price, setPrice] = useState(0)
+    // let price = 0
 
     useEffect(() => {
         if (size && color) {
@@ -22,16 +23,16 @@ function Product({ match, location }) {
         }
     }, [size, color])
 
-
     function handleClick(e) {
         const box = e.target.parentNode.parentNode
         box.style.display = "none"
     }
 
     function pushOptions() {
-        setCart([...cart, { color, size, productId: product.id }])
+        setCart([...cart, { color, size, productId: product.id, count:1 }])
         selected.sizes = false
         selected.colors = false
+        console.log(product)
         setColor("")
         setSize("")
         setPrice(product.price + price)
@@ -50,19 +51,28 @@ function Product({ match, location }) {
 
     function deleteOption(e) {
         e.preventDefault()
+        let preprice = 0
         const asd = cart.filter((el) => el.color !== e.target.id || el.size !== e.target.name)
+        asd.map((el)=>{
+            preprice = preprice + el.count *product.price
+        })
         setCart(asd)
+        setPrice(Number(preprice))
     }
 
     function handleCount(e) {
-        e.preventDefault()
-        const addCount = cart.map((el)=>{
-            if(el.color !== e.target.id || el.size !== e.target.name){
-                return {el}
+        const addCount = cart.map((el) => {
+            if (el.color !== e.target.id || el.size !== e.target.name) {
+                return { ...el }
             } else {
-                return {...el, count : e.target.value}
+                return { ...el, count: e.target.value }
             }
         })
+        let preprice = 0
+        addCount.map((el)=>{
+            preprice = preprice + el.count *product.price
+        })
+        setPrice(Number(preprice))
         setCart(addCount)
         setCount(e.value)
     }
@@ -90,7 +100,7 @@ function Product({ match, location }) {
 
     return (
         <div>
-            {/* {console.log("match=", match.params, "location=", location.state, "product=", product)} */}
+            {console.log(cart)}
             <style type="text/css">
                 {`
                 .btn {
@@ -129,14 +139,15 @@ function Product({ match, location }) {
                             </Form.Control>
                         </Form.Group>
                         {cart.map((e) => (
-                            <div>
-                                <span>{e.color}/{e.size}</span>
-                                <input onClick={deleteOption} id={e.color} name={e.size} type="image" alt="삭제버튼" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right align-middle" />
-                                <span>{e.price}원</span>
-                                <span className="float-right mx-2">
+                            <Row className="mx-1">
+                                <Col xs={6}>{e.color}/{e.size}</Col>
+                                <Col xs={4} className="text-right" >
                                     <input type='number' id={e.color} name={e.size} onChange={handleCount} value={count} style={{ width: '3rem' }} className="text-center" />
-                                </span>
-                            </div>
+                                </Col>
+                                <Col xs={2} className="text-right">
+                                    <input onClick={deleteOption} id={e.color} name={e.size} type="image" alt="삭제버튼" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="align-middle" />
+                                </Col>
+                            </Row>
 
                         ))}
                         <Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}>

client/src/Pages/ProductsList.js

@@ -99,7 +99,20 @@ function ProductsList({ match }) {
                 </Row>
                 <Row md={8} sm={12} className="justify-content-center m-2">
                     {productlist.map(pro => (
-                        <ListCard as={Link} id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} to={{
+                        // <ListCard as={Link} id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} to={{
+                        //     pathname: `/product/${pro._id}`,
+                        //     state: {
+                        //         id: pro._id,
+                        //         name: pro.pro_name,
+                        //         price: pro.price,
+                        //         colors: pro.colors,
+                        //         sizes: pro.sizes,
+                        //         description: pro.description,
+                        //         main_img: pro.main_imgUrl,
+                        //         detail_imgs: pro.detail_imgUrls
+                        //     }
+                        // }} />
+                        <Link to={{
                             pathname: `/product/${pro._id}`,
                             state: {
                                 id: pro._id,
@@ -111,7 +124,9 @@ function ProductsList({ match }) {
                                 main_img: pro.main_imgUrl,
                                 detail_imgs: pro.detail_imgUrls
                             }
-                        }} />
+                        }}>
+                            <ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
+                        </Link>
                     ))}
                 </Row>
             </Container>

client/src/Pages/ShoppingCart.js

@@ -75,6 +75,7 @@ function ShoppingCart() {
 
     async function getCart() {
         try {
+            setError('')
             const response = await axios.get(`/api/cart/showcart/${user}`)
             const addChecked = response.data.map((el) => {
                     return { ...el, checked: false }
@@ -86,8 +87,22 @@ function ShoppingCart() {
         }
     }
 
+    function putCheckedCart(){
+        try {
+            setError('')
+            const response =  axios.post(`/api/cart/changecart`, {
+                userId:user,
+                products: cart
+            })
+            console.log(response.data)
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
     return (
         <div>
+            {console.log(cart)}
             <Container className="justify-content-center">
                 <h1 className="my-5 font-weight-bold text-center">장바구니</h1>
                 <div>
@@ -116,7 +131,7 @@ function ShoppingCart() {
                     <Button as={Link} to={{
                         pathname: `/payment`,
                         state: finalCart 
-                    }} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} block>결제하기</Button>
+                    }} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} onClick={putCheckedCart} block>결제하기</Button>
                 </div>
             </Container>
 

server/controllers/cart.controller.js

 import Cart from "../schemas/Cart.js";
 
-const addcart = async (req, res) => {
-    const { userId, products} = req.body
+const addCart = async (req, res) => {
+    const { userId, products } = req.body
     try {
         const cart = await Cart.findOne({ userId: userId })
         await Cart.updateOne(
             { _id: cart._id },
-            {$push: {products: products}}
+            { $push: { products: products } }
         )
         res.status(200).send('카트에 저장되었습니다.')
     } catch (error) {
@@ -15,11 +15,26 @@ const addcart = async (req, res) => {
     }
 }
 
-const showcart = async (req, res) => {
+const changeCart = async (req, res) => {
+    const { userId, products } = req.body
+    console.log(products)
+    try {
+        const cart = await Cart.findOne({ userId: userId })
+        await Cart.updateOne(
+            { _id: cart._id },
+            { $set: { products: products } }
+        )
+        res.send("카트에 체크가 활성화되었습니다")
+    } catch (error) {
+        res.send("카트 체인지 실패")
+    }
+}
+
+const showCart = async (req, res) => {
     try {
         const cart = await Cart.findOne({ userId: req.id }).populate({
             path: 'products.productId',
-            model: 'Product' 
+            model: 'Product'
         })
         res.status(200).json(cart.products)
     } catch (error) {
@@ -28,18 +43,18 @@ const showcart = async (req, res) => {
     }
 }
 
-const deletecart = async (req, res) => {
+const deleteCart = async (req, res) => {
     console.log(req.body)
-    const { userId,cartId } = req.body
+    const { userId, cartId } = req.body
     try {
         const cart = await Cart.findOneAndUpdate(
             { userId: userId },
-            { $pull: { products: {_id:cartId} } },
+            { $pull: { products: { _id: cartId } } },
             { new: true }
-          ).populate({
+        ).populate({
             path: 'products.productId',
             model: 'Product'
-          })
+        })
         // res.send("삭제완료")
         res.json(cart)
     } catch (error) {
@@ -48,6 +63,29 @@ const deletecart = async (req, res) => {
 
     }
 }
+const deleteCart2 = async (req, res) => {
+    console.log(req.body)
+    const { userId, cartId } = req.body
+    try {
+        for( let i = 0; i < cartId.length; i++ ){
+            await Cart.findOneAndUpdate(
+                { userId: userId },
+                { $pull: { products: { _id: cartId[i] } } },
+                { new: true }
+            ).populate({
+                path: 'products.productId',
+                model: 'Product'
+            })
+        }
+        res.send("주문완료 쇼핑카트 삭제")
+        // res.json(cart)
+    } catch (error) {
+        console.log(error)
+        res.status(500).send('해당 카트를 삭제하지 못했습니다.')
+
+    }
+}
+
 const userById = async (req, res, next, id) => {
     try {
         const cart = await Cart.findOne({ userId: id })
@@ -63,4 +101,4 @@ const userById = async (req, res, next, id) => {
 }
 
 
-export default { addcart, showcart, deletecart, userById }
+export default { addCart, changeCart, showCart, deleteCart,deleteCart2, userById }
\ No newline at end of file

server/controllers/category.controller.js

@@ -3,7 +3,7 @@ import Category from "../schemas/Category.js";
 const getCategory = async (req, res) => {
     try {
         const category = await Category.find({}, { _id: 0 })
-        console.log("main= ", category);
+        // console.log("main= ", category);
         res.json(category)
     } catch (error) {
         console.log(error)
@@ -12,11 +12,11 @@ const getCategory = async (req, res) => {
 }
 
 const getSubCategory = async (req, res) => {
-    console.log("req.params=", req.params);
+    // console.log("req.params=", req.params);
     const { sub } = req.params
     try {
         const subcategory = await Category.findOne({}, { _id: 0}).select(`${sub}`)
-        console.log("sub= ",subcategory);
+        // console.log("sub= ",subcategory);
         res.json(subcategory);
     } catch (error) {
         res.status(500).send('카테고리를 불러오지 못했습니다.')
@@ -27,8 +27,8 @@ const getToHome = async (res, req) => {
     try {
         const bestProduct = await Product.find({}).sort({ purchase: 1 }).limit(6)
         const newProduct = await Product.find({}).sort({ createdAt: -1 }).limit(6)
-        console.log("best=", bestProduct)
-        console.log("new=", newProduct)
+        // console.log("best=", bestProduct)
+        // console.log("new=", newProduct)
         res.json(bestProduct, newProduct)
     } catch {
         res.status(500).send('상품을 불러오지 못했습니다.')

server/controllers/product.controller.js

@@ -33,8 +33,8 @@ const getToHome = async (req, res) => {
     try {
         const bestProduct = await Product.find({}).sort({ purchase: -1 }).limit(6)
         const newProduct = await Product.find({}).sort({ createdAt: -1 }).limit(6)
-        console.log("best=", bestProduct)
-        console.log("new=", newProduct)
+        // console.log("best=", bestProduct)
+        // console.log("new=", newProduct)
         res.json({ bestProduct, newProduct })
     } catch {
         res.status(500).send('상품을 불러오지 못했습니다.')
@@ -92,4 +92,26 @@ const subcategoryId = async (req, res, next, subcategory) => {
     }
 }
 
-export default { imageUpload, regist, getToHome, getAll, categoryId, getlist, subcategoryId, subgetlist }
+const plusPurchase = async (req, res) => {
\ No newline at end of file
+    const { products } = req.body
+    // console.log(products)
+    try {
+        for (let i = 0; i < products.length; i++) {
+            const count = products[i].count
+            const product = await Product.findOne(
+                {_id: products[i].productId._id }
+            )
+            const purchase = product.purchase
+            await Product.updateOne(
+                { _id: products[i].productId._id },
+                { $set: { purchase: count + purchase } }
+            )
+            // console.log("i=", i)
+        }
+        res.send("구매수 늘리기 성공")
+    } catch (error) {
+        res.status(500).send('구매숫자를 늘리지 못함')
+    }
+}
+
+export default { imageUpload, regist, getToHome, getAll, categoryId, getlist, subcategoryId, subgetlist, plusPurchase }
\ No newline at end of file

server/routes/cart.routes.js

@@ -5,15 +5,20 @@ import cartCtrl from '../controllers/cart.controller.js';
 const router = express.Router()
 
 router.route('/addcart')
-    .put(cartCtrl.addcart)
+    .put(cartCtrl.addCart)
 // .get()
 
 router.route('/showcart/:userId')
-    .get(cartCtrl.showcart)
-router.param('userId', cartCtrl.userById)
+    .get(cartCtrl.showCart)
 
+router.route('/changecart')
+    .post(cartCtrl.changeCart)
 
 router.route('/deletecart')
-    .post(cartCtrl.deletecart)
-    
+    .post(cartCtrl.deleteCart)
+router.route('/deletecart2')
+    .post(cartCtrl.deleteCart2)
+
+router.param('userId', cartCtrl.userById)
+
 export default router
\ No newline at end of file

server/routes/product.routes.js

@@ -19,8 +19,10 @@ router.route('/getproduct/:category')
 router.route('/getproduct/:subcategory')
     .get(productCtrl.subgetlist)
 
-router.param('category', productCtrl.categoryId)
+router.route('/pluspurchase')
+    .post(productCtrl.plusPurchase)
 
+router.param('category', productCtrl.categoryId)
 router.param('subcategory',productCtrl.subcategoryId)
     
 export default router
\ No newline at end of file

server/schemas/Cart.js

@@ -22,6 +22,9 @@ const CartSchema = new mongoose.Schema({
                 },
                 color: {
                     type: String
+                },
+                checked: {
+                    type: Boolean
                 }
             }
         ]

server/schemas/Order.js

@@ -24,32 +24,35 @@ const OrderSchema = new mongoose.Schema({
             color: {
                 type: String,
                 required: true
+            },
+            checked: {
+                type: Boolean
             }
         }
     ],
-    receiverInfo: 
-        {
-            name: {
-                type:String,
-                required:true
-            },
-            tel: {
-                type: String,
-                required:true
-            },
-            postalCode:{
-                type:String,
-                required:true
-            },
-            address: {
-                type: String,
-                required: true
-            },
-            address2: {
-                type: String,
-                required: true
-            }
+    receiverInfo:
+    {
+        name: {
+            type: String,
+            required: true
+        },
+        tel: {
+            type: String,
+            required: true
+        },
+        postalCode: {
+            type: String,
+            required: true
+        },
+        address: {
+            type: String,
+            required: true
+        },
+        address2: {
+            type: String,
+            required: true
         }
+    }
     ,
     total: {
         type: Number,