Pagination 수정중

client/src/Components/Pagination.js

+import { Pagination } from "react-bootstrap";
 import React from 'react';
-import { Pagination } from 'react-bootstrap';
 
 function Paginations(props) {
 
@@ -7,26 +7,23 @@ function Paginations(props) {
         <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 === props.totalPosts-1 ? <Pagination.Item onClick={()=>props.handlePage(props.index - 3)}>{props.index - 3}</Pagination.Item> : ""}
+            {props.index === props.totalPosts ? <Pagination.Item onClick={()=>props.handlePage(props.index - 4)}>{props.index - 4}</Pagination.Item> : ""}
+            {props.index === props.totalPosts ? <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 === props.totalPosts ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index + 1)}>{props.index + 1}</Pagination.Item>}
+            {props.index > props.totalPosts-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)} />
+            {props.index === props.totalPosts ? "" : <Pagination.Next onClick={()=>props.handlePage(props.index + 1)} />}
+            <Pagination.Last onClick={() =>props.handlePage(props.totalPosts)} />
         </Pagination>
     )
-
 }
 
 export default Paginations
\ No newline at end of file

client/src/Components/SubNav.js

@@ -16,7 +16,6 @@ function SubNav() {
                 const url = ele.toLowerCase()
                 list.push(
                     <Nav.Link as={Link} to={`/categories/${url}`}>{ele}</Nav.Link>
-                    //categories/${SubNav.url}/&{url}
                 )
             })
             setCategoriesDiv(list)

client/src/Pages/Admin.js

 import React, { useState, useEffect, useRef } from 'react';
 import { Redirect } from 'react-router-dom';
 import AllCard from '../Components/AllCard';
-import Pagination from '../Components/Pagination';
+import Pagination from "../Components/Pagination";
 import axios from 'axios';
 import catchError from '../utils/catchErrors';
 import { Row, Form, FormControl, Button, Container } from 'react-bootstrap';
 
 function Admin() {
+    const INIT_STATUS = { indexOfFirst: 0, indexOfLast: 10 }
     const [search, setSearch] = useState({ word: '' })
     const [productlist, setProductlist] = useState([])
+    const [status, setStatus] = useState(INIT_STATUS)
+    const [currentPage, setCurrentPage] = useState(1);
+    const [per, setPer] = useState(10);
     const [error, setError] = useState('')
+    const searchref = useRef(null)
+    const indexOfLast = currentPage * per;
+    const indexOfFirst = indexOfLast - per;
 
     useEffect(() => {
         getProductlist()
     }, [])
 
+    function paginate(items, index, itemNumber) {
+        const posts = [];
+        const startIndex = (index - 1) * itemNumber
+        for (var i = 0; i < itemNumber; i++) {
+            posts.push(items[(startIndex + i)])
+        }
+        return posts
+    }
+
+    function currentPosts(tmp) {
+        let currentPosts = 0;
+        currentPosts = tmp.slice(indexOfFirst, indexOfLast);
+        console.log("postsPerPage=",currentPage)
+        return currentPosts;
+    }
+
     async function getProductlist() {
         try {
             const response = await axios.get(`/api/product/getproduct/all`)
@@ -36,10 +59,17 @@ function Admin() {
             const response = await axios.get(`/api/product/getproduct/all?product=${search.word}`)
             console.log("response.data=", response.data)
             setProductlist(response.data)
-            e.target.childNodes[0].value = ''
         } catch (error) {
             catchError(error, setError)
+        } finally {
+            searchref.current.value = ''
+        }
     }
+
+    if (error) {
+        alert(`${error}`)
+        setError('')
+        searchref.current.value = ''
     }
 
     return (
@@ -58,18 +88,18 @@ function Admin() {
                 `}
             </style>
             <Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5">
-                <FormControl type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} />
+                <FormControl ref={searchref} 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>
                 <Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button>
             </Row>
             <Row className="justify-content-center m-5">
-                {productlist.map(pro => (
+                {currentPosts(productlist).map(pro => (
                     <AllCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
                 ))}
             </Row>
-            <Pagination />
+            <Pagination index={currentPage} totalPosts={Math.ceil(productlist.length / per)} handlePage={setCurrentPage} />
         </Container>
     )
 }

client/src/Pages/ProductsList.js

 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';
@@ -11,17 +10,8 @@ function ProductsList({ match }) {
     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;
-    }
+    const searchref = useRef(null)
 
     useEffect(() => {
         setMainCategory(match.params.main.toUpperCase())
@@ -44,14 +34,16 @@ function ProductsList({ match }) {
             const response = await axios.get(`/api/product/getproduct/main/${mainCategory}?product=${search.word}`)
             console.log("response.data=", response.data)
             setProductlist(response.data)
-            e.target.childNodes[0].value = ''
         } catch (error) {
             catchError(error, setError)
+        } finally {
+            searchref.current.value = ''
         }
     }
 
     async function getSubsCategories() {
         try {
+            setError('')
             const response = await axios.get(`/api/categories/sub/${mainCategory}`)
             setSubCategory(Object.values(response.data)[0])
             console.log("object value=", Object.values(response.data));
@@ -61,8 +53,8 @@ function ProductsList({ match }) {
     }
 
     async function getProductlist() {
-        console.log("tlfgpd")
         try {
+            setError('')
             const response = await axios.get(`/api/product/getproduct/main/${mainCategory}`)
             setProductlist(response.data)
         } catch (error) {
@@ -72,6 +64,7 @@ function ProductsList({ match }) {
 
     async function handleSort(method) {
         try {
+            setError('')
             const response = await axios.get(`/api/product/getproduct/?q=${method}`)
             setProductlist(response.data)
         } catch (error) {
@@ -81,17 +74,21 @@ function ProductsList({ match }) {
 
     async function handleSubname(e) {
         const subname = e.target.name
-        console.log("subname=", subname)
         try {
-            console.log("first test!!!!!!!!")
             const response = await axios.get(`/api/product/getproduct/sub/${subname}`)
             console.log("subname response data=", response.data)
             setProductlist([response.data])
         } catch (error) {
-            console.log("error22")
+            catchError(error, setError)
         }
     }
 
+    if (error) {
+        alert(`${error}`)
+        setError('')
+        searchref.current.value = ''
+    }
+
     return (
         <Container>
             <style type="text/css">
@@ -105,9 +102,13 @@ function ProductsList({ match }) {
                     border-color: #CDC5C2;
                 }
                 .btn:hover {
-                    background: #91877F;
+                    background-color: #91877F;
                     border-color: #91877F;
                 }
+                .dropdown-item:hover, .dropdown-item:active {
+                    background-color: #91877F;
+                    color: #fff;
+                }
                 `}
             </style>
             <Row className="justify-content-center">
@@ -122,7 +123,7 @@ function ProductsList({ match }) {
             </Row>
             <Row className="justify-content-end mx-0 my-5">
                 <Dropdown>
-                    <Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle>
+                    <Dropdown.Toggle variant="secondary" className="mx-2">정렬</Dropdown.Toggle>
                     <Dropdown.Menu>
                         <Dropdown.Item onClick={() => handleSort('purchase')}>인기상품</Dropdown.Item>
                         <Dropdown.Item onClick={() => handleSort('newest')}>신상품</Dropdown.Item>
@@ -131,8 +132,8 @@ function ProductsList({ match }) {
                     </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">
+                    <FormControl ref={searchref} type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} />
+                    <Button type="submit" variant="secondary" className="px-2">
                         <img src="/icon/search.svg" width="20" height="20" />
                     </Button>
                 </Form>
@@ -153,8 +154,8 @@ function ProductsList({ match }) {
                         }
                     }}>
                         <ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
-                    </Link>
-                ))}
+                    </Link>)
+                )}
                 {/* <Pagination className="justify-content-center" index={} endPage={} handlePage={}/> */}
             </Row>
         </Container>

server/controllers/product.controller.js

@@ -82,7 +82,6 @@ const categoryId = async (req, res, next, category) => {
         if (req.query.product) {
             const productslist = await Product.find({ main_category: category, pro_name: { $regex: new RegExp(req.query.product) } })
             if (productslist.length == 0) {
-                console.log('ds')
                 res.status(404).send('상품을 찾을 수 없습니다.')
             } else {
                 req.productslist = productslist