only css left

frontend/src/Pages/myslide.tsx

@@ -48,7 +48,7 @@ export function MySlide({ slides}: num) {
                 {slides.slice(page - 1, page + 2).map((slide) => (
                     <div key={Math.random()} className="min-w-full"
                     >
-                        <div key={slide} className={`inline-grid grid-cols-2 ${style}`}>
+                        <div key={slide} className={`inline-grid grid-cols-2 ${style} min-w-full`}>
                             {slide}
                         </div>
                     </div>

frontend/src/auth/login.tsx

@@ -35,11 +35,9 @@ export default function Login() {
 
       setLoading(true);
       await login(user.email, user.password, () => {
-        if (user.email == "admin@korea.ac.kr" && user.password == "111111") {
-          navigate("/admin", { replace: true });
-        } else {
-          navigate("/", { replace: true });
-        }
+
+        navigate("/", { replace: true });
+
       });
       // console.log("서버연결됬나요", res);
       // console.log("로그인");

frontend/src/home/body.tsx

@@ -65,16 +65,16 @@ export default function Body() {
       Idpics.slice(i * limit, i * limit + limit).map(
         (picture, index: number) => (
           <div
-            className={`m-1 shrink-0 rounded shadow-md h-45 relative overflow-hidden`}
+            className={`m-1 shrink-0 rounded shadow-md h-50 relative overflow-hidden`}
             key={index}
           >
             <img
               src={
                 "http://localhost:3000/images/" + picture.fileInfo.newfilename
               }
-              className="w-full h-40 object-cover hover:scale-110 transition duration-0 hover:duration-500"
+              className="w-full h-48 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">
+            <div className="bg-transparent text-neutral-50 text-xs md:text-lg rounded-full absolute bottom-0 ml-1 mb-1 hover:scale-110 transition duration-0 hover:duration-500">
               <span>{picture.title}</span>
             </div>
           </div>

frontend/src/home/header.tsx

@@ -24,10 +24,10 @@ export default function Header() {
           </button>
           <div className="flex h-12">
             <input
-              className="ml-10 focus:outline-none focus:border-y-4 focus:border-l-4 focus:border-sky-500 w-20 w-40 md:w-4/5 border-y-4 border-l-4 border-sky-300 pl-9 rounded-l-full focus:border-0"
+              className="ml-10 focus:outline-none focus:border-y-4 focus:border-l-4 focus:border-sky-500 w-3/5 md:w-4/5 border-y-4 border-l-4 border-sky-300 pl-9 rounded-l-full focus:border-0"
               onChange={handleChange}
             />
-            <button className="shrink-0 bg-white border-y-4  border-r-4 border-sky-500 rounded-r-full pr-4">
+            <button className="whitespace-nowrap bg-white border-y-4  border-r-4 border-sky-500 rounded-r-full pr-4">
               검색
             </button>
           </div>

frontend/src/types/index.tsx

@@ -39,7 +39,8 @@ export interface SignupUser {
 export interface Profile {
   _id: string;
   email: string;
-  fileInfo: {
+  name: string;
+  avatar: {
     originalfilename: string;
     newfilename: string;
     picturepath: string;

src/controllers/fileinfo.controller.ts

@@ -4,7 +4,7 @@ import { TypedRequest } from "../types";
 
 export const uploadFile = asyncWrap(async (reqExp, res, next) => {
   const req = reqExp as TypedRequest;
-  const form = formidable({ multiples: false, uploadDir: "uploads" });
+  const form = formidable({ multiples: false, uploadDir: "uploads",keepExtensions : true });
 
   await new Promise((resolve, reject) => {
     form.parse(req, (err, fields, files) => {

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";
 import { ObjectId } from "mongoose";
 import formidable from "formidable";
+import { TypedRequestAuth } from "./auth.controller";
 
 export const createMainimg = asyncWrap(async (reqExp, res) => {
   const req = reqExp as TypedRequestAuth<{ userId: ObjectId }>;
@@ -65,49 +65,58 @@ export const deleteMainimg = asyncWrap(async (req, res) => {
 });
 
 export const updateMainimg = asyncWrap(async (reqExp, res) => {
-  const req = reqExp as TypedRequestAuth<{ userId: ObjectId }>;
+  const req = reqExp as TypedRequest;
 
-  const form = formidable({
-    uploadDir: "uploads",
-    keepExtensions: true,
-    multiples: false,
-  });
+  // const { id } = reqExp.params;
+  const { id, theme, city, title } = req.body;
+  const { updatemainimg }: { updatemainimg: formidable.File } = req.files;
+console.log("전부 제대로", id,theme, city, title, updatemainimg)
+  const img = await mainimgDb.updateOneMainimg(id, theme,city,title, updatemainimg);
 
-  form.parse(req, (err, fields, files) => {
-    if (!Array.isArray(files.updatemainimg)) {
-      //파일 좁히기 중
-      if (
-        !(
-          Array.isArray(fields.id) ||
-          Array.isArray(fields.city) ||
-          Array.isArray(fields.title) ||
-          Array.isArray(fields.theme)
-        )
-      ) {
-        const id = fields.id;
-        const city = fields.city;
-        const title = fields.title;
-        const theme = fields.theme;
-        console.log("error");
-        if (!(files.updatemainimg === undefined)) {
-          const originalfilename = files.updatemainimg?.originalFilename;
-          const newfilename = files.updatemainimg.newFilename;
-          if (!(originalfilename === null || newfilename === undefined)) {
-            const imgRes = mainimgDb.updateOneMainimg(
-              id,
-              theme,
-              city,
-              title,
-              originalfilename,
-              newfilename
-            );
-            return res.json(imgRes);
-          }
-        } else {
-          const imgRes = mainimgDb.updateOneMainimg(id, theme, city, title);
-          return res.json(imgRes);
-        }
-      }
-    }
-  });
-});
+  res.json(img);
+})
+//   const form = formidable({
+//     uploadDir: "uploads",
+//     keepExtensions: true,
+//     multiples: false,
+//   });
+
+//   form.parse(req, (err, fields, files) => {
+//     if (!Array.isArray(files.updatemainimg)) {
+//       //파일 좁히기 중
+//       if (
+//         !(
+//           Array.isArray(fields.id) ||
+//           Array.isArray(fields.city) ||
+//           Array.isArray(fields.title) ||
+//           Array.isArray(fields.theme)
+//         )
+//       ) {
+//         const id = fields.id;
+//         const city = fields.city;
+//         const title = fields.title;
+//         const theme = fields.theme;
+//         console.log("error");
+//         if (!(files.updatemainimg === undefined)) {
+//           const originalfilename = files.updatemainimg?.originalFilename;
+//           const newfilename = files.updatemainimg.newFilename;
+//           if (!(originalfilename === null || newfilename === undefined)) {
+//             const imgRes = mainimgDb.updateOneMainimg(
+//               id,
+//               theme,
+//               city,
+//               title,
+//               // fileInfo
+//               originalfilename,
+//               newfilename
+//             );
+//             return res.json(imgRes);
+//           }
+//         } else {
+//           const imgRes = mainimgDb.updateOneMainimg(id, theme, city, title);
+//           return res.json(imgRes);
+//         }
+//       }
+//     }
+//   });
+// });

src/db/mainimg.db.ts

-import { ObjectId } from "mongoose";
+import { HydratedDocument, ObjectId } from "mongoose";
 import { FileInfo, IFileInfo, Mainimg, MainimgType } from "../models";
 import fs from "fs/promises";
 import { fileInfoCtrl } from "../controllers";
+import formidable from "formidable";
 
 export const createMainimg = async (mainimg: MainimgType, pic: IFileInfo) => {
   const newPic = await FileInfo.create({
     originalfilename: pic.originalfilename,
     newfilename: pic.newfilename,
-    pictureauth: pic.picturepath,
+    picturepath: pic.picturepath,
   });
 
   const newMainimg = await Mainimg.create({
@@ -43,41 +44,76 @@ export const updateOneMainimg = async (
   theme: string,
   city: string,
   title: string,
-  originalfilename?: string | null,
-  newfilename?: string
+  fileInfo: formidable.File
+  // originalfilename?: string | null,
+  // newfilename?: string
 ) => {
-  const newMainimg = await Mainimg.findById(_Id);
-  console.log("error2", _Id);
-  if (!(newMainimg?.fileInfo === undefined)) {
-    if (originalfilename === undefined) {
-      await Mainimg.findByIdAndUpdate(newMainimg._id, {
-        theme: theme,
-        city: city,
-        title: title,
-      });
-      console.log("errrror4");
-    } else if (
-      !(originalfilename === undefined) &&
-      (!(theme === undefined) ||
-        !(city === undefined) ||
-        !(title === undefined))
-    ) {
-      await Mainimg.findByIdAndUpdate(newMainimg._id, {
-        theme: theme,
-        city: city,
-        title: title,
-      });
-      await FileInfo.findByIdAndUpdate(newMainimg.fileInfo._id, {
-        originalfilename: originalfilename,
-        newfilename: newfilename,
-      });
-      console.log("error6");
-    } else {
-      await FileInfo.findByIdAndUpdate(newMainimg.fileInfo._id, {
-        originalfilename: originalfilename,
-        newfilename: newfilename,
-      });
-      console.log("error5", newfilename, originalfilename, theme, city, title);
+  // const newMainimg = await Mainimg.findById(_Id)
+  const newMainimg = await Mainimg.findById(_Id).populate<{ fileInfo: IFileInfo }>(
+    "fileInfo"
+  );
+
+  console.log("error2", newMainimg);
+  if (!newMainimg) {
+    throw new Error("mainimg가 존재하지 않습니다")
+  }
+  if (
+    fileInfo.originalFilename &&
+    newMainimg?.fileInfo.originalfilename !== fileInfo.originalFilename
+  ) {
+    // 같지 않으면 기존의 파일을 디스크에서 삭제한 후
+    try {
+      console.log("picturepath", newMainimg.fileInfo.picturepath)
+      await fs.unlink(newMainimg.fileInfo.picturepath);
+    } catch (error) {
+      console.log("error", error);
     }
-  } else console.log("error3", newMainimg);
-};
+    const mainimgAvatar = newMainimg.fileInfo as HydratedDocument<IFileInfo>;
+    // 기존 fileinfo의 파일이름과 경로 변경 설정
+    mainimgAvatar.originalfilename = fileInfo.originalFilename;
+    mainimgAvatar.newfilename = fileInfo.newFilename;
+    mainimgAvatar.picturepath = fileInfo.filepath;
+    await mainimgAvatar.save();
+  }
+
+
+  newMainimg.theme = theme;
+  newMainimg.city = city;
+  newMainimg.title = title;
+  await newMainimg.save();
+  console.log("mainimg updated", newMainimg);
+  return newMainimg;
+}
+//   if (!(newMainimg?.fileInfo === undefined)) {
+//     if (originalfilename === undefined) {
+//       await Mainimg.findByIdAndUpdate(newMainimg._id, {
+//         theme: theme,
+//         city: city,
+//         title: title,
+//       });
+//       console.log("errrror4");
+//     } else if (
+//       !(originalfilename === undefined) &&
+//       (!(theme === undefined) ||
+//         !(city === undefined) ||
+//         !(title === undefined))
+//     ) {
+//       await Mainimg.findByIdAndUpdate(newMainimg._id, {
+//         theme: theme,
+//         city: city,
+//         title: title,
+//       });
+//       await FileInfo.findByIdAndUpdate(newMainimg.fileInfo._id, {
+//         originalfilename: originalfilename,
+//         newfilename: newfilename,
+//       });
+//       console.log("error6");
+//     } else {
+//       await FileInfo.findByIdAndUpdate(newMainimg.fileInfo._id, {
+//         originalfilename: originalfilename,
+//         newfilename: newfilename,
+//       });
+//       console.log("error5", newfilename, originalfilename, theme, city, title);
+//     }
+//   } else console.log("error3", newMainimg);
+// };
\ No newline at end of file

src/routes/mainimg.route.ts

 import express from "express";
-import { mainimgCtrl, authCtrl } from "../controllers";
+import { mainimgCtrl, authCtrl, fileInfoCtrl } from "../controllers";
 
 const router = express.Router();
 
@@ -11,7 +11,7 @@ router
 router
   .route("/:imgId")
   .delete(authCtrl.requireLogin,authCtrl.hasRole("admin"), mainimgCtrl.deleteMainimg)
-  .put(authCtrl.requireLogin,authCtrl.hasRole("admin"), mainimgCtrl.updateMainimg);
+  .put(authCtrl.requireLogin,authCtrl.hasRole("admin"),fileInfoCtrl.uploadFile, mainimgCtrl.updateMainimg);
 
 
 export default router;