rewrite working

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 = () => {
               }
             />
             <Route path="admin" element={<Admin />} />
+            <Route path="rewrite" element={<ImgRewrite/>}/>
           </Route>
         </Route>
       </Routes>

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;
 };
 

frontend/src/auth/admin.tsx

 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<MainimgType[]>([]);
 
     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<MainimgType>({
         _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<HTMLSelectElement>) {
         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<HTMLButtonElement>) {
-        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() {
                         />
                         <p className="text-center text-xs">{pic.title}</p>
                     </div>
-                    <button id={pic._id} onClick={handleDeleteClick}>
-                        삭제
-                    </button>
+                    <div className="text-end">
+                        <button className="border-r-2 border-r-indigo-500 text-xs">
+                            <Link to="/rewrite">
+                                수정
+                            </Link>
+                        </button>
+                        <button id={pic._id} onClick={handleDeleteClick} className="text-xs">
+                            삭제
+                        </button>
+                    </div>
                 </div>
             ))]
         slides.push(k);
@@ -107,16 +130,16 @@ export default function Admin() {
                             onChange={handleSelectChange}
                         >
                             <option value="질문종류">도시</option>
-                            <option value="Seoul">서울</option>
-                            <option value="Busan">부산</option>
-                            <option value="Incheon">인천</option>
-                            <option value="Daegoo">대구</option>
-                            <option value="Kwangjoo">광주</option>
-                            <option value="Daejeon">대전</option>
-                            <option value="Woolsan">울산</option>
-                            <option value="Sejong">세종</option>
-                            <option value="Dokdo">독도</option>
-                            <option value="Jeju">제주</option>
+                            <option value="서울">서울</option>
+                            <option value="부산">부산</option>
+                            <option value="인천">인천</option>
+                            <option value="대구">대구</option>
+                            <option value="광주">광주</option>
+                            <option value="대전">대전</option>
+                            <option value="울산">울산</option>
+                            <option value="세종">세종</option>
+                            <option value="독도">독도</option>
+                            <option value="제주">제주</option>
                         </select>
                         <select
                             name="theme"
@@ -126,18 +149,18 @@ export default function Admin() {
                             onChange={handleSelectChange}
                         >
                             <option value="질문종류">테마</option>
-                            <option value="cycling">사이클링</option>
-                            <option value="surfing">서핑</option>
-                            <option value="activity">액티비티</option>
-                            <option value="camping">캠핑</option>
-                            <option value="sking">스키</option>
-                            <option value="boat">보트</option>
-                            <option value="desert">사막</option>
-                            <option value="golf">골프</option>
-                            <option value="cave">동굴</option>
-                            <option value="history">문화재</option>
-                            <option value="zoo">동물원</option>
-                            <option value="cycling">사이클링</option>
+                            <option value="사이클링">사이클링</option>
+                            <option value="서핑">서핑</option>
+                            <option value="액티비티">액티비티</option>
+                            <option value="캠핑">캠핑</option>
+                            <option value="스키">스키</option>
+                            <option value="보트">보트</option>
+                            <option value="사막">사막</option>
+                            <option value="골프">골프</option>
+                            <option value="동굴">동굴</option>
+                            <option value="문화재">문화재</option>
+                            <option value="동물원">동물원</option>
+                            <option value="사이클링">사이클링</option>
                         </select>
                         <div className="flex items-center justify-end gap-3">
                             <p>url :</p>

frontend/src/auth/imgrewrite.tsx

+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 (
+        <div>
+            <div>
+
+            </div>
+            <Outlet/>
+        </div>
+    );
+};

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"

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)