Commit 2c4b1328 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

0115 push

parent 8be66ea0
......@@ -23,7 +23,7 @@ function App() {
<Route exact path="/" component={Home} />
<Route path="/login" component={Login} />
<Route path="/signup" component={Signup} />
<Route path="/products/:productId" component={Product} />
<Route path="/product/:productId" component={Product} />
<Route path="/categories/:main" component={ProductsList} />
<Route path="/admin" component={Admin} />
<Route path="/regist" component={ProductRegist} />
......
......@@ -11,7 +11,7 @@ function CartCard(props) {
<input className="" type="checkbox" id="exampleCheck1" />
</Col>
<Col className="text-center">
<Card.Img className="img-fluid" variant="top" src={e.productId.main_image && `/images/${e.productId.main_image}`} style={{ width: '20rem' }} />
<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>
......
......@@ -11,7 +11,7 @@ function MainNav() {
<img alt="로고" src="/icon/footprint.svg" width="24" height="24" />
{' '}KU#
</Navbar.Brand>
<Nav>
<Nav className="ml-auto">
{user ? <Nav.Link className="text-light" onClick={() => handleLogout()}>Logout</Nav.Link>
: (
<>
......
import React from 'react'
function PaymentCard() {
return (
<Card >
<Row className="mx-1">
<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>
)
}
export default PaymentCard
......@@ -5,13 +5,13 @@ import axios from 'axios';
import catchErrors from '../utils/catchErrors';
function SubNav() {
const [categorysDiv, setCategorysDiv] = useState([])
const [categoriesDiv, setCategoriesDiv] = useState([])
const [error, setError] = useState('')
useEffect(async () => {
try {
const response = await axios.get('/api/categorys')
const response = await axios.get('/api/categories')
let list = []
Object.keys(response.data[0]).forEach((ele) => {
const url = ele.toLowerCase()
......@@ -19,7 +19,7 @@ function SubNav() {
<Nav.Link as={Link} to={`/categories/${url}`}>{ele}</Nav.Link>
)
})
setCategorysDiv(list)
setCategoriesDiv(list)
} catch (error) {
catchErrors(error, setError)
}
......@@ -34,8 +34,8 @@ function SubNav() {
}
`}
</style>
<Nav>
{categorysDiv.map(item => item)}
<Nav style={{overflowX: "auto"}}>
{categoriesDiv.map(item => item)}
</Nav>
</Navbar>
)
......
......@@ -210,9 +210,6 @@ function Payment() {
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h5>
<Card >
<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">
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} />
</Col>
......
......@@ -4,7 +4,6 @@ import { Row, Col, Button, Form, Container, Alert } from 'react-bootstrap';
import axios from 'axios';
import catchErrors from '../utils/catchErrors';
let color = {}
let preColors = []
let colorHtml = []
let list = []
......@@ -22,38 +21,55 @@ function ProductsRegist() {
main_image: [],
detail_image: []
}
const [categorys, setCategorys] = useState({ 0: [], 1: [[]] })
const [categories, setCategories] = useState({ 0: [], 1: [[]] })
const [product, setProduct] = useState(INIT_PRODUCT)
const [categoryNum, setCategoryNum] = useState(0)
const [tag, setTag] = useState(0)
const [subCate, setSubCate] = useState('')
const [color, setColor] = useState({})
const [error, setError] = useState('')
const [success, setSuccess] = useState(false)
const [checked, setChecked] = useState({ "Free": false, "XL": false, "L": false, "M": false, "S": false, "XS": false })
useEffect(async () => {
try {
const response = await axios.get('/api/categorys')
const response = await axios.get('/api/categories')
const data = response.data[0]
setCategorys([Object.keys(data), Object.values(data)])
setCategories([Object.keys(data), Object.values(data)])
} catch (error) {
catchErrors(error, setError)
}
}, [])
function addCategory() {
console.log(product)
list.push(
<div>
<span i={tag}>{product["main_category"]} / {product["sub_category"][tag]}</span>
<input type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right align-middle" onClick={deleteCategory} />
<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)
console.log(list)
}
function deleteCategory(e) {
const categ = e.target.parentNode
categ.remove()
product["sub_category"].splice(categ.firstElementChild.getAttribute("i"), 1)
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)
}
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) {
......@@ -63,29 +79,36 @@ function ProductsRegist() {
function addColor() {
preColors.push(color["colors"])
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>
)
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
}
function handleChange(event) {
const { name, value, files } = event.target
console.log("event.target.name=", name, "event.target.value=", value)
if (name === "sub_category") {
product[name].push(value)
} else if (files) {
if (files) {
setProduct({ ...product, [name]: files })
} else {
setProduct({ ...product, [name]: value })
}
if (event.target.name === "main_category") {
setCategoryNum(event.target.selectedIndex - 1)
}
}
async function handleSubmit(e) {
......@@ -120,7 +143,7 @@ function ProductsRegist() {
}
return (
<Container className="mt-5">
<Container className=". ">
<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>}
......@@ -142,17 +165,17 @@ function ProductsRegist() {
<Form.Label>분류</Form.Label>
<Row>
<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>
{categorys[0].map((main) => (
{categories[0].map((main) => (
<option value={main}>{main}</option>
))}
</Form.Control>
</Col>
<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>
{categorys[1][categoryNum].map((sub) => (
{categories[1][categoryNum].map((sub) => (
<option value={sub}>{sub}</option>
))}
</Form.Control>
......@@ -176,11 +199,9 @@ function ProductsRegist() {
<Form.Label>색상</Form.Label>
<Row>
<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>
<Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addColor}>추가</Button>
</Col>
</Row>
......
......@@ -112,7 +112,7 @@ function ProductsList({ match }) {
<Row md={8} sm={12} className="justify-content-start m-2">
{productlist.map(pro => (
<Link to={{
pathname: `/products/${pro._id}`,
pathname: `/product/${pro._id}`,
state: {
id: pro._id,
name: pro.pro_name,
......
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 axios from 'axios';
import catchErrors from '../utils/catchErrors';
......@@ -9,7 +9,7 @@ import CartCard from '../Components/CartCard';
function ShoppingCart() {
const [num, setNum] = useState()
const [error, setError] = useState('')
const [cart, setCart] = useState()
const [cart, setCart] = useState([])
const [finalPrice, setFinalPrice] = useState(0)
const user = isAuthenticated()
......@@ -19,7 +19,6 @@ function ShoppingCart() {
function plusNum() {
num = num + 1
setNum(num + 1)
}
function minusNum() {
......@@ -28,7 +27,6 @@ function ShoppingCart() {
}
else {
setNum(num - 1)
}
}
async function deleteCart(e) {
......@@ -49,10 +47,10 @@ function ShoppingCart() {
const response = await axios.get(`/api/cart/showcart/${user}`)
console.log(response.data)
setCart(response.data)
const finalPrices = response.data.map((e)=>{
const finalPrices = response.data.map((e) => {
return e.count * e.productId.price
})
setFinalPrice( finalPrices.reduce((a,b) => (a+b)))
setFinalPrice(finalPrices.reduce((a, b) => (a + b)))
} catch (error) {
catchErrors(error, setError)
}
......@@ -61,10 +59,12 @@ function ShoppingCart() {
return (
<div>
<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>
<h4 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h4>
{cart?<CartCard cart={cart} deleteCart={deleteCart} minusNum={minusNum} plusNum={plusNum} num={num} />:<div></div>}
{cart.length >0
? <CartCard cart={cart} deleteCart={deleteCart} minusNum={minusNum} plusNum={plusNum} num={num} />
: <div className="text-center my-5">장바구니에 담긴 상품이 없습니다.</div>}
</div>
<div className="p-5 m-3" style={{ background: '#F7F3F3' }}>
......@@ -79,11 +79,14 @@ function ShoppingCart() {
</li>
</ul>
<div className="my-1 pt-2 border-top font-weight-bold">
결제금액<span className="float-right">{finalPrice+2500}</span>
결제금액<span className="float-right">{finalPrice + 2500}</span>
</div>
</div>
<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>
</Container>
......
......@@ -28,7 +28,7 @@ app.use('/images', express.static('uploads/'))
// app.use('/', indexRouter);
app.use('/', kakaopayRoutes)
app.use('/api/categorys',categoryRouter)
app.use('/api/categories',categoryRouter)
app.use('/api/users',userRouter)
app.use('/api/auth',authRouter)
app.use('/api/product', productRouter)
......
......@@ -19,7 +19,7 @@ const showcart = async (req, res) => {
try {
const cart = await Cart.findOne({ userId: req.id }).populate({
path: 'products.productId',
model: 'Product'
model: 'Product'
})
res.status(200).json(cart.products)
} catch (error) {
......
......@@ -2,7 +2,7 @@ import mongoose from 'mongoose'
const { Array } = mongoose.Schema.Types
const CategorysSchema = new mongoose.Schema ({
const CategoriesSchema = new mongoose.Schema ({
"DRESS": {
type: Array,
required: true
......@@ -33,4 +33,4 @@ const CategorysSchema = new mongoose.Schema ({
},
})
export default mongoose.models.Categorys || mongoose.model('Categorys', CategorysSchema)
\ No newline at end of file
export default mongoose.models.Categories || mongoose.model('Categories', CategoriesSchema)
\ 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