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

0113

parent 42fd57fa
import React, { useState, useEffect, useRef } from 'react';
function card(props) {
const [card, setCard] = useState([...props])
return (
<Card className="mt-5">
<Card.Img varient="top" src={} style={{ objectFit: "contain", height: "22rem" }}></Card.Img>
<Card.Body>
<Card.Title></Card.Title>
<Card.Text></Card.Text>
<Card.Text></Card.Text>
</Card.Body>
</Card>
)
}
export default card
\ No newline at end of file
import React, { useState, useEffect, useRef } from 'react';
import {Card} from 'react-bootstrap'
function ListCard(props) {
return (
<>
{props.productlist.map((e)=>(
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src={e.main_imgUrl && `/images/${e.main_imgUrl}`} style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>{e.pro_name}</Card.Title>
<Card.Text>{e.price}</Card.Text>
</Card.Body>
</Card>
))}
</>
)
}
export default ListCard
\ No newline at end of file
import React, { useState, useEffect, useRef } from 'react';
import { Redirect } from 'react-router-dom';
import { Row, Col, Button, Form, Container, Alert } from 'react-bootstrap';
import { Row, Col, Button, Form, Container } from 'react-bootstrap';
import axios from 'axios'
import catchErrors from '../utils/catchErrors';
import { Redirect } from 'react-router-dom';
let color = {}
let preColors = []
......@@ -98,30 +98,18 @@ function ProductsRegist() {
product["sizes"]=sizes
console.log(product)
const formData = new FormData();
for (const key in product) {
console.log("product[key]=", product[key])
if (key == "main_image" || key == "detail_image") {
for (const file of product[key]) {
formData.append(key, file)
}
for (let key in product) {
if (key === "main_imgUrl" ||key === "detail_imgUrl") {
console.log(product[key][0])
formData.append(key, product[key][0])
} else {
formData.append(key, product[key])
}
}
// formData 값 확인용
// for (const key of formData.keys()) {
// console.log("key=",key);
// }
// for (const value of formData.values()) {
// console.log(value);
// }
try {
const response = await axios.post('/api/product/regist', formData)
const response = axios.post('/api/product/regist', formData)
// setSuccess(true)
console.log(response)
} catch (error) {
catchErrors(error, setError)
}
......@@ -135,7 +123,6 @@ function ProductsRegist() {
<Container>
<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>}
<h2 className="text-center mt-5 font-weight-bold">상품등록</h2>
<Form className="p-5" onSubmit={handleSubmit}>
<Form.Group controlId="productNameform">
......@@ -205,11 +192,11 @@ function ProductsRegist() {
</Form.Group>
<Form.Group>
<Form.Label>대표이미지</Form.Label>
<Form.File id="productImageform" name="main_image" onChange={handleChange} />
<Form.File id="productImageform" name="main_imgUrl" onChange={handleChange} />
</Form.Group>
<Form.Group>
<Form.Label>상세이미지</Form.Label>
<Form.File id="productImageform" name="detail_image" onChange={handleChange} />
<Form.File id="productImageform" name="detail_imgUrl" onChange={handleChange} />
</Form.Group>
<Button className="float-right" type="submit" style={{ background: '#91877F', borderColor: '#91877F' }}>등록</Button>
</Form>
......
import React, { useState, useEffect, useRef } from 'react';
import Pagination from '../Components/Pagination';
import { Container, Row, Col, Form, FormControl, Button, Card, Dropdown } from 'react-bootstrap';
import ListCard from '../Components/ListCard';
import axios from 'axios';
import catchError from '../utils/catchErrors'
import {isAuthenticated} from '../utils/auth'
function ProductsList() {
const [sub, setSub] = useState(['PADDED JACKET', 'JACKET', 'JUMPER', 'COAT', 'FLEECE', 'CARDIGAN / VEST'])
const [productlist, setProductlist] = useState([])
const [error, setError] = useState('')
const [category, setCategory] = useState('OUTER')
// useEffect(() => {
// getProfile(user)
// }, [user])
const user=isAuthenticated()
useEffect(() => {
getProductlist(user)
}, [user])
// async function getProfile(user){
// console.log(user)
......@@ -23,6 +32,16 @@ function ProductsList() {
e.preventDefault()
}
async function getProductlist() {
try {
const response = await axios.get(`/api/product/getproduct/${category}`)
console.log(response.data)
setProductlist(response.data)
} catch (error) {
catchError(error, setError)
}
}
return (
<div>
<style type="text/css">
......@@ -67,55 +86,7 @@ function ProductsList() {
</Form>
</Row>
<Row md={8} sm={12} className="justify-content-start m-2">
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67460/1607053816_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>케이시앵글부츠(SH)</Card.Title>
<Card.Text>가격 : 12,000</Card.Text>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/48705/1552562469_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>메리제인플랫(SH)</Card.Title>
<Card.Text>가격 : 12,000</Card.Text>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/53386/1567390097_2.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>솔티드스니커즈(SH)</Card.Title>
<Card.Text>가격 : 12,000</Card.Text>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/61286/1587540563_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>버켄슬리퍼(SH)</Card.Title>
<Card.Text>가격 : 12,000</Card.Text>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202011/b8f4c6471955b80fc3991b7d6df8926a.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>크레센도 하이힐펌프스</Card.Title>
<Card.Text>가격 : 12,000</Card.Text>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202011/888e4e8d6a2c2e7da385b079151fcba2.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>어텀솔져1cm 스웨이드로퍼</Card.Title>
<Card.Text>가격 : 12,000</Card.Text>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202007/3308564012eb14e6c11ed621fa7555fb.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>포웰3.5cm 스니커즈</Card.Title>
<Card.Text>가격 : 12,000</Card.Text>
</Card.Body>
</Card>
<ListCard productlist={productlist} />
</Row>
</Container>
<Pagination />
......
......@@ -28,4 +28,25 @@ const regist = async (req, res) => {
}
}
export default { imageUpload, regist }
\ No newline at end of file
const getlist=(req,res)=>{
try {
res.json(req.productslist)
} catch (error) {
res.status(500).send('상품을 불러오지 못했습니다.')
}
}
const categoryId = async (req, res, next, category) => {
try {
const productslist = await Product.find({main_category:category})
if (!productslist) {
res.status(404).send('상품을 찾을 수 없습니다.')
}
req.productslist = productslist
next()
} catch (error) {
res.status(500).send('상품을 불러오지 못했습니다.')
}
}
export default { imageUpload, regist, categoryId, getlist }
\ No newline at end of file
......@@ -6,8 +6,10 @@ const router = express.Router()
router.route('/regist')
.post(productCtrl.imageUpload, productCtrl.regist)
// router.route('/productone')
// .get(productCtrl.getProduct)
router.route('/getproduct/:category')
.get(productCtrl.getlist)
router.param('category', productCtrl.categoryId)
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