Feat: #211 유저 프로필 이미지 저장 형식을 UUID로 변경

src/components/user/auth-form/ProfileImageContainer.tsx

@@ -1,19 +1,19 @@
 import { useEffect } from 'react';
 import { GoPlusCircle } from 'react-icons/go';
 import { FaRegTrashCan } from 'react-icons/fa6';
-import { useFormContext } from 'react-hook-form';
 import { convertBytesToString } from '@utils/converter';
 import { USER_SETTINGS } from '@constants/settings';
+import { JPG, PNG, SVG, WEBP } from '@constants/mimeFileType';
 import useToast from '@hooks/useToast';
 import { useUploadProfileImage } from '@hooks/query/useUserQuery';
 import useStore from '@stores/useStore';
 
 type ProfileImageContainerProps = {
   imageUrl: string | null;
+  setImageUrl: (url: string) => void;
 };
 
-export default function ProfileImageContainer({ imageUrl }: ProfileImageContainerProps) {
-  const { setValue } = useFormContext();
+export default function ProfileImageContainer({ imageUrl, setImageUrl }: ProfileImageContainerProps) {
   const { toastWarn } = useToast();
   const { mutate: uploadImage } = useUploadProfileImage();
   const { editUserInfo } = useStore();
@@ -35,16 +35,23 @@ export default function ProfileImageContainer({ imageUrl }: ProfileImageContaine
       );
     }
 
+    const IMG_TYPE = [JPG, PNG, WEBP, SVG];
+    const permitType = IMG_TYPE.some((type) => type === file.type);
+    if (!permitType) {
+      e.target.value = '';
+      return toastWarn(`${IMG_TYPE.join(', ')} 형식의 이미지 파일만 업로드 가능합니다.`);
+    }
+
     uploadImage({ file });
 
     const localImageUrl = URL.createObjectURL(file);
-    const uniqueFileName = `PROFILE_IMAGE_${Date.now()}.jpg`;
-    setValue('profileImageName', localImageUrl);
-    editUserInfo({ profileImageName: uniqueFileName });
+    setImageUrl(localImageUrl);
+    // TODO: ZUSTAND 유저 프로필 이미지 업데이트 추후에 추가
+    // editUserInfo({ profileImageName: uniqueFileName });
   };
 
   const handleRemoveImg = () => {
-    setValue('profileImageName', null);
+    setImageUrl('');
     editUserInfo({ profileImageName: null });
   };
 

src/mocks/mockData.ts

@@ -842,17 +842,17 @@ export const FILE_DUMMY: FileInfo[] = [
 export const PROFILE_IMAGE_DUMMY = [
   {
     userId: 1,
-    file: new Blob(['프로필_이미지_1'], { type: 'image/jpeg' }),
+    file: new Blob([], { type: 'image/jpeg' }),
     uploadName: 'PROFILE_IMAGE_UUID_1.jpg',
   },
   {
     userId: 2,
-    file: new Blob(['프로필_이미지_2'], { type: 'image/jpeg' }),
+    file: new Blob([], { type: 'image/jpeg' }),
     uploadName: 'PROFILE_IMAGE_UUID_2.jpg',
   },
   {
     userId: 3,
-    file: new Blob(['프로필_이미지_3'], { type: 'image/png' }),
+    file: new Blob([], { type: 'image/png' }),
     uploadName: 'PROFILE_IMAGE_UUID_3.jpg',
   },
 ];

src/mocks/services/userServiceHandler.ts

@@ -92,6 +92,9 @@ const userServiceHandler = [
     const { fileName, extension } = fileNameParser(file.name);
     const uploadName = extension ? `${fileName}_${Date.now()}.${extension}` : `${fileName}_${Date.now()}`;
 
+    // 유저 정보에 이미지 추가
+    USER_DUMMY[userIndex].profileImageName = uploadName;
+
     // 프로필 이미지 더미 데이터 추가
     const profileImageIndex = PROFILE_IMAGE_DUMMY.findIndex((user) => user.userId === userId);
     if (profileImageIndex !== -1) {
@@ -104,9 +107,6 @@ const userServiceHandler = [
       });
     }
 
-    // 유저 정보에 이미지 링크 추가 (UUID.extension)
-    USER_DUMMY[userIndex].profileImageName = uploadName;
-
     return HttpResponse.json(null, { status: 200 });
   }),
   // 가입한 팀 목록 조회 API

src/pages/setting/UserSettingPage.tsx

@@ -25,7 +25,7 @@ export default function UserSettingPage() {
       profileImageName: userInfoData.profileImageName,
     },
   });
-  const { formState, register, watch, handleSubmit } = methods;
+  const { formState, register, watch, setValue, handleSubmit } = methods;
   const nickname = watch('nickname');
 
   const { checkedNickname, lastCheckedNickname, handleCheckNickname } = useNicknameDuplicateCheck(
@@ -52,7 +52,10 @@ export default function UserSettingPage() {
       <div className="mx-auto max-w-300 py-30">
         <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
           {/* 프로필 이미지 */}
-          <ProfileImageContainer imageUrl={watch('profileImageName')} />
+          <ProfileImageContainer
+            imageUrl={watch('profileImageName')}
+            setImageUrl={(url: string) => setValue('profileImageName', url)}
+          />
 
           {/* 아이디 */}
           <ValidationInput