Skip to content

GitLab

Commit 8029729e authored by 백승민's avatar 백승민
Browse files

slide pagination almost done

parent ca4f7ed1
Hide whitespace changes
Inline Side-by-side
frontend/src/Pages/pic.ts
View file @ 8029729e
......@@ -4,109 +4,433 @@ let url = [
themeid:"surfing",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "종로 서핑"
name: "1.종로 서핑"
},
{
themeid: "surfing",
cityid: "Busan",
url: "https://cdn.crowdpic.net/detail-thumb/thumb_d_1F5AF0BCBB2F43EF3C5B79DA763D3CFB.jpg",
name: "해운대 서핑"
name: "1.해운대 서핑"
},
{
themeid: "surfing",
cityid: "Daegoo",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "대구 서핑"
name: "1.대구 서핑"
},
{
themeid: "activity",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2019/05/17/13/36/umbrella-4209724__340.jpg",
name: "서대문 번지점프"
name: "1.서대문 번지점프"
},
{
themeid: "sking",
cityid: "Kwangjoo",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "광주 스키"
name: "1.광주 스키"
},
{
themeid: "camping",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2021/11/16/11/13/man-6800728__340.jpg",
name: "강남 캠핑"
name: "1.강남 캠핑"
},
{
themeid: "boat",
cityid: "Sejong",
url: "https://cdn.pixabay.com/photo/2018/02/19/22/21/water-3166432__340.jpg",
name: "조치원 보트"
name: "1.조치원 보트"
},
{
themeid: "activity",
cityid: "Sejong",
url: "https://media.istockphoto.com/photos/vertical-woman-is-wraped-in-bungee-jumping-picture-id1391927451?b=1&k=20&m=1391927451&s=170667a&w=0&h=haNtVpNjhj58PsjRi8N_RbyYfxZsFfKdb3NJi7NPdDI=",
name: "번지점프"
name: "1.번지점프"
},
{
themeid: "activity",
cityid: "Busan",
url:"https://cdn.pixabay.com/photo/2015/04/07/07/51/railroad-tracks-710614__480.jpg",
name: "레일바이크"
name: "1.레일바이크"
},
{
themeid: "activity",
cityid: "Daegoo",
url: "https://cdn.pixabay.com/photo/2017/06/17/10/55/hot-air-balloon-2411851__340.jpg",
name: "열기구"
name: "1.열기구"
},
{
themeid: "activity",
cityid: "Jeju",
url: "https://cdn.pixabay.com/photo/2012/10/10/05/07/combat-diver-60545__340.jpg",
name: "스카이다이빙"
name: "1.스카이다이빙"
},
{
themeid: "activity",
cityid: "Incheon",
url: "https://cdn.pixabay.com/photo/2015/03/11/15/19/divers-668777__480.jpg",
name: "인천 스쿠버다이빙"
name: "1.인천 스쿠버다이빙"
},
{
themeid: "activity",
cityid: "Daejeon",
url: "https://media.istockphoto.com/photos/playing-water-skiing-or-wakeboard-picture-id1021580500?b=1&k=20&m=1021580500&s=170667a&w=0&h=dL-mrlLeoQGrNBhbyAS-rN0TcpFg9s41D3WVKUoZgNo=",
name: "수상스키"
name: "1.수상스키"
},
{
themeid: "desert",
cityid: "Incheon",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "인천 사막"
name: "1.인천 사막"
},
{
themeid: "activity",
cityid: "Woolsan",
url: "https://cdn.pixabay.com/photo/2019/05/11/20/44/free-climbing-4196577__480.jpg",
name: "클라이밍"
name: "1.클라이밍"
},
{
themeid: "zoo",
cityid: "Daejeon",
url: "https://cdn.pixabay.com/photo/2020/06/10/18/45/africa-5283871__340.jpg",
name: "대전 동물원"
name: "2.대전 동물원"
},
{
themeid: "activity",
cityid: "Dokdo",
url: "https://cdn.pixabay.com/photo/2020/04/19/08/03/adventure-5062314__340.jpg",
name: "산"
name: "2.산"
},
{
themeid: "cave",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2016/08/23/16/34/italy-1614931__340.jpg",
name: "서울 동굴"
name: "2.서울 동굴"
},
{
themeid:"surfing",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "2.종로 서핑"
},
{
themeid: "surfing",
cityid: "Busan",
url: "https://cdn.crowdpic.net/detail-thumb/thumb_d_1F5AF0BCBB2F43EF3C5B79DA763D3CFB.jpg",
name: "2.해운대 서핑"
},
{
themeid: "surfing",
cityid: "Daegoo",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "2.대구 서핑"
},
{
themeid: "activity",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2019/05/17/13/36/umbrella-4209724__340.jpg",
name: "2.서대문 번지점프"
},
{
themeid: "sking",
cityid: "Kwangjoo",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "2.광주 스키"
},
{
themeid: "camping",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2021/11/16/11/13/man-6800728__340.jpg",
name: "2.강남 캠핑"
},
{
themeid: "boat",
cityid: "Sejong",
url: "https://cdn.pixabay.com/photo/2018/02/19/22/21/water-3166432__340.jpg",
name: "2.조치원 보트"
},
{
themeid: "activity",
cityid: "Sejong",
url: "https://media.istockphoto.com/photos/vertical-woman-is-wraped-in-bungee-jumping-picture-id1391927451?b=1&k=20&m=1391927451&s=170667a&w=0&h=haNtVpNjhj58PsjRi8N_RbyYfxZsFfKdb3NJi7NPdDI=",
name: "2.번지점프"
},
{
themeid: "activity",
cityid: "Busan",
url:"https://cdn.pixabay.com/photo/2015/04/07/07/51/railroad-tracks-710614__480.jpg",
name: "2.레일바이크"
},
{
themeid: "activity",
cityid: "Daegoo",
url: "https://cdn.pixabay.com/photo/2017/06/17/10/55/hot-air-balloon-2411851__340.jpg",
name: "2.열기구"
},
{
themeid: "activity",
cityid: "Jeju",
url: "https://cdn.pixabay.com/photo/2012/10/10/05/07/combat-diver-60545__340.jpg",
name: "2.스카이다이빙"
},
{
themeid: "activity",
cityid: "Incheon",
url: "https://cdn.pixabay.com/photo/2015/03/11/15/19/divers-668777__480.jpg",
name: "2.인천 스쿠버다이빙"
},
{
themeid: "activity",
cityid: "Daejeon",
url: "https://media.istockphoto.com/photos/playing-water-skiing-or-wakeboard-picture-id1021580500?b=1&k=20&m=1021580500&s=170667a&w=0&h=dL-mrlLeoQGrNBhbyAS-rN0TcpFg9s41D3WVKUoZgNo=",
name: "3.수상스키"
},
{
themeid: "desert",
cityid: "Incheon",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "3.인천 사막"
},
{
themeid: "activity",
cityid: "Woolsan",
url: "https://cdn.pixabay.com/photo/2019/05/11/20/44/free-climbing-4196577__480.jpg",
name: "3.클라이밍"
},
{
themeid: "zoo",
cityid: "Daejeon",
url: "https://cdn.pixabay.com/photo/2020/06/10/18/45/africa-5283871__340.jpg",
name: "3.대전 동물원"
},
{
themeid: "activity",
cityid: "Dokdo",
url: "https://cdn.pixabay.com/photo/2020/04/19/08/03/adventure-5062314__340.jpg",
name: "3.산"
},
{
themeid: "cave",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2016/08/23/16/34/italy-1614931__340.jpg",
name: "3.서울 동굴"
},
{
themeid:"surfing",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "3.종로 서핑"
},
{
themeid: "surfing",
cityid: "Busan",
url: "https://cdn.crowdpic.net/detail-thumb/thumb_d_1F5AF0BCBB2F43EF3C5B79DA763D3CFB.jpg",
name: "3.해운대 서핑"
},
{
themeid: "surfing",
cityid: "Daegoo",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "3.대구 서핑"
},
{
themeid: "activity",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2019/05/17/13/36/umbrella-4209724__340.jpg",
name: "3.서대문 번지점프"
},
{
themeid: "sking",
cityid: "Kwangjoo",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "3.광주 스키"
},
{
themeid: "camping",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2021/11/16/11/13/man-6800728__340.jpg",
name: "3.강남 캠핑"
},
{
themeid: "boat",
cityid: "Sejong",
url: "https://cdn.pixabay.com/photo/2018/02/19/22/21/water-3166432__340.jpg",
name: "3.조치원 보트"
},
{
themeid: "activity",
cityid: "Sejong",
url: "https://media.istockphoto.com/photos/vertical-woman-is-wraped-in-bungee-jumping-picture-id1391927451?b=1&k=20&m=1391927451&s=170667a&w=0&h=haNtVpNjhj58PsjRi8N_RbyYfxZsFfKdb3NJi7NPdDI=",
name: "3.번지점프"
},
{
themeid: "activity",
cityid: "Busan",
url:"https://cdn.pixabay.com/photo/2015/04/07/07/51/railroad-tracks-710614__480.jpg",
name: "3.레일바이크"
},
{
themeid: "activity",
cityid: "Daegoo",
url: "https://cdn.pixabay.com/photo/2017/06/17/10/55/hot-air-balloon-2411851__340.jpg",
name: "4.열기구"
},
{
themeid: "activity",
cityid: "Jeju",
url: "https://cdn.pixabay.com/photo/2012/10/10/05/07/combat-diver-60545__340.jpg",
name: "4.스카이다이빙"
},
{
themeid: "activity",
cityid: "Incheon",
url: "https://cdn.pixabay.com/photo/2015/03/11/15/19/divers-668777__480.jpg",
name: "4.인천 스쿠버다이빙"
},
{
themeid: "activity",
cityid: "Daejeon",
url: "https://media.istockphoto.com/photos/playing-water-skiing-or-wakeboard-picture-id1021580500?b=1&k=20&m=1021580500&s=170667a&w=0&h=dL-mrlLeoQGrNBhbyAS-rN0TcpFg9s41D3WVKUoZgNo=",
name: "4.수상스키"
},
{
themeid: "desert",
cityid: "Incheon",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "4.인천 사막"
},
{
themeid: "activity",
cityid: "Woolsan",
url: "https://cdn.pixabay.com/photo/2019/05/11/20/44/free-climbing-4196577__480.jpg",
name: "4.클라이밍"
},
{
themeid: "zoo",
cityid: "Daejeon",
url: "https://cdn.pixabay.com/photo/2020/06/10/18/45/africa-5283871__340.jpg",
name: "4.대전 동물원"
},
{
themeid: "activity",
cityid: "Dokdo",
url: "https://cdn.pixabay.com/photo/2020/04/19/08/03/adventure-5062314__340.jpg",
name: "4.산"
},
{
themeid: "cave",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2016/08/23/16/34/italy-1614931__340.jpg",
name: "4.서울 동굴"
},
{
themeid:"surfing",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "4.종로 서핑"
},
{
themeid: "surfing",
cityid: "Busan",
url: "https://cdn.crowdpic.net/detail-thumb/thumb_d_1F5AF0BCBB2F43EF3C5B79DA763D3CFB.jpg",
name: "4.해운대 서핑"
},
{
themeid: "surfing",
cityid: "Daegoo",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "4.대구 서핑"
},
{
themeid: "activity",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2019/05/17/13/36/umbrella-4209724__340.jpg",
name: "4.서대문 번지점프"
},
{
themeid: "sking",
cityid: "Kwangjoo",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "4.광주 스키"
},
{
themeid: "camping",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2021/11/16/11/13/man-6800728__340.jpg",
name: "4.강남 캠핑"
},
{
themeid: "boat",
cityid: "Sejong",
url: "https://cdn.pixabay.com/photo/2018/02/19/22/21/water-3166432__340.jpg",
name: "5.조치원 보트"
},
{
themeid: "activity",
cityid: "Sejong",
url: "https://media.istockphoto.com/photos/vertical-woman-is-wraped-in-bungee-jumping-picture-id1391927451?b=1&k=20&m=1391927451&s=170667a&w=0&h=haNtVpNjhj58PsjRi8N_RbyYfxZsFfKdb3NJi7NPdDI=",
name: "5.번지점프"
},
{
themeid: "activity",
cityid: "Busan",
url:"https://cdn.pixabay.com/photo/2015/04/07/07/51/railroad-tracks-710614__480.jpg",
name: "5.레일바이크"
},
{
themeid: "activity",
cityid: "Daegoo",
url: "https://cdn.pixabay.com/photo/2017/06/17/10/55/hot-air-balloon-2411851__340.jpg",
name: "5.열기구"
},
{
themeid: "activity",
cityid: "Jeju",
url: "https://cdn.pixabay.com/photo/2012/10/10/05/07/combat-diver-60545__340.jpg",
name: "5.스카이다이빙"
},
{
themeid: "activity",
cityid: "Incheon",
url: "https://cdn.pixabay.com/photo/2015/03/11/15/19/divers-668777__480.jpg",
name: "5.인천 스쿠버다이빙"
},
{
themeid: "activity",
cityid: "Daejeon",
url: "https://media.istockphoto.com/photos/playing-water-skiing-or-wakeboard-picture-id1021580500?b=1&k=20&m=1021580500&s=170667a&w=0&h=dL-mrlLeoQGrNBhbyAS-rN0TcpFg9s41D3WVKUoZgNo=",
name: "5.수상스키"
},
{
themeid: "desert",
cityid: "Incheon",
url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
name: "5.인천 사막"
},
{
themeid: "activity",
cityid: "Woolsan",
url: "https://cdn.pixabay.com/photo/2019/05/11/20/44/free-climbing-4196577__480.jpg",
name: "5.클라이밍"
},
{
themeid: "zoo",
cityid: "Daejeon",
url: "https://cdn.pixabay.com/photo/2020/06/10/18/45/africa-5283871__340.jpg",
name: "5.대전 동물원"
},
{
themeid: "activity",
cityid: "Dokdo",
url: "https://cdn.pixabay.com/photo/2020/04/19/08/03/adventure-5062314__340.jpg",
name: "5.산"
},
{
themeid: "cave",
cityid: "Seoul",
url: "https://cdn.pixabay.com/photo/2016/08/23/16/34/italy-1614931__340.jpg",
name: "5.서울 동굴"
},
];
......
frontend/src/Pages/picpagination.tsx
View file @ 8029729e
import React from "react";
type num = {
// total: number,
total: number,
page: number,
setPage: Function
}
// export function PaginationLeft ({total, page, setPage} : num) {
// const numPages = Math.ceil(total / 15);
export function PaginationLeft ({ page, setPage} : num) {
const numPages = 3
export function PaginationLeft ({total, page, setPage} : num) {
const numPages = Math.ceil(total / 15);
// export function PaginationLeft ({ page, setPage} : num) {
// const numPages = 3
return (
<div>
<button onClick={() => setPage(page - 1)} disabled={page === 1}>
&lt;
&lt;{page}
</button>
{/* {Array(numPages)
......@@ -26,10 +26,10 @@ export function PaginationLeft ({ page, setPage} : num) {
</div>
);
};
// export function PaginationRight ({total, page, setPage} : num) {
// const numPages = Math.ceil(total / 15);
export function PaginationRight ({ page, setPage} : num) {
const numPages = 3;
export function PaginationRight ({total, page, setPage} : num) {
const numPages = Math.ceil(total / 15);
// export function PaginationRight ({ page, setPage} : num) {
// const numPages = 3;
return (
<div>
......
frontend/src/home/body.tsx
View file @ 8029729e
......@@ -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 { PaginationLeft, PaginationRight } from "../Pages/picpagination";
const initSearchParams = { theme: "", city: "" };
......@@ -11,13 +11,15 @@ export default function Body() {
let limit = 15;
const [searchParams, setSearchParams] = useSearchParams(initSearchParams);
const [page, setPage] = useState(1);
const offset = (page - 1) * limit;
const [selected, setSelected] = useState(1);
const offset1 = (page - 1) * limit;
const offset2 = page * limit;
const offset3 = (page + 1) * limit;
// const [selected, setSelected] = useState(1);
let getPics = getPicure();
useEffect(() => {
console.log(searchParams.get("theme"), searchParams.get("city"));
// setSearchParams(searchParams)
setSearchParams(searchParams)
}, []);
const themeHandleClick = (event: MouseEvent<HTMLButtonElement>) => {
......@@ -48,13 +50,13 @@ export default function Body() {
);
});
const pre = () =>{
setSelected(selected -1)
};
// const pre = () => {
// setSelected(selected - 1)
// };
const next = () =>{
setSelected(selected + 1)
};
// const next = () => {
// setSelected(selected + 1)
// };
return (
<div className="flex flex-col px-1 py-1">
......@@ -63,40 +65,71 @@ export default function Body() {
<div className="w-50">
<Citylist handleClick={cityHandleClick} />
</div>
<div className="flex flex-col">
<div className="flex flex-col overflow-hidden">
<div>
<button onClick={pre} disabled={selected === 1}>&lt;{selected}</button>
<button onClick={next} disabled={selected === 3}>&gt;</button>
<PaginationLeft total={Idpics.length} page={page} setPage={setPage} />
<PaginationRight total={Idpics.length} page={page} setPage={setPage} />
</div>
<div >
<div className=" md:mr-10 md:basis-4/5 overflow-hidden">
<div className=" flex flex-row transition duration-500 relative" style={{"transform": 'translate(-' + (selected-1)*100 + '%)'}}>
<img className = "border-2"src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"/>
<img className = "border-2"src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"/>
<img className = "border-2"src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"/>
<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(0,15).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>
<div className= "min-w-full">
<div className="inline-grid grid-rows-3 grid-cols-5">
{Idpics.slice(offset2, offset2+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>
<div className= "min-w-full">
<div className="inline-grid grid-rows-3 grid-cols-5">
{Idpics.slice(offset3, offset3+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>
</div>
</div>
</div>
<Outlet />
</div>
// Body Page
);
}
{/* <div className=" md:mr-10 md:basis-4/5 grid grid-rows-3 grid-cols-5"></div> */}
{/* {Idpics.slice(offset, offset + limit).map((pic, index: number) => (
<div
className="m-1 shrink-0 bg-gray-200 rounded overflow-hidden 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>
))} */}
{/* <PaginationLeft total={Idpics.length} page={page} setPage={setPage} /> */}
{/* <PaginationRight total={Idpics.length} page={page} setPage={setPage} /> */}
\ No newline at end of file
frontend/src/home/theme.tsx
View file @ 8029729e
......@@ -7,7 +7,7 @@ type ThemeProps = {
export default function Theme({handleClick}: ThemeProps) {
return (
<div className="overflow-x-scroll flex bg-emerald-400 rounded ">
<div className="overflow-x-auto flex bg-emerald-400 rounded ">
<button id={"surfing"} onClick={handleClick} className="shrink-0 px-5">서핑</button>
<button id={"activity"} onClick={handleClick} className="shrink-0 px-5">액티비티</button>
<button id={"camping"} onClick={handleClick} className="shrink-0 px-5 ">캠핑</button>
......
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