css 수정 및 이미지 중첩 수정

frontend/src/auth/profile.tsx

@@ -42,6 +42,8 @@ export default function Profile() {
     console.log("profile in submit", profile);
     const formdata = new FormData();
     profile.avatar && formdata.append("avatar", profile.avatar);
+
+    console.log(profile.avatar);
     formdata.append("name", profile.name);
     console.log("form data", formdata.get("avatar"));
     profileApi.profileUpload(formdata);

frontend/src/home/header.tsx

@@ -14,65 +14,73 @@ 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 border-sky-200 bg-gradient-to-t from-sky-200">
-        <div className="flex mt-5 justify-between pr-3">
-          <button className="ml-3 shrink-0  md:text-2xl">
-            <Link to="/" className="hover:text-sky-300 active:text-purple-500">
-              Travel Report
-            </Link>
-          </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-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="whitespace-nowrap bg-white border-y-4  border-r-4 border-sky-500 rounded-r-full pr-4">
-              검색
-            </button>
-          </div>
-        </div>
-        <div className="flex justify-end ">
-          {user.isLoggedIn ? (
-            <div className="flex text-xs">
-              <Link to="/profile" className="mr-2 ">
-                프로필
-              </Link>
-              <div className="border-0 border-r-2 border-black "></div>
-              {user.role === "admin" ? <Link to={"/admin"}>어드민</Link> : null}
-              <button
-                className="ml-2 text-xs"
-                onClick={() => {
-                  logout();
-                }}
+    <div className="flex flex-col ">
+      <div className="flex flex-col md:px-56 z-10 ">
+        <div className="flex flex-col-reverse pt-3 pb-12   ">
+          <div className="flex mt-5 justify-between pr-3">
+            <button className="ml-3 shrink-0  md:text-2xl">
+              <Link
+                to="/"
+                className="hover:text-sky-300 active:text-purple-500 text-white"
               >
-                로그아웃
+                Travel Report
+              </Link>
+            </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-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="whitespace-nowrap bg-white border-y-4  border-r-4 border-sky-500 rounded-r-full pr-4">
+                검색
               </button>
             </div>
-          ) : (
-            <button className="shrink-0 ">
+          </div>
+          <div className="flex justify-end ">
+            {user.isLoggedIn ? (
+              <div className="flex text-xs">
+                <Link to="/profile" className="mr-2 ">
+                  프로필
+                </Link>
+                <div className="border-0 border-r-2 border-black "></div>
+                {user.role === "admin" ? (
+                  <Link to={"/admin"}>어드민</Link>
+                ) : null}
+                <button
+                  className="ml-2 text-xs"
+                  onClick={() => {
+                    logout();
+                  }}
+                >
+                  로그아웃
+                </button>
+              </div>
+            ) : (
+              <button className="shrink-0 ">
+                <Link
+                  className="hover:text-sky-300 focus:text-purple-500 text-xs grid items-center"
+                  to="/login"
+                >
+                  로그인
+                </Link>
+              </button>
+            )}
+            <div className="ml-2 border-0 border-r-2 border-black "></div>
+            <div></div>
+            <button className="shrink-0 mr-3 text-xs ">
               <Link
-                className="hover:text-sky-300 focus:text-purple-500 text-xs grid items-center"
-                to="/login"
+                to="/board"
+                className="hover:text-sky-300 focus:text-purple-500 mx-2 grid items-center"
               >
-                로그인
+                게시판
               </Link>
             </button>
-          )}
-          <div className="ml-2 border-0 border-r-2 border-black "></div>
-          <div></div>
-          <button className="shrink-0 mr-3 text-xs ">
-            <Link
-              to="/board"
-              className="hover:text-sky-300 focus:text-purple-500 mx-2 grid items-center"
-            >
-              게시판
-            </Link>
-          </button>
+          </div>
         </div>
-      </div>
 
-      <Outlet />
+        <Outlet />
+      </div>
+      <div className="bg-center z-0 absolute w-full h-44 overflow-hidden object-cover object-center bg-[url('https://blog.kakaocdn.net/dn/b5qUMZ/btqN9NEYqcW/ZuZmPcI4u7bdK89shT3RL1/img.jpg')]"></div>
     </div>
   );
 }

frontend/src/home/theme.tsx

@@ -15,7 +15,7 @@ export default function Theme({ handleClick }: ThemeProps) {
   };
 
   return (
-    <div className="overflow-x-auto flex rounded py-2 md:p-2 border-b-2 divide-x-2">
+    <div className="overflow-x-auto flex rounded py-2 md:p-4 shadow-lg divide-x-2 bg-white">
       <div onClick={() => clickActive(1)}>
         <button
           id={"surfing"}

frontend/src/pages/citylist.tsx

@@ -15,7 +15,7 @@ export default function Citylist({ handleClick }: CityProps) {
   };
 
   return (
-    <div className="overflow-auto w-full  flex flex-row md:flex-col md:mr-24 bg-sky-100">
+    <div className="overflow-auto w-full  flex flex-row md:flex-col md:mr-24 bg-red-100 shadow-lg">
       <div className="text-start px-5 py-2 bg-white whitespace-nowrap">
         도시
       </div>

src/controllers/user.controller.ts

@@ -2,9 +2,9 @@ import { userDb } from "../db";
 import { asyncWrap } from "../helpers/asyncWrap";
 import { Request } from "express";
 import formidable from "formidable";
-import { ObjectId } from "mongoose";
-import fs from "fs";
+import fs from "fs/promises";
 import { TypedRequest } from "../types";
+import { FileInfo, IUser, User } from "../models";
 
 export interface TypedRequestAuth<T> extends Request {
   auth: T;
@@ -36,7 +36,27 @@ export const updateProfile = asyncWrap(async (reqExp, res) => {
   const { name } = req.body;
   const { avatar }: { avatar: formidable.File } = req.files;
 
-  const user = await userDb.updateProfile(userId, name, avatar);
+  const duplicate = await FileInfo.findOne({
+    originalfilename: avatar.originalFilename,
+  }); // 같은 사진이 DB에 있는지 확인
+
+  console.log(duplicate);
+  if (!duplicate) {
+    //만약 같은 사진이 DB안에 존재하지 않을 경우
+    const user = await userDb.updateProfile(userId, name, avatar);
+
+    res.json(user);
+  } else {
+    // 같은 사진이 DB안에 존재할 경우
+
+    await fs.unlink(avatar.filepath);
+    // await FileInfo.deleteOne({ _id: user?.avatar }); // 덮기 전의 FileInfo 삭제
+    const user = await User.findById(userId);
+    if (user !== null) {
+      user.avatar = duplicate._id;
+      await user.save();
+    }
+  }
 
   // if (!Array.isArray(file.avatar)) {
   //   //파일 좁히기 중
@@ -58,8 +78,6 @@ export const updateProfile = asyncWrap(async (reqExp, res) => {
   //     }
   //   }
   // }
-
-  res.json(user);
 });
 
 export const deleteUser = asyncWrap(async (reqExp, res) => {