Skip to content

GitLab

Commit 39c07bff authored by 박상호's avatar 박상호 🎼
Browse files

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

parents c66765f3 ccc8f484
Hide whitespace changes
Inline Side-by-side
client/src/Pages/Login.js
View file @ 39c07bff
...@@ -35,7 +35,7 @@ function Login() { ...@@ -35,7 +35,7 @@ function Login() {
try { try {
setError('') setError('')
const response=await axios.post('/api/auth/login', user) const response=await axios.post('/api/auth/login', user)
handleLogin(response.data.userId) handleLogin(response.data)
setSuccess(true) setSuccess(true)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
......
client/src/Pages/Payment.js
View file @ 39c07bff
...@@ -210,9 +210,6 @@ function Payment() { ...@@ -210,9 +210,6 @@ function Payment() {
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h5> <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h5>
<Card > <Card >
<Row className="mx-1"> <Row className="mx-1">
<Col xs={2} sm={2} className="text-center my-auto">
<input className="" type="checkbox" id="exampleCheck1" />
</Col>
<Col className="text-center"> <Col className="text-center">
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} /> <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} />
</Col> </Col>
...@@ -254,7 +251,7 @@ function Payment() { ...@@ -254,7 +251,7 @@ function Payment() {
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>결제수단</h5> <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 mt-5">
<Button variant="success" className="align-top" onClick={handleClick} >무통장입금</Button> <Button variant="success" className="align-top" onClick={handleClick} >무통장입금</Button>
<input type="image" alt="카카오페이결제" src="img/payment_icon_yellow_small.png" onClick={kakaopay} /> <input type="image" alt="카카오페이결제" src="icon/payment_icon_yellow_small.png" onClick={kakaopay} />
</div> </div>
{paymentWay} {paymentWay}
</div> </div>
......
client/src/Pages/Product.js
View file @ 39c07bff
...@@ -3,32 +3,46 @@ import React, { useState, useEffect, useRef } from 'react'; ...@@ -3,32 +3,46 @@ import React, { useState, useEffect, useRef } from 'react';
import { Row, Col, Form, Card, Button } from 'react-bootstrap'; import { Row, Col, Form, Card, Button } from 'react-bootstrap';
import catchErrors from '../utils/catchErrors'; import catchErrors from '../utils/catchErrors';
function Product() { const preCart = []
const [product, setProduct] = useState()
const [select, setSelect] = useState({ color: "", size: "" })
const [cart, setCart] = useState()
const [error, setError] = useState('')
function Product({ match, location }) {
const [product, setProduct] = useState(location.state)
const [cart, setCart] = useState(location.state)
const [error, setError] = useState('')
const [selected, setSelected] = useState({ sizes: false, colors: false })
const [price, setPrice] = useState(0)
async function getProduct(user){ useEffect(() => {
console.log(user) if (selected.sizes === true && selected.colors === true) {
try { pushOptions()
const response = await axios.get('/api/product/productone') console.log(preCart)
setProduct(response.data)
console.log(response.data)
} catch (error) {
catchErrors(error, setError)
} }
} }, [cart])
function handleClick(e) { function handleClick(e) {
const box = e.target.parentNode.parentNode const box = e.target.parentNode.parentNode
box.style.display = "none" box.style.display = "none"
} }
function pushOptions() {
preCart.push(cart)
selected.sizes = false
selected.colors = false
setPrice(product.price+price)
}
function handleChange(e) { function handleChange(e) {
const { name, value } = e.target const { name, value } = e.target
setSelect({ ...select, [name]: value }) if (e.target.name === "sizes") {
setCart({ ...cart, [name]: value })
selected.sizes = true
} else if (e.target.name === "colors") {
setCart({ ...cart, [name]: value })
selected.colors = true
}
// setCart({ ...cart, [name]: value })
// handleCreate()
} }
function listDelete(e) { function listDelete(e) {
...@@ -38,60 +52,53 @@ function Product() { ...@@ -38,60 +52,53 @@ function Product() {
} }
function handleCreate() { function handleCreate() {
console.log("실행", "cart=", cart) // if (product !== undefined) {
if (cart !== undefined) { // if (product.colors !== "" && product.sizes !== "") {
if (cart.color !== "") { // cart.push(
const list = document.getElementById('list') // <div className="d-flex justify-content-between my-2" >
list.style.borderBottom = "1px solid" // <p>{product.color} {product.size} </p>
const shopping = document.createElement('div') // <input name="count" type="number" min="0" max="10" style="width: 40px" onChange={handleChange} />
shopping.className = "d-flex justify-content-between my-2" // <p style="margin-bottom: 0px">{product.price}</p>
shopping.innerHTML = `${cart.color} / ${cart.size} // </div>
<input type="number" min="0" max="10" value="1" style="width: 40px" /> // )
<p style="margin-bottom: 0px">14,000원</p>` // const list = document.getElementById('list')
const deleteA = document.createElement('a') // list.style.borderBottom = "1px solid"
deleteA.innerText = 'X' // const shopping = document.createElement('div')
deleteA.addEventListener('click', listDelete) // shopping.className = "d-flex justify-content-between my-2"
shopping.appendChild(deleteA) // shopping.innerHTML = `${product.color} / ${product.size}
list.appendChild(shopping) // <input type="number" min="0" max="10" value="1" style="width: 40px" />
} // <p style="margin-bottom: 0px">14,000원</p>`
} // const deleteA = document.createElement('a')
// deleteA.innerText = 'X'
// deleteA.addEventListener('click', listDelete)
// shopping.appendChild(deleteA)
// list.appendChild(shopping)
// }
// }
} }
async function addCart() { async function addCart() {
// color, size, count, productObjectId(productlist에서 props), userId(로컬) 를 보내줌 // preCart(color, size, count), productId(productlist에서 props), userId(로컬) 를 보내줌
try { try {
// setError('') setError('')
const response = await axios.post('/api/addcart', { const response = await axios.put('/api/cart/addcart', {
userId: "jiwon5393", userId: localStorage.getItem('loginStatus'),
productObjectId: "5ff7fd63d41cae4ecce51dd1", productId: "a8f4d63ead77717f940a2b27deb707a6",
color: "red", products: preCart
size: "free",
count: "1"
}) })
console.log(response) console.log(response)
}catch(error){ } catch (error) {
// catchErrors(error, setError) catchErrors(error, setError)
} }
alert("상품등록이 완료되었습니다.")
} }
useEffect(() => { // useEffect(() => {
if (Object.keys(select).length == 2) { // handleCreate()
setCart({ ...select }) // }, [product])
setSelect({})
}
}, [select])
useEffect(() => {
handleCreate()
getProduct()
}, [cart])
return ( return (
<div> <div>
{/* {getProduct} */} {console.log("match=",match.params, "location=",location.state, "product=",product)}
<style type="text/css"> <style type="text/css">
{` {`
.btn { .btn {
...@@ -107,33 +114,34 @@ function Product() { ...@@ -107,33 +114,34 @@ function Product() {
</style> </style>
<Row className="justify-content-center mt-5 mx-0"> <Row className="justify-content-center mt-5 mx-0">
<Col sm={11} md={4}> <Col sm={11} md={4}>
<img src="https://img.sonyunara.com/files/goods/65976/1601953605_0.jpg" style={{ objectFit: "contain", width: "100%" }} /> <img src={product.main_img} style={{ objectFit: "contain", width: "100%" }} />
</Col> </Col>
<Col sm={11} md={4} className="align-middle mt-4"> <Col sm={11} md={4} className="align-middle mt-4">
<h3 className="mb-4">sop682 리본끈셋원피스</h3> <h3 className="mb-4">{product.name}</h3>
<h5 className="mb-4">가격 : 14,000원</h5> <h5 className="mb-4">가격 : {product.price}원</h5>
<Form style={{ borderBottom: "1px solid" }}> <Form style={{ borderBottom: "1px solid" }}>
<Form.Group style={{ borderBottom: "1px solid", paddingBottom: "2rem" }}> <Form.Group style={{ borderBottom: "1px solid", paddingBottom: "2rem" }}>
<Form.Label>색상</Form.Label> <Form.Label>색상</Form.Label>
<Form.Control as="select" className="mb-2" name="color" defaultValue="옵션 선택" onChange={handleChange}> <Form.Control as="select" className="mb-2" name="colors" defaultValue="옵션 선택" onChange={handleChange}>
<option>옵션선택</option> <option>옵션선택</option>
<option>브릭레드(스트랩포함)</option> {product.colors.map((e) => (
<option>베이지(스트랩포함)</option> <option>{e}</option>
<option>블랙(스트랩포함)</option> ))}
</Form.Control> </Form.Control>
<Form.Label>사이즈</Form.Label> <Form.Label>사이즈</Form.Label>
<Form.Control as="select" className="mb-2" name="size" defaultValue="옵션 선택" onChange={handleChange}> <Form.Control as="select" className="mb-2" name="sizes" defaultValue="옵션 선택" onChange={handleChange}>
<option>옵션선택</option> <option>옵션선택</option>
<option>M</option> {product.sizes.map((e) => (
<option>L</option> <option>{e}</option>
<option>XL</option> ))}
<option>FREE</option>
</Form.Control> </Form.Control>
</Form.Group> </Form.Group>
<div id="list"></div> {preCart.map((e) => (
<div>{e.colors}/{e.sizes}</div>
))}
<Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}> <Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}>
<Col>총 금액</Col> <Col>총 금액</Col>
<Col className="text-right">14,000원</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 onClick={addCart} style={{ width: "49%" }}>장바구니</Button> <Button onClick={addCart} style={{ width: "49%" }}>장바구니</Button>
......
client/src/Pages/ProductRegist.js
View file @ 39c07bff
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Row, Col, Button, Form, Container } from 'react-bootstrap';
import axios from 'axios'
import catchErrors from '../utils/catchErrors';
import { Redirect } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
import { Row, Col, Button, Form, Container, Alert } from 'react-bootstrap';
import axios from 'axios';
import catchErrors from '../utils/catchErrors';
let color = {}
let preColors = [] let preColors = []
let colorHtml = [] let colorHtml = []
let list = [] let list = []
...@@ -22,40 +21,58 @@ function ProductsRegist() { ...@@ -22,40 +21,58 @@ function ProductsRegist() {
main_image: [], main_image: [],
detail_image: [] detail_image: []
} }
const categorys = { const [categories, setCategories] = useState({ 0: [], 1: [[]] })
"DRESS": ["LONG DRESS", "SHORT DRESS", "KNIT DRESS", "SHIRT DRESS", "PATTERN DRESS", "BUSTIER DRESS", "TWO-PIECE DRESS"],
"OUTER": ["PADDED JACKET", "JACKET", "JUMPER", "COAT", "FLEECE", "CARDIGAN / VEST"],
"TOP": ["KNIT", "HOODY", "BLOUSE", "SHIRT", "SWEATSHIRT", "LONG SLEEVE SHIRT", "SHORT SLEEVE / SLEEVELESS SHIRT"],
"PANTS": ["JEANS", "SKINNY JEANS", "BANDING PANTS", "WIDE-FIT PANTS", "BOOT-CUT PANTS", "STRAIGHT-FIT PANTS", "SHORTS", "TROUSERS", "LEGGINGS", "JUMPSUIT / OVERALLS"],
"SKIRT": ["LONG SKIRT", "MIDI SKIRT", "MINI SKIRT"],
"TRAINING": [],
"SHOES": ["SNEAKERS / SLIP-ON", "FLAT / LOAFER", "HEEL / PUMP", "BOOTS", "SANDAL / SLIPPER"]
}
const [product, setProduct] = useState(INIT_PRODUCT) const [product, setProduct] = useState(INIT_PRODUCT)
const [categoryNum, setCategoryNum] = useState(0) const [categoryNum, setCategoryNum] = useState(0)
const [tag, setTag] = useState(0) const [tag, setTag] = useState(0)
const [subCate, setSubCate] = useState('')
const [color, setColor] = useState({})
const [error, setError] = useState('') const [error, setError] = useState('')
const [success, setSuccess] = useState(false) const [success, setSuccess] = useState(false)
const [checked, setChecked] = useState({ "Free": false, "XL": false, "L": false, "M": false, "S": false, "XS": false }) const [checked, setChecked] = useState({ "Free": false, "XL": false, "L": false, "M": false, "S": false, "XS": false })
const mainCategorys = Object.keys(categorys) useEffect(async () => {
const subCategorys = Object.values(categorys) try {
const response = await axios.get('/api/categories/main')
const data = response.data[0]
setCategories([Object.keys(data), Object.values(data)])
} catch (error) {
catchErrors(error, setError)
}
}, [])
function addCategory() { function addCategory() {
console.log(product)
list.push( list.push(
<div> <div>
<span i={tag}>{product["main_category"]} / {product["sub_category"][tag]}</span> <span name={subCate} >{product["main_category"]} / {subCate} </span>
<input type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right align-middle" onClick={deleteCategory} /> <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>) </div>)
setTag(tag + 1) setTag(tag + 1)
console.log(list)
} }
function deleteCategory(e) { function deleteCategory(e) {
const categ = e.target.parentNode e.target.parentNode.remove()
categ.remove() const index = product["sub_category"].findIndex((item)=>{return item === e.target.name})
product["sub_category"].splice(e.target.parentNode.firstElementChild.getAttribute("i"), 1) product["sub_category"].splice(index, 1)
console.log(product) setSubCate('')
console.log(product["sub_category"].length)
} }
function handleCategory(e) {
const { name, value } = e.target
if (e.target.name === "main_category") {
setCategoryNum(e.target.selectedIndex - 1)
}
if (name === "sub_category") {
product[name].push(value)
setSubCate(value)
} else {
setProduct({ ...product, [name]: value })
}
console.log(value)
}
function handleCheckBox(e) { function handleCheckBox(e) {
setChecked({ ...checked, [e.target.value]: !checked[`${e.target.value}`] }) setChecked({ ...checked, [e.target.value]: !checked[`${e.target.value}`] })
} }
...@@ -63,28 +80,35 @@ function ProductsRegist() { ...@@ -63,28 +80,35 @@ function ProductsRegist() {
function addColor() { function addColor() {
preColors.push(color["colors"]) preColors.push(color["colors"])
colorHtml.push( colorHtml.push(
<p>{color["colors"]}</p> <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>
) )
setProduct({...product, "colors":preColors}) setColor({})
setProduct({ ...product, "colors": preColors })
}
function deleteColor(e) {
e.target.parentNode.remove()
product["colors"].splice(e.name, 1)
setColor({})
console.log(product)
} }
function colorChange(e){ function handleColor(e) {
color[e.target.name]= e.target.value color[e.target.name] = e.target.value
} }
function handleChange(event) { function handleChange(event) {
const { name, value, files } = event.target const { name, value, files } = event.target
if (event.target.name === "sub_category") { console.log("event.target.name=", name, "event.target.value=", value)
product["sub_category"].push(event.target.value) if (files) {
} else if (files) {
setProduct({ ...product, [name]: files }) setProduct({ ...product, [name]: files })
} else { } else {
setProduct({ ...product, [name]: value }) setProduct({ ...product, [name]: value })
} }
if (event.target.name === "main_category") {
setCategoryNum(event.target.selectedIndex - 1)
}
} }
async function handleSubmit(e) { async function handleSubmit(e) {
...@@ -95,8 +119,7 @@ function ProductsRegist() { ...@@ -95,8 +119,7 @@ function ProductsRegist() {
sizes.push(key) sizes.push(key)
} }
} }
product["sizes"]=sizes product["sizes"] = sizes
console.log(product)
const formData = new FormData(); const formData = new FormData();
for (let key in product) { for (let key in product) {
if (key === "main_image" ||key === "detail_image") { if (key === "main_image" ||key === "detail_image") {
...@@ -107,103 +130,101 @@ function ProductsRegist() { ...@@ -107,103 +130,101 @@ function ProductsRegist() {
} }
} }
try { try {
const response = axios.post('/api/product/regist', formData) const response = await axios.post('/api/product/regist', formData)
// setSuccess(true)
console.log(response) console.log(response)
setSuccess(true)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
} }
} }
if (success) { if (success) {
return <Redirect to='/' /> return <Redirect to='/admin' />
} }
return ( return (
<div> <Container>
<Container> <Row className="justify-content-md-center">
<Row className="justify-content-md-center"> <Col md={8} className="border p-1" style={{ background: '#F7F3F3' }}>
<Col md={8} className="border p-1" style={{ background: '#F7F3F3' }}> {error && <Alert variant="danger" className="text-center">{error}</Alert>}
<h2 className="text-center mt-5 font-weight-bold">상품등록</h2> <h2 className="text-center mt-5 font-weight-bold">상품등록</h2>
<Form className="p-5" onSubmit={handleSubmit}> <Form className="p-5" onSubmit={handleSubmit}>
<Form.Group controlId="productNameform"> <Form.Group controlId="productNameform">
<Form.Label>상품명</Form.Label> <Form.Label>상품명</Form.Label>
<Form.Control type="text" name="pro_name" placeholder="상품명" onChange={handleChange} /> <Form.Control type="text" name="pro_name" placeholder="상품명" onChange={handleChange} />
</Form.Group> </Form.Group>
<Form.Group controlId="productAmountform"> <Form.Group controlId="productAmountform">
<Form.Label>재고</Form.Label> <Form.Label>재고</Form.Label>
<Form.Control type="text" name="stock" placeholder="숫자만 입력해주세요" onChange={handleChange} /> <Form.Control type="text" name="stock" placeholder="숫자만 입력해주세요" onChange={handleChange} />
</Form.Group> </Form.Group>
<Form.Group controlId="productPriceform"> <Form.Group controlId="productPriceform">
<Form.Label>가격</Form.Label> <Form.Label>가격</Form.Label>
<Form.Control type="text" name="price" placeholder="숫자만 입력해주세요" onChange={handleChange} /> <Form.Control type="text" name="price" placeholder="숫자만 입력해주세요" onChange={handleChange} />
</Form.Group> </Form.Group>
<Form.Group> <Form.Group>
<Form.Label>분류</Form.Label> <Form.Label>분류</Form.Label>
<Row> <Row>
<Col md={4}> <Col md={4}>
<Form.Control as="select" name="main_category" onChange={handleChange}> <Form.Control as="select" name="main_category" onChange={handleCategory} disabled={product["sub_category"].length > 0}>
<option value="" >상위분류</option> <option value="" >상위분류</option>
{mainCategorys.map((main) => ( {categories[0].map((main) => (
<option value={main}>{main}</option> <option value={main}>{main}</option>
))} ))}
</Form.Control> </Form.Control>
</Col> </Col>
<Col md={6}> <Col md={6}>
<Form.Control as="select" name="sub_category" onChange={handleChange}> <Form.Control as="select" name="sub_category" onChange={handleCategory} disabled={product["main_category"] === "TRAINING"}>
<option value="" >하위분류</option> <option value="" >하위분류</option>
{subCategorys[categoryNum].map((sub) => ( {categories[1][categoryNum].map((sub) => (
<option value={sub}>{sub}</option> <option value={sub}>{sub}</option>
))} ))}
</Form.Control> </Form.Control>
</Col> </Col>
<Col > <Col >
<Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addCategory}>추가</Button> <Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addCategory}>추가</Button>
</Col> </Col>
</Row> </Row>
{list.map((element) => element)} {list.map((element) => element)}
</Form.Group> </Form.Group>
<Form.Group> <Form.Group>
<Form.Label>사이즈</Form.Label> <Form.Label>사이즈</Form.Label>
<Form.Check type="checkbox" name="sizes" label="Free" value="Free" onChange={handleCheckBox} /> <Form.Check type="checkbox" name="sizes" label="Free" value="Free" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="XL" value="XL" onChange={handleCheckBox} /> <Form.Check type="checkbox" name="sizes" label="XL" value="XL" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="L" value="L" onChange={handleCheckBox} /> <Form.Check type="checkbox" name="sizes" label="L" value="L" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="M" value="M" onChange={handleCheckBox} /> <Form.Check type="checkbox" name="sizes" label="M" value="M" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="S" value="S" onChange={handleCheckBox} /> <Form.Check type="checkbox" name="sizes" label="S" value="S" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="XS" value="XS" onChange={handleCheckBox} /> <Form.Check type="checkbox" name="sizes" label="XS" value="XS" onChange={handleCheckBox} />
</Form.Group> </Form.Group>
<Form.Group> <Form.Group>
<Form.Label>색상</Form.Label> <Form.Label>색상</Form.Label>
<Row> <Row>
<Col md={10}> <Col md={10}>
<Form.Control as="textarea" rows={1} name="colors" placeholder="색상" onChange={colorChange} /> <Form.Control as="textarea" rows={1} name="colors" value={color["colors"]} placeholder="색상" onChange={handleColor} />
</Col>
</Col> <Col>
<Col> <Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addColor}>추가</Button>
</Col>
<Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addColor}>추가</Button> </Row>
</Col> {colorHtml.map((element) => element)}
</Row> </Form.Group>
{colorHtml.map((element) => element)}
</Form.Group> <Form.Group controlId="productDescriptionform">
<Form.Label>상품설명</Form.Label>
<Form.Group controlId="productDescriptionform"> <Form.Control as="textarea" name="description" rows={3} placeholder="상품을 설명해주세요" onChange={handleChange} />
<Form.Label>상품설명</Form.Label> </Form.Group>
<Form.Control as="textarea" name="description" rows={3} placeholder="상품을 설명해주세요" onChange={handleChange} /> <Form.Group>
</Form.Group> <Form.Label>대표이미지</Form.Label>
<Form.Group> <Form.File id="productImageform" name="main_image" onChange={handleChange} />
<Form.Label>대표이미지</Form.Label> </Form.Group>
<Form.File id="productImageform" name="main_image" onChange={handleChange} /> <Form.Group>
</Form.Group> <Form.Label>상세이미지</Form.Label>
<Form.Group> <Form.File id="productImageform" name="detail_image" onChange={handleChange} />
<Form.Label>상세이미지</Form.Label> </Form.Group>
<Form.File id="productImageform" name="detail_image" onChange={handleChange} /> <Button className="float-right" type="submit" style={{ background: '#91877F', borderColor: '#91877F' }}>등록</Button>
</Form.Group> </Form>
<Button className="float-right" type="submit" style={{ background: '#91877F', borderColor: '#91877F' }}>등록</Button> </Col>
</Form> </Row>
</Col> </Container>
</Row>
</Container>
</div>
) )
} }
......
client/src/Pages/ProductsList.js
View file @ 39c07bff
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Link } from 'react-router-dom';
import ListCard from '../Components/ListCard';
import Pagination from '../Components/Pagination'; import Pagination from '../Components/Pagination';
import search from '../search.svg'; import axios from 'axios';
import { Container, Row, Col, Form, FormControl, Button, Card, Dropdown } from 'react-bootstrap'; import catchError from '../utils/catchErrors';
import { isAuthenticated } from '../utils/auth';
import { Container, Row, Col, Form, FormControl, Button, Dropdown } from 'react-bootstrap';
import catchErrors from '../utils/catchErrors';
function ProductsList() { function ProductsList({ match }) {
const [sub, setSub] = useState(['PADDED JACKET', 'JACKET', 'JUMPER', 'COAT', 'FLEECE', 'CARDIGAN / VEST']) const [mainCategory, setMainCategory] = useState(match.params.main.toUpperCase())
const [subcategory, setSubcategory] = useState([])
const [productlist, setProductlist] = useState([])
const [sub, setSub] = useState([])
const [error, setError] = useState('')
// useEffect(() => { // const user=isAuthenticated()
// getProfile(user)
// }, [user])
// async function getProfile(user){ useEffect(() => {
// console.log(user) getSubsCategories()
getProductlist()
}, [mainCategory])
useEffect(() => {
setMainCategory(match.params.main.toUpperCase())
}, [match.params.main])
function handleSearch() {
}
// async function handleClick(subCategory) {
// try { // try {
// const response = await axios.get(`/api/users/profile/${user}`) // const response = await axios.get(`/api/product/getproduct/${subCategory}`)
// setProfile(response.data) // console.log("response.data=", response.data)
// setProductlist(response.data)
// } catch (error) { // } catch (error) {
// catchErrors(error, setError) // catchErrors(error, setError)
// } // }
// } // }
function handleSubmit(e) { // function handleSubmit(e) {
// e.preventDefault()
// }
async function getSubsCategories() {
try {
const response = await axios.get(`/api/categories/sub/${mainCategory}`)
console.log("sub", response.data)
setSubcategory(response.data)
} catch (error) {
catchError(error, setError)
}
}
async function getProductlist() {
try {
const response = await axios.get(`/api/product/getproduct/${mainCategory}`)
console.log("response.data=", response.data)
setProductlist(response.data)
} catch (error) {
catchError(error, setError)
}
}
function handleClick(e){
e.preventDefault() e.preventDefault()
return getsubproductlist()
}
async function getsubproductlist(){
try {
const response = await axios.get(`/api/product/getproduct/${subcategory}`)
console.log("response.data sub=",response.data)
setProductlist(response.data)
} catch (error) {
catchErrors(error,setError)
}
} }
return ( return (
<div> <div>
{console.log("main=",mainCategory)}
<style type="text/css"> <style type="text/css">
{` {`
a, a:hover, a:active {
color: #000;
text-decoration: none;
}
.btn { .btn {
background-color: #CDC5C2; background-color: #CDC5C2;
border-color: #CDC5C2; border-color: #CDC5C2;
...@@ -42,82 +103,52 @@ function ProductsList() { ...@@ -42,82 +103,52 @@ function ProductsList() {
<Container> <Container>
<Row className="justify-content-center" > <Row className="justify-content-center" >
<Col sm={10} xs={12} > <Col sm={10} xs={12} >
<h1 style={{ fontSize: "3rem" }} className="text-center">OUTER</h1> <h1 style={{ fontSize: "3rem" }} className="text-center">{mainCategory}</h1>
<div className="text-center">{sub.map((ele) => ( <div className="text-center">{subcategory.map((ele) => (
<Button className="m-1">{ele}</Button> <Button className="m-1" onClick={(ele) => handleClick(ele)}>{ele}</Button>
))}</div> ))}</div>
</Col> </Col>
</Row> </Row>
<Row className="justify-content-between mx-0 my-5"> <Row className="justify-content-end mx-0 my-5">
<Form as={Row} onSubmit={handleSubmit} className="justify-content-end mx-0"> {/* <Form as={Row} onSubmit={handleSubmit} className="justify-content-end mx-0"> */}
<Dropdown> <Dropdown>
<Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle> <Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle>
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item>인기상품</Dropdown.Item> <Dropdown.Item>인기상품</Dropdown.Item>
<Dropdown.Item>신상품</Dropdown.Item> <Dropdown.Item>신상품</Dropdown.Item>
<Dropdown.Item>낮은가격</Dropdown.Item> <Dropdown.Item>낮은가격</Dropdown.Item>
<Dropdown.Item>높은가격</Dropdown.Item> <Dropdown.Item>높은가격</Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
<FormControl type="text" placeholder="Search" style={{ width: "13rem" }} /> <Form as={Row} onSubmit={handleSearch} className="justify-content-end mx-0">
<Button type="submit" className="search px-2 mb-1 "> <FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
<img src={search} width="20" height="20" /> <Button type="submit" className="search px-2">
</Button> <img src="/icon/search.svg" width="20" height="20" />
</Form> </Button>
</Form>
{/* </Form> */}
</Row> </Row>
<Row md={8} sm={12} className="justify-content-start m-2"> <Row md={8} sm={12} className="justify-content-start m-2">
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}> {productlist.map(pro => (
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67460/1607053816_0.jpg" style={{ objectFit: "contain", height: "22rem" }} /> <Link to={{
<Card.Body> pathname: `/product/${pro._id}`,
<Card.Title>케이시앵글부츠(SH)</Card.Title> state: {
<Card.Text>가격 : 12,000원</Card.Text> id: pro._id,
</Card.Body> name: pro.pro_name,
</Card> price: pro.price,
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}> colors: pro.colors,
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/48705/1552562469_0.jpg" style={{ objectFit: "contain", height: "22rem" }} /> sizes: pro.sizes,
<Card.Body> description: pro.description,
<Card.Title>메리제인플랫(SH)</Card.Title> main_img: pro.main_imgUrl,
<Card.Text>가격 : 12,000원</Card.Text> detail_imgs: pro.detail_imgUrls
</Card.Body> }
</Card> }}>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}> <ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/53386/1567390097_2.jpg" style={{ objectFit: "contain", height: "22rem" }} /> </Link>
<Card.Body> ))}
<Card.Title>솔티드스니커즈(SH)</Card.Title>
<Card.Text>가격 : 12,000원</Card.Text>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/61286/1587540563_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>버켄슬리퍼(SH)</Card.Title>
<Card.Text>가격 : 12,000원</Card.Text>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202011/b8f4c6471955b80fc3991b7d6df8926a.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>크레센도 하이힐펌프스</Card.Title>
<Card.Text>가격 : 12,000원</Card.Text>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202011/888e4e8d6a2c2e7da385b079151fcba2.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>어텀솔져1cm 스웨이드로퍼</Card.Title>
<Card.Text>가격 : 12,000원</Card.Text>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202007/3308564012eb14e6c11ed621fa7555fb.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>포웰3.5cm 스니커즈</Card.Title>
<Card.Text>가격 : 12,000원</Card.Text>
</Card.Body>
</Card>
</Row> </Row>
</Container> </Container>
<Pagination /> {/* <Pagination postsPerPage={postsPerPage} totalPosts={posts.length} paginate={paginate} /> */}
</div> </div>
) )
} }
......
client/src/Pages/ShoppingCart.js
View file @ 39c07bff
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Redirect } from 'react-router-dom'; import { Link, Redirect } from 'react-router-dom';
import { Card, Button, Container, Row, Col } from 'react-bootstrap'; import { Card, Button, Container, Row, Col } from 'react-bootstrap';
import axios from 'axios'; import axios from 'axios';
import catchErrors from '../utils/catchErrors';
import { isAuthenticated } from '../utils/auth'
import CartCard from '../Components/CartCard';
function ShoppingCart() { function ShoppingCart() {
const [num, setNum] = useState()
const [error, setError] = useState('')
const [cart, setCart] = useState([])
const [finalPrice, setFinalPrice] = useState(0)
const user = isAuthenticated()
const [num, setNum] = useState(0) useEffect(() => {
getCart()
}, [user])
function plusNum() { function plusNum() {
num = num + 1
setNum(num + 1) setNum(num + 1)
} }
function minusNum() { function minusNum() {
...@@ -16,67 +27,66 @@ function ShoppingCart() { ...@@ -16,67 +27,66 @@ function ShoppingCart() {
} }
else { else {
setNum(num - 1) setNum(num - 1)
} }
} }
function deleteCart() { async function deleteCart(e) {
//장바구니 DB에서 해당 항목 삭제 //장바구니 DB에서 해당 항목 삭제
console.log(e.target.name)
try {
const response = await axios.post('/api/cart/deletecart', { cartId: e.target.name })
console.log(response.data)
} catch (error) {
catchErrors(error, setError)
}
console.log('카트에 담긴 항목을 삭제했습니다.') console.log('카트에 담긴 항목을 삭제했습니다.')
} }
// async function getCart(){ async function getCart() {
// const response = await axios.get('/') try {
// } const response = await axios.get(`/api/cart/showcart/${user}`)
console.log(response.data)
setCart(response.data)
const finalPrices = response.data.map((e) => {
return e.count * e.productId.price
})
setFinalPrice(finalPrices.reduce((a, b) => (a + b)))
} catch (error) {
catchErrors(error, setError)
}
}
return ( return (
<div> <div>
{/* {getCart} */}
<Container className="justify-content-center"> <Container className="justify-content-center">
<h3 className="my-5 font-weight-bold text-center">장바구니</h3> <h1 className="my-5 font-weight-bold text-center">장바구니</h1>
<div> <div>
<h4 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h4> <h4 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h4>
<Card> {cart.length >0
<Row className="mx-1"> ? <CartCard cart={cart} deleteCart={deleteCart} minusNum={minusNum} plusNum={plusNum} num={num} />
<Col xs={2} sm={2} className="text-center my-auto"> : <div className="text-center my-5">장바구니에 담긴 상품이 없습니다.</div>}
<input className="" type="checkbox" id="exampleCheck1" />
</Col>
<Col className="text-center">
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} />
</Col>
<Col md={6} className="p-2">
<Card.Body>
<input type="image" alt="삭제버튼" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={deleteCart} />
<Card.Title className="font-weight-bold mt-3">제품명</Card.Title>
<Card.Text>가격</Card.Text>
<Card.Text>옵션</Card.Text>
<Card.Text>수량</Card.Text>
<div>
<input type="image" alt="마이너스" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={minusNum} />
<input type="text" style={{ width: '30px' }} className="text-center align-middle mx-1" placeholder="1" value={num} readOnly></input>
<input type="image" alt="플러스" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={plusNum} />
</div>
</Card.Body>
</Col>
</Row>
</Card>
</div> </div>
<div className="p-5 m-5" style={{ background: '#F7F3F3' }}> <div className="p-5 m-3" style={{ background: '#F7F3F3' }}>
<ul className="pl-0" style={{ listStyle: 'none' }}> <ul className="pl-0" style={{ listStyle: 'none' }}>
<li> <li>
<span className="text-secondary">총 상품금액</span> <span className="text-secondary">총 상품금액</span>
<span className="text-secondary float-right">12,000원</span> <span className="text-secondary float-right">{finalPrice}원</span>
</li> </li>
<li> <li>
<span className="text-secondary">배송비</span> <span className="text-secondary">배송비</span>
<span className="text-secondary float-right">2,500원</span> <span className="text-secondary float-right">2500원</span>
</li> </li>
</ul> </ul>
<div className="my-1 pt-2 border-top font-weight-bold"> <div className="my-1 pt-2 border-top font-weight-bold">
결제금액<span className="float-right">14,500원</span> 결제금액<span className="float-right">{finalPrice + 2500}원</span>
</div> </div>
</div> </div>
<div className="text-center"> <div className="text-center">
<Button className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} href="/payment" block>결제하기</Button> <Button as={Link} to={{
pathname: `/payment`,
state: { cart }
}} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} block>결제하기</Button>
</div> </div>
</Container> </Container>
......
client/src/Pages/Signup.js
View file @ 39c07bff
...@@ -24,11 +24,9 @@ function Signup() { ...@@ -24,11 +24,9 @@ function Signup() {
setUser({ ...user, [name]: value }) setUser({ ...user, [name]: value })
} }
async function handleSubmit(event) { async function handleSubmit(event) {
event.preventDefault() event.preventDefault()
const form = event.currentTarget; const form = event.currentTarget;
console.log(form)
if (form.checkValidity() === false) { if (form.checkValidity() === false) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
...@@ -44,8 +42,8 @@ function Signup() { ...@@ -44,8 +42,8 @@ function Signup() {
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
} }
} }
function checkPassword(event) { function checkPassword(event) {
const p1 = user.password const p1 = user.password
const p2 = user.password2 const p2 = user.password2
...@@ -60,137 +58,137 @@ function Signup() { ...@@ -60,137 +58,137 @@ function Signup() {
return true return true
} }
} }
if (success) { if (success) {
alert('회원가입 되었습니다.') alert('회원가입 되었습니다.')
return <Redirect to='/login'/> return <Redirect to='/login'/>
} }
return (
<div>
<Container className="my-5">
return ( <Row className="justify-content-center">
<div> <Col md={6} xs={10} className="border" style={{ background: '#F7F3F3' }}>
<Container className="my-5"> <h2 className="text-center mt-5">Sign Up</h2>
{error && <Alert variant='danger'>
<Row className="justify-content-center"> {error}
<Col md={6} xs={10} className="border" style={{ background: '#F7F3F3' }}> </Alert>}
<h2 className="text-center mt-5">Sign Up</h2> <Form
{error && <Alert variant='danger'> noValidate validated={validated}
{error} onSubmit={handleSubmit}
</Alert>} className="p-5">
<Form <Form.Group controlId="formBasicName">
noValidate validated={validated} <Form.Row>
onSubmit={handleSubmit} <Col sm={4} xs={6} as={Form.Label} for="id">이 름</Col>
className="p-5"> <Col sm={8} xs={12} as={Form.Control}
<Form.Group controlId="formBasicName"> required type="text"
<Form.Row> name="name"
<Col sm={4} xs={6} as={Form.Label} for="id">이 름</Col> placeholder="Name"
<Col sm={8} xs={12} as={Form.Control} style={{ width: '160px' }}
value={user.name}
onChange={handleChange} />
<Form.Control.Feedback type="invalid">이름을 입력하세요. </Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicNumber">
<Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="number">주민등록번호</Col>
<Col as={Row} sm={8} xs={10} >
<Form.Control
required type="text" required type="text"
name="name" name="number1"
placeholder="Name" maxlength="6"
style={{ width: '160px' }} className="mx-2" style={{ width: '17 0px' }}
value={user.name} value={user.number1}
onChange={handleChange} /> onChange={handleChange}>
<Form.Control.Feedback type="invalid">이름을 입력하세요. </Form.Control.Feedback> </Form.Control>
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicNumber">
<Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="number">주민등록번호</Col>
<Col as={Row} sm={8} xs={10} >
<Form.Control
required type="text"
name="number1"
maxlength="6"
className="mx-2" style={{ width: '17 0px' }}
value={user.number1}
onChange={handleChange}>
</Form.Control>
- -
<Form.Control <Form.Control
required type="text" required type="text"
name="number2" name="number2"
maxlength="1" className="mx-3" maxlength="1" className="mx-3"
style={{ width: '50px' }} style={{ width: '50px' }}
value={user.number2} value={user.number2}
onChange={handleChange}> onChange={handleChange}>
</Form.Control> </Form.Control>
****** ******
<Form.Control.Feedback type="invalid">주민등록번호를 입력하세요.</Form.Control.Feedback> <Form.Control.Feedback type="invalid">주민등록번호를 입력하세요.</Form.Control.Feedback>
</Col> </Col>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicId"> <Form.Group controlId="formBasicId">
<Form.Row> <Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="id">아이디</Col> <Col sm={4} xs={6} as={Form.Label} for="id">아이디</Col>
<Col sm={8} xs={12} as={Form.Control} <Col sm={8} xs={12} as={Form.Control}
required required
type="text" type="text"
name="id" name="id"
placeholder="ID" placeholder="ID"
style={{ width: '160px' }} style={{ width: '160px' }}
value={user.id} value={user.id}
onChange={handleChange} /> onChange={handleChange} />
<Form.Control.Feedback type="invalid"> 아이디를 입력하세요.</Form.Control.Feedback> <Form.Control.Feedback type="invalid"> 아이디를 입력하세요.</Form.Control.Feedback>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicPassword"> <Form.Group controlId="formBasicPassword">
<Form.Row> <Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="password">비밀번호</Col> <Col sm={4} xs={6} as={Form.Label} for="password">비밀번호</Col>
<Col sm={8} xs={12} as={Form.Control} <Col sm={8} xs={12} as={Form.Control}
type="password" type="password"
name="password" name="password"
placeholder="Password" placeholder="Password"
style={{ width: '160px' }} style={{ width: '160px' }}
value={user.password} value={user.password}
required required
onChange={handleChange} onChange={handleChange}
/> />
<Form.Control.Feedback className="text-center" type="invalid"> <Form.Control.Feedback className="text-center" type="invalid">
비밀번호를 입력하세요. 비밀번호를 입력하세요.
</Form.Control.Feedback> </Form.Control.Feedback>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicPassword2"> <Form.Group controlId="formBasicPassword2">
<Form.Row> <Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="password">비밀번호 확인</Col> <Col sm={4} xs={6} as={Form.Label} for="password">비밀번호 확인</Col>
<Col sm={8} xs={12} as={Form.Control} <Col sm={8} xs={12} as={Form.Control}
type="password" type="password"
name="password2" name="password2"
placeholder="Password" placeholder="Password"
style={{ width: '160px' }} style={{ width: '160px' }}
value={user.password2} value={user.password2}
required required
onChange={handleChange} onChange={handleChange}
/> />
<Form.Control.Feedback type="invalid"> 비밀번호를 한번 더 입력하세요. <Form.Control.Feedback type="invalid"> 비밀번호를 한번 더 입력하세요.
</Form.Control.Feedback> </Form.Control.Feedback>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicTel"> <Form.Group controlId="formBasicTel">
<Form.Row> <Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="tel">휴대전화</Col> <Col sm={4} xs={6} as={Form.Label} for="tel">휴대전화</Col>
<Col sm={8} xs={12} as={Form.Control} <Col sm={8} xs={12} as={Form.Control}
required required
type="text" type="text"
name="tel" name="tel"
size="sm" style={{ width: '160px' }} size="sm" style={{ width: '160px' }}
value={user.tel} value={user.tel}
onChange={handleChange} /> onChange={handleChange} />
<Form.Control.Feedback type="invalid"> 휴대전화를 입력하세요. </Form.Control.Feedback> <Form.Control.Feedback type="invalid"> 휴대전화를 입력하세요. </Form.Control.Feedback>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Button <Button
style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block
onClick={checkPassword} onClick={checkPassword}
> >
Sign Up Sign Up
</Button> </Button>
</Form> </Form>
</Col> </Col>
</Row> </Row>
</Container> </Container>
</div> </div>
) )
} }
export default Signup export default Signup
\ No newline at end of file
client/src/utils/auth.js
View file @ 39c07bff
import axios from "axios" import axios from "axios"
export function handleLogin(userId) { export function handleLogin({userId,role,name}){
localStorage.setItem('loginStatus', userId) localStorage.setItem('id',userId)
localStorage.setItem('role',role)
localStorage.setItem('name',name)
} }
export async function handleLogout() { export async function handleLogout(){
localStorage.removeItem('loginStatus') localStorage.removeItem('id')
localStorage.removeItem('role')
localStorage.removeItem('name')
await axios.get('/api/auth/logout') await axios.get('/api/auth/logout')
window.location.href = '/' window.location.href = '/'
} }
export function isAuthenticated() { export function isAuthenticated(){
const userId = localStorage.getItem('loginStatus') const userId= localStorage.getItem('id')
if (userId) { if(userId){
return userId return userId
} else { } else {
return false return false
......
client/src/utils/catchErrors.js
View file @ 39c07bff
function catchErrors(error,displayError){ function catchErrors(error, displayError) {
let errorMsg let errorMsg
if(error.response){ if (error.response) {
errorMsg=error.response.data errorMsg = error.response.data
console.log(errorMsg) console.log(errorMsg)
}else if(error.request){ } else if (error.request) {
errorMsg=error.request errorMsg = error.request
console.log(errorMsg) console.log(errorMsg)
}else{ } else {
errorMsg=error.message errorMsg = error.message
console.log(errorMsg) console.log(errorMsg)
} }
displayError(errorMsg) displayError(errorMsg)
} }
export default catchErrors export default catchErrors
\ No newline at end of file
server/app.js
View file @ 39c07bff
import express from 'express'; import express from 'express';
// import bodyParser from "body-parser"; import fs from 'fs';
import connectDb from './schemas/index.js' import connectDb from './schemas/index.js';
import categoryRouter from "./routes/category.routes.js";
import userRouter from "./routes/user.routes.js"; import userRouter from "./routes/user.routes.js";
import productRouter from './routes/product.routes.js'; import productRouter from './routes/product.routes.js';
import cartRouter from './routes/cart.routes.js'; import cartRouter from './routes/cart.routes.js';
...@@ -10,24 +11,28 @@ import config from './config.js' ...@@ -10,24 +11,28 @@ import config from './config.js'
import authRouter from './routes/auth.routes.js' import authRouter from './routes/auth.routes.js'
import cors from 'cors' import cors from 'cors'
fs.readdir('uploads', (error) => {
if (error) {
fs.mkdirSync('uploads');
}
})
connectDb() connectDb()
const app = express(); const app = express();
app.use(express.json())
app.use("/image", express.static("uploads/"))
app.use(express.json());
app.use(cors()) app.use(cors())
app.use(express.static(path.join(process.cwd(), 'dist'))) app.use(express.static(path.join(process.cwd(), 'dist')))
// app.use(bodyParser.urlencoded({ extended: true })) // app.use(bodyParser.urlencoded({ extended: true }))
app.use('/images', express.static('uploads/'))
// app.use('/', indexRouter); // app.use('/', indexRouter);
app.use('/', kakaopayRoutes) app.use('/', kakaopayRoutes)
app.use('/api/categories',categoryRouter)
app.use('/api/users',userRouter) app.use('/api/users',userRouter)
app.use('/api/auth',authRouter) app.use('/api/auth',authRouter)
app.use('/api/product', productRouter) app.use('/api/product', productRouter)
app.use('/api/addcart', cartRouter) app.use('/api/cart', cartRouter)
app.listen(config.port, () => { app.listen(config.port, () => {
console.info('Server started on port %s.', config.port) console.info('Server started on port %s.', config.port)
......
server/controllers/auth.controller.js
View file @ 39c07bff
...@@ -7,10 +7,10 @@ const login = async (req, res) => { ...@@ -7,10 +7,10 @@ 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') const user = await User.findOne({ id }).select('password role name')
console.log('u=', user)
if (!user) { if (!user) {
return res.status(404).send(`${id}가 존재하지 않습니다.`) return res.status(404).send(`${id}가 존재하지 않습니다.`)
} }
const passwordMatch = await bcrypt.compare(password, user.password) const passwordMatch = await bcrypt.compare(password, user.password)
...@@ -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 }) res.json({ userId: user._id, role: user.role, name: user.name })
} else { } else {
res.status(401).send('비밀번호가 일치하지 않습니다.') res.status(401).send('비밀번호가 일치하지 않습니다.')
......
server/controllers/cart.controller.js
View file @ 39c07bff
import Cart from "../schemas/Cart.js"; import Cart from "../schemas/Cart.js";
import Product from '../schemas/Product.js'
const cart = async (req, res) => { const addcart = async (req, res) => {
const { userId, productObjectId, color, size, count } = req.body const { userId, products} = req.body
// console.log('req.body=', req.body)
// const {userId, productObjectId, }
// const { user, pro_name, price, main_image } = req.body
// color, size, count, productObjectId(productlist에서 props), userId(로컬)
try { try {
const product = await Product.find({ _id: productObjectId }) const cart = await Cart.findOne({ userId: userId })
if (product) { await Cart.updateOne(
// console.log(product) { _id: cart._id },
const { pro_name, price, main_image } = product[0] {$set: {products: products}}
const products = { productObjectId, color, size, count, pro_name, price, main_image } )
// console.log(products) res.status(200).send('카트에 저장되었습니다.')
const newCart = await new Cart({ } catch (error) {
userId, products console.log(error)
}).save() res.status(500).send('카트에 저장할 수 없습니다.')
console.log(newCart) }
res.json(newCart) }
} const showcart = async (req, res) => {
// const newCart = await new Cart({ try {
// user, pro_name, price, stock, main_category, sub_category, main_image const cart = await Cart.findOne({ userId: req.id }).populate({
// }).save() path: 'products.productId',
// const asdf = await Cart.find({ user }) model: 'Product'
// console.log(newCart) })
// res.json(newCart) res.status(200).json(cart.products)
} catch (error) { } catch (error) {
console.log(error) console.log(error)
res.status(500).send('죄송합니다. 다시 입력해 주십시오.') res.status(500).send('쇼핑카트를 불러오지 못했습니다.')
} }
}
const deletecart = async (req, res) => {
console.log(req.body)
const { cartId } = req.body
try {
await Cart.deleteOne({ _id: cartId })
res.send("삭제완료")
} catch (error) {
console.log(error)
res.status(500).send('해당 카트를 삭제하지 못했습니다.')
// try { }
// const user = await
// User.findById(id)
// if (!user) {
// console.log(error)
// res.status(404).send('사용자를 찾을 수 없습니다')
// }
// req.profile = user
// next()
// } catch (error) {
// console.log(error)
// res.status(500).send('사용자 아이디 실패')
// }
} }
const userById = async (req, res, next, id) => {
try {
const cart = await Cart.findOne({ userId: id })
if (!cart) {
res.status(404).send("사용자를 찾을 수 없습니다.")
}
req.cart = cart
req.id = id
next()
} catch (error) {
res.status(500).send("사용자 아이디 검색 실패")
}
}
export default { cart } export default { addcart, showcart, deletecart, userById }
\ No newline at end of file \ No newline at end of file
server/controllers/category.controller.js 0 → 100644
View file @ 39c07bff
import Category from "../schemas/Category.js";
const getCategory = async (req, res) => {
console.log("dsadd=")
try {
const category = await Category.find({}, {_id: 0})
res.json(category)
} catch (error) {
console.log(error)
res.status(500).send('카테고리 검색 실패')
}
}
const getSubCategory=(req,res)=>{
}
const getsubId=(req,res,next,sub)=>{
const subcategory = await category.find({"Dress"})
console.log('sub=',sub)
next()
}
export default { getCategory , getsubId, getSubCategory}
\ No newline at end of file
server/controllers/product.controller.js
View file @ 39c07bff
import Product from "../schemas/Product.js"; import Product from "../schemas/Product.js";
import multer from 'multer'; import multer from 'multer';
const upload = multer({ dest: 'uploads/' })
const upload = multer({ dest: 'uploads/' }); const imageUpload = upload.fields([
{ name: 'main_image' },
const fileUpload = upload.fields([ { name: 'detail_image' }
{ name: 'main_image', maxCount: 1 }, ])
{ name: 'detail_image', maxCount: 1 }
])
const regist = async (req, res) => { const regist = async (req, res) => {
console.log('req.body=', req.body) console.log("req.body=",req.body)
const { pro_name, price, stock, main_category, sub_category, colors, sizes, description } = req.body
console.log(req.files)
const main_image = req.files['main_image'][0].filename
console.log(main_image)
const detail_image = req.files['detail_image'][0].filename
try { try {
const { pro_name, price, stock, main_category, sub_category, description, colors, sizes } = req.body
const main_img = req.files['main_image'][0]
const detail_img = req.files['detail_image']
const main_imgUrl = main_img.filename
const detail_imgUrls = []
detail_img.forEach(file => {
detail_imgUrls.push(file.filename)
})
const newProduct = await new Product({ const newProduct = await new Product({
pro_name, price, stock, main_category, sub_category, colors, sizes, description, main_image, detail_image pro_name, price, stock, main_category, sub_category, description, main_imgUrl, detail_imgUrls, colors, sizes
}).save() }).save()
res.json(newProduct) res.json(newProduct)
} catch (error) { } catch (error) {
console.log(error) console.log(error)
res.status(500).send('죄송합니다. 다시 입력해 주십시오.') res.status(500).send('제품 정보 등록에 실패하였습니다. 다시 진행해 주십시오.')
}
}
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)
res.json(bestProduct, newProduct)
} catch {
res.status(500).send('상품을 불러오지 못했습니다.')
}
}
const getlist=(req,res)=>{
try {
res.json(req.productslist)
} catch (error) {
res.status(500).send('상품을 불러오지 못했습니다.')
} }
} }
const getProduct = (req, res) => { const categoryId = async (req, res, next, category) => {
res.json(req.body) try {
const productslist = await Product.find({main_category: category})
if (!productslist) {
res.status(404).send('상품을 찾을 수 없습니다.')
}
req.productslist = productslist
next()
} catch (error) {
res.status(500).send('상품을 불러오지 못했습니다.')
}
}
const subgetlist=(req,res)=>{
try{
res.json(req.subproductslist)
}catch(error){
res.status(500).send('상품을 불러오지 못했습니다.')
}
}
const subcategoryId = async (req, res, next, subcategory) => {
try {
const subproductslist = await Product.find({sub_category:subcategory})
if (!subproductslist) {
res.status(404).send('상품을 찾을 수 없습니다.')
}
req.subproductslist = subproductslist
next()
} catch (error) {
res.status(500).send('상품을 불러오지 못했습니다.')
}
} }
export default { regist, fileUpload, getProduct } export default { imageUpload, regist, categoryId, getlist, subcategoryId, subgetlist }
\ No newline at end of file
server/controllers/user.controller.js
View file @ 39c07bff
import Cart from "../schemas/Cart.js";
import User from "../schemas/User.js"; import User from "../schemas/User.js";
import isLength from 'validator/lib/isLength.js' import isLength from 'validator/lib/isLength.js';
import bcrypt from 'bcryptjs' import bcrypt from 'bcryptjs';
import multer from "multer"; import multer from "multer";
const uploadimg = multer({ dest: 'uploads/' }); const uploadimg = multer({ dest: 'uploads/' });
...@@ -30,8 +31,10 @@ const userById = async (req, res, next, id) => { ...@@ -30,8 +31,10 @@ const userById = async (req, res, next, id) => {
const signup = async (req, res) => { const signup = async (req, res) => {
const { name, number1, number2, id, password, tel } = req.body
console.log(req.body) console.log(req.body)
const { name, number1, number2, id, password, tel } = req.body
try { try {
if (!isLength(password, { min: 8, max: 15 })) { if (!isLength(password, { min: 8, max: 15 })) {
return res.status(422).send('비밀번호는 8-15자리로 입력해주세요.') return res.status(422).send('비밀번호는 8-15자리로 입력해주세요.')
...@@ -51,6 +54,7 @@ const signup = async (req, res) => { ...@@ -51,6 +54,7 @@ const signup = async (req, res) => {
password: hash, password: hash,
tel, tel,
}).save() }).save()
await new Cart({ userId: newUser._id,role}).save()
console.log(newUser) console.log(newUser)
res.json(newUser) res.json(newUser)
...@@ -60,7 +64,6 @@ const signup = async (req, res) => { ...@@ -60,7 +64,6 @@ const signup = async (req, res) => {
} }
} }
const update = async (req, res) => { const update = async (req, res) => {
console.log("req", req.body) console.log("req", req.body)
try { try {
......
server/routes/auth.routes.js
View file @ 39c07bff
...@@ -6,7 +6,7 @@ const router = express.Router() ...@@ -6,7 +6,7 @@ const router = express.Router()
router.route('/login') router.route('/login')
.post(authCtrl.login) .post(authCtrl.login)
router.route('/logout') router.route('/logout')
.get(authCtrl.logout) .get(authCtrl.logout)
export default router export default router
\ No newline at end of file
server/routes/cart.routes.js
View file @ 39c07bff
...@@ -4,8 +4,16 @@ import cartCtrl from '../controllers/cart.controller.js'; ...@@ -4,8 +4,16 @@ import cartCtrl from '../controllers/cart.controller.js';
const router = express.Router() const router = express.Router()
router.route('/') router.route('/addcart')
.post(cartCtrl.cart) .put(cartCtrl.addcart)
// .get() // .get()
router.route('/showcart/:userId')
.get(cartCtrl.showcart)
router.param('userId', cartCtrl.userById)
router.route('/deletecart')
.post(cartCtrl.deletecart)
export default router export default router
\ No newline at end of file
server/routes/category.routes.js 0 → 100644
View file @ 39c07bff
import express from "express";
import categoryCtrl from "../controllers/category.controller.js";
const router = express.Router()
router.route('/main')
.get(categoryCtrl.getCategory)
router.route('/sub/:sub')
.get(categoryCtrl.getSubCategory)
router.param('sub',categoryCtrl.getsubId)
export default router
\ No newline at end of file
server/routes/product.routes.js
View file @ 39c07bff
...@@ -5,8 +5,19 @@ import productCtrl from '../controllers/product.controller.js'; ...@@ -5,8 +5,19 @@ import productCtrl from '../controllers/product.controller.js';
const router = express.Router() const router = express.Router()
router.route('/regist') router.route('/regist')
.post(productCtrl.fileUpload, productCtrl.regist) .post(productCtrl.imageUpload, productCtrl.regist)
router.route('/productone')
.get(productCtrl.getProduct) router.route('/getproduct')
.get(productCtrl.getToHome)
router.route('/getproduct/:category')
.get(productCtrl.getlist)
router.route('/getproduct/:subcategory')
.get(productCtrl.subgetlist)
router.param('category', productCtrl.categoryId)
router.param('subcategory',productCtrl.subcategoryId)
export default router export default router
\ No newline at end of file
server/schemas/Cart.js
View file @ 39c07bff
import mongoose from 'mongoose' import mongoose from 'mongoose'
const { String, Number, Array, ObjectId } = mongoose.Schema.Types const { String, Number, Array, ObjectId } = mongoose.Schema.Types
const productschema = new mongoose.Schema ({
pro_name: {
type: String,
required: true
},
price:{
type: Number,
required: true
},
main_image: {
type: String,
required: true
},
color:{
type: String,
required: true
},
size:{
type: String,
required: true
},
productObjectId: {
type: ObjectId,
required: true
}
})
const CartSchema = new mongoose.Schema({ const CartSchema = new mongoose.Schema({
userId: { userId: {
type: String, type: ObjectId,
// required: true ref: 'User'
}, },
products : { products: {
type: [productschema], type: [
required: true {
count: {
type: Number,
default: 1
},
productId: {
type: ObjectId,
ref: 'Product'
},
sizes: {
type: String
},
colors: {
type: String
}
}
]
} }
}, {
timestamps: true
}) })
export default mongoose.models.Cart || mongoose.model('Cart', CartSchema) export default mongoose.models.Cart || mongoose.model('Cart', CartSchema)
\ 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