profile 로직 수정 변경

frontend/src/apis/profile.api.ts

@@ -7,7 +7,8 @@ export const profile = async () => {
 };
 
 export const profileUpload = async (formdata: FormData) => {
-  await axios.post(`${baseUrl}/profile`, formdata);
+  const { data } = await axios.post(`${baseUrl}/profile`, formdata);
+  return data;
 };
 
 export const deleteUser = async () => {

frontend/src/auth/profile.tsx

-import React, { useEffect, useState } from "react";
+import React, { ChangeEvent, FormEvent, useEffect, useState } from "react";
 import { Profile } from "../types";
 import { profileApi } from "../apis";
 import { useAuth } from "../auth/auth.context";
@@ -7,89 +7,67 @@ import { Link } from "react-router-dom";
 export default function Profile() {
   // 로컬 저장소에는 로그인 여부만 저장
   const [email, setEmail] = useState("");
-  const [picturename, setPicturename] = useState("");
-  const [file, setFile] = useState<File>();
+  const [profile, setProfile] = useState<{
+    name: string;
+    avatar: File | null;
+  }>({ name: "", avatar: null });
+  const [avatarUrl, setAvatarUrl] = useState("");
   const [imageSrc, setImageSrc] = useState("");
-  const [nickname, setNickname] = useState("");
-  const [placeholder, setPlaceholder] = useState("");
   const { logout } = useAuth();
 
-  const handleProfile = async () => {
-    const user: Profile = await profileApi.profile();
-    return user;
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value, files } = e.target;
+    console.log("name", name, "value", value);
+    if (files) {
+      setProfile({ ...profile, [name]: files[0] });
+      showImage(files[0]);
+    } else {
+      setProfile({ ...profile, [name]: value });
+    }
   };
 
-  const PictureSrc = (fileBlob: Blob) => {
+  const showImage = (blob: Blob) => {
     const reader = new FileReader();
-
-    reader.readAsDataURL(fileBlob);
-
+    reader.readAsDataURL(blob);
     reader.onload = (data) => {
       if (typeof data.target?.result === "string") {
-        console.log(data.target?.result);
+        // 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 onNickChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newnickname = e.target.value;
-    setNickname(newnickname);
-  };
-
-  const userChange = async () => {
-    const profile = await handleProfile();
-    setEmail(profile.email);
-    setPicturename(profile.fileInfo.newfilename);
-    setPlaceholder(profile.fileInfo.nickname);
-  };
-  const handleClick = async (
-    e: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>
-  ) => {
+  const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
+    console.log("profile in submit", profile);
     const formdata = new FormData();
-    if (!(file === undefined || nickname === "")) {
-      formdata.append("picture", file);
-      formdata.append("nickname", nickname);
-      console.log("both");
-      console.log(formdata);
-      await profileApi.profileUpload(formdata);
-    } else if (!(file === undefined) && nickname === "") {
-      formdata.append("picture", file);
-      await profileApi.profileUpload(formdata);
-    } else if (file === undefined && !(nickname === "")) {
-      formdata.append("nickname", nickname);
-      await profileApi.profileUpload(formdata);
-    } else {
-      alert("수정할 정보를 입력해주세요.");
-    }
+    profile.avatar && formdata.append("avatar", profile.avatar);
+    formdata.append("name", profile.name);
+    console.log("form data", formdata.get("avatar"));
+    profileApi.profileUpload(formdata);
   };
 
-  const deleteClick = async () => {
+  const onDelete = async () => {
     if (confirm("삭제하시겠습니까?") == true) {
-      const success = await profileApi.deleteUser();
-      if (success) {
+      await profileApi.deleteUser();
       await logout();
     }
-    } else {
-    }
   };
 
   useEffect(() => {
-    userChange();
+    const getProfile = async () => {
+      const user: Profile = await profileApi.profile();
+      console.log("user in effect", user);
+      setEmail(user.email);
+      setAvatarUrl(user.avatar?.newfilename);
+      setProfile({ ...profile, name: user.name });
+    };
+    getProfile();
   }, []);
 
   return (
     <div className="grid ">
-      <form className="">
+      <form className="" onSubmit={handleSubmit}>
         <div className=" mt-10 text-2xl">프로필 수정</div>
         <div className="grid mt-10 border-0 border-y-2 border-gray-400 ">
           <div className="flex h-20">
@@ -112,38 +90,41 @@ export default function Profile() {
                     className="object-cover object-center h-full"
                   />
                 ) : (
+                  avatarUrl && (
                     <img
-                    src={"http://localhost:3000/images/" + picturename}
+                      src={"http://localhost:3000/images/" + avatarUrl}
                       className="object-cover object-center h-full"
                     />
+                  )
                 )}
               </div>
               <input
                 type="file"
-                id="files"
+                name="avatar"
+                id="avatar"
                 className="hidden"
-                onChange={onUploadFile}
+                onChange={handleChange}
               ></input>
-              <label htmlFor="files" className="border-2 m-5">
+              <label htmlFor="avatar" className="border-2 m-5">
                 이미지 선택
               </label>
             </div>
           </div>
           <div className="flex border-0 border-t-2 h-20">
             <div className="basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0">
-              별명
+              이름
             </div>
-
             <input
-              placeholder={placeholder}
+              name="name"
+              placeholder={profile.name}
               className="basis-1/5 placeholder:text-black my-6 ml-5 border-2 "
-              onChange={onNickChange}
+              onChange={handleChange}
             />
           </div>
         </div>
         <div className="flex  md:mb-20 justify-center gap-x-3">
           <button
-            onClick={handleClick}
+            onClick={handleSubmit}
             className=" mt-5 h-12 w-40 border-2 border-blue-400 text-lg  place-self-center"
           >
             저장하기
@@ -154,7 +135,8 @@ export default function Profile() {
           </button>
 
           <button
-            onClick={deleteClick}
+            type="button"
+            onClick={onDelete}
             className=" mt-5 h-12 w-40  text-lg border-2 border-red-400 place-self-center"
           >
             계정 삭제

frontend/src/types/index.tsx

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