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

1

parent c939c851
import React from "react";
import React, { useRef } from "react";
type num = {
total: number,
page: number,
setPage : Function
setPage: Function
}
export function PaginationLeft ({total, page,setPage} : num) {
export function Pagination({ total, page, setPage }: num) {
const numPages = Math.ceil(total / 15);
const firstLeftClick = useRef(true);
const firstRightClick = useRef(true);
const left =()=>{
const left = () => {
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)
}
};
return (
......@@ -25,21 +41,34 @@ export function PaginationLeft ({total, page,setPage} : num) {
{i + 1}
</button>
))} */}
</div>
);
};
export function PaginationRight ({total, page,setPage} : num) {
const numPages = Math.ceil(total / 15);
const right =()=>{
setPage(page + 1)
};
return (
<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);
// const firstRightClick = useRef(true);
// const right = () => {
// if (firstRightClick.current) {
// firstLeftClick.current = true;
// firstRightClick.current = false;
// } else {
// setPage(page + 1)
// }
// };
// return (
// <div>
// <button onClick={right} disabled={page === numPages}>
// &gt;
// </button>
// </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 { PaginationLeft, PaginationRight } from "../Pages/picpagination";
import { Pagination} from "../Pages/picpagination";
const initSearchParams = { theme: "", city: "" };
......@@ -14,7 +14,6 @@ export default function Body() {
const offset1 = (page - 1) * limit;
const offset2 = page * limit;
const offset3 = (page + 1) * limit;
const renderRef = useRef() as React.MutableRefObject<HTMLDivElement>
let getPics = getPicure();
useEffect(() => {
......@@ -22,11 +21,6 @@ export default function Body() {
setSearchParams(searchParams)
}, []);
useEffect(() => {
renderRef.current.style.transition = "all 0.5s ease-in-out"
renderRef.current.style.transform = `translateX(-${page - 1}00%)`
}, [page]);
const themeHandleClick = (event: MouseEvent<HTMLButtonElement>) => {
console.log(`theme id= ${event.currentTarget.id}`);
setSearchParams({
......@@ -55,14 +49,6 @@ export default function Body() {
);
});
// const pre = () => {
// setSelected(selected - 1)
// };
// const next = () => {
// setSelected(selected + 1)
// };
return (
<div className="flex flex-col px-1 py-1">
<Theme handleClick={themeHandleClick} />
......@@ -71,10 +57,8 @@ export default function Body() {
<Citylist handleClick={cityHandleClick} />
</div>
<div className="flex flex-col overflow-hidden">
<PaginationLeft total={Idpics.length} page={page} setPage={setPage} />
<PaginationRight total={Idpics.length} page={page} setPage={setPage} />
<div className=" md:mr-10 md:basis-4/5 flex flex-row relative w-full " ref={renderRef}>
{/* <div className=" md:mr-10 md:basis-4/5 flex flex-row transition duration-500 relative w-full " style={{"transform" : "translate(-"+(page-1)*100+"%)"}}> */}
<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">
{Idpics.slice(offset1, offset1 + limit).map((pic, index: number) => (
......
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