서버에서 정해진 갯수만큼 가져오기

client/src/Pages/Admin.js

@@ -6,35 +6,44 @@ 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 [length, setLength] = useState(0)
     const [currentPage, setCurrentPage] = useState(1)
     const [error, setError] = useState('')
     const searchref = useRef(null)
-    const per = 10;
+    const per = 9;
 
     useEffect(() => {
         getProductlist()
     }, [])
 
     useEffect(() => {
-        setStatus({ indexOfFirst: (currentPage - 1) * per, indexOfLast: currentPage * per })
+        if (search.word == '') {
+            getProductlist()
+        } else {
+            handleSearch()
+        }
     }, [currentPage])
 
-    function currentPosts(items) {
-        let currentPosts = 0;
-        currentPosts = items.slice(status.indexOfFirst, status.indexOfLast);
-        return currentPosts
+    async function getProductlist() {
+        try {
+            setError('')
+            setSearch({ word: '' })
+            const response = await axios.get(`/api/product/getproduct/all?page=${currentPage}`)
+            setProductlist(response.data.productPiece)
+            setLength(response.data.length)
+        } catch (error) {
+            catchError(error, setError)
+        }
     }
 
-    async function getProductlist() {
+    async function handleSearch() {
         try {
             setError('')
-            const response = await axios.get(`/api/product/getproduct/all`)
-            setProductlist(response.data)
-            setCurrentPage(1)
+            const response = await axios.get(`/api/product/getproduct/all?product=${search.word}&page=${currentPage}`)
+            setProductlist(response.data.productPiece)
+            setLength(response.data.length)
         } catch (error) {
             catchError(error, setError)
         } 
@@ -48,9 +57,12 @@ function Admin() {
         e.preventDefault()
         try {
             setError('')
-            const response = await axios.get(`/api/product/getproduct/all?product=${search.word}`)
-            setProductlist(response.data)
+            if (currentPage != 1) {
                 setCurrentPage(1)
+            }
+            const response = await axios.get(`/api/product/getproduct/all?product=${search.word}&page=${currentPage}`)
+            setProductlist(response.data.productPiece)
+            setLength(response.data.length)
         } catch (error) {
             catchError(error, setError)
         } finally {
@@ -103,11 +115,11 @@ function Admin() {
                 <Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button>
             </Row>
             <Row className="justify-content-center m-5">
-                {currentPosts(productlist).map(pro => (
+                {productlist.map(pro => (
                     <AllCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
                 ))}
             </Row>
-            <Pagination index={currentPage} totalPages={Math.ceil(productlist.length / per)} handlePage={setCurrentPage} />
+            <Pagination index={currentPage} totalPages={Math.ceil(length / per)} handlePage={setCurrentPage} />
         </Container>
     )
 }

client/src/Pages/ProductsList.js

@@ -7,20 +7,22 @@ import catchError from '../utils/catchErrors';
 import { Container, Row, Col, Form, FormControl, Button, Dropdown, ButtonGroup, Image } from 'react-bootstrap';
 
 function ProductsList({ match }) {
-    const INIT_STATUS = { indexOfFirst: 0, indexOfLast: 10 }
     const [search, setSearch] = useState({ word: '' })
     const [sortingName, setSortingName] = useState('정렬')
     const [mainCategory, setMainCategory] = useState(match.params.main.toUpperCase())
     const [subCategory, setSubCategory] = useState([])
+    const [selectSubCategory, setSelectSubCategory] = useState('')
     const [productlist, setProductlist] = useState([])
-    const [status, setStatus] = useState(INIT_STATUS)
+    const [length, setLength] = useState(0)
     const [currentPage, setCurrentPage] = useState(1)
     const [error, setError] = useState('')
     const searchref = useRef(null)
-    const per = 10;
+    const per = 9;
 
     useEffect(() => {
         setMainCategory(match.params.main.toUpperCase())
+        setSelectSubCategory('')
+        setCurrentPage(1)
     }, [match.params.main])
 
 
@@ -30,13 +32,25 @@ function ProductsList({ match }) {
     }, [mainCategory])
 
     useEffect(() => {
-        setStatus({ indexOfFirst: (currentPage - 1) * per, indexOfLast: currentPage * per })
+        if (search.word == '') {
+            getProductlist()
+        } else if (selectSubCategory != '') {
+            changePageforSubname()
+        } else {
+            setSelectSubCategory('')
+            searchList()
+        }
     }, [currentPage])
 
-    function currentPosts(items) {
-        let currentPosts = '';
-        currentPosts = items.slice(status.indexOfFirst, status.indexOfLast);
-        return currentPosts
+    async function searchList() {
+        try {
+            setError('')
+            const response = await axios.get(`/api/product/getproduct/main/${mainCategory}?product=${search.word}&page=${currentPage}`)
+            setProductlist(response.data.productsPiece)
+            setLength(response.data.length)
+        } catch (error) {
+            catchError(error, setError)
+        }
     }
 
     function handleChange(event) {
@@ -47,9 +61,12 @@ function ProductsList({ match }) {
         e.preventDefault()
         try {
             setError('')
-            const response = await axios.get(`/api/product/getproduct/main/${mainCategory}?product=${search.word}`)
-            setProductlist(response.data)
+            if (currentPage != 1) {
                 setCurrentPage(1)
+            }
+            const response = await axios.get(`/api/product/getproduct/main/${mainCategory}?product=${search.word}&page=${currentPage}`)
+            setProductlist(response.data.productsPiece)
+            setLength(response.data.length)
         } catch (error) {
             catchError(error, setError)
         } finally {
@@ -70,9 +87,10 @@ function ProductsList({ match }) {
     async function getProductlist() {
         try {
             setError('')
-            const response = await axios.get(`/api/product/getproduct/main/${mainCategory}`)
-            setProductlist(response.data)
-            setCurrentPage(1)
+            setSearch({ word: '' })
+            const response = await axios.get(`/api/product/getproduct/main/${mainCategory}?page=${currentPage}`)
+            setProductlist(response.data.productsPiece)
+            setLength(response.data.length)
         } catch (error) {
             catchError(error, setError)
         }
@@ -126,13 +144,27 @@ function ProductsList({ match }) {
         }
     }
 
+    async function changePageforSubname() {
+        try {
+            setError('')
+            setSearch({ word: '' })
+            const response = await axios.get(`/api/product/getproduct/sub?subname=${selectSubCategory}&page=${currentPage}`)
+            setProductlist(response.data.productsPiece)
+            setLength(response.data.length)
+        } catch (error) {
+            catchError(error, setError)
+        }
+    }
+
     async function handleSubname(e) {
         const subname = e.target.name
+        setSelectSubCategory(e.target.name)
         try {
             setError('')
-            const response = await axios.get(`/api/product/getproduct/sub?subname=${subname}`)
-            setProductlist(response.data)
-            setCurrentPage(1)
+            setSearch({ word: '' })
+            const response = await axios.get(`/api/product/getproduct/sub?subname=${subname}&page=${currentPage}`)
+            setProductlist(response.data.productsPiece)
+            setLength(response.data.length)
         } catch (error) {
             catchError(error, setError)
         }
@@ -212,7 +244,7 @@ function ProductsList({ match }) {
             </Row>
             <Row md={8} sm={12} className="justify-content-center m-2">
                 {productlist.length > 0 ?
-                    currentPosts(productlist).map(pro => (
+                    productlist.map(pro => (
                         <Link to={{
                             pathname: `/product/${pro._id}`,
                             state: {
@@ -235,7 +267,7 @@ function ProductsList({ match }) {
                     )
                 }
             </Row>
-            {productlist.length != 0 ? <Pagination index={currentPage} totalPages={Math.ceil(productlist.length / per)} handlePage={setCurrentPage} /> : ''}
+            {productlist.length != 0 ? <Pagination index={currentPage} totalPages={Math.ceil(length / per)} handlePage={setCurrentPage} /> : ''}
         </Container>
     )
 }

server/controllers/product.controller.js

@@ -38,17 +38,23 @@ const getToHome = async (req, res) => {
 }
 
 const getAll = async (req, res) => {
+    const per = 9;
     try {
         if (req.query.product) {
             const productslist = await Product.find({ pro_name: { $regex: new RegExp(req.query.product) } }).sort({ createdAt: -1 })
+            const length = productslist.length
+            const productPiece = await Product.find({ pro_name: { $regex: new RegExp(req.query.product) } }).sort({ createdAt: -1 }).skip((req.query.page - 1) * per).limit(per)
             if (productslist.length == 0) {
                 res.status(404).send('상품을 찾을 수 없습니다.')
             } else {
-                res.json(productslist)
+                res.json({productPiece, length})
             }
         } else {
             const productslist = await Product.find({}).sort({ createdAt: -1 })
-            res.json(productslist)
+            const length = productslist.length
+            const productPiece = await Product.find({}).sort({ createdAt: -1 }).skip((req.query.page - 1) * per).limit(per)
+            console.log("products=",productPiece)
+            res.json({productPiece, length})
         }
     } catch (error) {
         res.status(500).send('상품을 불러오지 못했습니다.')
@@ -57,7 +63,9 @@ const getAll = async (req, res) => {
 
 const getlist = (req, res) => {
     try {
-        res.json(req.productslist)
+        const productsPiece = req.productsPiece
+        const length = req.length
+        res.json({ productsPiece, length })
     } catch (error) {
         res.status(500).send('상품을 불러오지 못했습니다.')
     }
@@ -65,17 +73,24 @@ const getlist = (req, res) => {
 
 
 const categoryId = async (req, res, next, category) => {
+    const per = 9;
     try {
         if (req.query.product) {
             const productslist = await Product.find({ main_category: category, pro_name: { $regex: new RegExp(req.query.product) } })
+            const length = productslist.length
+            const productsPiece = await Product.find({ main_category: category, pro_name: { $regex: new RegExp(req.query.product) } }).skip((req.query.page - 1) * per).limit(per) 
             if (productslist.length == 0) {
                 res.status(404).send('상품을 찾을 수 없습니다.')
             } else {
-                req.productslist = productslist
+                req.length = length
+                req.productsPiece = productsPiece
             }
         } else {
             const productslist = await Product.find({ main_category: category })
-            req.productslist = productslist
+            const length = productslist.length
+            req.length = length
+            const productsPiece = await Product.find({ main_category: category }).skip((req.query.page - 1) * per).limit(per)
+            req.productsPiece = productsPiece
         }
         next()
     } catch (error) {
@@ -84,9 +99,12 @@ const categoryId = async (req, res, next, category) => {
 }
 
 const subname = async (req, res) => {
+    const per = 9;
     try {
-        const findSubname = await Product.find({ sub_category: req.query.subname })
-        res.send(findSubname)
+        const productslist = await Product.find({ sub_category: req.query.subname })
+        const length = productslist.length
+        const productsPiece = await Product.find({ sub_category: req.query.subname }).skip((req.query.page - 1) * per).limit(per)
+        res.send({ productsPiece, length })
     } catch (error) {
         res.status(500).send('상품을 불러오지 못했습니다.')
     }