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

admin slideimg

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