Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
travel
Commits
8029729e
Commit
8029729e
authored
Jul 11, 2022
by
백승민
Browse files
slide pagination almost done
parent
ca4f7ed1
Changes
4
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
}
>
<
<
{
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
}
>
<
{
selected
}
</
button
>
<
button
onClick
=
{
next
}
disabled
=
{
selected
===
3
}
>
>
</
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
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment