admin slideimg

frontend/src/auth/admin.tsx

@@ -2,18 +2,18 @@ import React, { FormEvent, useEffect, useState } from "react";
 import { mainimgApi } from "../apis";
 import { catchErrors } from "../helpers";
 import { MainimgType } from "../types";
-
+import {MySlide}  from "./adminslide";
 
 export default function Admin() {
 
     const [getimgs, setGetimgs] = useState<MainimgType[]>([]);
-    
+
     async function imgsData() {
         const imgs = await mainimgApi.getmainimg();
-        console.log("ㅑㅡㅎ", imgs)
+        // console.log("ㅑㅡㅎ", imgs)
         setGetimgs(imgs)
     };
-    
+
     useEffect(() => {
         imgsData();
     }, []);
@@ -37,7 +37,7 @@ export default function Admin() {
         setAddimg({ ...addimg, [name]: value });
     }
 
-    console.log("asdafsdfs", getimgs)
+    // console.log("asdafsdfs", getimgs)
     async function handleSubmit(event: FormEvent) {
         event.preventDefault();
         try {
@@ -58,9 +58,28 @@ export default function Admin() {
 
     if (success) {
         alert("img 추가되었습니다");
-
     }
     
+    let limit = 15;
+    const numPages = Math.ceil(getimgs.length / 15);
+
+    const slides = []
+    for (let i = 0; i < numPages; i++) {
+        const k = [
+            getimgs.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.title}</p>
+                </div>
+            ))]
+        slides.push(k);
+    }
+
     return (
         <div>
             <form
@@ -122,13 +141,11 @@ export default function Admin() {
                     </div>
                 </div>
             </form>
-            {getimgs.map((img, index: number) => (
-                <div key = {index}>
-                    
-                <img src={img.url} />
-                </div>)
-            )}
-
+            <div className="flex flex-col">
+                <MySlide key={Math.random()}
+                    slides={slides}
+                />
+            </div>
         </div>
     );
 };

frontend/src/auth/adminslide.tsx

+import React, { useRef, useState } from "react";
+
+type num = {
+    slides: any[],
+}
+
+export function MySlide({ slides}: num) {
+
+    const firstLeftClick = useRef(true);
+    const firstRightClick = useRef(true);
+    const [page, setPage] = useState(1);
+    const [slide,setSlide] = useState(1);
+    // const slide = useRef(1);
+    const [style, setStyle] = useState("");
+
+    const leftClick = () => {
+        if (firstLeftClick.current) {
+            firstLeftClick.current = false;
+            firstRightClick.current = true;
+        } else {
+            setPage(page - 1)
+        }
+        // slide.current -= 1;
+        setSlide(slide-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;
+        setSlide(slide+1)
+        setStyle("animate-slidetoleft");
+    };
+
+    return (
+        <div className="flex flex-row justify-center items-center ">
+            <button className="mx-3 w-6 h-6 rounded-full hover:bg-sky-100 hover:text-gray-400"onClick={leftClick} disabled={slide === 1}>
+                &lt;
+                {/* {slide.current} */}
+            </button>
+            <div
+                className={`m-3 md:m-5 md:basis-4/5 flex flex-row relative w-full overflow-hidden`}
+            >
+                {slides.slice(page - 1, page + 2).map((slide) => (
+                    <div key={Math.random()} className="min-w-full"
+                    >
+                        <div key={slide} className={`inline-grid grid-cols-5 ${style}`}>
+                            {slide}
+                        </div>
+                    </div>
+                ))}
+            </div>
+            <button className="mx-3 w-6 h-6 rounded-full hover:bg-sky-100 hover:text-gray-400"onClick={rightClick} disabled={slide === slides.length}>
+                &gt;
+            </button>
+        </div>
+
+
+    );
+};