email추가

client/src/Pages/Payment.js

@@ -14,14 +14,11 @@ function Payment({ match, location }) {
     const [userData, setUserData] = useState({})
     const [error, setError] = useState()
     const [paymentWay, setPaymentWay] = useState([])
-    // const [isAddress, setIsAddress] = useState("");
-    // const [isZoneCode, setIsZoneCode] = useState();
-    // const [isPostOpen, setIsPostOpen] = useState();
     const [post, setPost] = useState([])
     const [redirect, setRedirect] = useState(null)
     const [address, setAddress] = useState("")
     const [finalPrice, setFinalPrice] = useState(0)
-    const [num, setNum] = useState(0)
+    const [completeState, setCompleteState] = useState(false)
     const user = isAuthenticated()
 
     useEffect(() => {
@@ -40,8 +37,8 @@ function Payment({ match, location }) {
     async function getUser() {
         const name = localStorage.getItem('name')
         const tel = localStorage.getItem('tel')
-        // const email = localStorage.getItem('email')
-        setUserData({ name: name, tel: tel })
+        const email = localStorage.getItem('email')
+        setUserData({ name: name, tel: tel, email:email })
     }
 
     async function getCart() {
@@ -106,6 +103,7 @@ function Payment({ match, location }) {
 
     function handleClick() {
         if (paymentWay.length !== 0) {
+            setCompleteState(false)
             setPaymentWay([])
         }
         else {
@@ -134,6 +132,7 @@ function Payment({ match, location }) {
 
                 </Row>)
             setPaymentWay(a)
+            setCompleteState(true)
         }
     }
 
@@ -164,7 +163,9 @@ function Payment({ match, location }) {
             })
         })
         const data = await response.json()
-        console.log(data)
+        if(data) {
+            setCompleteState(true)
+        }
         window.location.href = data.redirect_url
         // setRedirect(data.redirect_url)
     }
@@ -190,21 +191,15 @@ function Payment({ match, location }) {
             })
             console.log(response.data)
             alert("주문이 완료되었습니다.")
-            return <Redirect to={'/account'} />
         } catch (error) {
             catchErrors(error, setError)
             alert("주문에 실패하셨습니다. 다시 확인해주세요.")
         }
     }
 
-    if (redirect) {
-        console.log(redirect)
-        return <Redirect to={'/kakao'} />
-    }
-
     return (
         <div>
-            {/* {console.log(order)} */}
+            {console.log(completeState)}
             <Container>
                 <h3 className="my-5 font-weight-bold text-center">주문/결제</h3>
                 <div>
@@ -222,7 +217,7 @@ function Payment({ match, location }) {
                                 </Form.Group>
                                 <Form.Group controlId="formBasicEmail">
                                     <Form.Label>이메일</Form.Label>
-                                    <Form.Control type="email" placeholder="이메일 주소를 입력해주세요" />
+                                    <Form.Control type="email" value={userData.email} readOnly />
                                 </Form.Group>
                             </Form>
                         </Col>
@@ -296,7 +291,7 @@ function Payment({ match, location }) {
                     {paymentWay}
                 </div>
                 <div className="text-center">
-                    <Button className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} onClick={paymentCompleted} block>결제완료</Button>
+                    <Button type="button" onClick={paymentCompleted} disabled={!completeState}  className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }}  block>결제완료</Button>
                 </div>
             </Container>
         </div>

client/src/Pages/Product.js

 import axios from 'axios';
 import React, { useState, useEffect, useRef } from 'react';
-import { Row, Col, Form, Card, Button } from 'react-bootstrap';
-import { Redirect } from 'react-router-dom';
+import { Row, Col, Form, Card, Button, Modal } from 'react-bootstrap';
+import { Redirect, useHistory } from 'react-router-dom';
 import catchErrors from '../utils/catchErrors';
 
 
@@ -14,12 +14,16 @@ 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
+    const [show, setShow] = useState(false);
+    let history = useHistory();
+    const handleClose = () => setShow(false);
+    const handleShow = () => setShow(true);
+
 
     useEffect(() => {
         if (size && color) {
             pushOptions()
-            console.log(cart)
+            // console.log(cart)
         }
     }, [size, color])
 
@@ -29,13 +33,29 @@ function Product({ match, location }) {
     }
 
     function pushOptions() {
-        setCart([...cart, { color, size, productId: product.id, count:1 }])
-        selected.sizes = false
-        selected.colors = false
-        console.log(product)
-        setColor("")
-        setSize("")
-        setPrice(product.price + price)
+        // console.log(cart)
+        const a = cart.map(el => {
+            const rObj = {}
+            rObj["color"] = el.color;
+            rObj["size"] = el.size;
+            return rObj
+        })
+        const isDuplicated = a.some(el => el.color === color && el.size === size)
+        if (isDuplicated) {
+            selected.sizes = false
+            selected.colors = false
+            setColor("")
+            setSize("")
+            alert("이미 선택한 옵션입니다.")
+        } else {
+            selected.sizes = false
+            selected.colors = false
+            setCart([...cart, { color, size, productId: product.id, count: 1 }])
+            setColor("")
+            setSize("")
+            setPrice(product.price + price)
+        }
+
     }
 
     function handleChange(e) {
@@ -53,8 +73,8 @@ function Product({ match, location }) {
         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
+        asd.map((el) => {
+            preprice = preprice + el.count * product.price
         })
         setCart(asd)
         setPrice(Number(preprice))
@@ -69,28 +89,47 @@ function Product({ match, location }) {
             }
         })
         let preprice = 0
-        addCount.map((el)=>{
-            preprice = preprice + el.count *product.price
+        addCount.map((el) => {
+            preprice = preprice + el.count * product.price
         })
         setPrice(Number(preprice))
         setCart(addCount)
         setCount(e.value)
     }
 
-    async function addCart() {
+    async function addCart(event) {
         console.log(cart)
-        if (localStorage.getItem('id')) {
-            // preCart(color, size, count), productId(productlist에서 props), userId(로컬) 를 보내줌
-            try {
-                setError('')
-                const response = await axios.put('/api/cart/addcart', {
-                    userId: localStorage.getItem('id'),
-                    products: cart
-                })
-                console.log(response)
-            } catch (error) {
-                catchErrors(error, setError)
+        if (cart.length < 1) {
+            alert("옵션을 선택해주세요")
+        }
+        else if (localStorage.getItem('id')) {
+            if (event.target.name === "shoppingcart") {
+                // preCart(color, size, count), productId(productlist에서 props), userId(로컬) 를 보내줌
+                try {
+                    setError('')
+                    const response = await axios.put('/api/cart/addcart', {
+                        userId: localStorage.getItem('id'),
+                        products: cart
+                    })
+                    console.log(response.data)
+                    setShow(true)
+                } catch (error) {
+                    catchErrors(error, setError)
+                }
+            } else {
+                try {
+                    setError('')
+                    const response = await axios.put('/api/cart/addcart', {
+                        userId: localStorage.getItem('id'),
+                        products: cart
+                    })
+                    console.log(response.data)
+                    history.push("/payment")
+                } catch (error) {
+                    catchErrors(error, setError)
+                }
             }
+
         } else {
             alert("로그인을 해주세요.")
             return <Redirect to='/login' />
@@ -100,7 +139,17 @@ function Product({ match, location }) {
 
     return (
         <div>
-            {console.log(cart)}
+            <Modal show={show} onHide={handleClose}>
+                <Modal.Header closeButton>
+                    <Modal.Title>장바구니에 상품담기</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>정상적으로 장바구니에 상품을 담았습니다.</Modal.Body>
+                <Modal.Footer>
+                    <Button variant="secondary" onClick={handleClose}>쇼핑계속하기</Button>
+                    <Button variant="primary" href='/shoppingcart'>장바구니로 이동</Button>
+                </Modal.Footer>
+            </Modal>
+            {/* {console.log(cart)} */}
             <style type="text/css">
                 {`
                 .btn {
@@ -155,8 +204,8 @@ function Product({ match, location }) {
                             <Col className="text-right">{price}원</Col>
                         </Row>
                         <Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}>
-                            <Button type='button' onClick={addCart} style={{ width: "49%" }}>장바구니</Button>
-                            <Button style={{ width: "49%" }}>구매하기</Button>
+                            <Button type='button' name="shoppingcart" onClick={addCart} style={{ width: "49%" }}>장바구니</Button>
+                            <Button type='button' name="payment" onClick={addCart} style={{ width: "49%" }}>구매하기</Button>
                         </Row>
                     </Form>
                 </Col>

client/src/utils/auth.js

 import axios from "axios";
 
-export function handleLogin({ userId, role, name, tel }) {
+export function handleLogin({ userId, role, name, tel, email }) {
     localStorage.setItem('id', userId)
     localStorage.setItem('role', role)
     localStorage.setItem('name', name)
     localStorage.setItem('tel', tel)
+    localStorage.setItem('email', email)
 }
 
 export async function handleLogout() {

server/controllers/auth.controller.js

@@ -7,7 +7,7 @@ const login = async (req, res) => {
     const { id, password } = req.body
     console.log(id, password)
     try {
-        const user = await User.findOne({ id }).select('password role name tel')
+        const user = await User.findOne({ id }).select('password role name tel email')
         console.log('u=', user)
         if (!user) {
             return res.status(404).send(`${id}가 존재하지 않습니다.`)
@@ -23,7 +23,7 @@ const login = async (req, res) => {
                 httpOnly: true,
                 secure: config.env === 'production'
             })
-            res.json({ userId: user._id, role: user.role, name: user.name, tel: user.tel })
+            res.json({ userId: user._id, role: user.role, name: user.name, tel: user.tel, email:user.email })
 
         } else {
             res.status(401).send('비밀번호가 일치하지 않습니다.')