Commit cdab6bf2 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

email추가

parent 9f51e246
......@@ -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>
......
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>
......
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() {
......
......@@ -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('비밀번호가 일치하지 않습니다.')
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment