Commit e5447f77 authored by kusang96's avatar kusang96
Browse files

ProductsList

parent 3ba7cf83
...@@ -11,7 +11,7 @@ function Home() { ...@@ -11,7 +11,7 @@ function Home() {
<SubNav /> <SubNav />
<Container className="my-5"> <Container className="my-5">
<div className="my-4"> <div className="my-4">
<h2 style={{ marginRight: "5rem", marginLeft: "5rem", marginBottom: "2rem" }}><u>Best</u></h2> <h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem" }}><u>Best</u></h2>
<Row className="justify-content-center mx-0"> <Row className="justify-content-center mx-0">
<Card className="mx-1 my-2" style={{ width: '18rem' }}> <Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
...@@ -58,7 +58,7 @@ function Home() { ...@@ -58,7 +58,7 @@ function Home() {
</Row> </Row>
</div> </div>
<div className="my-4"> <div className="my-4">
<h2 style={{ marginRight: "5rem", marginLeft: "5rem", marginBottom: "2rem", marginTop: "2rem" }}><u>New Arrival</u></h2> <h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem", marginTop: "2rem" }}><u>New Arrival</u></h2>
<Row className="justify-content-center mx-0"> <Row className="justify-content-center mx-0">
<Card className="mx-1 my-2" style={{ width: '18rem' }}> <Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
......
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import Nav1 from '../Components/MainNav'; import MainNav from '../Components/MainNav';
import Nav2 from '../Components/SubNav'; import SubNav from '../Components/SubNav';
import { Row, Col, Button, Form, Container } from 'react-bootstrap'; import { Row, Col, Button, Form, Container } from 'react-bootstrap';
import axios from 'axios' import axios from 'axios'
function ProductsRegist() { function ProductsRegist() {
const [product, setProduct] = useState() const [product, setProduct] = useState()
function handleChange(event) { function handleChange(event) {
const { name, value } = event.target const { name, value } = event.target
console.log("file=",event.target.files)
console.log("name=",name,"value=",value)
setProduct({ ...product, [name]: value }) setProduct({ ...product, [name]: value })
} }
function handleSubmit(e) { function handleSubmit(e) {
e.preventDefault() e.preventDefault()
axios.post('/api/products/regist', { const formData = new FormData();
product for (let key of Object.keys(product)) {
}).then(function(res) { formData.append(key, product[key])
}
console.log("formData=",formData)
axios.post('/api/product/regist',{data: formData}).then(function(res) {
console.log("client의 res=", res) console.log("client의 res=", res)
}) })
} }
...@@ -26,8 +30,8 @@ function ProductsRegist() { ...@@ -26,8 +30,8 @@ function ProductsRegist() {
return ( return (
<div> <div>
{console.log(product)} {console.log(product)}
<Nav1 /> <MainNav />
<Nav2 /> <SubNav />
<Container> <Container>
<Row className="justify-content-md-center"> <Row className="justify-content-md-center">
<Col md={6} className="border m-5 p-3" style={{ background: '#F7F3F3' }}> <Col md={6} className="border m-5 p-3" style={{ background: '#F7F3F3' }}>
......
...@@ -3,10 +3,11 @@ import MainNav from '../Components/MainNav'; ...@@ -3,10 +3,11 @@ import MainNav from '../Components/MainNav';
import SubNav from '../Components/SubNav'; import SubNav from '../Components/SubNav';
import Pagination from '../Components/Pagination'; import Pagination from '../Components/Pagination';
import search from '../search.svg'; import search from '../search.svg';
import { Container, Row, Form, FormControl, Button, Card } from 'react-bootstrap'; import { Container, Row, Col, Form, FormControl, Button, Card, Dropdown } from 'react-bootstrap';
function ProductsList() { function ProductsList() {
const [sub, setSub] = useState(['PADDED JACKET', 'JACKET', 'JUMPER', 'COAT', 'FLEECE', 'CARDIGAN / VEST']) const [sub, setSub] = useState(['PADDED JACKET', 'JACKET', 'JUMPER', 'COAT', 'FLEECE', 'CARDIGAN / VEST'])
function handleSubmit(e) { function handleSubmit(e) {
e.preventDefault() e.preventDefault()
} }
...@@ -20,7 +21,7 @@ function ProductsList() { ...@@ -20,7 +21,7 @@ function ProductsList() {
border-color: #CDC5C2; border-color: #CDC5C2;
} }
.btn:hover, .btn:active, .btn:focus { .btn:hover, .btn:active, .btn:focus, .show>.btn-primary.dropdown-toggle {
background-color: #91877F; background-color: #91877F;
border-color: #91877F; border-color: #91877F;
} }
...@@ -29,20 +30,31 @@ function ProductsList() { ...@@ -29,20 +30,31 @@ function ProductsList() {
<MainNav /> <MainNav />
<SubNav /> <SubNav />
<Container> <Container>
<Row className="mx-0 my-4" style={{ flexDirection: "column", alignItems: "center" }}> <Row className="justify-content-center mx-0 my-4">
<h1 style={{fontSize: "3rem"}}>OUTER</h1> <Col sm={10}>
<Row> <h1 style={{ fontSize: "3rem" }}>OUTER</h1>
{sub.map((ele) => ( <div>{sub.map((ele) => (
<Button>ele</Button> <Button className="m-1">{ele}</Button>
))} ))}</div>
</Row> </Col>
</Row> </Row>
<Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5"> <Row className="justify-content-between mx-0 my-5">
<FormControl type="text" placeholder="Search" style={{ width: "13rem" }} /> <Dropdown>
<Button type="submit" className="search px-2"> <Dropdown.Toggle>정렬</Dropdown.Toggle>
<img src={search} width="20" height="20" /> <Dropdown.Menu>
</Button> <Dropdown.Item>인기상품</Dropdown.Item>
<Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button> <Dropdown.Item>신상품</Dropdown.Item>
<Dropdown.Item>낮은가격</Dropdown.Item>
<Dropdown.Item>높은가격</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Form as={Row} onSubmit={handleSubmit} className="justify-content-end mx-0">
<FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
<Button type="submit" className="search px-2">
<img src={search} width="20" height="20" />
</Button>
<Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button>
</Form>
</Row> </Row>
<Row className="justify-content-start m-5"> <Row className="justify-content-start m-5">
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}> <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
......
...@@ -4,6 +4,7 @@ import Nav1 from '../Components/MainNav'; ...@@ -4,6 +4,7 @@ import Nav1 from '../Components/MainNav';
import Nav2 from '../Components/SubNav'; import Nav2 from '../Components/SubNav';
import { Form, Col, Container, Button, Row, Alert } from 'react-bootstrap' import { Form, Col, Container, Button, Row, Alert } from 'react-bootstrap'
import FormCheckInput from 'react-bootstrap/esm/FormCheckInput'; import FormCheckInput from 'react-bootstrap/esm/FormCheckInput';
import axios from 'axios';
const INIT_USER = { const INIT_USER = {
name: '', name: '',
...@@ -44,6 +45,7 @@ function Signup() { ...@@ -44,6 +45,7 @@ function Signup() {
try { try {
setError('') setError('')
// const response = await axios.post('/api/user/signup', user)
const response = await fetch('/api/users/signup', { const response = await fetch('/api/users/signup', {
method: 'POST', method: 'POST',
headers: { headers: {
......
...@@ -7,7 +7,7 @@ import Signup from './Pages/Signup'; ...@@ -7,7 +7,7 @@ import Signup from './Pages/Signup';
import Product from "./Pages/Product"; import Product from "./Pages/Product";
import ProductsList from "./Pages/ProductsList"; import ProductsList from "./Pages/ProductsList";
import Admin from './Pages/Admin'; import Admin from './Pages/Admin';
import ProductsRegist from './Pages/ProductsRegist'; import ProductRegist from './Pages/ProductRegist';
import ShoppingCart from './Pages/ShoppingCart'; import ShoppingCart from './Pages/ShoppingCart';
import Payment from './Pages/Payment'; import Payment from './Pages/Payment';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
...@@ -24,7 +24,7 @@ ReactDOM.render( ...@@ -24,7 +24,7 @@ ReactDOM.render(
<Route path="/product"component={Product} /> <Route path="/product"component={Product} />
<Route path="/productslist"component={ProductsList} /> <Route path="/productslist"component={ProductsList} />
<Route path="/admin" component={Admin} /> <Route path="/admin" component={Admin} />
<Route path="/regist" component={ProductsRegist} /> <Route path="/regist" component={ProductRegist} />
<Route path="/shoppingcart" component={ShoppingCart} /> <Route path="/shoppingcart" component={ShoppingCart} />
<Route path="/payment" component={Payment} /> <Route path="/payment" component={Payment} />
<Route path="/account" component={Account}/> <Route path="/account" component={Account}/>
......
...@@ -22,7 +22,7 @@ app.use(express.static(path.join(process.cwd(), 'dist'))) ...@@ -22,7 +22,7 @@ app.use(express.static(path.join(process.cwd(), 'dist')))
// app.use('/', indexRouter); // app.use('/', indexRouter);
app.use('/', kakaopayRoutes) app.use('/', kakaopayRoutes)
app.use('/api/users',userRouter) app.use('/api/users',userRouter)
app.use('/api/products', productRouter) app.use('/api/product', productRouter)
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)
......
...@@ -2,7 +2,9 @@ import Product from "../schemas/Product.js"; ...@@ -2,7 +2,9 @@ import Product from "../schemas/Product.js";
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, description, main_image, detail_image } = req.body.product console.log('req.data=', req.data)
console.log('req.body.data=', req.body.data)
const { pro_name, price, stock, main_category, sub_category, description, main_image, detail_image } = req.body
try { try {
const newProduct = await new Product ({ const newProduct = await new Product ({
pro_name, price, stock, main_category, sub_category, description, main_image, detail_image pro_name, price, stock, main_category, sub_category, description, main_image, detail_image
...@@ -15,4 +17,4 @@ const regist = async (req, res) => { ...@@ -15,4 +17,4 @@ const regist = async (req, res) => {
} }
} }
export default { regist } export default { regist }
\ No newline at end of file \ No newline at end of file
import User from "../models/User.js"; import User from "../models/User.js";
import isLength from 'validator/lib/isLength.js' import isLength from 'validator/lib/isLength.js';
import bcrypt from 'bcryptjs';
const signup = async (req, res) => { const signup = async (req, res) => {
console.log(req.body) console.log(req.body)
console.log('req.body.name=', req.body.name) console.log('req.body.name=', req.body.name)
const { name, number1, number2, id, password, password2, tel } = req.body const { name, number1, number2, id, password, password2, tel } = req.body
try { try {
if(!isLength(password,{min:8, max:15})){ if (!isLength(password, { min: 8, max: 15 })) {
return res.status(422).json({message: '비밀번호는 8-15자리로 입력해주세요.'}) return res.status(422).json({ message: '비밀번호는 8-15자리로 입력해주세요.' })
} }
const newUser = await new User ({ // if (!isLength(name, { min: 3, max: 10 })) {
// return res.status(422).send('이름은 3-10자로 입력해주세요.')
// } else if (!isLength(password, { min: 8, max: 15 })){
// return res.status(422).json({message: '비밀번호는 8-15자리로 입력해주세요.'})
// }
// const user = await User.findOne({id})
// if (user) {
// return res.status(422).send(`${id}가 이미 사용중입니다.`)
// }
const hash = await bcrypt.hash(password, 10)
const newUser = await new User({
name, name,
number1, number1,
number2, number2,
id, id,
password, password: hash,
password2, password2,
tel tel
}).save() }).save()
console.log(newUser) console.log(newUser)
res.json(newUser) res.json(newUser)
} catch (error) { } catch (error) {
console.log(error) console.log(error)
res.status(500).json({message:'죄송합니다. 다시 입력해 주십시오.'}) res.status(500).json({ message: '죄송합니다. 다시 입력해 주십시오.' })
} }
} }
...@@ -31,4 +42,4 @@ const hello = (req, res) => { ...@@ -31,4 +42,4 @@ const hello = (req, res) => {
res.send('Hello from users contriller') res.send('Hello from users contriller')
} }
export default { signup, hello } export default { signup, hello }
\ No newline at end of file \ No newline at end of file
...@@ -12,12 +12,13 @@ ...@@ -12,12 +12,13 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"bcryptjs": "^2.4.3",
"cors": "^2.8.5", "cors": "^2.8.5",
"express": "^4.17.1", "express": "^4.17.1",
"mongoose": "^5.11.9", "mongoose": "^5.11.9",
"multer": "^1.4.2",
"node-fetch": "^2.6.1", "node-fetch": "^2.6.1",
"nodemon": "^2.0.6", "nodemon": "^2.0.6",
"validator": "^13.5.2", "validator": "^13.5.2"
"multer": "^1.4.2"
} }
} }
import express from "express"; import express from "express";
import path from 'path';
import multer from 'multer';
import productCtrl from '../controllers/product.controller.js'; import productCtrl from '../controllers/product.controller.js';
// process.cwd() + '/client/public/image'
const router = express.Router() const router = express.Router()
const upload = multer({
storage: multer.diskStorage({
destination(req, file, cb) {
cb(null, 'uploads/');
}, // 저장 경로 변경
filename(req, file, cb) {
cb(null, new Date().valueOf() + path.extname(file.originalname));
}, // 파일명 변경
}),
});
router.route('/regist') router.route('/regist')
.post(productCtrl.regist) .post(productCtrl.regist)
// upload.array('main_image'),
export default router export default router
\ No newline at end of file
...@@ -8,15 +8,15 @@ const ProductSchema = new mongoose.Schema({ ...@@ -8,15 +8,15 @@ const ProductSchema = new mongoose.Schema({
required: true, required: true,
}, },
price: { price: {
type: String, type: Number,
required: true, required: true,
}, },
stock: { stock: {
type: String, type: Number,
required: true required: true
}, },
purchase: { purchase: {
type: String, type: Number,
required: true, required: true,
default: 0 default: 0
}, },
...@@ -25,7 +25,7 @@ const ProductSchema = new mongoose.Schema({ ...@@ -25,7 +25,7 @@ const ProductSchema = new mongoose.Schema({
required: true, required: true,
}, },
sub_category: { sub_category: {
type: String, type: Array,
required: true, required: true,
}, },
description: { description: {
......
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