slide 편집 전 pagination done

frontend/src/Pages/myslide.tsx

+import React, { useRef, useState } from "react";
+
+type num = {
+    total: number,
+    page: number,
+    setPage: Function,
+    style: string,
+    setStyle: Function,
+    // slides : any[],
+}
+
+export function MySlide({ total, page, setPage, style, setStyle}: num) {
+
+    const numPages = Math.ceil(total / 15);
+
+    const firstLeftClick = useRef(true);
+    const firstRightClick = useRef(true);
+    const slide = useRef(1);
+
+    const leftClick = () => {
+        if (firstLeftClick.current) {
+            firstLeftClick.current = false;
+            firstRightClick.current = true;
+        } else {
+            setPage(page - 1)
+        }
+        slide.current -= 1;
+        setStyle("-translate-x-full animate-slidetoright");
+    };
+
+    const rightClick = () => {
+        if (firstRightClick.current) {
+            firstLeftClick.current = true;
+            firstRightClick.current = false;
+        } else {
+            setPage(page + 1)
+        }
+        slide.current += 1;
+        setStyle("animate-slidetoleft");
+    };
+
+    return (
+        <div>
+            <button onClick={leftClick} disabled={slide.current === 1}>
+                &lt;{slide.current}
+            </button>
+            <button onClick={rightClick} disabled={slide.current === numPages}>
+                &gt;
+            </button>
+        </div>
+        
+
+    );
+};
+
+
+
+
+{/* {Array(numPages)
+        .fill(1)
+        .map((_, i) => (
+            <button key={i + 1} onClick={() => setPage(i + 1)}>
+                {i + 1}
+            </button>
+        ))} */}
\ No newline at end of file

frontend/src/Pages/picpagination.tsx

-// import React, { useRef, useState} from "react";
-
-// type num = {
-//     total: number,
-//     page: number,
-//     setPage: Function
-
-// }
-
-// export function Pagination({ total, page, setPage}: num) {
-//     const numPages = Math.ceil(total / 15);
-//     const firstLeftClick = useRef(true);
-//     const firstRightClick = useRef(true);
-    
-//     const leftClick = () => {
-//         if (firstLeftClick.current) {
-//             firstLeftClick.current = false;
-//             firstRightClick.current = true;
-//         } else {
-//             setPage(page - 1)
-//         }
-//     };
-
-//     const rightClick = () => {
-//         if (firstRightClick.current) {
-//             firstLeftClick.current = true;
-//             firstRightClick.current = false;
-//         } else {
-//             setPage(page + 1)
-//         }
-//   };
-//     };
-
-//     return (
-//         <div>
-//             <button onClick={leftClick} disabled={page === 1}>
-//                 &lt;{page}
-//             </button>
-//             <button onClick={rightClick} disabled={page === numPages}>
-//                 &gt;
-//             </button>
-
-//         </div>
-//     );
-// };
-
-
-// export function PaginationRight({ total, page, setPage }: num) {
-//     const numPages = Math.ceil(total / 15);
-//     const firstLeftClick = useRef(true);
-//     const firstRightClick = useRef(true);
-
-
-//     const right = () => {
-//         if (firstRightClick.current) {
-//             firstLeftClick.current = true;
-//             firstRightClick.current = false;
-//         } else {
-//             setPage(page + 1)
-//         }
-//     };
-
-//     return (
-//         <div>
-//             <button onClick={right} disabled={page === numPages}>
-//                 &gt;
-//             </button>
-//         </div>
-//     );
-// };
-
-    {/* {Array(numPages)
-        .fill(1)
-        .map((_, i) => (
-            <button key={i + 1} onClick={() => setPage(i + 1)}>
-                {i + 1}
-            </button>
-        ))} */}
\ No newline at end of file

frontend/src/home/body.tsx

@@ -3,24 +3,23 @@ import { Outlet, useSearchParams } from "react-router-dom";
 import Theme from "./theme";
 import Citylist from "../Pages/citylist";
 import { getPicure } from "../Pages/pic";
-// import { Pagination} from "../Pages/picpagination";
+import { MySlide } from "../Pages/myslide";
 
 const initSearchParams = { theme: "", city: "" };
 
 export default function Body() {
   let limit = 15;
   const [searchParams, setSearchParams] = useSearchParams(initSearchParams);
+
   const [page, setPage] = useState(1);
   const [style, setStyle] = useState("");
-  const firstRightClick = useRef(true);
-  const firstLeftClick = useRef(true);
-  const slide = useRef(1);
+
   const offset1 = (page - 1) * limit;
   const offset2 = page * limit;
   const offset3 = (page + 1) * limit;
 
   let getPics = getPicure();
-  
+
   useEffect(() => {
     console.log(searchParams.get("theme"), searchParams.get("city"));
     setSearchParams(searchParams)
@@ -41,46 +40,44 @@ export default function Body() {
       city: event.currentTarget.id,
     });
   };
-  
-  const leftClick = () => {
-    if (firstLeftClick.current) {
-      firstLeftClick.current = false;
-      firstRightClick.current = true;
-    } else {
-      setPage(page - 1)
-    }
-    slide.current -= 1;
-    setStyle("-translate-x-full animate-slidetoright");
-  };
-  
-  const rightClick = () => {
-    if (firstRightClick.current) {
-      firstLeftClick.current = true;
-      firstRightClick.current = false;
-    } else {
-      setPage(page + 1)
-    }
-    slide.current += 1;
-    setStyle("animate-slidetoleft");
-  };
-  console.log(`page: ${slide.current}`);
-  console.log(`style: ${style}`);
-  
+
+  //picture insert 
   let themechange = searchParams.get("theme");
   let citylistchange = searchParams.get("city");
-  
+
   const Idpics = getPics.filter((p) => {
     return (
       (p.themeid == themechange && p.cityid == citylistchange) ||
       (p.themeid == themechange && citylistchange == "") ||
       (themechange == "" && p.cityid == citylistchange) ||
       (themechange == "" && citylistchange == "")
-      );
-    });
+    );
+  });
 
-    const numPages = Math.ceil(Idpics.length / 15);
-    
-    return (
+  const numPages = Math.ceil(Idpics.length / 15);
+console.log(page)
+  // const slides = []
+  // for (let i = 0; i < numPages + 1; i++) {
+  //   const k =[ 
+  //   <div key={Math.random()} className="min-w-full">
+  //     <div className={`inline-grid grid-cols-5 ${style}`}>
+  //       {Idpics.slice(i * limit, i * limit + limit).map((pic, index: number) => (
+  //         <div
+  //           className={`m-1 shrink-0 bg-gray-200 rounded shadow-md `}
+  //           key={index}>
+  //           <img
+  //             src={pic.url}
+  //             className="w-full h-10 md:h-20 object-center"
+  //           />
+  //           <p className="text-center text-xs">{pic.name}</p>
+  //         </div>
+  //       ))}
+  //     </div>
+  //   </div>]
+  //   slides.push(k);
+  // }
+
+  return (
     <div className="flex flex-col px-1 py-1">
       <Theme handleClick={themeHandleClick} />
       <div className="flex flex-col md:flex-row py-10 ">
@@ -88,15 +85,8 @@ export default function Body() {
           <Citylist handleClick={cityHandleClick} />
         </div>
         <div className="flex flex-col  overflow-hidden">
-          <div>
-            <button onClick={leftClick} disabled={slide.current === 1}>
-              &lt;{slide.current}
-            </button>
-            <button onClick={rightClick} disabled={slide.current === numPages}>
-              &gt;
-            </button>
-          </div>
-          <div className={`md:mr-10 md:basis-4/5 flex flex-row relative w-full `}>  
+          <MySlide total={Idpics.length} page={page} setPage={setPage} style={style} setStyle={setStyle}/>
+          <div className={`md:mr-10 md:basis-4/5 flex flex-row relative w-full `}>
             <div key={Math.random()} className="min-w-full">
               <div  className={`inline-grid grid-cols-5 ${style}`}>
                 {Idpics.slice(offset1, offset1 + limit).map((pic, index: number) => (

frontend/tailwind.config.js

@@ -21,8 +21,8 @@ module.exports = {
         },
       },
       animation: {
-        slidetoleft: "slidetoleft 3s linear forwards",
-        slidetoright: "slidetoright 3s linear forwards",
+        slidetoleft: "slidetoleft 2s linear forwards",
+        slidetoright: "slidetoright 2s linear forwards",
       },
     },
   },