diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index adb343e102be9ae917ac6c37848501cab0e04144..28400d4d93df883a2a5a7bda44bef65bef9c9283 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -2,7 +2,7 @@ import React from "react"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import "tailwindcss/tailwind.css"; import { IntoPost } from "./post/intopost"; -import { Login, Profile, RequireAuth, Signup } from "./auth"; +import { Login, Profile, RequireAuth, Signup, Admin } from "./auth"; import { Header, Body } from "./home"; import { Board } from "./board"; import Posting from "./post/posting"; @@ -38,6 +38,7 @@ export const App = () => { } /> + } /> diff --git a/frontend/src/Pages/myslide.tsx b/frontend/src/Pages/myslide.tsx index 7c6a42f5d7b5915503615ba5e73764b232c63de5..cf9e085440229d23265508ca4b5e5eacc945a4cb 100644 --- a/frontend/src/Pages/myslide.tsx +++ b/frontend/src/Pages/myslide.tsx @@ -1,21 +1,17 @@ import React, { useRef, useState } from "react"; type num = { - total: number, - page: number, - setPage: Function, - style: string, - setStyle: Function, - // slides : any[], + slides: any[], } -export function MySlide({ total, page, setPage, style, setStyle}: num) { - - const numPages = Math.ceil(total / 15); +export function MySlide({ slides}: num) { const firstLeftClick = useRef(true); const firstRightClick = useRef(true); - const slide = useRef(1); + const [page, setPage] = useState(1); + const [slide,setSlide] = useState(1); + // const slide = useRef(1); + const [style, setStyle] = useState(""); const leftClick = () => { if (firstLeftClick.current) { @@ -24,7 +20,8 @@ export function MySlide({ total, page, setPage, style, setStyle}: num) { } else { setPage(page - 1) } - slide.current -= 1; + // slide.current -= 1; + setSlide(slide-1) setStyle("-translate-x-full animate-slidetoright"); }; @@ -35,31 +32,34 @@ export function MySlide({ total, page, setPage, style, setStyle}: num) { } else { setPage(page + 1) } - slide.current += 1; + // slide.current += 1; + setSlide(slide+1) setStyle("animate-slidetoleft"); }; return ( -
- -
- + ); }; - - - - -{/* {Array(numPages) - .fill(1) - .map((_, i) => ( - - ))} */} \ No newline at end of file diff --git a/frontend/src/apis/index.ts b/frontend/src/apis/index.ts index 1fed0919128272036712ac4d46fc8b650a7d0d23..11d85c29611b0a778344551f54465784b19fc637 100644 --- a/frontend/src/apis/index.ts +++ b/frontend/src/apis/index.ts @@ -2,4 +2,5 @@ import axios from "axios"; export * as authApi from "./auth.api"; export * as postApi from "./post.api"; -export * as profileApi from "./profile.api" \ No newline at end of file +export * as profileApi from "./profile.api" +export * as mainimgApi from "./mainimg.api" \ No newline at end of file diff --git a/frontend/src/apis/mainimg.api.ts b/frontend/src/apis/mainimg.api.ts new file mode 100644 index 0000000000000000000000000000000000000000..91b31fbd24749626a031545564c17d7c082c7494 --- /dev/null +++ b/frontend/src/apis/mainimg.api.ts @@ -0,0 +1,19 @@ +import axios from "axios"; +import { MainimgType } from "../types"; +import baseUrl from "./baseUrl"; + +export const mainimg = async (mainimg: MainimgType) => { + const { data } = await axios.post(`${baseUrl}/mainimg`, mainimg); + return data; +}; + +export const delmainimg = async (id : string) => { + const { data } = await axios.delete(`${baseUrl}/mainimg`); + return data; +}; + +export const getmainimg = async () => { + const { data } = await axios.get(`${baseUrl}/mainimg`); + console.log("test",data) + return data; +}; diff --git a/frontend/src/auth/admin.tsx b/frontend/src/auth/admin.tsx new file mode 100644 index 0000000000000000000000000000000000000000..15bb7d867cfef9621971770f3971c2496d869387 --- /dev/null +++ b/frontend/src/auth/admin.tsx @@ -0,0 +1,151 @@ +import React, { FormEvent, useEffect, useState } from "react"; +import { mainimgApi } from "../apis"; +import { catchErrors } from "../helpers"; +import { MainimgType } from "../types"; +import {MySlide} from "./adminslide"; + +export default function Admin() { + + const [getimgs, setGetimgs] = useState([]); + + async function imgsData() { + const imgs = await mainimgApi.getmainimg(); + // console.log("ㅑㅡㅎ", imgs) + setGetimgs(imgs) + }; + + useEffect(() => { + imgsData(); + }, []); + + const [addimg, setAddimg] = useState({ + theme: "", + city: "", + url: "", + title: "", + }); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(""); + const [success, setSuccess] = useState(false); + + function handleSelectChange(event: React.ChangeEvent) { + const { name, value } = event.currentTarget; + setAddimg({ ...addimg, [name]: value }); + } + function handleInputeChange(event: React.ChangeEvent) { + const { name, value } = event.currentTarget; + setAddimg({ ...addimg, [name]: value }); + } + + // console.log("asdafsdfs", getimgs) + async function handleSubmit(event: FormEvent) { + event.preventDefault(); + try { + setError(""); + console.log("img data", addimg); + setLoading(true); + const res = await mainimgApi.mainimg(addimg); + console.log("서버연결됬나요", res); + setSuccess(true); + setError(""); + } catch (error) { + console.log("에러발생"); + catchErrors(error, setError); + } finally { + setLoading(false); + } + } + + if (success) { + 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) => ( +
+ +

{pic.title}

+
+ ))] + slides.push(k); + } + + return ( +
+
+
+ + +
+

url

+ + {/* type="file"/> */} +
+
+

title

+ +
+
+ +
+
+
+
+ +
+
+ ); +}; diff --git a/frontend/src/auth/adminslide.tsx b/frontend/src/auth/adminslide.tsx new file mode 100644 index 0000000000000000000000000000000000000000..cf9e085440229d23265508ca4b5e5eacc945a4cb --- /dev/null +++ b/frontend/src/auth/adminslide.tsx @@ -0,0 +1,65 @@ +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 ( +
+ +
+ {slides.slice(page - 1, page + 2).map((slide) => ( +
+
+ {slide} +
+
+ ))} +
+ +
+ + + ); +}; diff --git a/frontend/src/auth/index.tsx b/frontend/src/auth/index.tsx index 6027999e8030d13297c33766061ce256bb21c2fc..38ed480f5b32128401eaa4ac26801e8b47325a65 100644 --- a/frontend/src/auth/index.tsx +++ b/frontend/src/auth/index.tsx @@ -2,3 +2,4 @@ export { default as Login } from "./login"; export { default as Signup } from "./signup"; export { default as Profile } from "./profile"; export { RequireAuth } from "./RequireAuth"; +export { default as Admin } from "./admin"; diff --git a/frontend/src/auth/login.tsx b/frontend/src/auth/login.tsx index 15fbb2e3ab647e96390f34445ec478aa613eb3af..a94962eb52a4534bcf4bd2f185089114d79b5113 100644 --- a/frontend/src/auth/login.tsx +++ b/frontend/src/auth/login.tsx @@ -35,7 +35,11 @@ export default function Login() { setLoading(true); await login(user.email, user.password, () => { - navigate("/", { replace: true }); + if (user.email == "admin@korea.ac.kr" && user.password == "111111") { + navigate("/admin", { replace: true }) + } else { + navigate("/", { replace: true }); + } }); // console.log("서버연결됬나요", res); // console.log("로그인"); diff --git a/frontend/src/home/body.tsx b/frontend/src/home/body.tsx index fcb794061fc96f6844b378f88330f1d346d27ac9..ccddb8b3aae92f8a4ad229b9d39ae117f1c34203 100644 --- a/frontend/src/home/body.tsx +++ b/frontend/src/home/body.tsx @@ -11,13 +11,6 @@ export default function Body() { let limit = 15; const [searchParams, setSearchParams] = useSearchParams(initSearchParams); - const [page, setPage] = useState(1); - const [style, setStyle] = useState(""); - - const offset1 = (page - 1) * limit; - const offset2 = page * limit; - const offset3 = (page + 1) * limit; - let getPics = getPicure(); useEffect(() => { @@ -31,6 +24,7 @@ export default function Body() { ...Object.fromEntries(searchParams), theme: event.currentTarget.id, }); + // setPage(1) }; const cityHandleClick = (event: MouseEvent) => { @@ -55,27 +49,23 @@ export default function Body() { }); const numPages = Math.ceil(Idpics.length / 15); - console.log(page); - // const slides = [] - // for (let i = 0; i < numPages + 1; i++) { - // const k =[ - //
- //
- // {Idpics.slice(i * limit, i * limit + limit).map((pic, index: number) => ( - //
- // - //

{pic.name}

- //
- // ))} - //
- //
] - // slides.push(k); - // } + + const slides = [] + for (let i = 0; i < numPages; i++) { + const k = [ + Idpics.slice(i * limit, i * limit + limit).map((pic, index: number) => ( +
+ +

{pic.name}

+
+ ))] + slides.push(k); + } return (
@@ -84,75 +74,12 @@ export default function Body() {
-
- + -
-
-
- {Idpics.slice(offset1, offset1 + limit).map( - (pic, index: number) => ( -
- -

{pic.name}

-
- ) - )} -
-
-
-
- {Idpics.slice(offset2, offset2 + limit).map( - (pic, index: number) => ( -
- -

{pic.name}

-
- ) - )} -
-
-
-
- {Idpics.slice(offset3, offset3 + limit).map( - (pic, index: number) => ( -
- -

{pic.name}

-
- ) - )} -
-
-
- // Body Page diff --git a/frontend/src/home/header.tsx b/frontend/src/home/header.tsx index bc44b0ac06b34444bb79f05ff36e6b1f4ea926f3..0b44993d5e2d2e70eca88f2e970548cbc5515c30 100644 --- a/frontend/src/home/header.tsx +++ b/frontend/src/home/header.tsx @@ -10,13 +10,13 @@ export default function Header() {
- - - - - - - - - -
diff --git a/frontend/src/pages/citylist.tsx b/frontend/src/pages/citylist.tsx index 4e29e1b0a90ffc62fe7709beb4fbe64972633c8f..042b4ccc613d978bca908b245384126b51d4b1aa 100644 --- a/frontend/src/pages/citylist.tsx +++ b/frontend/src/pages/citylist.tsx @@ -6,8 +6,8 @@ type CityProps = { export default function Citylist({ handleClick }: CityProps) { return ( -
-
도시
+
+
도시