slide paginaiton 수정

frontend/src/Pages/picpagination.tsx

-import React, { useRef } from "react";
+// import React, { useRef, useState} from "react";
 
-type num = {
-    total: number,
-    page: number,
-    setPage: Function
-}
+// 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 left = () => {
-        if (firstLeftClick.current) {
-            firstLeftClick.current = false;
-            firstRightClick.current = true;
-        } else {
-            setPage(page - 1)
-        }
-    };
+// 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 right = () => {
-        if (firstRightClick.current) {
-            firstLeftClick.current = true;
-            firstRightClick.current = false;
-        } else {
-            setPage(page + 1)
-        }
-    };
+//     const rightClick = () => {
+//         if (firstRightClick.current) {
+//             firstLeftClick.current = true;
+//             firstRightClick.current = false;
+//         } else {
+//             setPage(page + 1)
+//         }
+//   };
+//     };
 
-    return (
-        <div>
-            <button onClick={left} disabled={page === 1}>
-                &lt;{page}</button>
+//     return (
+//         <div>
+//             <button onClick={leftClick} disabled={page === 1}>
+//                 &lt;{page}
+//             </button>
+//             <button onClick={rightClick} disabled={page === numPages}>
+//                 &gt;
+//             </button>
 
-            {/* {Array(numPages)
-                .fill(1)
-                .map((_, i) => (
-                    <button key={i + 1} onClick={() => setPage(i + 1)}>
-                        {i + 1}
-                    </button>
-                ))} */}
+//         </div>
+//     );
+// };
 
-            <button onClick={right} disabled={page === numPages}>
-                &gt;
-            </button>
 
-        </div>
-    );
-};
 // export function PaginationRight({ total, page, setPage }: num) {
 //     const numPages = Math.ceil(total / 15);
 //     const firstLeftClick = useRef(true);
@@ -72,3 +68,11 @@ export function Pagination({ total, page, setPage }: num) {
 //         </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/slide.tsx

+import React from "react";
+
+const slides = [
+  "Slide 0",
+  "Slide 1",
+  "Slide 2",
+  "Slide 3",
+  "Slide 4",
+  "Slide 5",
+  "Slide 6",
+  "Slide 7",
+];
+
+export const Slide = () => {
+  const [page, setPage] = React.useState(1);
+  const [style, setStyle] = React.useState("");
+  const firstRightClick = React.useRef(true);
+  const firstLeftClick = React.useRef(true);
+  const slide = React.useRef(0);
+
+  const handleLeftClick = () => {
+    if (firstLeftClick.current) { //왼쪽 버튼이 true이면
+      firstLeftClick.current = false;// 왼쪽 버튼은 false로 
+      firstRightClick.current = true; // 오른쪽 버튼은 true로 
+    } else {
+      setPage(page - 1); // 왼쪽 버튼이 false이면 눌렸을때 page-1
+    }
+    slide.current -= 1;
+    setStyle("-translate-x-full animate-slidetoright");
+  };
+
+  const handleRightClick = () => {
+    if (firstRightClick.current) {
+      firstLeftClick.current = true;
+      firstRightClick.current = false;
+    } else {
+      setPage(page + 1);
+    }
+    slide.current += 1;
+    setStyle("animate-slidetoleft");
+  };
+
+  console.log(`page: ${page}`);
+  console.log(`style: ${style}`);
+  console.log(slides.slice(page - 1, page + 2));
+  console.log(`slide number: ${slide.current}`);
+
+  return (
+    <div className="flex flex-col items-center text-center">
+      <h1>슬라이드</h1>
+      <div className="h-screen w-full">
+        <div
+          key={Math.random()}
+          className="flex overflow-x-hidden border-solid border-2 w-full h-1/2 text-8xl"
+        >
+          {slides.slice(page - 1, page + 2).map((slide) => (
+            <div
+              key={slide}
+              className={`basis-full grow-0 shrink-0 border-8 bg-orange-300 ${style}`}
+            >
+              {slide}
+            </div>
+          ))}
+        </div>
+        <div>
+          <button
+            onClick={handleLeftClick}
+            disabled={slide.current < 1}
+            className="bg-gray-400 p-1 disabled:opacity-40"
+          >
+            &lt;
+          </button>
+          <button
+            onClick={handleRightClick}
+            disabled={slide.current > slides.length - 2}
+            className="bg-gray-400 p-1 disabled:opacity-40"
+          >
+            &gt;
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/home/body.tsx

@@ -3,7 +3,7 @@ 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 { Pagination} from "../Pages/picpagination";
 
 const initSearchParams = { theme: "", city: "" };
 
@@ -11,11 +11,16 @@ 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();
 
+  let getPics = getPicure();
+  
   useEffect(() => {
     console.log(searchParams.get("theme"), searchParams.get("city"));
     setSearchParams(searchParams)
@@ -36,20 +41,46 @@ 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}`);
+  
   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 == "")
-    );
-  });
+      );
+    });
 
-  return (
+    const numPages = Math.ceil(Idpics.length / 15);
+    
+    return (
     <div className="flex flex-col px-1 py-1">
       <Theme handleClick={themeHandleClick} />
       <div className="flex flex-col md:flex-row py-10 ">
@@ -57,14 +88,20 @@ export default function Body() {
           <Citylist handleClick={cityHandleClick} />
         </div>
         <div className="flex flex-col  overflow-hidden">
-          <Pagination total={Idpics.length} page={page} setPage={setPage} />
-          <div className=" md:mr-10 md:basis-4/5  flex flex-row  transition duration-500 relative w-full " style={{"transform" : "translate(-"+(page-1)*100+"%)"}}>  
-            <div className="min-w-full">
-              <div className="inline-grid grid-cols-5">
+          <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 `}>  
+            <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) => (
-
                   <div
-                    className="m-1 shrink-0 bg-gray-200 rounded shadow-md"
+                    className={`m-1 shrink-0 bg-gray-200 rounded shadow-md `}
                     key={index}>
                     <img
                       src={pic.url}
@@ -72,16 +109,15 @@ export default function Body() {
                     />
                     <p className="text-center text-xs">{pic.name}</p>
                   </div>
-
                 ))}
               </div>
             </div>
-            <div className="min-w-full">
-              <div className="inline-grid grid-rows-3 grid-cols-5">
+            <div key={Math.random()} className="min-w-full">
+              <div className={`inline-grid grid-cols-5 ${style}`}>
                 {Idpics.slice(offset2, offset2 + limit).map((pic, index: number) => (
 
                   <div
-                    className="m-1 shrink-0 bg-gray-200 rounded shadow-md"
+                    className={`m-1 shrink-0 bg-gray-200 rounded shadow-md `}
                     key={index}
                   >
                     <img
@@ -90,16 +126,15 @@ export default function Body() {
                     />
                     <p className="text-center text-xs">{pic.name}</p>
                   </div>
-
                 ))}
               </div>
             </div>
-            <div className="min-w-full">
-              <div className="inline-grid grid-rows-3 grid-cols-5">
+            <div key={Math.random()} className="min-w-full">
+              <div className={`inline-grid grid-cols-5 ${style}`}>
                 {Idpics.slice(offset3, offset3 + limit).map((pic, index: number) => (
 
                   <div
-                    className="m-1 shrink-0 bg-gray-200 rounded shadow-md"
+                    className={`m-1 shrink-0 bg-gray-200 rounded shadow-md `}
                     key={index}
                   >
                     <img
@@ -108,7 +143,6 @@ export default function Body() {
                     />
                     <p className="text-center text-xs">{pic.name}</p>
                   </div>
-
                 ))}
               </div>
             </div>

frontend/tailwind.config.js

+// /** @type {import('tailwindcss').Config} */
+// module.exports = {
+//   content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
+//   theme: {
+//     extend: {},
+//   plugins: [],
+// }};
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      keyframes: {
+        slidetoleft: {
+          "33.33%": { transform: "translateX(-100%)", color: "white" },
+          "66.66%, 100%": { transform: "translateX(-100%)" },
+        },
+        slidetoright: {
+          "33.33%": { transform: "translateX(0%)", color: "white" },
+          "66.66%, 100%": { transform: "translateX(0%)" },
+        },
+      },
+      animation: {
+        slidetoleft: "slidetoleft 3s linear forwards",
+        slidetoright: "slidetoright 3s linear forwards",
+      },
+    },
+  },
   plugins: [],
-}};
+};
\ No newline at end of file