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
f4ab4299
Commit
f4ab4299
authored
Jul 13, 2022
by
백승민
Browse files
slide paginaiton 수정
parent
de75b80a
Changes
4
Hide whitespace changes
Inline
Side-by-side
frontend/src/Pages/picpagination.tsx
View file @
f4ab4299
import
React
,
{
useRef
}
from
"
react
"
;
//
import React, { useRef
, useState
} from "react";
type
num
=
{
total
:
number
,
page
:
number
,
setPage
:
Function
}
// 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
left
=
()
=>
{
if
(
firstLeftClick
.
current
)
{
firstLeftClick
.
current
=
false
;
firstRightClick
.
current
=
true
;
}
else
{
setPage
(
page
-
1
)
}
};
// 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
right
=
()
=>
{
if
(
firstRightClick
.
current
)
{
firstLeftClick
.
current
=
true
;
firstRightClick
.
current
=
false
;
}
else
{
setPage
(
page
+
1
)
}
};
// const rightClick = () => {
// if (firstRightClick.current) {
// firstLeftClick.current = true;
// firstRightClick.current = false;
// } else {
// setPage(page + 1)
// }
// };
// };
return
(
<
div
>
<
button
onClick
=
{
left
}
disabled
=
{
page
===
1
}
>
<
{
page
}
</
button
>
// return (
// <div>
// <button onClick={leftClick} disabled={page === 1}>
// <{page}
// </button>
// <button onClick={rightClick} disabled={page === numPages}>
// >
// </button>
{
/* {Array(numPages)
.fill(1)
.map((_, i) => (
<button key={i + 1} onClick={() => setPage(i + 1)}>
{i + 1}
</button>
))} */
}
// </div>
// );
// };
<
button
onClick
=
{
right
}
disabled
=
{
page
===
numPages
}
>
>
</
button
>
</
div
>
);
};
// export function PaginationRight({ total, page, setPage }: num) {
// const numPages = Math.ceil(total / 15);
// const firstLeftClick = useRef(true);
...
...
@@ -72,3 +68,11 @@ export function Pagination({ total, page, setPage }: num) {
// </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/slide.tsx
0 → 100644
View file @
f4ab4299
import
React
from
"
react
"
;
const
slides
=
[
"
Slide 0
"
,
"
Slide 1
"
,
"
Slide 2
"
,
"
Slide 3
"
,
"
Slide 4
"
,
"
Slide 5
"
,
"
Slide 6
"
,
"
Slide 7
"
,
];
export
const
Slide
=
()
=>
{
const
[
page
,
setPage
]
=
React
.
useState
(
1
);
const
[
style
,
setStyle
]
=
React
.
useState
(
""
);
const
firstRightClick
=
React
.
useRef
(
true
);
const
firstLeftClick
=
React
.
useRef
(
true
);
const
slide
=
React
.
useRef
(
0
);
const
handleLeftClick
=
()
=>
{
if
(
firstLeftClick
.
current
)
{
//왼쪽 버튼이 true이면
firstLeftClick
.
current
=
false
;
// 왼쪽 버튼은 false로
firstRightClick
.
current
=
true
;
// 오른쪽 버튼은 true로
}
else
{
setPage
(
page
-
1
);
// 왼쪽 버튼이 false이면 눌렸을때 page-1
}
slide
.
current
-=
1
;
setStyle
(
"
-translate-x-full animate-slidetoright
"
);
};
const
handleRightClick
=
()
=>
{
if
(
firstRightClick
.
current
)
{
firstLeftClick
.
current
=
true
;
firstRightClick
.
current
=
false
;
}
else
{
setPage
(
page
+
1
);
}
slide
.
current
+=
1
;
setStyle
(
"
animate-slidetoleft
"
);
};
console
.
log
(
`page:
${
page
}
`
);
console
.
log
(
`style:
${
style
}
`
);
console
.
log
(
slides
.
slice
(
page
-
1
,
page
+
2
));
console
.
log
(
`slide number:
${
slide
.
current
}
`
);
return
(
<
div
className
=
"flex flex-col items-center text-center"
>
<
h1
>
슬라이드
</
h1
>
<
div
className
=
"h-screen w-full"
>
<
div
key
=
{
Math
.
random
()
}
className
=
"flex overflow-x-hidden border-solid border-2 w-full h-1/2 text-8xl"
>
{
slides
.
slice
(
page
-
1
,
page
+
2
).
map
((
slide
)
=>
(
<
div
key
=
{
slide
}
className
=
{
`basis-full grow-0 shrink-0 border-8 bg-orange-300
${
style
}
`
}
>
{
slide
}
</
div
>
))
}
</
div
>
<
div
>
<
button
onClick
=
{
handleLeftClick
}
disabled
=
{
slide
.
current
<
1
}
className
=
"bg-gray-400 p-1 disabled:opacity-40"
>
<
</
button
>
<
button
onClick
=
{
handleRightClick
}
disabled
=
{
slide
.
current
>
slides
.
length
-
2
}
className
=
"bg-gray-400 p-1 disabled:opacity-40"
>
>
</
button
>
</
div
>
</
div
>
</
div
>
);
};
frontend/src/home/body.tsx
View file @
f4ab4299
...
...
@@ -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
{
Pagination
}
from
"
../Pages/picpagination
"
;
//
import { Pagination} from "../Pages/picpagination";
const
initSearchParams
=
{
theme
:
""
,
city
:
""
};
...
...
@@ -11,11 +11,16 @@ 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
();
let
getPics
=
getPicure
();
useEffect
(()
=>
{
console
.
log
(
searchParams
.
get
(
"
theme
"
),
searchParams
.
get
(
"
city
"
));
setSearchParams
(
searchParams
)
...
...
@@ -36,20 +41,46 @@ 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
}
`
);
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
==
""
)
);
});
);
});
return
(
const
numPages
=
Math
.
ceil
(
Idpics
.
length
/
15
);
return
(
<
div
className
=
"flex flex-col px-1 py-1"
>
<
Theme
handleClick
=
{
themeHandleClick
}
/>
<
div
className
=
"flex flex-col md:flex-row py-10 "
>
...
...
@@ -57,14 +88,20 @@ export default function Body() {
<
Citylist
handleClick
=
{
cityHandleClick
}
/>
</
div
>
<
div
className
=
"flex flex-col overflow-hidden"
>
<
Pagination
total
=
{
Idpics
.
length
}
page
=
{
page
}
setPage
=
{
setPage
}
/>
<
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"
>
<
div
>
<
button
onClick
=
{
leftClick
}
disabled
=
{
slide
.
current
===
1
}
>
<
{
slide
.
current
}
</
button
>
<
button
onClick
=
{
rightClick
}
disabled
=
{
slide
.
current
===
numPages
}
>
>
</
button
>
</
div
>
<
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
)
=>
(
<
div
className
=
"
m-1 shrink-0 bg-gray-200 rounded shadow-md
"
className
=
{
`
m-1 shrink-0 bg-gray-200 rounded shadow-md
`
}
key
=
{
index
}
>
<
img
src
=
{
pic
.
url
}
...
...
@@ -72,16 +109,15 @@ export default function Body() {
/>
<
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"
>
<
div
key
=
{
Math
.
random
()
}
className
=
"min-w-full"
>
<
div
className
=
{
`
inline-grid grid-
cols-5
${
style
}
`
}
>
{
Idpics
.
slice
(
offset2
,
offset2
+
limit
).
map
((
pic
,
index
:
number
)
=>
(
<
div
className
=
"
m-1 shrink-0 bg-gray-200 rounded shadow-md
"
className
=
{
`
m-1 shrink-0 bg-gray-200 rounded shadow-md
`
}
key
=
{
index
}
>
<
img
...
...
@@ -90,16 +126,15 @@ export default function Body() {
/>
<
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"
>
<
div
key
=
{
Math
.
random
()
}
className
=
"min-w-full"
>
<
div
className
=
{
`
inline-grid grid-
cols-5
${
style
}
`
}
>
{
Idpics
.
slice
(
offset3
,
offset3
+
limit
).
map
((
pic
,
index
:
number
)
=>
(
<
div
className
=
"
m-1 shrink-0 bg-gray-200 rounded shadow-md
"
className
=
{
`
m-1 shrink-0 bg-gray-200 rounded shadow-md
`
}
key
=
{
index
}
>
<
img
...
...
@@ -108,7 +143,6 @@ export default function Body() {
/>
<
p
className
=
"text-center text-xs"
>
{
pic
.
name
}
</
p
>
</
div
>
))
}
</
div
>
</
div
>
...
...
frontend/tailwind.config.js
View file @
f4ab4299
// /** @type {import('tailwindcss').Config} */
// module.exports = {
// content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
// theme: {
// extend: {},
// plugins: [],
// }};
/** @type {import('tailwindcss').Config} */
module
.
exports
=
{
content
:
[
"
./src/**/*.{html,js,jsx,ts,tsx}
"
],
theme
:
{
extend
:
{},
extend
:
{
keyframes
:
{
slidetoleft
:
{
"
33.33%
"
:
{
transform
:
"
translateX(-100%)
"
,
color
:
"
white
"
},
"
66.66%, 100%
"
:
{
transform
:
"
translateX(-100%)
"
},
},
slidetoright
:
{
"
33.33%
"
:
{
transform
:
"
translateX(0%)
"
,
color
:
"
white
"
},
"
66.66%, 100%
"
:
{
transform
:
"
translateX(0%)
"
},
},
},
animation
:
{
slidetoleft
:
"
slidetoleft 3s linear forwards
"
,
slidetoright
:
"
slidetoright 3s linear forwards
"
,
},
},
},
plugins
:
[],
}
};
};
\ No newline at end of file
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