Skip to content

GitLab

Commit 0ce738d0 authored by kusang96's avatar kusang96
Browse files

정렬 실행중

parent 53631f4f
Hide whitespace changes
Inline Side-by-side
client/src/Components/Pagination.js
View file @ 0ce738d0
import React from 'react'; import React from 'react';
import { Pagination } from 'react-bootstrap'; import { Pagination } from 'react-bootstrap';
function pagination() { function Paginations(props) {
let active = 1;
let items = [];
for (let number = 1; number <= 5; number++) {
items.push(
<Pagination.Item key={number} active={number === active}>
{number}
</Pagination.Item>,
);
}
return ( return (
<Pagination className="justify-content-center">{items}</Pagination> <Pagination>
<Pagination.First onClick={() => props.handlePage(1)} />
{props.index === 1 ? <Pagination.Prev onClick={()=>props.handlePage(props.index)} /> : <Pagination.Prev onClick={()=>props.handlePage(props.index - 1)} />}
{props.index === props.endPage-1 ? <Pagination.Item onClick={()=>props.handlePage(props.index - 3)}>{props.index - 3}</Pagination.Item> : ""}
{props.index === props.endPage ? <Pagination.Item onClick={()=>props.handlePage(props.index - 4)}>{props.index - 4}</Pagination.Item> : ""}
{props.index === props.endPage ? <Pagination.Item onClick={()=>props.handlePage(props.index - 3)}>{props.index - 3}</Pagination.Item> : ""}
{props.index < 3 ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index - 2)}>{props.index - 2}</Pagination.Item>}
{props.index === 1 ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index - 1)}>{props.index - 1}</Pagination.Item>}
<Pagination.Item active>{props.index}</Pagination.Item>
{props.index === props.endPage ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index + 1)}>{props.index + 1}</Pagination.Item>}
{props.index > props.endPage-2 ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index + 2)}>{props.index + 2}</Pagination.Item>}
{props.index === 1 ? <Pagination.Item onClick={()=>props.handlePage(props.index + 3)}>{props.index + 3}</Pagination.Item> : ""}
{props.index === 1 ? <Pagination.Item onClick={()=>props.handlePage(props.index + 4)}>{props.index + 4}</Pagination.Item> : ""}
{props.index === 2 ? <Pagination.Item onClick={()=>props.handlePage(props.index + 3)}>{props.index + 3}</Pagination.Item> : ""}
{props.index === props.endPage ? "" : <Pagination.Next onClick={()=>props.handlePage(props.index + 1)} />}
<Pagination.Last onClick={() =>props.handlePage(props.endPage)} />
</Pagination>
) )
}
export default pagination
// import { Pagination } from "react-bootstrap";
// import React from 'react';
// function Paginations(props) {
// return ( }
// <Pagination>
// <Pagination.First onClick={() => props.handlePage(1)} />
// {props.index === 1 ? <Pagination.Prev onClick={()=>props.handlePage(props.index)} /> : <Pagination.Prev onClick={()=>props.handlePage(props.index - 1)} />}
// {props.index === props.endPage-1 ? <Pagination.Item onClick={()=>props.handlePage(props.index - 3)}>{props.index - 3}</Pagination.Item> : ""}
// {props.index === props.endPage ? <Pagination.Item onClick={()=>props.handlePage(props.index - 4)}>{props.index - 4}</Pagination.Item> : ""}
// {props.index === props.endPage ? <Pagination.Item onClick={()=>props.handlePage(props.index - 3)}>{props.index - 3}</Pagination.Item> : ""}
// {props.index < 3 ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index - 2)}>{props.index - 2}</Pagination.Item>}
// {props.index === 1 ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index - 1)}>{props.index - 1}</Pagination.Item>}
// <Pagination.Item active>{props.index}</Pagination.Item>
// {props.index === props.endPage ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index + 1)}>{props.index + 1}</Pagination.Item>}
// {props.index > props.endPage-2 ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index + 2)}>{props.index + 2}</Pagination.Item>}
// {props.index === 1 ? <Pagination.Item onClick={()=>props.handlePage(props.index + 3)}>{props.index + 3}</Pagination.Item> : ""}
// {props.index === 1 ? <Pagination.Item onClick={()=>props.handlePage(props.index + 4)}>{props.index + 4}</Pagination.Item> : ""}
// {props.index === 2 ? <Pagination.Item onClick={()=>props.handlePage(props.index + 3)}>{props.index + 3}</Pagination.Item> : ""}
// {props.index === props.endPage ? "" : <Pagination.Next onClick={()=>props.handlePage(props.index + 1)} />}
// <Pagination.Last onClick={() =>props.handlePage(props.endPage)} />
// </Pagination>
// )
// } export default Paginations
// export default Paginations \ No newline at end of file
\ No newline at end of file
client/src/Pages/ProductsList.js
View file @ 0ce738d0
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import ListCard from '../Components/ListCard'; import ListCard from '../Components/ListCard';
import Pagination from "../Components/Pagination";
import axios from 'axios'; import axios from 'axios';
import catchError from '../utils/catchErrors'; import catchError from '../utils/catchErrors';
import { Container, Row, Col, Form, FormControl, Button, Dropdown, ButtonGroup } from 'react-bootstrap'; import { Container, Row, Col, Form, FormControl, Button, Dropdown, ButtonGroup } from 'react-bootstrap';
function ProductsList({ match }) { function ProductsList({ match }) {
const [search, setSearch] = useState({ word: '' })
const [mainCategory, setMainCategory] = useState(match.params.main.toUpperCase()) const [mainCategory, setMainCategory] = useState(match.params.main.toUpperCase())
const [subCategory, setSubCategory] = useState([]) const [subCategory, setSubCategory] = useState([])
const [productlist, setProductlist] = useState([]) const [productlist, setProductlist] = useState([])
const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage, setPostsPerPage] = useState(6);
const [error, setError] = useState('') const [error, setError] = useState('')
const indexOfLast = currentPage * postsPerPage;
const indexOfFirst = indexOfLast - postsPerPage;
function currentPosts(tmp) {
let currentPosts = 0;
currentPosts = tmp.slice(indexOfFirst, indexOfLast);
return currentPosts;
}
useEffect(() => { useEffect(() => {
setMainCategory(match.params.main.toUpperCase()) setMainCategory(match.params.main.toUpperCase())
...@@ -17,12 +29,12 @@ function ProductsList({ match }) { ...@@ -17,12 +29,12 @@ function ProductsList({ match }) {
useEffect(() => { useEffect(() => {
getSubsCategories([]) getSubsCategories()
getProductlist() getProductlist()
}, [mainCategory]) }, [mainCategory])
async function handleClick(sub) { async function handleClick(sub) {
console.log("sub=",sub) console.log("sub=", sub)
try { try {
const response = await axios.get(`/api/product/getproduct/${mainCategory}/${sub}`) const response = await axios.get(`/api/product/getproduct/${mainCategory}/${sub}`)
console.log("response.data=", response.data) console.log("response.data=", response.data)
...@@ -33,8 +45,23 @@ function ProductsList({ match }) { ...@@ -33,8 +45,23 @@ function ProductsList({ match }) {
} }
} }
function handleSearch() { function handleChange(event) {
console.log('handle change', event.target.value)
setSearch({ word: event.target.value })
}
async function handleSearch(event) {
console.log('search', search)
event.preventDefault()
console.log("tlfgod")
try {
setError('')
const response = await axios.post(`/api/product/getproduct/${mainCategory}`, search)
console.log("response.data=", response.data)
setProductlist(response.data)
} catch (error) {
catchError(error, setError)
}
} }
async function getSubsCategories() { async function getSubsCategories() {
...@@ -51,14 +78,22 @@ function ProductsList({ match }) { ...@@ -51,14 +78,22 @@ function ProductsList({ match }) {
try { try {
const response = await axios.get(`/api/product/getproduct/${mainCategory}`) const response = await axios.get(`/api/product/getproduct/${mainCategory}`)
setProductlist(response.data) setProductlist(response.data)
} catch (error) {
catchError(error, setError)
}
}
async function handleSort(method) {
try {
const response = await axios.get(`/api/product/getproduct/?q=${method}`)
setProductlist(response.data)
} catch (error) { } catch (error) {
catchError(error, setError) catchError(error, setError)
} }
} }
return ( return (
<div> <Container>
<style type="text/css"> <style type="text/css">
{` {`
a, a:hover, a:active { a, a:hover, a:active {
...@@ -75,53 +110,52 @@ function ProductsList({ match }) { ...@@ -75,53 +110,52 @@ function ProductsList({ match }) {
} }
`} `}
</style> </style>
<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">{mainCategory}</h1>
<h1 style={{ fontSize: "3rem" }} className="text-center">{mainCategory}</h1> <div className="text-center">
<div className="text-center"> <ButtonGroup className="d-flex flex-wrap">
<ButtonGroup className="d-flex flex-wrap"> {subCategory.map(el => (<Button className="m-1" onClick={() => handleClick(el)}>{el}</Button>))}
{subCategory.map(el => (<Button className="m-1" onClick={() => handleClick(el)}>{el}</Button>))} </ButtonGroup>
</ButtonGroup> </div>
</div> </Col>
</Col> </Row>
</Row> <Row className="justify-content-end mx-0 my-5">
<Row className="justify-content-end mx-0 my-5"> <Dropdown>
<Dropdown> <Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle>
<Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle> <Dropdown.Menu>
<Dropdown.Menu> <Dropdown.Item onClick={() => handleSort('purchase')}>인기상품</Dropdown.Item>
<Dropdown.Item>인기상품</Dropdown.Item> <Dropdown.Item onClick={() => handleSort('newest')}>신상품</Dropdown.Item>
<Dropdown.Item>신상품</Dropdown.Item> <Dropdown.Item onClick={() => handleSort('lowest')}>낮은가격</Dropdown.Item>
<Dropdown.Item>낮은가격</Dropdown.Item> <Dropdown.Item onClick={() => handleSort('highest')}>높은가격</Dropdown.Item>
<Dropdown.Item>높은가격</Dropdown.Item> </Dropdown.Menu>
</Dropdown.Menu> </Dropdown>
</Dropdown> <Form inline onSubmit={handleSearch} className="justify-content-end mx-0">
<Form as={Row} onSubmit={handleSearch} className="justify-content-end mx-0"> <FormControl type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} />
<FormControl type="text" placeholder="Search" style={{ width: "13rem" }} /> <Button type="submit" className="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> </Row>
</Row> <Row md={8} sm={12} className="justify-content-center m-2">
<Row md={8} sm={12} className="justify-content-center m-2"> {productlist.map(pro => (
{productlist.map(pro => ( <ListCard as={Link} id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} to={{
<ListCard as={Link} id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} to={{ pathname: `/product/${pro._id}`,
pathname: `/product/${pro._id}`, state: {
state: { id: pro._id,
id: pro._id, name: pro.pro_name,
name: pro.pro_name, price: pro.price,
price: pro.price, colors: pro.colors,
colors: pro.colors, sizes: pro.sizes,
sizes: pro.sizes, description: pro.description,
description: pro.description, main_img: pro.main_imgUrl,
main_img: pro.main_imgUrl, detail_imgs: pro.detail_imgUrls
detail_imgs: pro.detail_imgUrls }
} }} />
}} /> ))}
))} </Row>
</Row> {/* <Pagination className="justify-content-center" index={} endPage={} handlePage={}/> */}
</Container> </Container>
</div>
) )
} }
......
server/controllers/product.controller.js
View file @ 0ce738d0
...@@ -51,6 +51,7 @@ const getAll = async (req, res) => { ...@@ -51,6 +51,7 @@ const getAll = async (req, res) => {
} }
const getlist = (req, res) => { const getlist = (req, res) => {
console.log('get list')
try { try {
res.json(req.productslist) res.json(req.productslist)
} catch (error) { } catch (error) {
...@@ -59,6 +60,8 @@ const getlist = (req, res) => { ...@@ -59,6 +60,8 @@ const getlist = (req, res) => {
} }
const categoryId = async (req, res, next, category) => { const categoryId = async (req, res, next, category) => {
const { search } = req.body
console.log("server=",search)
try { try {
const productslist = await Product.find({ main_category: category }) const productslist = await Product.find({ main_category: category })
if (!productslist) { if (!productslist) {
...@@ -71,25 +74,25 @@ const categoryId = async (req, res, next, category) => { ...@@ -71,25 +74,25 @@ const categoryId = async (req, res, next, category) => {
} }
} }
const subgetlist = (req, res) => { // const subgetlist = (req, res) => {
try { // try {
res.json(req.subproductslist) // res.json(req.subproductslist)
} catch (error) { // } catch (error) {
res.status(500).send('상품을 불러오지 못했습니다.') // res.status(500).send('상품을 불러오지 못했습니다.')
} // }
} // }
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('상품을 찾을 수 없습니다.')
} // }
req.subproductslist = subproductslist // req.subproductslist = subproductslist
next() // next()
} catch (error) { // } catch (error) {
res.status(500).send('상품을 불러오지 못했습니다.') // res.status(500).send('상품을 불러오지 못했습니다.')
} // }
} // }
export default { imageUpload, regist, getToHome, getAll, categoryId, getlist, subcategoryId, subgetlist } export default { imageUpload, regist, getToHome, getAll, categoryId, getlist }
\ No newline at end of file \ No newline at end of file
server/routes/product.routes.js
View file @ 0ce738d0
...@@ -16,11 +16,11 @@ router.route('/getproduct/all') ...@@ -16,11 +16,11 @@ router.route('/getproduct/all')
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)
router.param('category', productCtrl.categoryId) router.param('category', productCtrl.categoryId)
router.param('subcategory',productCtrl.subcategoryId) // 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