Skip to content

GitLab

Commit f1936e20 authored by kusang96's avatar kusang96
Browse files

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

parents f31064c6 40e214a6
Show whitespace changes
Inline Side-by-side
client/src/App.js
View file @ f1936e20
......@@ -10,6 +10,7 @@ import Admin from './Pages/Admin';
import ProductRegist from './Pages/ProductRegist';
import ShoppingCart from './Pages/ShoppingCart';
import Payment from './Pages/Payment';
import PaymentCompleted from './Pages/PaymentCompleted';
import Account from './Pages/Account';
import MainNav from './Components/MainNav';
import SubNav from './Components/SubNav';
......@@ -39,6 +40,9 @@ function App() {
<PrivateRoute path="/payment">
<Payment />
</PrivateRoute>
<PrivateRoute path="/paymentcompleted">
<PaymentCompleted />
</PrivateRoute>
<PrivateRoute path="/account">
<Account />
</PrivateRoute>
......
client/src/Components/CartCard.js
View file @ f1936e20
......@@ -18,9 +18,9 @@ function CartCard(props) {
<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.productId.pro_name}</Card.Title>
<Card.Text>가격: {e.productId.price}원</Card.Text>
<Card.Text>옵션: {e.size}/{e.color}</Card.Text>
<Card.Text>수량</Card.Text>
<Card.Text className="mb-0">가격: {e.productId.price}원</Card.Text>
<Card.Text className="mb-0">옵션: {e.size}/{e.color}</Card.Text>
<Card.Text >수량</Card.Text>
<div>
<input type="image" name={String(e._id)} alt="마이너스" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={props.minusNum} />
<input type="number" style={{ width: '30px' }} className="text-center align-middle mx-1" placeholder={e.count} value={e.count} readOnly></input>
......
client/src/Components/PaymentCard.js
View file @ f1936e20
......@@ -13,6 +13,7 @@ function PaymentCard(props) {
</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.deleteOrder} />
<Card.Title className="font-weight-bold mt-3">{e.productId.pro_name}</Card.Title>
<Card.Text>가격: {e.productId.price}원</Card.Text>
<Card.Text>옵션: {e.size}/{e.color}</Card.Text>
......
client/src/Pages/Payment.js
View file @ f1936e20
......@@ -2,7 +2,7 @@ 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, Link } from 'react-router-dom';
import { Redirect, Link, useHistory } from 'react-router-dom';
import PaymentCard from '../Components/PaymentCard';
import { isAuthenticated } from '../utils/auth';
import catchErrors from '../utils/catchErrors';
......@@ -12,16 +12,15 @@ function Payment({ match, location }) {
const [order, setOrder] = useState({products: []})
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 [paymentWay, setPaymentWay] = useState([])
const [completeState, setCompleteState] = useState(false)
const user = isAuthenticated()
let history = useHistory();
const preCart = []
useEffect(() => {
getUser()
......@@ -39,15 +38,37 @@ 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() {
try {
setError('')
const response = await axios.get(`/api/cart/showcart/${user}`)
console.log(response.data)
const preCart = response.data.filter((el) => el.checked === true)
if (preCart.length) {
setCart(preCart)
setOrder({ products: preCart })
} else {
alert("주문하실 상품이 없습니다.")
history.push("/home")
}
} catch (error) {
catchErrors(error, setError)
}
}
async function deleteOrder(e) {
try {
setError('')
const response = await axios.post('/api/cart/deletecart', {
userId: user,
cartId: e.target.name
})
console.log(response.data)
const preCart = response.data.products.filter((el) => el.checked === true)
setCart(preCart)
setOrder({ products: preCart })
} catch (error) {
......@@ -105,9 +126,9 @@ function Payment({ match, location }) {
function handleClick() {
if (paymentWay.length !== 0) {
setCompleteState(false)
setPaymentWay([])
}
else {
} else {
const a = (
<Row className="justify-content-md-center">
<Col md={6} className="border m-5 p-5">
......@@ -137,6 +158,39 @@ function Payment({ match, location }) {
}
async function kakaopay() {
setCompleteState("kakaopay")
setPaymentWay(
<div className="text-center">
<p className=" font-weight-bold" style={{ display: 'inline' }}>'카카오페이'</p><p style={{ display: 'inline' }}>를 선택하셨습니다. </p>
<p>주문하기를 눌러 결제를 이어가주세요.</p>
</div>
)
// window.location.href = data.redirect_url
// setRedirect(data.redirect_url)
}
async function paymentCompleted() {
console.log(order)
const cartIds = []
order.products.map((el) => {
cartIds.push(el._id)
})
try {
setError('')
const response = await axios.post(`/api/order/addorder`, {
userId: user,
...order,
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
})
if (completeState === "kakaopay") {
let itemNames = ""
if (cart.length > 1) {
itemNames = cart[0].productId.pro_name + ' 외 ' + String(cart.length - 1) + '개'
......@@ -157,55 +211,28 @@ function Payment({ match, location }) {
total_amount: finalPrice + 2500,
vat_amount: 200,
tax_free_amount: 0,
approval_url: 'http://localhost:3000/payment',
fail_url: 'http://localhost:3000/payment',
cancel_url: 'http://localhost:3000/payment',
approval_url: 'http://localhost:3000/paymentcompleted',
fail_url: 'http://localhost:3000/shoppingcart',
cancel_url: 'http://localhost:3000/shoppingcart',
})
})
const data = await response.json()
console.log(data)
window.location.href = data.redirect_url
// setRedirect(data.redirect_url)
}
async function paymentCompleted() {
console.log(order)
const cartIds = []
order.products.map((el) => {
cartIds.push(el._id)
})
try {
const response = await axios.post(`/api/order/addorder`, {
userId: user,
...order,
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
})
} else {
console.log(response.data)
console.log(response2.data)
console.log(response3.data)
alert("주문이 완료되었습니다.")
return <Redirect to={'/account'} />
history.push('/paymentcompleted')
}
} 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>
......@@ -223,7 +250,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>
......@@ -266,10 +293,9 @@ function Payment({ match, location }) {
</Col>
</Row>
</div>
<div>
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h5>
<PaymentCard cart={cart} />
<PaymentCard cart={cart} deleteOrder={deleteOrder} />
</div>
<div className="p-5 m-3" style={{ background: '#F7F3F3' }}>
......@@ -287,17 +313,16 @@ function Payment({ match, location }) {
결제금액<span className="float-right">{finalPrice + 2500}원</span>
</div>
</div>
<div>
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>결제수단</h5>
<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} />
<Button className="align-top m-1" variant="success" onClick={handleClick} style={{ height: '42px' }}>무통장입금</Button>
<Button className="align-top m-1 p-0" style={{ borderColor: "#ffeb00" }} type="button" onClick={kakaopay} alt="카카오페이"><img src="icon/payment_icon_yellow_small2.png" /></Button>
</div>
{paymentWay}
</div>
<div className="text-center">
<Button className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} onClick={paymentCompleted} block>결제완료</Button>
<Button type="button" onClick={paymentCompleted} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} block>결제완료</Button>
</div>
</Container>
</div>
......
client/src/Pages/PaymentCompleted.js 0 → 100644
View file @ f1936e20
import React, { useState, useEffect } from 'react'
import axios from 'axios';
import { isAuthenticated } from '../utils/auth'
import catchErrors from '../utils/catchErrors';
import { Card, Row, Col, Button, Alert } from 'react-bootstrap';
import { Link } from 'react-router-dom';
function PaymentCompleted() {
const user = isAuthenticated()
const [error, setError] = useState()
const [order, setOrder] = useState([])
const [total, setTotal] = useState(0)
const [receiverInfo, setReceiverInfo] = useState({})
const [num, setNum] = useState('')
useEffect(() => {
getOrder()
}, [user])
async function getOrder() {
try {
setError('')
const response = await axios.get(`/api/order/showorder/${user}`)
console.log(response.data)
setNum(response.data._id)
setOrder(response.data.products)
setTotal(response.data.total)
setReceiverInfo(response.data.receiverInfo)
} catch (error) {
catchErrors(error, setError)
}
}
return (
<div>
<div className="mx-3 my-5 text-center px-3 py-4 border">
<div className="mb-1">
<h5 className=" font-weight-bold" style={{ display: 'inline' }}>고객님의 </h5>
<h5 className=" font-weight-bold text-danger" style={{ display: 'inline' }}>주문이 완료</h5>
<h5 className=" font-weight-bold " style={{ display: 'inline' }}>되었습니다!</h5>
</div>
<div className="my-2">주문번호: {num}</div>
<div className="mb-0">주문내역 확인은 마이페이지의 </div>
<div> "주문/배송조회"에서 하실 수 있습니다.</div>
</div>
<h3 className="text-center font-weight-bold my-3">주문내역</h3>
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>받는사람 정보</h5>
<div className="m-3">
<Row>
<Col xs={4} className="text-right">이름</Col>
<Col>{receiverInfo.name}</Col>
</Row>
<Row>
<Col xs={4} className="text-right">전화번호</Col>
<Col>{receiverInfo.tel}</Col>
</Row>
<Row>
<Col xs={4} className="text-right">주소</Col>
<Col>{receiverInfo.address}{receiverInfo.address2}</Col>
</Row>
</div>
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문 상품 정보</h5>
{order.map((e) => (
<Card className="mx-2">
<Row className="mx-1">
<Col className="text-center">
<Card.Img className="img-fluid" variant="top" src={e.productId.main_imgUrl && `/images/${e.productId.main_imgUrl}`} style={{ width: '20rem' }} />
</Col>
<Col md={6} className="p-2">
<Card.Body>
<Card.Title className="font-weight-bold mt-3">{e.productId.pro_name}</Card.Title>
<Card.Text className="mb-0">가격: {e.productId.price}원</Card.Text>
<Card.Text className="mb-0">옵션: {e.size}/{e.color}</Card.Text>
<Card.Text>수량: {e.count}</Card.Text>
</Card.Body>
</Col>
</Row>
</Card>
))
}
<Row className="m-3 font-weight-bold py-3" style={{ background: '#F7F3F3' }}>
<Col xs={6} className="text-right">총 결제금액:</Col>
<Col>{total}원</Col>
</Row>
<div className="text-center my-3">
<Button href="/" className="mx-1" style={{ background: "#91877F", borderColor: '#91877F', width: "7rem" }}>홈으로</Button>
<Button href="/account" className="mx-1" style={{ background: "#91877F", borderColor: '#91877F', width: "7rem" }}>마이페이지</Button>
</div>
</div>
)
}
export default PaymentCompleted
client/src/Pages/Product.js
View file @ f1936e20
import axios from 'axios';
import React, { useState, useEffect, useRef } from 'react';
import { Row, Col, Form, Card, Button, Image } from 'react-bootstrap';
import { Redirect } from 'react-router-dom';
import { Row, Col, Form, Card, Button, Modal, Image } from 'react-bootstrap';
import { Redirect, useHistory } from 'react-router-dom';
import catchErrors from '../utils/catchErrors';
......@@ -14,18 +14,18 @@ function Product({ match, location }) {
const [selected, setSelected] = useState({ sizes: false, colors: false })
const [count, setCount] = useState(1)
const [price, setPrice] = useState(0)
const [show, setShow] = useState(false);
let history = useHistory();
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const replace = product.description.replaceAll('\n', '<br />')
// const replace = product.description.replaceAll('\n', '<br />')
// const replace = product.description.replaceAll(/\n/, '<br />')
console.log("objectasdasd", replace)
useEffect(() => {
if (size && color) {
pushOptions()
console.log(cart)
// console.log(cart)
}
}, [size, color])
......@@ -35,15 +35,31 @@ function Product({ match, location }) {
}
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
console.log(product)
setColor("")
setSize("")
alert("이미 선택한 옵션입니다.")
} else {
selected.sizes = false
selected.colors = false
setCart([...cart, { color, size, productId: product.id, count: 1, checked: false }])
setColor("")
setSize("")
setPrice(product.price + price)
}
}
function handleChange(e) {
const { name, value } = e.target
if (name === "sizes") {
......@@ -83,9 +99,13 @@ function Product({ match, location }) {
setCount(e.value)
}
async function addCart() {
async function addCart(event) {
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(로컬) 를 보내줌
try {
setError('')
......@@ -93,10 +113,28 @@ function Product({ match, location }) {
userId: localStorage.getItem('id'),
products: cart
})
console.log(response)
console.log(response.data)
setShow(true)
} catch (error) {
catchErrors(error, setError)
}
} else {
try {
setError('')
cart.map((el) => {
el.checked = true
})
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' />
......@@ -106,7 +144,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 {
......@@ -161,8 +209,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>
......@@ -173,9 +221,9 @@ function Product({ match, location }) {
설명
</h3>
<Col className='justify-content-center '>
<h2 className='p-2 text-center border' style={{background : '#CDC5C2'}}>{product.name} </h2>
<h2 className='p-2 text-center border' style={{ background: '#CDC5C2' }}>{product.name} </h2>
<>
<Image src={`/images/${product.main_img}`} style={{ objectFit: "contain", maxWidth: "100%"}} />
<Image src={`/images/${product.main_img}`} style={{ objectFit: "contain", maxWidth: "100%" }} />
</>
<Card className='m-3 d-flex justify-content-center'>
<Card.Body className='text-center'>
......@@ -184,7 +232,7 @@ function Product({ match, location }) {
</Card>
<>
<h4 className='my-4 text-center'>[ Detail Images ]</h4>
<Image src={`/images/${product.detail_imgs}`} style={{ objectFit: "contain", maxWidth: "100%"}}/>
<Image src={`/images/${product.detail_imgs}`} style={{ objectFit: "contain", maxWidth: "100%" }} />
</>
</Col>
</Col>
......
client/src/Pages/ProductRegist.js
View file @ f1936e20
......@@ -4,9 +4,6 @@ import { Row, Col, Button, Form, Container, Alert, Spinner } from 'react-bootstr
import axios from 'axios';
import catchErrors from '../utils/catchErrors';
let preColors = []
let colorHtml = []
let list = []
function ProductsRegist() {
const INIT_PRODUCT = {
......@@ -21,11 +18,13 @@ function ProductsRegist() {
main_image: [],
detail_image: []
}
const [preColors, setPreColors] = useState([])
const [categories, setCategories] = useState({ 0: [], 1: [[]] })
const [product, setProduct] = useState(INIT_PRODUCT)
const [categoryNum, setCategoryNum] = useState('')
const [tag, setTag] = useState(0)
const [subCate, setSubCate] = useState('')
const [subCate, setSubCate] = useState([])
const [cateList, setCateList] = useState([])
const [color, setColor] = useState({})
const [error, setError] = useState('')
const [success, setSuccess] = useState(false)
......@@ -50,38 +49,22 @@ function ProductsRegist() {
isProduct ? setDisabled(false) : setDisabled(true)
}, [product])
function addCategory(e) {
if (selectRef.current.value === '') {
alert('하위 분류를 반드시 선택해 주세요.')
} else {
list.push(
<div>
<span name={subCate} >{product["main_category"]} / {subCate} </span>
<input name={subCate} type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right align-middle" onClick={deleteCategory} />
</div>)
setTag(tag + 1)
selectRef.current.selectedIndex = 0
}
}
function deleteCategory(e) {
e.target.parentNode.remove()
const index = product["sub_category"].findIndex((item) => { return item === e.target.name })
product["sub_category"].splice(index, 1)
setSubCate('')
console.log(product["sub_category"].length)
const pdcate = product.sub_category.filter((el) => el !== e.target.name)
setProduct({ ...product, "sub_category": pdcate })
setSubCate([])
}
function handleCategory(e) {
const { name, value, selectedIndex } = e.target
if (name === "main_category") {
setProduct({ ...product, [name]: value })
setCategoryNum(selectedIndex - 1)
}
if (name === "sub_category") {
product[name].push(value)
setSubCate(value)
} else {
setProduct({ ...product, [name]: value })
else {
subCate.push(value)
setProduct({ ...product, [name]: subCate })
selectRef.current.selectedIndex = 0
}
}
......@@ -90,20 +73,15 @@ function ProductsRegist() {
}
function addColor() {
preColors.push(color["colors"])
colorHtml.push(
<div>
<span>{color["colors"]}</span>
<input name={subCate} type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right align-middle" onClick={deleteColor} />
</div>
)
colorRef.current.value = ''
setProduct({ ...product, "colors": preColors })
setProduct({ ...product, "colors":[...product.colors, color["colors"]] })
}
function deleteColor(e) {
e.target.parentNode.remove()
product["colors"].splice(e.name, 1)
console.log(product.colors)
console.log(e.target.name)
const pdcolors = product.colors.filter((el) => el !== e.target.name)
setProduct({ ...product, "colors": pdcolors })
}
function handleColor(e) {
......@@ -133,8 +111,8 @@ function ProductsRegist() {
for (let key in product) {
if (key === "main_image" || key === "detail_image") {
formData.append(key, product[key][0])
} else if(key === "sizes" || key === "colors" || key === 'sub_category'){
for (let i = 0; i < product[key].length ; i++){
} else if (key === "sizes" || key === "colors" || key === "sub_category") {
for (let i = 0; i < product[key].length; i++) {
formData.append([key], product[key][i])
}
}
......@@ -162,6 +140,7 @@ function ProductsRegist() {
return (
<Container>
{console.log(product)}
<Row className="justify-content-md-center">
<Col md={8} className="border p-1" style={{ background: '#F7F3F3' }}>
{error && <Alert variant="danger" className="text-center">{error}</Alert>}
......@@ -198,11 +177,15 @@ function ProductsRegist() {
)))}
</Form.Control>
</Col>
<Col >
<Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addCategory}>추가</Button>
</Col>
</Row>
{list.map((element) => element)}
{product.sub_category.map((el) => (
<div className="my-2">
<p name={el} className="mb-0" style={{ display: 'inline-block'}} >{product["main_category"]} / {el} </p>
<Button name={el} type="button" className="float-right p-0 btn-light" style={{ display: 'inline-block' }} onClick={deleteCategory} >
<img className="align-top" name={el} alt="삭제" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" />
</Button>
</div>
))}
</Form.Group>
<Form.Group>
<Form.Label>사이즈</Form.Label>
......@@ -235,14 +218,21 @@ function ProductsRegist() {
<Form.Group>
<Form.Label>색상</Form.Label>
<Row>
<Col md={9} xs={9} className="pr-1">
<Col md={9} xs={9} className="pr-0">
<Form.Control as="input" ref={colorRef} name="colors" placeholder="색상" onChange={handleColor} />
</Col>
<Col className="pl-1">
<Col className="pl-0">
<Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addColor}>추가</Button>
</Col>
</Row>
{colorHtml.map((element) => element)}
{product.colors.map((el) => (
<div className="my-2">
<p className="mb-0" style={{ display: 'inline-block' }}>{el}</p>
<Button style={{ display: 'inline-block' }} name={el} type="button" className="float-right p-0 btn-light" onClick={deleteColor}>
<img className="align-top" name={el} alt="삭제" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" />
</Button>
</div>
))}
</Form.Group>
<Form.Group controlId="productDescriptionform">
<Form.Label>상품설명</Form.Label>
......
client/src/Pages/ProductsList.js
View file @ f1936e20
......@@ -17,6 +17,8 @@ function ProductsList({ match }) {
const indexOfLast = currentPage * postsPerPage;
const indexOfFirst = indexOfLast - postsPerPage;
const [sortingName, setSortingName] = useState('정렬')
function currentPosts(tmp) {
let currentPosts = 0;
currentPosts = tmp.slice(indexOfFirst, indexOfLast);
......@@ -70,11 +72,60 @@ function ProductsList({ match }) {
}
async function handleSort(method) {
try {
const response = await axios.get(`/api/product/getproduct/?q=${method}`)
setProductlist(response.data)
} catch (error) {
catchError(error, setError)
console.log(method)
if (method === "purchase") {
console.log("thisispurchase")
productlist.sort(function (a, b) {
if (a.purchase > b.purchase) {
return -1;
}
if (a.purchase < b.purchase) {
return 1;
}
// a must be equal to b
return 0;
});
setSortingName("인기상품")
} else if(method === "newest"){
console.log("thisisnewest")
productlist.sort(function (a, b) {
if (a.createdAt > b.createdAt) {
return -1;
}
if (a.createdAt < b.createdAt) {
return 1;
}
// a must be equal to b
return 0;
});
setSortingName("신상품")
} else if(method === "lowest"){
console.log("thisislowest")
productlist.sort(function (a, b) {
if (a.price > b.price) {
return 1;
}
if (a.price < b.price) {
return -1;
}
// a must be equal to b
return 0;
});
setSortingName("낮은가격")
} else {
console.log("thisispurchase")
productlist.sort(function (a, b) {
if (a.price > b.price) {
return -1;
}
if (a.price < b.price) {
return 1;
}
// a must be equal to b
return 0;
});
setSortingName("높은가격")
}
}
......@@ -94,6 +145,7 @@ function ProductsList({ match }) {
return (
<Container>
{console.log(productlist)}
<style type="text/css">
{`
a, a:hover, a:active {
......@@ -120,22 +172,22 @@ function ProductsList({ match }) {
</div>
</Col>
</Row>
<Row className="justify-content-end mx-0 my-5">
<Dropdown>
<Dropdown.Toggle variant="secondary" className="mx-2">정렬</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item>인기상품</Dropdown.Item>
<Dropdown.Item>신상품</Dropdown.Item>
<Dropdown.Item>낮은가격</Dropdown.Item>
<Dropdown.Item>높은가격</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Form as={Row} onSubmit={handleSearch} className="justify-content-end mx-0">
<FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
<Button type="submit" className="search px-2" variant="secondary">
<Row className="justify-content-end mx-0 mt-5 mb-3">
<Form inline onSubmit={handleSearch} className="justify-content-end mx-0 my-2">
<FormControl type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} />
<Button type="submit" className="px-2 mr-2">
<img src="/icon/search.svg" width="20" height="20" />
</Button>
</Form>
<Dropdown className="my-2">
<Dropdown.Toggle className="mx-2">{sortingName}</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item as="button" onClick={() => handleSort('purchase')}>인기상품</Dropdown.Item>
<Dropdown.Item as="button" onClick={() => handleSort('newest')}>신상품</Dropdown.Item>
<Dropdown.Item as="button" onClick={() => handleSort('lowest')}>낮은가격</Dropdown.Item>
<Dropdown.Item as="button" onClick={() => handleSort('highest')}>높은가격</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Row>
<Row md={8} sm={12} className="justify-content-center m-2">
{productlist.length > 0 ?
......
client/src/Pages/ShoppingCart.js
View file @ f1936e20
......@@ -15,7 +15,7 @@ function ShoppingCart() {
useEffect(() => {
getCart()
console.log(cart)
// console.log(cart)
}, [user])
function plusNum(e) {
......@@ -59,7 +59,7 @@ function ShoppingCart() {
async function deleteCart(e) {
//장바구니 DB에서 해당 항목 삭제
console.log(e.target.name)
// console.log(e.target.name)
try {
const response = await axios.post('/api/cart/deletecart', {
userId: user,
......@@ -70,7 +70,7 @@ function ShoppingCart() {
} catch (error) {
catchErrors(error, setError)
}
console.log('카트에 담긴 항목을 삭제했습니다.')
// console.log('카트에 담긴 항목을 삭제했습니다.')
}
async function getCart() {
......@@ -102,7 +102,7 @@ function ShoppingCart() {
return (
<div>
{console.log(cart)}
{/* {console.log(cart)} */}
<Container className="justify-content-center">
<h1 className="my-5 font-weight-bold text-center">장바구니</h1>
<div>
......
client/src/utils/auth.js
View file @ f1936e20
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
View file @ f1936e20
......@@ -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('비밀번호가 일치하지 않습니다.')
......
server/controllers/cart.controller.js
View file @ f1936e20
......@@ -58,7 +58,6 @@ const deleteCart = async (req, res) => {
path: 'products.productId',
model: 'Product'
})
// res.send("삭제완료")
res.json(cart)
} catch (error) {
console.log(error)
......@@ -80,7 +79,7 @@ const deleteCart2 = async (req, res) => {
model: 'Product'
})
}
res.send("주문완료 쇼핑카트 삭제")
res.send("주문완료 및 쇼핑카트에서 삭제")
// res.json(cart)
} catch (error) {
console.log(error)
......
server/controllers/order.controller.js
View file @ f1936e20
import Order from "../schemas/Order.js";
import User from "../schemas/User.js";
const addorder = async (req, res) => {
const { userId, products, receiverInfo, total } = req.body
......@@ -26,11 +27,12 @@ const Ordered = async (req, res) => {
const showorder = async (req, res) => {
try {
const order = await Order.findOne({ userId: req.id }).populate({
const order = await Order.find({ userId: req.userId }).sort({_id:-1}).limit(1).populate({
path: 'products.productId',
model: 'Product'
})
res.status(200).json(order.products)
console.log(order)
res.status(200).json(order[0])
} catch (error) {
console.log(error)
res.status(500).send('쇼핑카트를 불러오지 못했습니다.')
......@@ -38,7 +40,19 @@ const showorder = async (req, res) => {
}
const orderById = async (req, res, next, id) => {
try {
const user = await User.findById(id)
if (!user) {
res.status(404).send('사용자를 찾을 수 없습니다')
}
req.userId = user
next()
} catch (error) {
console.log(error);
res.status(500).send('사용자 아이디 검색 실패')
}
}
export default { addorder, showorder, Ordered }
\ No newline at end of file
export default { addorder, showorder, orderById , Ordered}
server/controllers/product.controller.js
View file @ f1936e20
......@@ -96,12 +96,18 @@ const plusPurchase = async (req, res) => {
{ _id: products[i].productId._id }
)
const purchase = product.purchase
const stock = product.stock
await Product.updateOne(
{ _id: products[i].productId._id },
{ $set: { purchase: count + purchase } }
{ $set:
{
purchase: count + purchase,
stock: stock - count
}
}
)
}
res.send("구매수 늘리기 성공")
res.send("구매수 늘리기, 재고수 줄이기 성공")
} catch (error) {
res.status(500).send('구매숫자를 늘리지 못함')
}
......
server/routes/order.routes.js
View file @ f1936e20
......@@ -11,5 +11,6 @@ router.route('/addorder')
router.route('/showorder/:userId')
.get(orderCtrl.showorder)
router.param('userId', orderCtrl.orderById)
export default router
\ No newline at end of file
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