delete working

frontend/src/apis/mainimg.api.ts

@@ -7,13 +7,12 @@ export const mainimg = async (mainimg: MainimgType) => {
     return data;
 };
 
-export const delmainimg = async (id : string) => {
+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;
 };

frontend/src/auth/admin.tsx

-import React, { FormEvent, useEffect, useState } from "react";
+import React, { FormEvent, useEffect, useState, MouseEvent } from "react";
 import { mainimgApi } from "../apis";
 import { catchErrors } from "../helpers";
 import { MainimgType } from "../types";
-import {MySlide}  from "./adminslide";
+import { MySlide } from "./adminslide";
 
 export default function Admin() {
 
@@ -19,6 +19,7 @@ export default function Admin() {
     }, []);
 
     const [addimg, setAddimg] = useState<MainimgType>({
+        _id: "",
         theme: "",
         city: "",
         url: "",
@@ -48,6 +49,7 @@ export default function Admin() {
             console.log("서버연결됬나요", res);
             setSuccess(true);
             setError("");
+            alert("img 추가되었습니다");
         } catch (error) {
             console.log("에러발생");
             catchErrors(error, setError);
@@ -56,9 +58,17 @@ export default function Admin() {
         }
     }
 
-    if (success) {
-        alert("img 추가되었습니다");
-    }
+    // if (success) {
+    //     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 삭제되었습니다.")
+    };
 
     let limit = 15;
     const numPages = Math.ceil(getimgs.length / 15);
@@ -67,15 +77,18 @@ export default function Admin() {
     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}>
+                <div key={index}>
+                    <div className={`m-1 shrink-0 bg-gray-200 rounded shadow-md `}>
                         <img
                             src={pic.url}
                             className="w-full h-10 md:h-20 object-center"
                         />
                         <p className="text-center text-xs">{pic.title}</p>
                     </div>
+                    <button id={pic._id} onClick={handleDeleteClick}>
+                        삭제
+                    </button>
+                </div>
             ))]
         slides.push(k);
     }
@@ -84,7 +97,8 @@ export default function Admin() {
         <div>
             <form
                 onSubmit={handleSubmit}>
-                <div className="flex justify-center gap-3">
+                <div className="flex flex-wrap justify-center gap-3">
+                    <div className="gap-3 md:flex ">
                         <select
                             name="city"
                             id="Questions"
@@ -125,26 +139,28 @@ export default function Admin() {
                             <option value="zoo">동물원</option>
                             <option value="cycling">사이클링</option>
                         </select>
-                    <div>
-                        <p>url</p>
+                        <div className="flex items-center justify-end gap-3">
+                            <p>url :</p>
                             <input name="url" className="border-2 border-sky-500"
                                 onChange={handleInputeChange} />
                             {/* type="file"/> */}
                         </div>
-                    <div>
-                        <p>title</p>
+                        <div className="flex items-center justify-end gap-3 mt-2 md:mt-0">
+                            <p>title :</p>
                             <input name="title" className="border-2 border-sky-500"
                                 onChange={handleInputeChange} />
                         </div>
-                    <div className="my-5 ">
-                        <button className="border-2 border-gray-500 rounded">추가</button>
+                    </div>
+                    <div className="my-5 flex items-center">
+                        <button className="border-2 border-gray-500 rounded ">추가</button>
                     </div>
                 </div>
             </form>
-            <div className="flex flex-col">
+            <div className="flex justify-center">
                 <MySlide key={Math.random()}
                     slides={slides}
                 />
+
             </div>
         </div>
     );

frontend/src/auth/adminslide.tsx

@@ -10,7 +10,6 @@ export function MySlide({ slides}: num) {
     const firstRightClick = useRef(true);
     const [page, setPage] = useState(1);
     const [slide,setSlide] = useState(1);
-    // const slide = useRef(1);
     const [style, setStyle] = useState("");
 
     const leftClick = () => {
@@ -20,7 +19,6 @@ export function MySlide({ slides}: num) {
         } else {
             setPage(page - 1)
         }
-        // slide.current -= 1;
         setSlide(slide-1)
         setStyle("-translate-x-full animate-slidetoright");
     };
@@ -32,16 +30,14 @@ export function MySlide({ slides}: num) {
         } else {
             setPage(page + 1)
         }
-        // slide.current += 1;
         setSlide(slide+1)
         setStyle("animate-slidetoleft");
     };
 
     return (
-        <div className="flex flex-row justify-center items-center ">
+        <div className="flex flex-row 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}>
                 &lt;
-                {/* {slide.current} */}
             </button>
             <div
                 className={`m-3 md:m-5 md:basis-4/5 flex flex-row relative w-full overflow-hidden`}

frontend/src/types/index.tsx

@@ -40,7 +40,7 @@ export interface Profile {
 }
 
 export interface MainimgType {
-
+  _id: string;
   theme: string;
   city: string;
   url: string;

src/controllers/mainimg.controller.ts

+import { NextFunction, Request, Response } from "express";
 import isLength from "validator/lib/isLength";
 import { TypedRequestAuth } from "./auth.controller";
 import { asyncWrap } from "../helpers";
 import { mainimgDb } from "../db";
+import { TypedRequest } from "../types";
 
 export const createMainimg = asyncWrap(async (reqExp, res, next) => {
   const req = reqExp as TypedRequestAuth<{ userId: string }>;
 
-  const { theme, city, url, title} = req.body as {
+  const { theme, city, url, title } = req.body as {
     theme: string;
     city: string;
     url: string;
@@ -36,8 +38,16 @@ export const createMainimg = asyncWrap(async (reqExp, res, next) => {
 export const getMainimg = asyncWrap(async (req, res) => {
   const mainimgs = await mainimgDb.getMainimg();
   return res.json(mainimgs);
-  });
+});
+
 
+export const deleteMainimg = asyncWrap(async (req, res) => {
+  const { imgId } = req.params;
+  console.log(imgId);
+  const deleteCount = await mainimgDb.deleteOneMainimg(imgId);
+
+  return res.json(deleteCount);
+});
 
 
 

src/db/mainimg.db.ts

@@ -14,3 +14,8 @@ export const getMainimg = async () => {
     const users = await Mainimg.find({});
     return users;
   };
+
+export const deleteOneMainimg = async (_id: string) => {
+  const res = await Mainimg.deleteOne({ _id: _id });
+  return res;
+};

src/routes/mainimg.route.ts

@@ -6,6 +6,8 @@ const router = express.Router();
 router
   .route("/")
   .get(authCtrl.requireLogin, mainimgCtrl.getMainimg)
-  .post(authCtrl.requireLogin, mainimgCtrl.createMainimg);
+  .post(authCtrl.requireLogin, mainimgCtrl.createMainimg)
+  .delete(authCtrl.requireLogin, mainimgCtrl.deleteMainimg)
+
 
 export default router;