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

email추가

parent 9f51e246
...@@ -14,14 +14,11 @@ function Payment({ match, location }) { ...@@ -14,14 +14,11 @@ function Payment({ match, location }) {
const [userData, setUserData] = useState({}) const [userData, setUserData] = useState({})
const [error, setError] = useState() const [error, setError] = useState()
const [paymentWay, setPaymentWay] = useState([]) const [paymentWay, setPaymentWay] = useState([])
// const [isAddress, setIsAddress] = useState("");
// const [isZoneCode, setIsZoneCode] = useState();
// const [isPostOpen, setIsPostOpen] = useState();
const [post, setPost] = useState([]) const [post, setPost] = useState([])
const [redirect, setRedirect] = useState(null) const [redirect, setRedirect] = useState(null)
const [address, setAddress] = useState("") const [address, setAddress] = useState("")
const [finalPrice, setFinalPrice] = useState(0) const [finalPrice, setFinalPrice] = useState(0)
const [num, setNum] = useState(0) const [completeState, setCompleteState] = useState(false)
const user = isAuthenticated() const user = isAuthenticated()
useEffect(() => { useEffect(() => {
...@@ -40,8 +37,8 @@ function Payment({ match, location }) { ...@@ -40,8 +37,8 @@ function Payment({ match, location }) {
async function getUser() { async function getUser() {
const name = localStorage.getItem('name') const name = localStorage.getItem('name')
const tel = localStorage.getItem('tel') const tel = localStorage.getItem('tel')
// const email = localStorage.getItem('email') const email = localStorage.getItem('email')
setUserData({ name: name, tel: tel }) setUserData({ name: name, tel: tel, email:email })
} }
async function getCart() { async function getCart() {
...@@ -106,6 +103,7 @@ function Payment({ match, location }) { ...@@ -106,6 +103,7 @@ function Payment({ match, location }) {
function handleClick() { function handleClick() {
if (paymentWay.length !== 0) { if (paymentWay.length !== 0) {
setCompleteState(false)
setPaymentWay([]) setPaymentWay([])
} }
else { else {
...@@ -134,6 +132,7 @@ function Payment({ match, location }) { ...@@ -134,6 +132,7 @@ function Payment({ match, location }) {
</Row>) </Row>)
setPaymentWay(a) setPaymentWay(a)
setCompleteState(true)
} }
} }
...@@ -164,7 +163,9 @@ function Payment({ match, location }) { ...@@ -164,7 +163,9 @@ function Payment({ match, location }) {
}) })
}) })
const data = await response.json() const data = await response.json()
console.log(data) if(data) {
setCompleteState(true)
}
window.location.href = data.redirect_url window.location.href = data.redirect_url
// setRedirect(data.redirect_url) // setRedirect(data.redirect_url)
} }
...@@ -190,21 +191,15 @@ function Payment({ match, location }) { ...@@ -190,21 +191,15 @@ function Payment({ match, location }) {
}) })
console.log(response.data) console.log(response.data)
alert("주문이 완료되었습니다.") alert("주문이 완료되었습니다.")
return <Redirect to={'/account'} />
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
alert("주문에 실패하셨습니다. 다시 확인해주세요.") alert("주문에 실패하셨습니다. 다시 확인해주세요.")
} }
} }
if (redirect) {
console.log(redirect)
return <Redirect to={'/kakao'} />
}
return ( return (
<div> <div>
{/* {console.log(order)} */} {console.log(completeState)}
<Container> <Container>
<h3 className="my-5 font-weight-bold text-center">주문/결제</h3> <h3 className="my-5 font-weight-bold text-center">주문/결제</h3>
<div> <div>
...@@ -222,7 +217,7 @@ function Payment({ match, location }) { ...@@ -222,7 +217,7 @@ function Payment({ match, location }) {
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicEmail"> <Form.Group controlId="formBasicEmail">
<Form.Label>이메일</Form.Label> <Form.Label>이메일</Form.Label>
<Form.Control type="email" placeholder="이메일 주소를 입력해주세요" /> <Form.Control type="email" value={userData.email} readOnly />
</Form.Group> </Form.Group>
</Form> </Form>
</Col> </Col>
...@@ -296,7 +291,7 @@ function Payment({ match, location }) { ...@@ -296,7 +291,7 @@ function Payment({ match, location }) {
{paymentWay} {paymentWay}
</div> </div>
<div className="text-center"> <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> </div>
</Container> </Container>
</div> </div>
......
import axios from 'axios'; import axios from 'axios';
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Row, Col, Form, Card, Button } from 'react-bootstrap'; import { Row, Col, Form, Card, Button, Modal } from 'react-bootstrap';
import { Redirect } from 'react-router-dom'; import { Redirect, useHistory } from 'react-router-dom';
import catchErrors from '../utils/catchErrors'; import catchErrors from '../utils/catchErrors';
...@@ -14,12 +14,16 @@ function Product({ match, location }) { ...@@ -14,12 +14,16 @@ function Product({ match, location }) {
const [selected, setSelected] = useState({ sizes: false, colors: false }) const [selected, setSelected] = useState({ sizes: false, colors: false })
const [count, setCount] = useState(1) const [count, setCount] = useState(1)
const [price, setPrice] = useState(0) 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(() => { useEffect(() => {
if (size && color) { if (size && color) {
pushOptions() pushOptions()
console.log(cart) // console.log(cart)
} }
}, [size, color]) }, [size, color])
...@@ -29,15 +33,31 @@ function Product({ match, location }) { ...@@ -29,15 +33,31 @@ function Product({ match, location }) {
} }
function pushOptions() { function pushOptions() {
setCart([...cart, { color, size, productId: product.id, count:1 }]) // 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.sizes = false
selected.colors = false selected.colors = false
console.log(product) setCart([...cart, { color, size, productId: product.id, count: 1 }])
setColor("") setColor("")
setSize("") setSize("")
setPrice(product.price + price) setPrice(product.price + price)
} }
}
function handleChange(e) { function handleChange(e) {
const { name, value } = e.target const { name, value } = e.target
if (name === "sizes") { if (name === "sizes") {
...@@ -53,8 +73,8 @@ function Product({ match, location }) { ...@@ -53,8 +73,8 @@ function Product({ match, location }) {
e.preventDefault() e.preventDefault()
let preprice = 0 let preprice = 0
const asd = cart.filter((el) => el.color !== e.target.id || el.size !== e.target.name) const asd = cart.filter((el) => el.color !== e.target.id || el.size !== e.target.name)
asd.map((el)=>{ asd.map((el) => {
preprice = preprice + el.count *product.price preprice = preprice + el.count * product.price
}) })
setCart(asd) setCart(asd)
setPrice(Number(preprice)) setPrice(Number(preprice))
...@@ -69,17 +89,21 @@ function Product({ match, location }) { ...@@ -69,17 +89,21 @@ function Product({ match, location }) {
} }
}) })
let preprice = 0 let preprice = 0
addCount.map((el)=>{ addCount.map((el) => {
preprice = preprice + el.count *product.price preprice = preprice + el.count * product.price
}) })
setPrice(Number(preprice)) setPrice(Number(preprice))
setCart(addCount) setCart(addCount)
setCount(e.value) setCount(e.value)
} }
async function addCart() { async function addCart(event) {
console.log(cart) console.log(cart)
if (localStorage.getItem('id')) { if (cart.length < 1) {
alert("옵션을 선택해주세요")
}
else if (localStorage.getItem('id')) {
if (event.target.name === "shoppingcart") {
// preCart(color, size, count), productId(productlist에서 props), userId(로컬) 를 보내줌 // preCart(color, size, count), productId(productlist에서 props), userId(로컬) 를 보내줌
try { try {
setError('') setError('')
...@@ -87,10 +111,25 @@ function Product({ match, location }) { ...@@ -87,10 +111,25 @@ function Product({ match, location }) {
userId: localStorage.getItem('id'), userId: localStorage.getItem('id'),
products: cart products: cart
}) })
console.log(response) console.log(response.data)
setShow(true)
} catch (error) { } catch (error) {
catchErrors(error, setError) 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 { } else {
alert("로그인을 해주세요.") alert("로그인을 해주세요.")
return <Redirect to='/login' /> return <Redirect to='/login' />
...@@ -100,7 +139,17 @@ function Product({ match, location }) { ...@@ -100,7 +139,17 @@ function Product({ match, location }) {
return ( return (
<div> <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"> <style type="text/css">
{` {`
.btn { .btn {
...@@ -155,8 +204,8 @@ function Product({ match, location }) { ...@@ -155,8 +204,8 @@ function Product({ match, location }) {
<Col className="text-right">{price}</Col> <Col className="text-right">{price}</Col>
</Row> </Row>
<Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}> <Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}>
<Button type='button' onClick={addCart} style={{ width: "49%" }}>장바구니</Button> <Button type='button' name="shoppingcart" onClick={addCart} style={{ width: "49%" }}>장바구니</Button>
<Button style={{ width: "49%" }}>구매하기</Button> <Button type='button' name="payment" onClick={addCart} style={{ width: "49%" }}>구매하기</Button>
</Row> </Row>
</Form> </Form>
</Col> </Col>
......
import axios from "axios"; 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('id', userId)
localStorage.setItem('role', role) localStorage.setItem('role', role)
localStorage.setItem('name', name) localStorage.setItem('name', name)
localStorage.setItem('tel', tel) localStorage.setItem('tel', tel)
localStorage.setItem('email', email)
} }
export async function handleLogout() { export async function handleLogout() {
......
...@@ -7,7 +7,7 @@ const login = async (req, res) => { ...@@ -7,7 +7,7 @@ const login = async (req, res) => {
const { id, password } = req.body const { id, password } = req.body
console.log(id, password) console.log(id, password)
try { 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) console.log('u=', user)
if (!user) { if (!user) {
return res.status(404).send(`${id}가 존재하지 않습니다.`) return res.status(404).send(`${id}가 존재하지 않습니다.`)
...@@ -23,7 +23,7 @@ const login = async (req, res) => { ...@@ -23,7 +23,7 @@ const login = async (req, res) => {
httpOnly: true, httpOnly: true,
secure: config.env === 'production' 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 { } else {
res.status(401).send('비밀번호가 일치하지 않습니다.') 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