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