diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 28400d4d93df883a2a5a7bda44bef65bef9c9283..ced8e4236c38aa491169e7242643206507343db9 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, Admin } from "./auth"; +import { Login, Profile, RequireAuth, Signup, Admin, ImgRewrite } from "./auth"; import { Header, Body } from "./home"; import { Board } from "./board"; import Posting from "./post/posting"; @@ -39,6 +39,7 @@ export const App = () => { } /> } /> + }/> diff --git a/frontend/src/apis/mainimg.api.ts b/frontend/src/apis/mainimg.api.ts index b5b8c9dfa341d99b67bafd7989ebe616d74160ef..3a7679e33acc177fb4fce445ac26b51702c82179 100644 --- a/frontend/src/apis/mainimg.api.ts +++ b/frontend/src/apis/mainimg.api.ts @@ -8,7 +8,7 @@ export const mainimg = async (mainimg: MainimgType) => { }; export const delmainimg = async (_id : string) => { - const { data } = await axios.delete(`${baseUrl}/mainimg`); + const { data } = await axios.delete(`${baseUrl}/mainimg/${_id}`); return data; }; diff --git a/frontend/src/auth/admin.tsx b/frontend/src/auth/admin.tsx index 3ee7f3f161941e6871a001cc802b1b14b2e7ff8d..efa323e86d580e476cacb6b1e73e86e50f4a67b0 100644 --- a/frontend/src/auth/admin.tsx +++ b/frontend/src/auth/admin.tsx @@ -1,16 +1,16 @@ import React, { FormEvent, useEffect, useState, MouseEvent } from "react"; +import { Link } from "react-router-dom"; 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) }; @@ -18,6 +18,7 @@ export default function Admin() { imgsData(); }, []); + // 이미지 추가하기 const [addimg, setAddimg] = useState({ _id: "", theme: "", @@ -27,7 +28,8 @@ export default function Admin() { }); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); - const [success, setSuccess] = useState(false); + const [addSuccess, setAddSuccess] = useState(false); + const [delSuccess, setDelSuccess] = useState(false); function handleSelectChange(event: React.ChangeEvent) { const { name, value } = event.currentTarget; @@ -38,7 +40,6 @@ export default function Admin() { setAddimg({ ...addimg, [name]: value }); } - // console.log("asdafsdfs", getimgs) async function handleSubmit(event: FormEvent) { event.preventDefault(); try { @@ -47,9 +48,8 @@ export default function Admin() { setLoading(true); const res = await mainimgApi.mainimg(addimg); console.log("서버연결됬나요", res); - setSuccess(true); + setAddSuccess(true); setError(""); - alert("img 추가되었습니다"); } catch (error) { console.log("에러발생"); catchErrors(error, setError); @@ -58,17 +58,33 @@ export default function Admin() { } } - // if (success) { - // alert("img 추가되었습니다"); - // } - + if (addSuccess) { + alert("img 추가되었습니다"); + } + // 이미지 삭제하기 async function handleDeleteClick(event: MouseEvent) { - const picId = event.currentTarget.id; - console.log(picId) - const res = await mainimgApi.delmainimg(picId); - console.log("delete img", res); - alert("img 삭제되었습니다.") + try { + if (confirm("삭제하시겠습니까?") == true) { + const picId = event.currentTarget.id; + console.log("picId : ", picId) + const res = await mainimgApi.delmainimg(picId); + console.log("delete img", res); + setDelSuccess(true); + setError(""); + } else { + return false; + } + } + catch (error) { + console.log("에러발생"); + catchErrors(error, setError); + } finally { + setLoading(false); + }; }; + if (delSuccess) { + alert("img 삭제되었습니다"); + } let limit = 15; const numPages = Math.ceil(getimgs.length / 15); @@ -85,9 +101,16 @@ export default function Admin() { />

{pic.title}

- +
+ + +
))] slides.push(k); @@ -107,16 +130,16 @@ export default function Admin() { onChange={handleSelectChange} > - - - - - - - - - - + + + + + + + + + +

url :

diff --git a/frontend/src/auth/imgrewrite.tsx b/frontend/src/auth/imgrewrite.tsx new file mode 100644 index 0000000000000000000000000000000000000000..95304990a4bcbae61e58fe8c23ae8660745539bb --- /dev/null +++ b/frontend/src/auth/imgrewrite.tsx @@ -0,0 +1,19 @@ +import React, { FormEvent, useEffect, useState, MouseEvent } from "react"; +import { Link, Outlet } from "react-router-dom"; +import { mainimgApi } from "../apis"; +import { catchErrors } from "../helpers"; +import { MainimgType } from "../types"; +import { MySlide } from "./adminslide"; + +export default function ImgRewrite() { + // 이미지 수정 + + return ( +
+
+ +
+ +
+ ); +}; diff --git a/frontend/src/auth/index.tsx b/frontend/src/auth/index.tsx index 38ed480f5b32128401eaa4ac26801e8b47325a65..9cb287a1c0c691bf3e23026fdb539eec924e8ca1 100644 --- a/frontend/src/auth/index.tsx +++ b/frontend/src/auth/index.tsx @@ -3,3 +3,4 @@ export { default as Signup } from "./signup"; export { default as Profile } from "./profile"; export { RequireAuth } from "./RequireAuth"; export { default as Admin } from "./admin"; +export {default as ImgRewrite} from "./imgrewrite" diff --git a/src/routes/mainimg.route.ts b/src/routes/mainimg.route.ts index bcf0222be0d15ef21a863af17210f5597b0a283c..87ca1e3fe370f8bb7441885430e0c44185b8f91b 100644 --- a/src/routes/mainimg.route.ts +++ b/src/routes/mainimg.route.ts @@ -7,6 +7,9 @@ router .route("/") .get(authCtrl.requireLogin, mainimgCtrl.getMainimg) .post(authCtrl.requireLogin, mainimgCtrl.createMainimg) + +router + .route("/:imgId") .delete(authCtrl.requireLogin, mainimgCtrl.deleteMainimg)