Skip to content

GitLab

Commit 2a67f236 authored by 이재연's avatar 이재연
Browse files

zz

parent 57d0b50b
Show whitespace changes
Inline Side-by-side
client/src/Components/ListCard.js
View file @ 2a67f236
import React from 'react'; import React from 'react';
import {Card} from 'react-bootstrap' import { Card } from 'react-bootstrap'
function ListCard(props) { function ListCard(props) {
return ( return (
<> <>
{props.productlist.map((e)=>( {props.productlist.map((e) => (
<Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}> <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.Img variant="top" src={e.main_imgUrl && `/images/${e.main_imgUrl}`} style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body> <Card.Body>
<Card.Title>{e.pro_name}</Card.Title> <Card.Title>{e.pro_name}</Card.Title>
<Card.Text>{e.price}</Card.Text> <Card.Text>{e.price}원</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src={e.detail_imgUrl && `/images/${e.detail_imgUrl}`} style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>{e.pro_name}</Card.Title>
<Card.Text>{e.price}원</Card.Text>
</Card.Body>
</Card>
</Card>
))} ))}
</> </>
) )
} }
export default ListCard export default ListCard
\ No newline at end of file
client/src/Components/MainNav.js
View file @ 2a67f236
...@@ -8,7 +8,7 @@ function MainNav() { ...@@ -8,7 +8,7 @@ function MainNav() {
return ( return (
<Navbar sticky="top" style={{ background: "#CDC5C2" }}> <Navbar sticky="top" style={{ background: "#CDC5C2" }}>
<Navbar.Brand href="/home" className="text-light"> <Navbar.Brand href="/home" className="text-light">
<img alt="로고" src="icon/footprint.svg" width="24" height="24" /> <img alt="로고" src="/icon/footprint.svg" width="24" height="24" />
{' '}KU# {' '}KU#
</Navbar.Brand> </Navbar.Brand>
<Nav> <Nav>
...@@ -20,10 +20,10 @@ function MainNav() { ...@@ -20,10 +20,10 @@ function MainNav() {
</> </>
)} )}
<Nav.Link href="/shoppingcart"> <Nav.Link href="/shoppingcart">
<img alt="카트" src="icon/cart.svg" width="30" height="30" /> <img alt="카트" src="/icon/cart.svg" width="30" height="30" />
</Nav.Link> </Nav.Link>
<Nav.Link href="/admin"> <Nav.Link href="/admin">
<img alt="관리자" src="icon/option.svg" width="30" height="30" /> <img alt="관리자" src="/icon/option.svg" width="30" height="30" />
</Nav.Link> </Nav.Link>
</Nav> </Nav>
</Navbar> </Navbar>
......
client/src/Pages/Home.js
View file @ 2a67f236
...@@ -13,42 +13,42 @@ function Home() { ...@@ -13,42 +13,42 @@ function Home() {
<h2 style={{ marginRight: "5rem", marginLeft: "3rem", 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="icon/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<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="icon/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<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="icon/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<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="icon/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<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="icon/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<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="icon/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
...@@ -60,42 +60,42 @@ function Home() { ...@@ -60,42 +60,42 @@ function Home() {
<h2 style={{ marginRight: "5rem", marginLeft: "3rem", 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="icon/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<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="icon/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<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="icon/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<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="icon/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<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="icon/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<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="icon/asd.jpg" /> <Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body> <Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title> <Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
......
client/src/Pages/ProductRegist.js
View file @ 2a67f236
...@@ -3,7 +3,6 @@ import { Redirect } from 'react-router-dom'; ...@@ -3,7 +3,6 @@ import { Redirect } from 'react-router-dom';
import { Row, Col, Button, Form, Container, Alert } from 'react-bootstrap'; import { Row, Col, Button, Form, Container, Alert } from 'react-bootstrap';
import axios from 'axios'; import axios from 'axios';
import catchErrors from '../utils/catchErrors'; import catchErrors from '../utils/catchErrors';
import { Redirect } from 'react-router-dom';
let color = {} let color = {}
let preColors = [] let preColors = []
......
client/src/Pages/ProductsList.js
View file @ 2a67f236
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect} from 'react';
import Pagination from '../Components/Pagination'; import { Container, Row, Col, Form, FormControl, Button, Dropdown } from 'react-bootstrap';
import { Container, Row, Col, Form, FormControl, Button, Card, Dropdown } from 'react-bootstrap';
import ListCard from '../Components/ListCard'; 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 catchErrors from '../utils/catchErrors'; import catchErrors from '../utils/catchErrors';
function ProductsList(props) { function ProductsList(props) {
const [productlist, setProductlist] = useState([]) const [productlist, setProductlist] = useState([])
const [error, setError] = useState('') const [error, setError] = useState('')
const [category, setCategory] = useState(props.match.params.product) const [category, setCategory] = useState('')
const [subcategory, setSubcategory] = useState(['PADDED JACKET', 'JACKET', 'JUMPER', 'COAT', 'FLEECE', 'CARDIGAN / VEST']) const [subcategory, setSubcategory] = useState([])
const [click, setClick] = useState(true)
const user=isAuthenticated()
useEffect(() => { useEffect(() => {
return getProductlist(user) setCategory(props.match.params.product.toUpperCase())
}, [user]) }, [props.match.params.product])
useEffect(() => {
getProductlist()
}, [category])
useEffect(async() => {
getsubproductlist()
}, [subcategory])
function handleSubmit(e) { function handleSubmit(e) {
e.preventDefault() e.preventDefault()
...@@ -26,7 +30,6 @@ function ProductsList(props) { ...@@ -26,7 +30,6 @@ function ProductsList(props) {
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)
...@@ -52,7 +55,8 @@ function ProductsList(props) { ...@@ -52,7 +55,8 @@ function ProductsList(props) {
return ( return (
<div> <div>
{console.log("match.params=",props.match.params.product)} {console.log("match.params=",category)}
{console.log("props=",props)}
<style type="text/css"> <style type="text/css">
{` {`
.btn { .btn {
...@@ -69,7 +73,7 @@ function ProductsList(props) { ...@@ -69,7 +73,7 @@ function ProductsList(props) {
<Container> <Container>
<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">{category}</h1>
<div className="text-center">{subcategory.map((ele) => ( <div className="text-center">{subcategory.map((ele) => (
<Button className="m-1" onClick={handleClick}>{ele}</Button> <Button className="m-1" onClick={handleClick}>{ele}</Button>
))}</div> ))}</div>
...@@ -89,13 +93,13 @@ function ProductsList(props) { ...@@ -89,13 +93,13 @@ function ProductsList(props) {
<Form as={Row} onSubmit={handleSubmit} className="justify-content-end mx-0"> <Form as={Row} onSubmit={handleSubmit} className="justify-content-end mx-0">
<FormControl type="text" placeholder="Search" style={{ width: "13rem" }} /> <FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
<Button type="submit" className="search px-2"> <Button type="submit" className="search px-2">
<img src="icon/search.svg" width="20" height="20" /> <img src="/icon/search.svg" width="20" height="20" />
</Button> </Button>
</Form> </Form>
</Form> </Form>
</Row> </Row>
<Row md={8} sm={12} className="justify-content-start m-2"> <Row md={8} sm={12} className="justify-content-start m-2">
<ListCard productlist={productlist} /> <ListCard productlist={productlist}/>
</Row> </Row>
</Container> </Container>
{/* <Pagination postsPerPage={postsPerPage} totalPosts={posts.length} paginate={paginate} /> */} {/* <Pagination postsPerPage={postsPerPage} totalPosts={posts.length} paginate={paginate} /> */}
......
server/controllers/product.controller.js
View file @ 2a67f236
...@@ -41,10 +41,12 @@ const getlist=(req,res)=>{ ...@@ -41,10 +41,12 @@ 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}) console.log(category)
const productslist = await Product.find({"main_category": `${category}`})
if (!productslist) { if (!productslist) {
res.status(404).send('상품을 찾을 수 없습니다.') res.status(404).send('상품을 찾을 수 없습니다.')
} }
console.log("list=",productslist)
req.productslist = productslist req.productslist = productslist
next() next()
} catch (error) { } catch (error) {
...@@ -61,7 +63,7 @@ const subgetlist=(req,res)=>{ ...@@ -61,7 +63,7 @@ const subgetlist=(req,res)=>{
} }
const subcategoryId = async (req, res, next, subcategory) => { const subcategoryId = async (req, res, next, subcategory) => {
try { try {
const subproductslist = await Product.find({sub_category:subcategory}) const subproductslist = await Product.find({"sub_category":`${subcategory}`})
if (!subproductslist) { if (!subproductslist) {
res.status(404).send('상품을 찾을 수 없습니다.') res.status(404).send('상품을 찾을 수 없습니다.')
} }
......
server/routes/product.routes.js
View file @ 2a67f236
...@@ -7,8 +7,8 @@ const router = express.Router() ...@@ -7,8 +7,8 @@ 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') router.route('/getproduct/:subcategory')
.get(productCtrl.subgetlist) .get(productCtrl.subgetlist)
......
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