버그 수정 1차 완료

frontend/src/App.tsx

@@ -37,7 +37,7 @@ export const App = () => {
                 </RequireAuth>
               }
             />
-            <Route path="admin" element={<Admin />} />
+            <Route path="admin" element={<RequireAuth><Admin /></RequireAuth>} />
             <Route path="admin/:imgId" element={<ImgRewrite />} />
             <Route path="rewrite" element={<ImgRewrite />} />
           </Route>

frontend/src/auth/admin.tsx

+import { get } from "mongoose";
 import React, { FormEvent, useEffect, useState, MouseEvent } from "react";
 import { Link } from "react-router-dom";
 import { mainimgApi } from "../apis";
@@ -21,15 +22,15 @@ export default function Admin() {
     useEffect(() => {
         imgsData();
     }, []);
-
     // 이미지 추가하기
     const [addimg, setAddimg] = useState<MainimgType>({
         _id: "",
         theme: "",
         city: "",
         title: "",
-    pic: { originalfilename: "", newfilename: "" },
+        fileInfo: { originalfilename: "", newfilename: "" },
     });
+
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState("");
     const [addSuccess, setAddSuccess] = useState(false);
@@ -60,15 +61,27 @@ export default function Admin() {
         formdata.append("city", addimg.city);
         formdata.append("theme", addimg.theme);
         formdata.append("title", addimg.title);
+        try {
             if (!(file === undefined)) {
                 formdata.append("mainimg", file);
-      console.log(formdata);
+                console.log("fordata", formdata);
                 const res = await mainimgApi.mainimg(formdata);
                 console.log("확인 중 ", res);
                 alert("img 추가되었습니다");
+                setGetimgs([...getimgs, res])
+            }
+            else (
+                console.log("file === undefined")
+            )
+        } catch (error) {
+            console.log("에러발생");
+            catchErrors(error, setError);
+        } finally {
+            setLoading(false);
         }
     }
 
+
     // 이미지 삭제하기
     async function handleDeleteClick(event: MouseEvent<HTMLButtonElement>) {
         try {
@@ -81,6 +94,8 @@ export default function Admin() {
                 setDelSuccess(true);
                 setError("");
                 alert("img 삭제되었습니다");
+                const deleteimg = getimgs.filter(pic=>picId!==pic._id)
+                setGetimgs(deleteimg)
             } else {
                 return false;
             }
@@ -107,7 +122,7 @@ export default function Admin() {
                     <div key={index}>
                         <div className={`m-1 shrink-0 bg-gray-200 rounded shadow-md `}>
                             <img
-                src={"http://localhost:3000/images/" + picture.pic.newfilename}
+                                src={"http://localhost:3000/images/" + picture.fileInfo.newfilename}
                                 className="w-full h-10 md:h-20 object-center"
                             />
                             <p className="text-center text-xs">{picture.title}</p>
@@ -145,16 +160,16 @@ export default function Admin() {
                             onChange={handleSelectChange}
                         >
                             <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="Seoul">서울</option>
+                            <option value="Busan">부산</option>
+                            <option value="Incheon">인천</option>
+                            <option value="Daegoo">대구</option>
+                            <option value="Gwangjoo">광주</option>
+                            <option value="Daejeon">대전</option>
+                            <option value="Woolsan">울산</option>
+                            <option value="Sejong">세종</option>
+                            <option value="Dokdo">독도</option>
+                            <option value="Jeju">제주</option>
                         </select>
                         <select
                             name="theme"
@@ -164,18 +179,18 @@ export default function Admin() {
                             onChange={handleSelectChange}
                         >
                             <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>
-              <option value="사이클링">사이클링</option>
+                            <option value="cycling">사이클링</option>
+                            <option value="surfing">서핑</option>
+                            <option value="activity">액티비티</option>
+                            <option value="camping">캠핑</option>
+                            <option value="skiing">스키</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>
                         </select>
                         <div className="flex items-center justify-end gap-3">
                             <input

frontend/src/auth/imgrewrite.tsx

-import React, { FormEvent, useState } from "react";
+import React, { FormEvent, useState, useEffect } from "react";
 import { Link, Outlet, useNavigate, useLocation } from "react-router-dom";
 import { mainimgApi } from "../apis";
 import isLength from "validator/lib/isLength";
@@ -27,9 +27,11 @@ export default function ImgRewrite() {
         theme: img.theme,
         city: img.city,
         title: img.title,
-        pic: { originalfilename: "", newfilename: "" },
+        fileInfo: { originalfilename: "", newfilename: "" },
     });
-
+    useEffect(() => {
+        console.log("수정 전 : ",imgdata);
+    }, []);
 
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState("");
@@ -86,7 +88,6 @@ export default function ImgRewrite() {
                 console.log("확인 중 ", res);
             }
             else {
-                console.log("ㅇ에러")
                 formdata.append("updatemainimg","");
                 console.log("formdata",formdata);
                 const res = await mainimgApi.updateimg(formdata,imgdata._id);
@@ -109,7 +110,7 @@ export default function ImgRewrite() {
         if (!isLength(pic.title ?? "", { min: 1 })) {
             setError("제목을 입력해 주세요.");
             return false;
-        } else if (!isLength(pic.pic.newfilename ?? "", { min: 1 })) {
+        } else if (!isLength(pic.fileInfo.newfilename ?? "", { min: 1 })) {
             setError("파일을 선택해 주세요.");
             return false;
         } else if (equals(pic.city, "city")) {
@@ -232,7 +233,7 @@ export default function ImgRewrite() {
                                     />
                                 ) : (
                                     <img
-                                        src={"http://localhost:3000/images/" + img.pic.newfilename}
+                                        src={"http://localhost:3000/images/" + img.fileInfo.newfilename}
                                         className="object-cover object-center h-full"
                                     />
                                 )}

frontend/src/board/board.tsx

@@ -14,6 +14,7 @@ export default function BoardPage() {
   useEffect(() => {
     getDataList();
   }, []);
+  
   // posts
   const getDataList = async () => {
     const res = await postApi.getData();

frontend/src/home/body.tsx

@@ -67,7 +67,7 @@ export default function Body() {
           className={`m-1 shrink-0 rounded shadow-md h-45 relative overflow-hidden`}
           key={index}>
           <img
-            src={"http://localhost:3000/images/" + picture.pic.newfilename}
+            src={"http://localhost:3000/images/" + picture.fileInfo.newfilename}
             className="w-full h-40 object-cover hover:scale-110 transition duration-0 hover:duration-500"
           />
           <div className="bg-transparent text-neutral-50 text-xs rounded-full absolute bottom-0 ml-1 mb-1 hover:scale-110 transition duration-0 hover:duration-500">

frontend/src/home/header.tsx

@@ -15,7 +15,7 @@ export default function Header() {
 
   return (
     <div className="flex flex-col md:px-56 ">
-      <div className="flex flex-col-reverse pt-3 pb-12 border-b-2 ">
+      <div className="flex flex-col-reverse pt-3 pb-12 border-b-2 bg-gradient-to-t from-sky-200">
         <div className="flex mt-5 justify-between pr-3">
           <button className="ml-3 shrink-0 text-2xl">
             <Link to="/" className="hover:text-sky-300 active:text-purple-500">

frontend/src/home/theme.tsx

@@ -29,7 +29,7 @@ export default function Theme({ handleClick }: ThemeProps) {
         캠핑
       </button>
       <button
-        id={"sking"}
+        id={"skiing"}
         onClick={handleClick}
         className="shrink-0 px-5 hover:text-sky-300"
       >

frontend/src/pages/citylist.tsx

@@ -9,70 +9,70 @@ export default function Citylist({ handleClick }: CityProps) {
     <div className="overflow-auto w-full flex flex-row md:flex-col md:mr-24 bg-sky-100">
       <div className="text-start px-5 py-2 bg-white shrink-0">도시</div>
       <button
-        id={"서울"}
+        id={"Seoul"}
         onClick={handleClick}
         className="text-start  px-5 py-2 hover:underline shrink-0"
       >
         서울
       </button>
       <button
-        id={"부산"}
+        id={"Busan"}
         onClick={handleClick}
         className="text-start px-5 py-2 hover:underline shrink-0"
       >
         부산
       </button>
       <button
-        id={"인천"}
+        id={"Incheon"}
         onClick={handleClick}
         className="text-start px-5 py-2 hover:underline shrink-0"
       >
         인천
       </button>
       <button
-        id={"대구"}
+        id={"Daegoo"}
         onClick={handleClick}
         className="text-start px-5 py-2 hover:underline shrink-0"
       >
         대구
       </button>
       <button
-        id={"광주"}
+        id={"Gwangjoo"}
         onClick={handleClick}
         className="text-start px-5 py-2 hover:underline shrink-0"
       >
         광주
       </button>
       <button
-        id={"대전"}
+        id={"Daejeon"}
         onClick={handleClick}
         className="text-start px-5 py-2 hover:underline shrink-0"
       >
         대전
       </button>
       <button
-        id={"울산"}
+        id={"Woolsan"}
         onClick={handleClick}
         className="text-start px-5 py-2 hover:underline shrink-0"
       >
         울산
       </button>
       <button
-        id={"세종"}
+        id={"Sejong"}
         onClick={handleClick}
         className="text-start px-5 py-2 hover:underline shrink-0"
       >
         세종
       </button>
       <button
-        id={"독도"}
+        id={"Dokdo"}
         onClick={handleClick}
         className="text-start px-5 py-2 hover:underline shrink-0"
       >
         독도
       </button>
       <button
-        id={"제주"}
+        id={"Jeju"}
         onClick={handleClick}
         className="text-start px-5 py-2 hover:underline shrink-0"
       >

frontend/src/types/index.tsx

@@ -44,7 +44,7 @@ export interface MainimgType {
   theme: string;
   city: string;
   title: string;
-  pic: {
+  fileInfo: {
     originalfilename: string;
     newfilename: string;
   };

src/controllers/mainimg.controller.ts

@@ -17,7 +17,7 @@ export const createMainimg = asyncWrap(async (reqExp, res) => {
     multiples: false,
   });
 
-  form.parse(req, (err, fields, files) => {
+  form.parse(req, async (err, fields, files) => {
     if (!Array.isArray(files.mainimg)) {
       //파일 좁히기 중
       if (
@@ -33,37 +33,24 @@ export const createMainimg = asyncWrap(async (reqExp, res) => {
         const originalfilename = files.mainimg?.originalFilename;
         const newfilename = files.mainimg.newFilename;
         if (!(originalfilename === null || newfilename === undefined)) {
-          mainimgDb.createMainimg(
+          const imgRes = await mainimgDb.createMainimg(
             { city, title, theme },
             {
               originalfilename,
               newfilename,
             }
           );
+          console.log(imgRes)
+          return res.json(imgRes);
+        
+        }else{
+          return res.send("에러")
         }
       }
     }
   });
-  res.json();
 });
 
-// if (!isLength(url ?? "", { min: 1 })) {
-//   return res.status(422).send("이미지 url을 입력해주세요");
-// }
-
-// if (!isLength(title ?? "", { min: 1 })) {
-//   return res.status(422).send("이미지 제목을 입력해주세요");
-// }
-
-//   const newMainimg = await mainimgDb.createMainimg({
-//     theme,
-//     city,
-//     url,
-//     title,
-//   });
-
-//   return res.json(newMainimg);
-// });
 
 export const getMainimg = asyncWrap(async (req, res) => {
   const mainimgs = await mainimgDb.getMainimg();
@@ -72,8 +59,8 @@ export const getMainimg = asyncWrap(async (req, res) => {
 
 export const deleteMainimg = asyncWrap(async (req, res) => {
   const { imgId } = req.params;
-  console.log(imgId);
   const deleteCount = await mainimgDb.deleteOneMainimg(imgId);
+  console.log(deleteCount);
 
   return res.json(deleteCount);
 });
@@ -107,7 +94,7 @@ export const updateMainimg = asyncWrap(async (reqExp, res) => {
           const originalfilename = files.updatemainimg?.originalFilename;
           const newfilename = files.updatemainimg.newFilename;
           if (!(originalfilename === null || newfilename === undefined)) {
-            mainimgDb.updateOneMainimg(
+            const imgRes = mainimgDb.updateOneMainimg(
               id,
               theme,
               city,
@@ -115,12 +102,13 @@ export const updateMainimg = asyncWrap(async (reqExp, res) => {
               originalfilename,
               newfilename
             );
+            return res.json(imgRes);
           }
         } else {
-          mainimgDb.updateOneMainimg(id, theme, city, title);
+          const imgRes = mainimgDb.updateOneMainimg(id, theme, city, title);
+          return res.json(imgRes);
         }
       }
     }
   });
-  res.json();
 });

src/db/mainimg.db.ts

 import { ObjectId } from "mongoose";
 import { FileInfo, IFileInfo, Mainimg, MainimgType } from "../models";
+import fs from "fs/promises";
+import { fileInfoCtrl } from "../controllers";
 
 export const createMainimg = async (mainimg: MainimgType, pic: IFileInfo) => {
   const newPic = await FileInfo.create({
@@ -11,21 +13,30 @@ export const createMainimg = async (mainimg: MainimgType, pic: IFileInfo) => {
   const newMainimg = await Mainimg.create({
     theme: mainimg.theme,
     city: mainimg.city,
-    pic: newPic._id,
+    fileInfo: newPic._id,
     title: mainimg.title,
   });
-  return newMainimg;
+  return newMainimg.populate("fileInfo");
 };
 
 export const getMainimg = async () => {
-  const img = await Mainimg.find({}).populate("pic");
-
+  console.log("Haha")
+  const img = await Mainimg.find({}).populate("fileInfo");
+  console.log("adf",img)
   return img;
 };
 
 export const deleteOneMainimg = async (_id: string) => {
+  const main = await Mainimg.findById(_id);
+  if (!(main?.fileInfo === undefined)) {
+    const ref = await FileInfo.findById(main.fileInfo._id);
+    if (!(ref?.newfilename === undefined)) {
+      await fs.unlink("../travel/uploads/" + ref?.newfilename);
+    }
+    await FileInfo.deleteOne({ _id: main.fileInfo._id });
   const res = await Mainimg.deleteOne({ _id: _id });
   return res;
+  }
 };
 
 export const updateOneMainimg = async (
@@ -69,5 +80,6 @@ export const updateOneMainimg = async (
       });
       console.log("error5", newfilename, originalfilename, theme, city, title);
     }
+  
   } else console.log("error3", newMainimg);
 };

src/models/mainimg.model.ts

@@ -18,7 +18,7 @@ const MainimgSchema = new Schema<MainimgType>({
     type: String,
     required: true,
   },
-  fileInfo: { type: Schema.Types.ObjectId, ref: "Fileinfo" },
+  fileInfo: { type: Schema.Types.ObjectId, ref: "FileInfo" },
 });
 
 export default model<MainimgType>("Mainimg", MainimgSchema);

src/routes/mainimg.route.ts

@@ -5,13 +5,13 @@ const router = express.Router();
 
 router
   .route("/")
-  .get(authCtrl.requireLogin, mainimgCtrl.getMainimg)
-  .post(authCtrl.requireLogin, mainimgCtrl.createMainimg)
+  .get( mainimgCtrl.getMainimg)
+  .post(authCtrl.requireLogin,authCtrl.hasRole("admin"), mainimgCtrl.createMainimg)
   
 router
   .route("/:imgId")
-  .delete(authCtrl.requireLogin, mainimgCtrl.deleteMainimg)
-  .put(authCtrl.requireLogin, authCtrl.hasRole("admin"), mainimgCtrl.updateMainimg);
+  .delete(authCtrl.requireLogin,authCtrl.hasRole("admin"), mainimgCtrl.deleteMainimg)
+  .put(authCtrl.requireLogin,authCtrl.hasRole("admin"), mainimgCtrl.updateMainimg);
 
 
 export default router;