Skip to content

GitLab

Commit d6c361c6 authored by 이재연's avatar 이재연
Browse files

dd

parent 708a8aaf
Show whitespace changes
Inline Side-by-side
client/src/App.js
View file @ d6c361c6
......@@ -18,16 +18,15 @@ function App() {
return (
<div>
<Router>
<MainNav />
<SubNav />
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/login" component={Login} />
<Route path="/signup" component={Signup} />
<Route path="/product" component={Product} />
<Route path="/productslist" component={ProductsList} />
{/* <Route path="/product" component={Product} /> */}
<Route path="/product/:product" component={ProductsList} />
<Route path="/admin" component={Admin} />
<Route path="/regist" component={ProductRegist} />
<Route path="/shoppingcart" component={ShoppingCart} />
......@@ -37,7 +36,6 @@ function App() {
<Redirect path="/" to="/" />
</Switch>
</Router>
</div>
)
......
client/src/Components/ListCard.js
View file @ d6c361c6
import React, { useState, useEffect, useRef } from 'react';
import React from 'react';
import {Card} from 'react-bootstrap'
function ListCard(props) {
......
client/src/Components/SubNav.js
View file @ d6c361c6
import React, { useState, useEffect, useRef } from 'react';
import { Redirect } from 'react-router-dom';
import { Navbar, Nav, NavDropdown } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { Navbar, Nav } from 'react-bootstrap';
import axios from 'axios';
import catchErrors from '../utils/catchErrors';
function SubNav() {
const [toggle, setToggle] = useState({ "dress": false, "outer": false, "top": false, "pants": false, "skirt": false, "training": false, "shoes": false });
function handleMouseEnter(id) {
setToggle({ [id]: true })
}
function handleMouseLeave(id) {
setToggle({ [id]: false })
}
function handleToggle(id) {
setToggle({ [id]: !toggle[`${id}`] })
}
function handleClick(url) {
return <Redirect to={url} />
const [categorysDiv, setCategorysDiv] = useState([])
const [error, setError] = useState('')
useEffect(async () => {
try {
const response = await axios.get('/api/categorys')
let list = []
Object.keys(response.data[0]).forEach((ele) => {
const url = ele.toLowerCase()
list.push(
<Nav.Link as={Link} to={`/product/${url}`}>{ele}</Nav.Link>
)
})
setCategorysDiv(list)
} catch (error) {
catchErrors(error, setError)
}
}, [])
return (
<Navbar sticky="top" className="flex-nowrap" style={{ top: "62px", paddingTop: "0", paddingBottom: "0", backgroundColor: "#fff", overflowX: "auto" }}>
<Navbar sticky="top" className="flex-nowrap" style={{ top: "62px", paddingTop: "0", paddingBottom: "0", backgroundColor: "#fff" }}>
<style type="text/css">
{`
.nav-link, .nav-link:hover, .nav-link:active {
color: #91877F;
}
.dropdown-toggle:after {
display: none;
}
.dropdown-menu {
background-color: #91877F;
}
.dropdown-item {
color: #f8f9fa;
}
.dropdown-item:focus, .dropdown-item:hover {
color: #91877F;
}
.dropdown-item:active {
background-color: #f8f9fa;
}
`}
</style>
<Nav>
<NavDropdown title="DRESS" onMouseEnter={() => handleMouseEnter("dress")} onMouseLeave={() => handleMouseLeave("dress")} show={toggle.dress} toggle={() => handleToggle("dress")} onClick={() => handleClick("/dress")}>
<NavDropdown.Item href="/dress/long">LONG DRESS</NavDropdown.Item>
<NavDropdown.Item href="/dress/short">SHORT DRESS</NavDropdown.Item>
<NavDropdown.Item href="/dress/knit">KNIT DRESS</NavDropdown.Item>
<NavDropdown.Item href="/dress/shirt">SHIRT DRESS</NavDropdown.Item>
<NavDropdown.Item href="/dress/pattern">PATTERN DRESS</NavDropdown.Item>
<NavDropdown.Item href="/dress/bustier">BUSTIER DRESS</NavDropdown.Item>
<NavDropdown.Item href="/dress/two-piece">TWO-PIECE DRESS</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="OUTER" onMouseEnter={() => handleMouseEnter("outer")} onMouseLeave={() => handleMouseLeave("outer")} show={toggle.outer} toggle={() => handleToggle("outer")} onClick={() => handleClick("/outer")}>
<NavDropdown.Item href="/outer/padded-jacket">PADDED JACKET</NavDropdown.Item>
<NavDropdown.Item href="/outer/jacket">JACKET</NavDropdown.Item>
<NavDropdown.Item href="/outer/jumper">JUMPER</NavDropdown.Item>
<NavDropdown.Item href="/outer/coat">COAT</NavDropdown.Item>
<NavDropdown.Item href="/outer/fleece">FLEECE</NavDropdown.Item>
<NavDropdown.Item href="/outer/cardigan_vest">CARDIGAN / VEST</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="TOP" onMouseEnter={() => handleMouseEnter("top")} onMouseLeave={() => handleMouseLeave("top")} show={toggle.top} toggle={() => handleToggle("top")} onClick={() => handleClick("/top")}>
<NavDropdown.Item href="/top/knit">KNIT</NavDropdown.Item>
<NavDropdown.Item href="/top/hoody">HOODY</NavDropdown.Item>
<NavDropdown.Item href="/top/blouse">BLOUSE</NavDropdown.Item>
<NavDropdown.Item href="/top/shirt">SHIRT</NavDropdown.Item>
<NavDropdown.Item href="/top/sweatshirt">SWEATSHIRT</NavDropdown.Item>
<NavDropdown.Item href="/top/long-sleeve-shirt">LONG SLEEVE SHIRT</NavDropdown.Item>
<NavDropdown.Item href="/top/short-sleeved-shirt_sleeveless-shirt">SHORT SLEEVE / SLEEVELESS SHIRT</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="PANTS" onMouseEnter={() => handleMouseEnter("pants")} onMouseLeave={() => handleMouseLeave("pants")} show={toggle.pants} toggle={() => handleToggle("pants")} onClick={() => handleClick("/pants")}>
<NavDropdown.Item href="/pants/jeans">JEANS</NavDropdown.Item>
<NavDropdown.Item href="/pants/skinny-jeans">SKINNY JEANS</NavDropdown.Item>
<NavDropdown.Item href="/pants/banding">BANDING PANTS</NavDropdown.Item>
<NavDropdown.Item href="/pants/wide-fit">WIDE-FIT PANTS</NavDropdown.Item>
<NavDropdown.Item href="/pants/boot-cut">BOOT-CUT PANTS</NavDropdown.Item>
<NavDropdown.Item href="/pants/straight-fit">STRAIGHT-FIT PANTS</NavDropdown.Item>
<NavDropdown.Item href="/pants/wide-fit">WIDE-FIT PANTS</NavDropdown.Item>
<NavDropdown.Item href="/pants/shorts">SHORTS</NavDropdown.Item>
<NavDropdown.Item href="/pants/trousers">TROUSERS</NavDropdown.Item>
<NavDropdown.Item href="/pants/leggings">LEGGINGS</NavDropdown.Item>
<NavDropdown.Item href="/pants/jumpsuit_overalls">JUMPSUIT / OVERALLS</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="SKIRT" onMouseEnter={() => handleMouseEnter("skirt")} onMouseLeave={() => handleMouseLeave("skirt")} show={toggle.skirt} toggle={() => handleToggle("skirt")} onClick={() => handleClick("/skirt")}>
<NavDropdown.Item href="/skirt/long">LONG SKIRT</NavDropdown.Item>
<NavDropdown.Item href="/skirt/midi">MIDI SKIRT</NavDropdown.Item>
<NavDropdown.Item href="/skirt/mini">MINI SKIRT</NavDropdown.Item>
</NavDropdown>
<Nav.Item>
<Nav.Link href="/training">TRAINING</Nav.Link>
</Nav.Item>
<NavDropdown title="SHOES" onMouseEnter={() => handleMouseEnter("shoes")} onMouseLeave={() => handleMouseLeave("shoes")} show={toggle.shoes} toggle={() => handleToggle("shoes")} onClick={() => handleClick("/shoes")}>
<NavDropdown.Item href="/skirt/sneakers_slip-on">SNEAKERS / SLIP-ON</NavDropdown.Item>
<NavDropdown.Item href="/skirt/flat_loafer">FLAT / LOAFER</NavDropdown.Item>
<NavDropdown.Item href="/skirt/heel_pump">HEEL / PUMP</NavDropdown.Item>
<NavDropdown.Item href="/skirt/boots">BOOTS</NavDropdown.Item>
<NavDropdown.Item href="/skirt/sandal_slipper">SANDAL / SLIPPER</NavDropdown.Item>
</NavDropdown>
{categorysDiv.map(item => item)}
</Nav>
</Navbar>
)
......
client/src/Pages/ProductRegist.js
View file @ d6c361c6
......@@ -99,7 +99,7 @@ function ProductsRegist() {
console.log(product)
const formData = new FormData();
for (let key in product) {
if (key === "main_imgUrl" ||key === "detail_imgUrl") {
if (key === "main_image" ||key === "detail_image") {
console.log(product[key][0])
formData.append(key, product[key][0])
} else {
......@@ -192,11 +192,11 @@ function ProductsRegist() {
</Form.Group>
<Form.Group>
<Form.Label>대표이미지</Form.Label>
<Form.File id="productImageform" name="main_imgUrl" onChange={handleChange} />
<Form.File id="productImageform" name="main_image" onChange={handleChange} />
</Form.Group>
<Form.Group>
<Form.Label>상세이미지</Form.Label>
<Form.File id="productImageform" name="detail_imgUrl" onChange={handleChange} />
<Form.File id="productImageform" name="detail_image" onChange={handleChange} />
</Form.Group>
<Button className="float-right" type="submit" style={{ background: '#91877F', borderColor: '#91877F' }}>등록</Button>
</Form>
......
client/src/Pages/ProductsList.js
View file @ d6c361c6
......@@ -5,35 +5,28 @@ import ListCard from '../Components/ListCard';
import axios from 'axios';
import catchError from '../utils/catchErrors'
import {isAuthenticated} from '../utils/auth'
import catchErrors from '../utils/catchErrors';
function ProductsList() {
const [sub, setSub] = useState(['PADDED JACKET', 'JACKET', 'JUMPER', 'COAT', 'FLEECE', 'CARDIGAN / VEST'])
function ProductsList(props) {
const [productlist, setProductlist] = useState([])
const [error, setError] = useState('')
const [category, setCategory] = useState('OUTER')
const [category, setCategory] = useState(props.match.params.product)
const [subcategory, setSubcategory] = useState(['PADDED JACKET', 'JACKET', 'JUMPER', 'COAT', 'FLEECE', 'CARDIGAN / VEST'])
const [click, setClick] = useState(true)
const user=isAuthenticated()
useEffect(() => {
getProductlist(user)
return getProductlist(user)
}, [user])
// async function getProfile(user){
// console.log(user)
// try {
// const response = await axios.get(`/api/users/profile/${user}`)
// setProfile(response.data)
// } catch (error) {
// catchErrors(error, setError)
// }
// }
function handleSubmit(e) {
e.preventDefault()
}
async function getProductlist() {
try {
console.log('dd=',category)
const response = await axios.get(`/api/product/getproduct/${category}`)
console.log(response.data)
setProductlist(response.data)
......@@ -42,6 +35,21 @@ function ProductsList() {
}
}
function handleClick(e){
e.preventDefault()
return getsubproductlist()
}
async function getsubproductlist(){
try {
const response = await axios.get(`/api/product/getproduct/${subcategory}`)
console.log(response.data)
setProductlist(response.data)
} catch (error) {
catchErrors(error,setError)
}
}
return (
<div>
<style type="text/css">
......@@ -61,8 +69,8 @@ function ProductsList() {
<Row className="justify-content-center" >
<Col sm={10} xs={12} >
<h1 style={{ fontSize: "3rem" }} className="text-center">OUTER</h1>
<div className="text-center">{sub.map((ele) => (
<Button className="m-1">{ele}</Button>
<div className="text-center">{subcategory.map((ele) => (
<Button className="m-1" onClick={handleClick}>{ele}</Button>
))}</div>
</Col>
</Row>
......
client/src/Pages/ShoppingCart.js
View file @ d6c361c6
......@@ -6,8 +6,6 @@ import catchErrors from '../utils/catchErrors';
import { isAuthenticated } from '../utils/auth'
import CartCard from '../Components/CartCard';
function ShoppingCart() {
function ShoppingCart() {
const [num, setNum] = useState(0)
const [error, setError] = useState('')
......
server/controllers/product.controller.js
View file @ d6c361c6
......@@ -37,6 +37,7 @@ const getlist=(req,res)=>{
}
const categoryId = async (req, res, next, category) => {
try {
const productslist = await Product.find({main_category:category})
......@@ -49,4 +50,25 @@ const categoryId = async (req, res, next, category) => {
res.status(500).send('상품을 불러오지 못했습니다.')
}
}
export default { imageUpload, regist, categoryId, getlist }
\ No newline at end of file
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 { imageUpload, regist, categoryId, getlist, subcategoryId, subgetlist }
\ No newline at end of file
server/routes/product.routes.js
View file @ d6c361c6
......@@ -7,9 +7,14 @@ const router = express.Router()
router.route('/regist')
.post(productCtrl.imageUpload, productCtrl.regist)
router.route('/getproduct/:category')
.get(productCtrl.getlist)
// 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
\ 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