이미지 미리보기 및 저장

.gitignore

 node_modules/
 .vscode/
 package-lock.json
-dist/
\ No newline at end of file
+dist/
+upload
\ No newline at end of file

frontend/src/apis/profile.api.ts

@@ -2,6 +2,14 @@ import axios from "axios";
 import baseUrl from "./baseUrl";
 
 export const profile = async () => {
-    const { data } = await axios.get(`${baseUrl}/profile`);
-    return data;
-  };
\ No newline at end of file
+  const { data } = await axios.get(`${baseUrl}/profile`);
+  return data;
+};
+
+export const picture = async (formdata: FormData) => {
+  await axios.post(`${baseUrl}/profile`, formdata);
+};
+
+export const nickname = async (formdata: FormData) => {
+  await axios.post(`${baseUrl}/profile`, formdata);
+};

frontend/src/auth/auth.helper.ts

 import { authApi } from "../apis";
-import { IUser, Profile } from "../types";
-import { profileApi } from "../apis";
+import { IUser } from "../types";
 
 const LOCAL_USER_INFO = "survey-user-info";
 
@@ -60,7 +59,3 @@ export const getLocalUser = () => {
   return user;
 };
 
-export const handleProfile = async () => {
-  const user : Profile = await profileApi.profile();
-  return user
-};
\ No newline at end of file

frontend/src/auth/profile.tsx

 import React, { useEffect, useState } from "react";
-import { handleProfile } from "./auth.helper";
+import { Profile } from "../types";
+import { profileApi } from "../apis";
 
 export default function Profile() {
   // 로컬 저장소에는 로그인 여부만 저장
-  const [email, setemail] = useState("");
+  const [email, setEmail] = useState("");
+  const [picturename, setPicturename] = useState("");
+  const [file, setFile] = useState<File>();
+  const [imageSrc, setImageSrc] = useState("");
+  const [nickname, setNickname] = useState("");
 
-  const emailChange = async () => {
-    const profile = await handleProfile();
+  const handleProfile = async () => {
+    const user: Profile = await profileApi.profile();
+    return user;
+  };
+
+  const PictureSrc = (fileBlob: Blob) => {
+    const reader = new FileReader();
+
+    reader.readAsDataURL(fileBlob);
 
-    setemail(profile.email);
+    reader.onload = (data) => {
+      if (typeof data.target?.result === "string") {
+        console.log(data.target?.result);
+        setImageSrc(data.target?.result);
+      }
+    };
+  };
+
+  const onUploadFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!(file === undefined)) {
+      setFile(file);
+      PictureSrc(file);
+    }
+  };
+
+  const userChange = async () => {
+    const profile = await handleProfile();
+    setEmail(profile.email);
+    setPicturename(profile.newfilename);
+  };
+  const handleClick = async (
+    e: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>
+  ) => {
+    const formdata = new FormData();
+    if (!(file === undefined || file === null)) {
+      formdata.append("picture", file);
+    }
+    await profileApi.picture(formdata);
   };
 
   useEffect(() => {
-    emailChange();
+    userChange();
   }, []);
 
   return (
     <div className="grid ">
-      <div className="ml-20 mt-10">프로필 </div>
-      <div className="grid m-20 border-0 border-y-2">
-        <div className="flex">
-          <div className="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center ">
-            Email
+      <form className="">
+        <div className="ml-40 mt-10">프로필 </div>
+        <div className="grid ml-40 mt-20 border-0 border-y-2 w-2/3">
+          <div className="flex">
+            <div className="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center ">
+              Email
+            </div>
+            <div className="basis-full my-5 p-5">{email}</div>
           </div>
-          <div className="basis-full">{email}</div>
-        </div>
-        <div className="flex border-0 border-t-2">
-          <div className="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center">
-            사진
+          <div className="flex border-0 border-t-2">
+            <div className="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center">
+              사진
+            </div>
+            <div className="basis-full p-2">
+              {imageSrc ? (
+                <img
+                  src={imageSrc}
+                  width={200}
+                  height={200}
+                  alt="preview-img"
+                />
+              ) : (
+                <img
+                  src={"http://localhost:3000/" + picturename}
+                  width={200}
+                  height={200}
+                />
+              )}
+              <input
+                type="file"
+                id="files"
+                className="hidden"
+                onChange={onUploadFile}
+              ></input>
+              <label htmlFor="files" className="border-2">
+                이미지 선택
+              </label>
+            </div>
           </div>
-          <div className="basis-full">a</div>
-        </div>
-        <div className="flex border-0 border-t-2">
-          <div className="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center">
-            별명
+          <div className="flex border-0 border-t-2">
+            <div className="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center">
+              별명
+            </div>
+            <div className="basis-full ">
+              <input
+                placeholder="빈칸"
+                className="basis-full placeholder:text-black my-10 ml-5"
+              />
+            </div>
           </div>
-          <div className="basis-full">a</div>
         </div>
-      </div>
+        <div className="grid justify-items-center mb-20">
+          <button onClick={handleClick} className=" border-2 ">
+            저장하기
+          </button>
+        </div>
+      </form>
     </div>
   );
 }

frontend/src/types/index.tsx

+import { Files } from "formidable";
+
 export interface IUser {
   email?: string;
   isLoggedIn: boolean;
@@ -28,4 +30,8 @@ export interface SignupUser {
 export interface Profile {
   _id: string;
   email: string;
+  originalfilename: string;
+  newfilename: string;
+  picturepath: string;
+  nickname: string;
 }

package.json

@@ -33,10 +33,12 @@
     "typescript": "^4.7.4"
   },
   "dependencies": {
+    "@types/formidable": "^2.0.5",
     "axios": "^0.27.2",
     "bcryptjs": "^2.4.3",
     "cookie-parser": "^1.4.6",
     "express": "^4.18.1",
+    "formidable": "^2.0.1",
     "jsonwebtoken": "^8.5.1",
     "mongoose": "^6.4.2",
     "validator": "^13.7.0"

src/app.ts

@@ -8,9 +8,10 @@ app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 app.use(cookieParser());
 
-app.get('/', (req, res) => res.send('Hello World! 안녕하세요'))
-
 app.use("/api", router);
+
+app.use(express.static(__dirname + "/upload"));
+
 app.use((err: any, req: Request, res: Response, next: NextFunction) => {
   console.log("익스프레스 에러: ", err);
   res.status(err.statusCode || 500).send(err.message || "서버 에러");

src/controllers/user.controller.ts

 import { userDb } from "../db";
 import { asyncWrap } from "../helpers/asyncWrap";
 import { Request } from "express";
+import formidable, { Fields, Files } from "formidable";
+import { ObjectId } from "mongoose";
+import fs from "fs";
 
 export interface TypedRequestAuth<T> extends Request {
   auth: T;
@@ -19,9 +22,32 @@ export const createUser = asyncWrap(async (req, res) => {
 });
 
 export const getProfile = asyncWrap(async (reqExp, res) => {
-  const req = reqExp as TypedRequestAuth<{userId : string}>;  // 앞에서는 토큰으로써 사용하기 때문에 JwtPayload 를 사용하고 여기서는 verify 에서 토큰을 디코딩했기에 ObjectId 타입의 string으로 바뀌게 된다.
+  const req = reqExp as TypedRequestAuth<{ userId: string }>; // 앞에서는 토큰으로써 사용하기 때문에 JwtPayload 를 사용하고 여기서는 verify 에서 토큰을 디코딩했기에 ObjectId 타입의 string으로 바뀌게 된다.
 
-  const {userId} = req.auth;
+  const { userId } = req.auth;
   const profile = await userDb.getProfile(userId);
-  res.json(profile)
-})
\ No newline at end of file
+  res.json(profile);
+});
+
+export const postPicture = asyncWrap(async (reqExp, res) => {
+  const req = reqExp as TypedRequestAuth<{ userId: ObjectId }>;
+  const { userId } = req.auth;
+
+  const form = formidable({
+    uploadDir: "./src/upload",
+    keepExtensions: true,
+    multiples: false,
+  });
+
+  form.parse(req, (err, fields, files) => {
+    if (!Array.isArray(files.picture)) {
+      //파일 좁히기 중
+
+      const originalfilename = files.picture.originalFilename;
+      const newfilename = files.picture.newFilename;
+      const picturepath = files.picture.filepath;
+      userDb.postPicture(userId, originalfilename, newfilename, picturepath);
+    }
+  });
+  res.json();
+});

src/db/user.db.ts

 import bcrypt from "bcryptjs";
+import { Files } from "formidable";
+import { ObjectId } from "mongoose";
 import { IUser, User } from "../models";
 
 export const createUser = async (user: IUser) => {
@@ -39,7 +41,30 @@ export const isUser = async (email: string) => {
   }
 };
 
-export const getProfile = async (userId : string) => {
-  const profile = await User.findById(userId)
-  return profile //이름 수정
-}
\ No newline at end of file
+export const getProfile = async (userId: string) => {
+  const profile = await User.findById(userId);
+  return profile; //이름 수정
+};
+
+export const postPicture = (
+  userId: ObjectId,
+  originalfilename: string | null,
+  newfilename: string,
+  picturepath: string
+) => {
+  User.findByIdAndUpdate(
+    userId,
+    {
+      originalfilename: originalfilename,
+      newfilename: newfilename,
+      picturepath: picturepath,
+    },
+    function (err: any, docs: any) {
+      if (err) {
+        console.log(err);
+      } else {
+        console.log("Updated User : ", docs);
+      }
+    }
+  );
+};

src/models/post.model.ts

 import { Document, model, Schema, Types } from "mongoose";
-import { Posting } from ".";
+// import { Posting } from ".";
 
 export interface PostType {
   title: string;

src/models/user.model.ts

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

src/routes/profile.route.ts

@@ -3,8 +3,8 @@ import { userCtrl, authCtrl } from "../controllers";
 
 const router = express.Router();
 
-router
-  .route("/")
-  .get(authCtrl.requireLogin, userCtrl.getProfile)
+router.route("/").get(authCtrl.requireLogin, userCtrl.getProfile);
+
+router.route("/").post(authCtrl.requireLogin, userCtrl.postPicture); //중간에 req쪽에 fields와 files 넣는 미들웨어 추가
 
 export default router;