Commit f4ab4299 authored by 백승민's avatar 백승민
Browse files

slide paginaiton 수정

parent de75b80a
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 right = () => {
if (firstRightClick.current) {
firstLeftClick.current = true;
firstRightClick.current = false;
} else {
setPage(page + 1)
}
};
// const leftClick = () => {
// if (firstLeftClick.current) {
// firstLeftClick.current = false;
// firstRightClick.current = true;
// } else {
// setPage(page - 1)
// }
// };
return (
<div>
<button onClick={left} disabled={page === 1}>
&lt;{page}</button>
// const rightClick = () => {
// if (firstRightClick.current) {
// firstLeftClick.current = true;
// firstRightClick.current = false;
// } else {
// setPage(page + 1)
// }
// };
// };
{/* {Array(numPages)
.fill(1)
.map((_, i) => (
<button key={i + 1} onClick={() => setPage(i + 1)}>
{i + 1}
</button>
))} */}
// return (
// <div>
// <button onClick={leftClick} disabled={page === 1}>
// &lt;{page}
// </button>
// <button onClick={rightClick} disabled={page === numPages}>
// &gt;
// </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
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>
);
};
......@@ -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,9 +11,14 @@ 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(() => {
......@@ -37,6 +42,30 @@ export default function Body() {
});
};
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");
......@@ -49,6 +78,8 @@ export default function Body() {
);
});
const numPages = Math.ceil(Idpics.length / 15);
return (
<div className="flex flex-col px-1 py-1">
<Theme handleClick={themeHandleClick} />
......@@ -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>
......
// /** @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
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