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
04e9c449
Commit
04e9c449
authored
Jul 21, 2022
by
백승민
Browse files
admin slideimg
parent
ae80a05b
Changes
2
Hide whitespace changes
Inline
Side-by-side
frontend/src/auth/admin.tsx
View file @
04e9c449
...
@@ -2,18 +2,18 @@ import React, { FormEvent, useEffect, useState } from "react";
...
@@ -2,18 +2,18 @@ import React, { FormEvent, useEffect, useState } from "react";
import
{
mainimgApi
}
from
"
../apis
"
;
import
{
mainimgApi
}
from
"
../apis
"
;
import
{
catchErrors
}
from
"
../helpers
"
;
import
{
catchErrors
}
from
"
../helpers
"
;
import
{
MainimgType
}
from
"
../types
"
;
import
{
MainimgType
}
from
"
../types
"
;
import
{
MySlide
}
from
"
./adminslide
"
;
export
default
function
Admin
()
{
export
default
function
Admin
()
{
const
[
getimgs
,
setGetimgs
]
=
useState
<
MainimgType
[]
>
([]);
const
[
getimgs
,
setGetimgs
]
=
useState
<
MainimgType
[]
>
([]);
async
function
imgsData
()
{
async
function
imgsData
()
{
const
imgs
=
await
mainimgApi
.
getmainimg
();
const
imgs
=
await
mainimgApi
.
getmainimg
();
console
.
log
(
"
ㅑㅡㅎ
"
,
imgs
)
//
console.log("ㅑㅡㅎ", imgs)
setGetimgs
(
imgs
)
setGetimgs
(
imgs
)
};
};
useEffect
(()
=>
{
useEffect
(()
=>
{
imgsData
();
imgsData
();
},
[]);
},
[]);
...
@@ -37,7 +37,7 @@ export default function Admin() {
...
@@ -37,7 +37,7 @@ export default function Admin() {
setAddimg
({
...
addimg
,
[
name
]:
value
});
setAddimg
({
...
addimg
,
[
name
]:
value
});
}
}
console
.
log
(
"
asdafsdfs
"
,
getimgs
)
//
console.log("asdafsdfs", getimgs)
async
function
handleSubmit
(
event
:
FormEvent
)
{
async
function
handleSubmit
(
event
:
FormEvent
)
{
event
.
preventDefault
();
event
.
preventDefault
();
try
{
try
{
...
@@ -58,9 +58,28 @@ export default function Admin() {
...
@@ -58,9 +58,28 @@ export default function Admin() {
if
(
success
)
{
if
(
success
)
{
alert
(
"
img 추가되었습니다
"
);
alert
(
"
img 추가되었습니다
"
);
}
}
let
limit
=
15
;
const
numPages
=
Math
.
ceil
(
getimgs
.
length
/
15
);
const
slides
=
[]
for
(
let
i
=
0
;
i
<
numPages
;
i
++
)
{
const
k
=
[
getimgs
.
slice
(
i
*
limit
,
i
*
limit
+
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
.
title
}
</
p
>
</
div
>
))]
slides
.
push
(
k
);
}
return
(
return
(
<
div
>
<
div
>
<
form
<
form
...
@@ -122,13 +141,11 @@ export default function Admin() {
...
@@ -122,13 +141,11 @@ export default function Admin() {
</
div
>
</
div
>
</
div
>
</
div
>
</
form
>
</
form
>
{
getimgs
.
map
((
img
,
index
:
number
)
=>
(
<
div
className
=
"flex flex-col"
>
<
div
key
=
{
index
}
>
<
MySlide
key
=
{
Math
.
random
()
}
slides
=
{
slides
}
<
img
src
=
{
img
.
url
}
/>
/>
</
div
>)
</
div
>
)
}
</
div
>
</
div
>
);
);
};
};
frontend/src/auth/adminslide.tsx
0 → 100644
View file @
04e9c449
import
React
,
{
useRef
,
useState
}
from
"
react
"
;
type
num
=
{
slides
:
any
[],
}
export
function
MySlide
({
slides
}:
num
)
{
const
firstLeftClick
=
useRef
(
true
);
const
firstRightClick
=
useRef
(
true
);
const
[
page
,
setPage
]
=
useState
(
1
);
const
[
slide
,
setSlide
]
=
useState
(
1
);
// const slide = useRef(1);
const
[
style
,
setStyle
]
=
useState
(
""
);
const
leftClick
=
()
=>
{
if
(
firstLeftClick
.
current
)
{
firstLeftClick
.
current
=
false
;
firstRightClick
.
current
=
true
;
}
else
{
setPage
(
page
-
1
)
}
// slide.current -= 1;
setSlide
(
slide
-
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;
setSlide
(
slide
+
1
)
setStyle
(
"
animate-slidetoleft
"
);
};
return
(
<
div
className
=
"flex flex-row justify-center items-center "
>
<
button
className
=
"mx-3 w-6 h-6 rounded-full hover:bg-sky-100 hover:text-gray-400"
onClick
=
{
leftClick
}
disabled
=
{
slide
===
1
}
>
<
{
/* {slide.current} */
}
</
button
>
<
div
className
=
{
`m-3 md:m-5 md:basis-4/5 flex flex-row relative w-full overflow-hidden`
}
>
{
slides
.
slice
(
page
-
1
,
page
+
2
).
map
((
slide
)
=>
(
<
div
key
=
{
Math
.
random
()
}
className
=
"min-w-full"
>
<
div
key
=
{
slide
}
className
=
{
`inline-grid grid-cols-5
${
style
}
`
}
>
{
slide
}
</
div
>
</
div
>
))
}
</
div
>
<
button
className
=
"mx-3 w-6 h-6 rounded-full hover:bg-sky-100 hover:text-gray-400"
onClick
=
{
rightClick
}
disabled
=
{
slide
===
slides
.
length
}
>
>
</
button
>
</
div
>
);
};
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