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