프로필 ref 변경

frontend/src/auth/profile.tsx

@@ -36,10 +36,15 @@ export default function Profile() {
     }
   };
 
+  const onNickChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const nickname = e.target.value;
+    setNickname(nickname);
+  };
+
   const userChange = async () => {
     const profile = await handleProfile();
     setEmail(profile.email);
-    setPicturename(profile.newfilename);
+    setPicturename(profile.avatar.newfilename);
   };
   const handleClick = async (
     e: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>
@@ -48,6 +53,7 @@ export default function Profile() {
     if (!(file === undefined || file === null)) {
       formdata.append("picture", file);
     }
+    formdata.append("nickname", nickname);
     await profileApi.picture(formdata);
   };
 
@@ -80,7 +86,7 @@ export default function Profile() {
                 />
               ) : (
                 <img
-                  src={"http://localhost:3000/" + picturename}
+                  src={"http://localhost:3000/images/" + picturename}
                   width={200}
                   height={200}
                 />
@@ -104,6 +110,7 @@ export default function Profile() {
               <input
                 placeholder="빈칸"
                 className="basis-full placeholder:text-black my-10 ml-5"
+                onChange={onNickChange}
               />
             </div>
           </div>

frontend/src/types/index.tsx

@@ -31,8 +31,10 @@ export interface SignupUser {
 export interface Profile {
   _id: string;
   email: string;
-  originalfilename: string;
-  newfilename: string;
-  picturepath: string;
-  nickname: string;
+  avatar: {
+    originalfilename: string;
+    newfilename: string;
+    picturepath: string;
+    nickname: string;
+  };
 }

src/controllers/user.controller.ts

@@ -34,7 +34,7 @@ export const postPicture = asyncWrap(async (reqExp, res) => {
   const { userId } = req.auth;
 
   const form = formidable({
-    uploadDir: "./src/upload",
+    uploadDir: "uploads",
     keepExtensions: true,
     multiples: false,
   });
@@ -42,11 +42,34 @@ export const postPicture = asyncWrap(async (reqExp, res) => {
   form.parse(req, (err, fields, files) => {
     if (!Array.isArray(files.picture)) {
       //파일 좁히기 중
+      if (Array.isArray(fields.nickname)) {
+        console.log(fields.nickname);
+        const nickname = fields.nickname.join();
 
-      const originalfilename = files.picture.originalFilename;
-      const newfilename = files.picture.newFilename;
-      const picturepath = files.picture.filepath;
-      userDb.postPicture(userId, originalfilename, newfilename, picturepath);
+        const originalfilename = files.picture.originalFilename;
+        const newfilename = files.picture.newFilename;
+        const picturepath = files.picture.filepath;
+        userDb.postPicture(
+          userId,
+          originalfilename,
+          newfilename,
+          picturepath,
+          nickname
+        );
+      } else {
+        const nickname = fields.nickname;
+
+        const originalfilename = files.picture.originalFilename;
+        const newfilename = files.picture.newFilename;
+        const picturepath = files.picture.filepath;
+        userDb.postPicture(
+          userId,
+          originalfilename,
+          newfilename,
+          picturepath,
+          nickname
+        );
+      }
     }
   });
   res.json();

src/db/user.db.ts

 import bcrypt from "bcryptjs";
 import { ObjectId } from "mongoose";
-import { IUser, Role, Post, User } from "../models";
+import { IUser, Role, Post, User, Avatar } from "../models";
 
 export const createUser = async (user: IUser) => {
   // 비밀번호 암호화
   const hash = await bcrypt.hash(user.password, 10);
+  const newAvatar = await Avatar.create({});
   // 사용자 역할 추가: 기본값은 "user"
   let userRole = null;
   if (user.role) {
@@ -17,6 +18,7 @@ export const createUser = async (user: IUser) => {
     password: hash,
     role: userRole,
     isNew: true,
+    avatar: newAvatar,
   });
   const retUser = await newUser.save();
   return retUser;
@@ -39,8 +41,9 @@ export const findUserByPostId = async (postId: string) => {
   const post = await Post.findOne({ _id: postId }).populate("user");
   return post?.user;
 };
+
 export const getProfile = async (userId: string) => {
-  const profile = await User.findById(userId);
+  const profile = await User.findById(userId).populate("avatar");
   return profile; //이름 수정
 };
 
@@ -67,25 +70,20 @@ export const isValidUserId = async (userId: string) => {
   }
 };
 
-export const postPicture = (
+export const postPicture = async (
   userId: ObjectId,
   originalfilename: string | null,
   newfilename: string,
-  picturepath: string
+  picturepath: string,
+  nickname: string
 ) => {
-  User.findByIdAndUpdate(
-    userId,
-    {
+  const profile = await User.findById(userId);
+  if (!(profile?.avatar === undefined)) {
+    await Avatar.findByIdAndUpdate(profile.avatar._id, {
       originalfilename: originalfilename,
       newfilename: newfilename,
       picturepath: picturepath,
-    },
-    function (err: any, docs: any) {
-      if (err) {
-        console.log(err);
-      } else {
-        console.log("Updated User : ", docs);
-      }
-    }
-  );
+      nickname: nickname,
+    });
+  }
 };

src/models/fileinfo.model.ts

+import { model, Schema } from "mongoose";
+
+export interface IAvatar {
+  originalfilename?: string;
+  newfilename?: string;
+  picturepath?: string;
+  nickname?: string;
+}
+
+const Avatarschema = new Schema<IAvatar>({
+  originalfilename: { type: String, unique: true },
+  newfilename: { type: String },
+  nickname: { type: String },
+  picturepath: { type: String },
+});
+
+export default model<IAvatar>("Avatar", Avatarschema);

src/models/index.ts

 export { default as User, IUser } from "./user.model";
 export { default as Post, PostType } from "./post.model";
 export { default as Role } from "./role.model";
+export { default as Avatar, IAvatar } from "./fileinfo.model";

src/models/user.model.ts

@@ -5,10 +5,7 @@ export interface IUser {
   name?: string;
   password: string;
   role?: Types.ObjectId;
-  originalfilename?: string;
-  newfilename?: string;
-  picturepath?: string;
-  nickname?: string;
+  avatar?: Types.ObjectId;
 }
 
 const validateEmail = (email: string) => {
@@ -25,10 +22,7 @@ const schema = new Schema<IUser>(
       validate: [validateEmail, "이메일을 입력해주세요"],
     },
     name: { type: String },
-    originalfilename: { type: String },
-    newfilename: { type: String },
-    nickname: { type: String },
-    picturepath: { type: String },
+    avatar: { type: Schema.Types.ObjectId, ref: "Avatar" },
     password: { type: String, required: true, select: false },
     role: { type: Schema.Types.ObjectId, ref: "Role" },
   },