Skip to content

GitLab

Commit 1df94f68 authored by 백승민's avatar 백승민
Browse files

slide 편집 전 pagination done

parent f4ab4299
Hide whitespace changes
Inline Side-by-side
frontend/src/Pages/myslide.tsx 0 → 100644
View file @ 1df94f68
import React, { useRef, useState } from "react";
type num = {
total: number,
page: number,
setPage: Function,
style: string,
setStyle: Function,
// slides : any[],
}
export function MySlide({ total, page, setPage, style, setStyle}: num) {
const numPages = Math.ceil(total / 15);
const firstLeftClick = useRef(true);
const firstRightClick = useRef(true);
const slide = useRef(1);
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");
};
return (
<div>
<button onClick={leftClick} disabled={slide.current === 1}>
&lt;{slide.current}
</button>
<button onClick={rightClick} disabled={slide.current === numPages}>
&gt;
</button>
</div>
);
};
{/* {Array(numPages)
.fill(1)
.map((_, i) => (
<button key={i + 1} onClick={() => setPage(i + 1)}>
{i + 1}
</button>
))} */}
\ No newline at end of file
frontend/src/Pages/picpagination.tsx deleted 100644 → 0
View file @ f4ab4299
// import React, { useRef, useState} from "react";
// 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 leftClick = () => {
// if (firstLeftClick.current) {
// firstLeftClick.current = false;
// firstRightClick.current = true;
// } else {
// setPage(page - 1)
// }
// };
// const rightClick = () => {
// if (firstRightClick.current) {
// firstLeftClick.current = true;
// firstRightClick.current = false;
// } else {
// setPage(page + 1)
// }
// };
// };
// return (
// <div>
// <button onClick={leftClick} disabled={page === 1}>
// &lt;{page}
// </button>
// <button onClick={rightClick} 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>
// );
// };
{/* {Array(numPages)
.fill(1)
.map((_, i) => (
<button key={i + 1} onClick={() => setPage(i + 1)}>
{i + 1}
</button>
))} */}
\ No newline at end of file
frontend/src/home/body.tsx
View file @ 1df94f68
......@@ -3,24 +3,23 @@ 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 { MySlide } from "../Pages/myslide";
const initSearchParams = { theme: "", city: "" };
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(() => {
console.log(searchParams.get("theme"), searchParams.get("city"));
setSearchParams(searchParams)
......@@ -41,46 +40,44 @@ export default function Body() {
city: event.currentTarget.id,
});
};
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}`);
//picture insert
let themechange = searchParams.get("theme");
let citylistchange = searchParams.get("city");
const Idpics = getPics.filter((p) => {
return (
(p.themeid == themechange && p.cityid == citylistchange) ||
(p.themeid == themechange && citylistchange == "") ||
(themechange == "" && p.cityid == citylistchange) ||
(themechange == "" && citylistchange == "")
);
});
);
});
const numPages = Math.ceil(Idpics.length / 15);
return (
const numPages = Math.ceil(Idpics.length / 15);
console.log(page)
// const slides = []
// for (let i = 0; i < numPages + 1; i++) {
// const k =[
// <div key={Math.random()} className="min-w-full">
// <div className={`inline-grid grid-cols-5 ${style}`}>
// {Idpics.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.name}</p>
// </div>
// ))}
// </div>
// </div>]
// slides.push(k);
// }
return (
<div className="flex flex-col px-1 py-1">
<Theme handleClick={themeHandleClick} />
<div className="flex flex-col md:flex-row py-10 ">
......@@ -88,15 +85,8 @@ export default function Body() {
<Citylist handleClick={cityHandleClick} />
</div>
<div className="flex flex-col overflow-hidden">
<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 `}>
<MySlide total={Idpics.length} page={page} setPage={setPage} style={style} setStyle={setStyle}/>
<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) => (
......
frontend/tailwind.config.js
View file @ 1df94f68
......@@ -21,8 +21,8 @@ module.exports = {
},
},
animation: {
slidetoleft: "slidetoleft 3s linear forwards",
slidetoright: "slidetoright 3s linear forwards",
slidetoleft: "slidetoleft 2s linear forwards",
slidetoright: "slidetoright 2s linear forwards",
},
},
},
......
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