Merge remote-tracking branch 'origin/MK17' into develop

frontend/src/auth/profile.tsx

@@ -10,6 +10,7 @@ export default function Profile() {
   const [file, setFile] = useState<File>();
   const [imageSrc, setImageSrc] = useState("");
   const [nickname, setNickname] = useState("");
+  const [placeholder, setPlaceholder] = useState("");
   const { logout } = useAuth();
 
   const handleProfile = async () => {
@@ -39,28 +40,39 @@ export default function Profile() {
   };
 
   const onNickChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const nickname = e.target.value;
-    setNickname(nickname);
+    const newnickname = e.target.value;
+    setNickname(newnickname);
   };
 
   const userChange = async () => {
     const profile = await handleProfile();
     setEmail(profile.email);
     setPicturename(profile.avatar.newfilename);
+    setPlaceholder(profile.avatar.nickname);
   };
   const handleClick = async (
     e: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>
   ) => {
     const formdata = new FormData();
-    if (!(file === undefined || file === null)) {
+    if (!(file === undefined || nickname === "")) {
       formdata.append("picture", file);
-    }
       formdata.append("nickname", nickname);
+      console.log("both");
+      await profileApi.picture(formdata);
+    } else if (!(nickname === "")) {
+      formdata.append("nickname", nickname);
+      console.log("picture");
       await profileApi.picture(formdata);
+    } else {
+      alert("수정할 정보를 입력해주세요.");
+    }
   };
 
   const deleteClick = async () => {
-    await profileApi.deleteUser().then(() => logout());
+    await profileApi.deleteUser().then(() => {
+      logout();
+      console.log("test");
+    });
   };
 
   useEffect(() => {
@@ -68,64 +80,69 @@ export default function Profile() {
   }, []);
 
   return (
-    <div className="grid ">
-      <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="grid md:px-60">
+      <form className="justify-items-center">
+        <div className="ml-20 mt-10">프로필 수정</div>
+        <div className="grid mt-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 ">
+            <div className="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0">
               Email
             </div>
             <div className="basis-full my-5 p-5">{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="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0">
               사진
             </div>
-            <div className="basis-full p-2">
+            <div className="basis-full p-2 ">
+              <div className="overflow-hidden w-40 h-40 rounded-full border-2 m-5">
                 {imageSrc ? (
                   <img
                     src={imageSrc}
-                  width={200}
-                  height={200}
-                  alt="preview-img"
+                    className="object-cover object-center h-full"
                   />
                 ) : (
                   <img
                     src={"http://localhost:3000/images/" + picturename}
-                  width={200}
-                  height={200}
+                    className="object-cover object-center h-full"
                   />
                 )}
+              </div>
               <input
                 type="file"
                 id="files"
                 className="hidden"
                 onChange={onUploadFile}
               ></input>
-              <label htmlFor="files" className="border-2">
+              <label htmlFor="files" className="border-2 m-5">
                 이미지 선택
               </label>
             </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="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0">
               별명
             </div>
             <div className="basis-full ">
               <input
-                placeholder="빈칸"
-                className="basis-full placeholder:text-black my-10 ml-5"
+                placeholder={placeholder}
+                className="basis-full placeholder:text-black my-10 ml-5 border-2"
                 onChange={onNickChange}
               />
             </div>
           </div>
         </div>
-        <div className="grid justify-items-center mb-20">
-          <button onClick={handleClick} className=" border-2 ">
+        <div className="grid grid-cols-2 my-4 md:mb-20 justify-items-center">
+          <button
+            onClick={handleClick}
+            className="w-20 border-2 shrink-0 ml-10"
+          >
             저장하기
           </button>
-          <button onClick={deleteClick} className="border-2">
+          <button
+            onClick={deleteClick}
+            className="w-20 border-2 shrink-0 mr-10"
+          >
             계정 삭제
           </button>
         </div>

src/controllers/user.controller.ts

@@ -42,36 +42,26 @@ 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,
-          nickname
-        );
-      } else {
+      if (!Array.isArray(fields.nickname)) {
         const nickname = fields.nickname;
-
+        if (!(files.picture === undefined)) {
           const originalfilename = files.picture.originalFilename;
           const newfilename = files.picture.newFilename;
           const picturepath = files.picture.filepath;
           userDb.postPicture(
             userId,
+            nickname,
             originalfilename,
             newfilename,
-          picturepath,
-          nickname
+            picturepath
           );
+        } else {
+          userDb.postPicture(userId, nickname);
+        }
       }
     }
   });
+
   res.json();
 });
 

src/db/user.db.ts

@@ -73,13 +73,25 @@ export const isValidUserId = async (userId: string) => {
 
 export const postPicture = async (
   userId: ObjectId,
-  originalfilename: string | null,
-  newfilename: string,
-  picturepath: string,
-  nickname: string
+  nickname: string,
+  originalfilename?: string | null,
+  newfilename?: string,
+  picturepath?: string
 ) => {
   const profile = await User.findById(userId);
+
   if (!(profile?.avatar === undefined)) {
+    if (originalfilename === null) {
+      await Avatar.findByIdAndUpdate(profile.avatar._id, {
+        nickname: nickname,
+      });
+    } else if (nickname === "") {
+      await Avatar.findByIdAndUpdate(profile.avatar._id, {
+        originalfilename: originalfilename,
+        newfilename: newfilename,
+        picturepath: picturepath,
+      });
+    } else {
       await Avatar.findByIdAndUpdate(profile.avatar._id, {
         originalfilename: originalfilename,
         newfilename: newfilename,
@@ -87,6 +99,7 @@ export const postPicture = async (
         nickname: nickname,
       });
     }
+  }
 };
 
 export const deleteUser = async (userId: ObjectId) => {