Commit 04e9c449 authored by 백승민's avatar 백승민
Browse files

admin slideimg

parent ae80a05b
......@@ -2,7 +2,7 @@ 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() {
......@@ -10,7 +10,7 @@ export default function Admin() {
async function imgsData() {
const imgs = await mainimgApi.getmainimg();
console.log("ㅑㅡㅎ", imgs)
// console.log("ㅑㅡㅎ", imgs)
setGetimgs(imgs)
};
......@@ -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,7 +58,26 @@ 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 (
......@@ -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>
);
};
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>
);
};
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment