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
ab7595dd
Commit
ab7595dd
authored
Jul 11, 2022
by
백승민
Browse files
slide pagination (not done)
parent
18cf7518
Changes
3
Hide whitespace changes
Inline
Side-by-side
frontend/src/Pages/picpagination.tsx
View file @
ab7595dd
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
default
function
Pagination
({
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
)
{
const
numPages
=
3
return
(
return
(
<
div
>
<
div
>
<
button
onClick
=
{
()
=>
setPage
(
page
-
1
)
}
disabled
=
{
page
===
1
}
>
<
button
onClick
=
{
()
=>
setPage
(
page
-
1
)
}
disabled
=
{
page
===
1
}
>
...
@@ -22,7 +23,16 @@ export default function Pagination ({total, page, setPage} : num) {
...
@@ -22,7 +23,16 @@ export default function Pagination ({total, page, setPage} : num) {
{i + 1}
{i + 1}
</button>
</button>
))} */
}
))} */
}
</
div
>
);
};
// export function PaginationRight ({total, page, setPage} : num) {
// const numPages = Math.ceil(total / 15);
export
function
PaginationRight
({
page
,
setPage
}
:
num
)
{
const
numPages
=
3
;
return
(
<
div
>
<
button
onClick
=
{
()
=>
setPage
(
page
+
1
)
}
disabled
=
{
page
===
numPages
}
>
<
button
onClick
=
{
()
=>
setPage
(
page
+
1
)
}
disabled
=
{
page
===
numPages
}
>
>
>
</
button
>
</
button
>
...
...
frontend/src/home/body.tsx
View file @
ab7595dd
...
@@ -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
Pagination
from
"
../Pages/picpagination
"
;
import
{
Pagination
Left
,
PaginationRight
}
from
"
../Pages/picpagination
"
;
const
initSearchParams
=
{
theme
:
""
,
city
:
""
};
const
initSearchParams
=
{
theme
:
""
,
city
:
""
};
...
@@ -12,7 +12,7 @@ export default function Body() {
...
@@ -12,7 +12,7 @@ export default function Body() {
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
offset
=
(
page
-
1
)
*
limit
;
const
[
selected
,
setSelected
]
=
useState
(
1
);
let
getPics
=
getPicure
();
let
getPics
=
getPicure
();
useEffect
(()
=>
{
useEffect
(()
=>
{
...
@@ -48,25 +48,35 @@ export default function Body() {
...
@@ -48,25 +48,35 @@ export default function Body() {
);
);
});
});
const
pre
=
()
=>
{
setSelected
(
selected
-
1
)
};
const
next
=
()
=>
{
setSelected
(
selected
+
1
)
};
return
(
return
(
<
div
className
=
"flex flex-col px-1 py-1"
>
<
div
className
=
"flex flex-col px-1 py-1"
>
<
Theme
handleClick
=
{
themeHandleClick
}
/>
<
Theme
handleClick
=
{
themeHandleClick
}
/>
<
div
className
=
"flex flex-col md:flex-row py-10 "
>
<
div
className
=
"flex flex-col md:flex-row py-10 "
>
<
Citylist
handleClick
=
{
cityHandleClick
}
/>
<
div
className
=
"w-50"
>
<
div
className
=
" md:mr-10 md:basis-4/5 grid grid-rows-3 grid-cols-5"
>
<
Citylist
handleClick
=
{
cityHandleClick
}
/>
{
Idpics
.
slice
(
offset
,
offset
+
limit
).
map
((
pic
,
index
:
number
)
=>
(
</
div
>
<
div
<
div
className
=
"flex flex-col"
>
className
=
"m-1 shrink-0 bg-gray-200 rounded overflow-hidden shadow-md"
<
div
>
key
=
{
index
}
<
button
onClick
=
{
pre
}
disabled
=
{
selected
===
1
}
>
<
{
selected
}
</
button
>
>
<
button
onClick
=
{
next
}
disabled
=
{
selected
===
3
}
>
>
</
button
>
<
img
</
div
>
src
=
{
pic
.
url
}
<
div
>
className
=
"w-full h-10 md:h-20 object-center"
<
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
+
'
%)
'
}
}
>
<
p
className
=
"text-center text-xs"
>
{
pic
.
name
}
</
p
>
<
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
>
</
div
>
</
div
>
))
}
</
div
>
<
Pagination
total
=
{
Idpics
.
length
}
page
=
{
page
}
setPage
=
{
setPage
}
/>
</
div
>
</
div
>
</
div
>
</
div
>
...
@@ -75,3 +85,18 @@ export default function Body() {
...
@@ -75,3 +85,18 @@ export default function Body() {
// 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/tailwind.config.js
View file @
ab7595dd
...
@@ -5,15 +5,18 @@ module.exports = {
...
@@ -5,15 +5,18 @@ module.exports = {
extend
:
{
extend
:
{
keyframes
:
{
keyframes
:
{
wave
:
{
wave
:
{
'
0%
'
:
{
left
:
'
100
'
},
'
0%
'
:
{
left
:
'
100
%
'
},
'
4%
'
:
{
left
:
'
0
'
},
'
4%
'
:
{
left
:
'
0
'
},
'
33.33%
'
:
{
left
:
'
0
'
},
'
33.33%
'
:
{
left
:
'
0
'
},
'
37.33%
'
:
{
left
:
'
-100
'
},
'
37.33%
'
:
{
left
:
'
-100%
'
},
'
100%
'
:
{
left
:
'
-100
'
},
'
66.66%
'
:
{
left
:
'
-100%
'
},
'
70.66%
'
:
{
left
:
'
-200%
'
},
'
99.99%
'
:
{
left
:
'
-200%
'
},
'
100%
'
:
{
left
:
'
0%
'
},
}
}
},
},
animation
:
{
animation
:
{
wave
:
'
wave 1
0
s ease-in-out
'
wave
:
'
wave 1
2
s ease-in-out
'
}
}
},
},
},
},
...
...
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