Skip to content

GitLab

Commit f143e8c2 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Merge branch 'ourMaster' into jiwon

parents 7efc0961 491d40f2
Show whitespace changes
Inline Side-by-side
client/src/App.js
View file @ f143e8c2
...@@ -16,9 +16,9 @@ import SubNav from './Components/SubNav'; ...@@ -16,9 +16,9 @@ import SubNav from './Components/SubNav';
function App() { function App() {
return ( return (
<div> <div>
{/* {console.log("match.params=",match.params(product))} */}
<MainNav /> <MainNav />
<SubNav /> <SubNav />
<Router> <Router>
...@@ -26,8 +26,8 @@ function App() { ...@@ -26,8 +26,8 @@ function App() {
<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} />
......
client/src/Components/SubNav.js
View file @ f143e8c2
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Redirect } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
import { Navbar, Nav, NavDropdown } from 'react-bootstrap'; import { Navbar, Nav, NavDropdown } 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 href={`/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/Home.js
View file @ f143e8c2
...@@ -3,6 +3,9 @@ import { Card, Container, Row } from 'react-bootstrap'; ...@@ -3,6 +3,9 @@ import { Card, Container, Row } from 'react-bootstrap';
function Home() { function Home() {
return ( return (
<div> <div>
<Container className="my-5"> <Container className="my-5">
......
client/src/Pages/ProductRegist.js
View file @ f143e8c2
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Row, Col, Button, Form, Container } from 'react-bootstrap'; import { Redirect } from 'react-router-dom';
import axios from 'axios' import { Row, Col, Button, Form, Container, Alert } from 'react-bootstrap';
import axios from 'axios';
import catchErrors from '../utils/catchErrors'; import catchErrors from '../utils/catchErrors';
import { Redirect } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
...@@ -22,15 +23,7 @@ function ProductsRegist() { ...@@ -22,15 +23,7 @@ function ProductsRegist() {
main_image: [], main_image: [],
detail_image: [] detail_image: []
} }
const categorys = { const [categorys, setCategorys] = 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)
...@@ -38,8 +31,15 @@ function ProductsRegist() { ...@@ -38,8 +31,15 @@ function ProductsRegist() {
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/categorys')
const data = response.data[0]
setCategorys([Object.keys(data), Object.values(data)])
} catch (error) {
catchErrors(error, setError)
}
}, [])
function addCategory() { function addCategory() {
console.log(product) console.log(product)
...@@ -50,12 +50,13 @@ function ProductsRegist() { ...@@ -50,12 +50,13 @@ function ProductsRegist() {
</div>) </div>)
setTag(tag + 1) setTag(tag + 1)
} }
function deleteCategory(e) { function deleteCategory(e) {
const categ = e.target.parentNode const categ = e.target.parentNode
categ.remove() categ.remove()
product["sub_category"].splice(e.target.parentNode.firstElementChild.getAttribute("i"), 1) product["sub_category"].splice(categ.firstElementChild.getAttribute("i"), 1)
console.log(product)
} }
function handleCheckBox(e) { function handleCheckBox(e) {
setChecked({ ...checked, [e.target.value]: !checked[`${e.target.value}`] }) setChecked({ ...checked, [e.target.value]: !checked[`${e.target.value}`] })
} }
...@@ -65,17 +66,18 @@ function ProductsRegist() { ...@@ -65,17 +66,18 @@ function ProductsRegist() {
colorHtml.push( colorHtml.push(
<p>{color["colors"]}</p> <p>{color["colors"]}</p>
) )
setProduct({...product, "colors":preColors}) setProduct({ ...product, "colors": preColors })
} }
function colorChange(e){ function colorChange(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 (name === "sub_category") {
product[name].push(value)
} else if (files) { } else if (files) {
setProduct({ ...product, [name]: files }) setProduct({ ...product, [name]: files })
...@@ -95,8 +97,7 @@ function ProductsRegist() { ...@@ -95,8 +97,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_imgUrl" ||key === "detail_imgUrl") { if (key === "main_imgUrl" ||key === "detail_imgUrl") {
...@@ -118,11 +119,12 @@ function ProductsRegist() { ...@@ -118,11 +119,12 @@ function ProductsRegist() {
if (success) { if (success) {
return <Redirect to='/' /> return <Redirect to='/' />
} }
return ( return (
<div> <Container className="mt-5">
<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">
...@@ -143,7 +145,7 @@ function ProductsRegist() { ...@@ -143,7 +145,7 @@ function ProductsRegist() {
<Col md={4}> <Col md={4}>
<Form.Control as="select" name="main_category" onChange={handleChange}> <Form.Control as="select" name="main_category" onChange={handleChange}>
<option value="" >상위분류</option> <option value="" >상위분류</option>
{mainCategorys.map((main) => ( {categorys[0].map((main) => (
<option value={main}>{main}</option> <option value={main}>{main}</option>
))} ))}
</Form.Control> </Form.Control>
...@@ -151,7 +153,7 @@ function ProductsRegist() { ...@@ -151,7 +153,7 @@ function ProductsRegist() {
<Col md={6}> <Col md={6}>
<Form.Control as="select" name="sub_category" onChange={handleChange}> <Form.Control as="select" name="sub_category" onChange={handleChange}>
<option value="" >하위분류</option> <option value="" >하위분류</option>
{subCategorys[categoryNum].map((sub) => ( {categorys[1][categoryNum].map((sub) => (
<option value={sub}>{sub}</option> <option value={sub}>{sub}</option>
))} ))}
</Form.Control> </Form.Control>
...@@ -192,18 +194,17 @@ function ProductsRegist() { ...@@ -192,18 +194,17 @@ 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>
</Col> </Col>
</Row> </Row>
</Container> </Container>
</div>
) )
} }
......
client/src/Pages/ProductsList.js
View file @ f143e8c2
...@@ -44,6 +44,7 @@ function ProductsList() { ...@@ -44,6 +44,7 @@ function ProductsList() {
return ( return (
<div> <div>
<style type="text/css"> <style type="text/css">
{` {`
.btn { .btn {
...@@ -89,7 +90,7 @@ function ProductsList() { ...@@ -89,7 +90,7 @@ function ProductsList() {
<ListCard productlist={productlist} /> <ListCard productlist={productlist} />
</Row> </Row>
</Container> </Container>
<Pagination /> {/* <Pagination postsPerPage={postsPerPage} totalPosts={posts.length} paginate={paginate} /> */}
</div> </div>
) )
} }
......
server/app.js
View file @ f143e8c2
import express from 'express'; import express from 'express';
import fs from 'fs'; 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';
...@@ -19,9 +20,7 @@ fs.readdir('uploads', (error) => { ...@@ -19,9 +20,7 @@ fs.readdir('uploads', (error) => {
connectDb() connectDb()
const app = express(); const app = express();
app.use(express.json())
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 }))
...@@ -29,6 +28,7 @@ app.use('/images', express.static('uploads/')) ...@@ -29,6 +28,7 @@ app.use('/images', express.static('uploads/'))
// app.use('/', indexRouter); // app.use('/', indexRouter);
app.use('/', kakaopayRoutes) app.use('/', kakaopayRoutes)
app.use('/api/categorys',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)
......
server/controllers/category.controller.js 0 → 100644
View file @ f143e8c2
import Category from "../schemas/Category.js";
const getCategory = async (req, res) => {
try {
const category = await Category.find({}, {_id: 0})
res.json(category)
} catch (error) {
console.log(error)
res.status(500).send('카테고리 검색 실패')
}
}
export default { getCategory }
\ No newline at end of file
server/controllers/product.controller.js
View file @ f143e8c2
...@@ -9,8 +9,9 @@ const imageUpload = upload.fields([ ...@@ -9,8 +9,9 @@ const imageUpload = upload.fields([
]) ])
const regist = async (req, res) => { const regist = async (req, res) => {
console.log("req.body=",req.body)
try { try {
const { pro_name, price, stock, main_category, sub_category, description } = req.body const { pro_name, price, stock, main_category, sub_category, description, colors, sizes } = req.body
const main_img = req.files['main_image'][0] const main_img = req.files['main_image'][0]
const detail_img = req.files['detail_image'] const detail_img = req.files['detail_image']
const main_imgUrl = main_img.filename const main_imgUrl = main_img.filename
...@@ -19,7 +20,7 @@ const regist = async (req, res) => { ...@@ -19,7 +20,7 @@ const regist = async (req, res) => {
detail_imgUrls.push(file.filename) detail_imgUrls.push(file.filename)
}) })
const newProduct = await new Product({ const newProduct = await new Product({
pro_name, price, stock, main_category, sub_category, description, main_imgUrl, detail_imgUrls 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) {
......
server/routes/category.routes.js 0 → 100644
View file @ f143e8c2
import express from "express";
import categoryCtrl from "../controllers/category.controller.js";
const router = express.Router()
router.route('/')
.get(categoryCtrl.getCategory)
export default router
\ No newline at end of file
server/schemas/Category.js 0 → 100644
View file @ f143e8c2
import mongoose from 'mongoose'
const { Array } = mongoose.Schema.Types
const CategorysSchema = new mongoose.Schema ({
"DRESS": {
type: Array,
required: true
},
"OUTER": {
type: Array,
required: true
},
"TOP": {
type: Array,
required: true
},
"PANTS": {
type: Array,
required: true
},
"SKIRT": {
type: Array,
required: true
},
"TRAINING": {
type: Array,
required: true
},
"SHOES": {
type: Array,
required: true
},
})
export default mongoose.models.Categorys || mongoose.model('Categorys', CategorysSchema)
\ 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