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() { ...@@ -18,16 +18,15 @@ function App() {
return ( return (
<div> <Router>
<MainNav /> <MainNav />
<SubNav /> <SubNav />
<Router>
<Switch> <Switch>
<Route exact path="/" component={Home} /> <Route exact path="/" component={Home} />
<Route path="/login" component={Login} /> <Route path="/login" component={Login} />
<Route path="/signup" component={Signup} /> <Route path="/signup" component={Signup} />
<Route path="/product" component={Product} /> {/* <Route path="/product" component={Product} /> */}
<Route path="/productslist" component={ProductsList} /> <Route path="/product/:product" component={ProductsList} />
<Route path="/admin" component={Admin} /> <Route path="/admin" component={Admin} />
<Route path="/regist" component={ProductRegist} /> <Route path="/regist" component={ProductRegist} />
<Route path="/shoppingcart" component={ShoppingCart} /> <Route path="/shoppingcart" component={ShoppingCart} />
...@@ -37,7 +36,6 @@ function App() { ...@@ -37,7 +36,6 @@ function App() {
<Redirect path="/" to="/" /> <Redirect path="/" to="/" />
</Switch> </Switch>
</Router> </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' import {Card} from 'react-bootstrap'
function ListCard(props) { function ListCard(props) {
......
client/src/Components/SubNav.js
View file @ d6c361c6
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Redirect } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Navbar, Nav, NavDropdown } from 'react-bootstrap'; import { Navbar, Nav } from 'react-bootstrap';
import axios from 'axios';
import catchErrors from '../utils/catchErrors';
function SubNav() { function SubNav() {
const [toggle, setToggle] = useState({ "dress": false, "outer": false, "top": false, "pants": false, "skirt": false, "training": false, "shoes": false }); const [categorysDiv, setCategorysDiv] = useState([])
const [error, setError] = useState('')
function handleMouseEnter(id) {
setToggle({ [id]: true })
} useEffect(async () => {
try {
function handleMouseLeave(id) { const response = await axios.get('/api/categorys')
setToggle({ [id]: false }) let list = []
} Object.keys(response.data[0]).forEach((ele) => {
const url = ele.toLowerCase()
function handleToggle(id) { list.push(
setToggle({ [id]: !toggle[`${id}`] }) <Nav.Link as={Link} to={`/product/${url}`}>{ele}</Nav.Link>
} )
})
function handleClick(url) { setCategorysDiv(list)
return <Redirect to={url} /> } catch (error) {
catchErrors(error, setError)
} }
}, [])
return ( 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"> <style type="text/css">
{` {`
.nav-link, .nav-link:hover, .nav-link:active { .nav-link, .nav-link:hover, .nav-link:active {
color: #91877F; 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> </style>
<Nav> <Nav>
<NavDropdown title="DRESS" onMouseEnter={() => handleMouseEnter("dress")} onMouseLeave={() => handleMouseLeave("dress")} show={toggle.dress} toggle={() => handleToggle("dress")} onClick={() => handleClick("/dress")}> {categorysDiv.map(item => item)}
<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>
</Nav> </Nav>
</Navbar> </Navbar>
) )
......
client/src/Pages/ProductRegist.js
View file @ d6c361c6
...@@ -99,7 +99,7 @@ function ProductsRegist() { ...@@ -99,7 +99,7 @@ function ProductsRegist() {
console.log(product) console.log(product)
const formData = new FormData(); const formData = new FormData();
for (let key in product) { for (let key in product) {
if (key === "main_imgUrl" ||key === "detail_imgUrl") { if (key === "main_image" ||key === "detail_image") {
console.log(product[key][0]) console.log(product[key][0])
formData.append(key, product[key][0]) formData.append(key, product[key][0])
} else { } else {
...@@ -192,11 +192,11 @@ function ProductsRegist() { ...@@ -192,11 +192,11 @@ function ProductsRegist() {
</Form.Group> </Form.Group>
<Form.Group> <Form.Group>
<Form.Label>대표이미지</Form.Label> <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.Group> <Form.Group>
<Form.Label>상세이미지</Form.Label> <Form.Label>상세이미지</Form.Label>
<Form.File id="productImageform" name="detail_imgUrl" onChange={handleChange} /> <Form.File id="productImageform" name="detail_image" onChange={handleChange} />
</Form.Group> </Form.Group>
<Button className="float-right" type="submit" style={{ background: '#91877F', borderColor: '#91877F' }}>등록</Button> <Button className="float-right" type="submit" style={{ background: '#91877F', borderColor: '#91877F' }}>등록</Button>
</Form> </Form>
......
client/src/Pages/ProductsList.js
View file @ d6c361c6
...@@ -5,35 +5,28 @@ import ListCard from '../Components/ListCard'; ...@@ -5,35 +5,28 @@ import ListCard from '../Components/ListCard';
import axios from 'axios'; import axios from 'axios';
import catchError from '../utils/catchErrors' import catchError from '../utils/catchErrors'
import {isAuthenticated} from '../utils/auth' import {isAuthenticated} from '../utils/auth'
import catchErrors from '../utils/catchErrors';
function ProductsList() { function ProductsList(props) {
const [sub, setSub] = useState(['PADDED JACKET', 'JACKET', 'JUMPER', 'COAT', 'FLEECE', 'CARDIGAN / VEST'])
const [productlist, setProductlist] = useState([]) const [productlist, setProductlist] = useState([])
const [error, setError] = 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() const user=isAuthenticated()
useEffect(() => { useEffect(() => {
getProductlist(user) return getProductlist(user)
}, [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) { function handleSubmit(e) {
e.preventDefault() e.preventDefault()
} }
async function getProductlist() { async function getProductlist() {
try { try {
console.log('dd=',category)
const response = await axios.get(`/api/product/getproduct/${category}`) const response = await axios.get(`/api/product/getproduct/${category}`)
console.log(response.data) console.log(response.data)
setProductlist(response.data) setProductlist(response.data)
...@@ -42,6 +35,21 @@ function ProductsList() { ...@@ -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 ( return (
<div> <div>
<style type="text/css"> <style type="text/css">
...@@ -61,8 +69,8 @@ function ProductsList() { ...@@ -61,8 +69,8 @@ function ProductsList() {
<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">OUTER</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={handleClick}>{ele}</Button>
))}</div> ))}</div>
</Col> </Col>
</Row> </Row>
......
client/src/Pages/ShoppingCart.js
View file @ d6c361c6
...@@ -6,8 +6,6 @@ import catchErrors from '../utils/catchErrors'; ...@@ -6,8 +6,6 @@ import catchErrors from '../utils/catchErrors';
import { isAuthenticated } from '../utils/auth' import { isAuthenticated } from '../utils/auth'
import CartCard from '../Components/CartCard'; import CartCard from '../Components/CartCard';
function ShoppingCart() {
function ShoppingCart() { function ShoppingCart() {
const [num, setNum] = useState(0) const [num, setNum] = useState(0)
const [error, setError] = useState('') const [error, setError] = useState('')
......
server/controllers/product.controller.js
View file @ d6c361c6
...@@ -37,6 +37,7 @@ const getlist=(req,res)=>{ ...@@ -37,6 +37,7 @@ const getlist=(req,res)=>{
} }
const categoryId = async (req, res, next, category) => { const categoryId = async (req, res, next, category) => {
try { try {
const productslist = await Product.find({main_category:category}) const productslist = await Product.find({main_category:category})
...@@ -49,4 +50,25 @@ const categoryId = async (req, res, next, category) => { ...@@ -49,4 +50,25 @@ const categoryId = async (req, res, next, category) => {
res.status(500).send('상품을 불러오지 못했습니다.') 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() ...@@ -7,9 +7,14 @@ const router = express.Router()
router.route('/regist') router.route('/regist')
.post(productCtrl.imageUpload, productCtrl.regist) .post(productCtrl.imageUpload, productCtrl.regist)
router.route('/getproduct/:category') // router.route('/getproduct/:category')
.get(productCtrl.getlist) // .get(productCtrl.getlist)
router.route('/getproduct/:subcategory')
.get(productCtrl.subgetlist)
router.param('category', productCtrl.categoryId) router.param('category', productCtrl.categoryId)
router.param('subcategory',productCtrl.subcategoryId)
export default router 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