pic pagination

frontend/package.json

@@ -29,6 +29,7 @@
     "webpack-dev-server": "^4.9.2"
   },
   "dependencies": {
+    "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0"

frontend/src/Pages/picpagination.tsx

+import React from "react";
+
+type num = {
+    total: number, 
+    page: number, 
+    setPage: Function
+}
+
+export default function Pagination ({total, page, setPage} : num) {
+    const numPages = Math.ceil(total / 15);
+
+    return (
+        <div>
+            <button onClick={() => setPage(page - 1)} disabled={page === 1}>
+                &lt;
+            </button>
+
+            {Array(numPages)
+                .fill(1)
+                .map((_, i) => (
+                    <button key={i + 1} onClick={() => setPage(i + 1)}>
+                        {i + 1}
+                    </button>
+                ))}
+
+            <button onClick={() => setPage(page + 1)} disabled={page === numPages}>
+                &gt;
+            </button>
+        </div>
+    );
+};

frontend/src/pages/body.tsx

-import React, { useEffect, MouseEvent } from "react";
+import React, { useEffect, MouseEvent,useState } from "react";
 import { Outlet, useSearchParams } from "react-router-dom";
 import Theme from "./theme";
 import Citylist from "./citylist";
 import {getPicure} from "./pic";
+import Pagination from "./picpagination"
+import { LibManifestPlugin } from "webpack";
 
 const initSearchParams = { "theme": "", "city": "" }
 
 export default function Body() {
+    let limit = 15;
+    const [searchParams, setSearchParams] = useSearchParams(initSearchParams);
+    const [page, setPage] = useState(1);
+    const offset = (page-1) *limit;
+
 
-    const [searchParams, setSearchParams] = useSearchParams(initSearchParams)
     let getPics = getPicure();
 
     useEffect(() => {
@@ -31,11 +37,16 @@ export default function Body() {
             city: event.currentTarget.id
         })
     }
+    
+    let themechange = searchParams.get('theme');
+    let citylistchange = searchParams.get('city');
 
     const Idpics = getPics.filter(p => {
 
-       return (p.themeid == searchParams.get('theme') && p.cityid == searchParams.get('city'))||(p.themeid == searchParams.get('theme') && searchParams.get('city') == "")
-       ||(searchParams.get('theme') == "" && p.cityid == searchParams.get('city'))||(searchParams.get('theme') == "" && searchParams.get('city') == "")
+       return (p.themeid == themechange && p.cityid == citylistchange)||
+       (p.themeid == themechange && citylistchange == "")||
+       (themechange == "" && p.cityid == citylistchange)||
+       (themechange == "" && citylistchange == "")
     })
 
 
@@ -44,14 +55,16 @@ export default function Body() {
             <Theme handleClick={themeHandleClick} />
             <div className="flex flex-col md:flex-row py-10 ">
                 <Citylist handleClick={cityHandleClick} />
-                <div className="flex md:mr-10 md:basis-4/5 grid grid-rows-3 grid-cols-5">
-                    {Idpics.map((pic, index: number) => (
+                <div className="flex-row md:mr-10 md:basis-4/5 grid grid-rows-3 grid-cols-5">
+                    {Idpics.slice(offset, offset + limit).map((pic, index: number) => (
                         <div className="m-1 shrink-0 bg-gray-200 rounded overflow-hidden shadow-md" key={index}>
-                            <img src={pic.url} className="w-full h-10 md:h-20 object-cover" />
+                            <img src={pic.url} className="w-full h-10 md:h-20 object-center" />
                             <p className="text-center text-xs">{pic.name}</p>
                         </div>
                     ))}
+                    <Pagination total={Idpics.length} page = {page} setPage ={setPage}/>
                 </div>
+                     
             </div>
             <Outlet />
         </div>

frontend/webpack.dev.js

@@ -6,5 +6,13 @@ const common = require("./webpack.common.js");
 module.exports = merge(common, {
   mode: "development",
   devtool: "inline-source-map",
-  devServer: {historyApiFallback: true },
+  devServer: {
+    proxy: [
+      {
+        context : ["/api"],
+        target : "http://localhost:3000",
+        changeOrigin: true,
+      },
+    ],
+    historyApiFallback: true },
 });

src/app.ts

@@ -9,7 +9,6 @@ app.use(express.urlencoded({ extended: true }));
 app.use(cookieParser());
 
 app.use("/api", router);
-
 app.use((err: any, req: Request, res: Response, next: NextFunction) => {
   console.log("익스프레스 에러: ", err);
   res.status(err.statusCode || 500).send(err.message || "서버 에러");