From 6e2c5e63e86f68330e1efe2a5899aa00615cba16 Mon Sep 17 00:00:00 2001
From: yoonyesol <maniac970430@naver.com>
Date: Sun, 13 Oct 2024 23:21:24 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20#211=20=EC=9C=A0=EC=A0=80=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=9C=ED=95=84=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=A0=80?=
 =?UTF-8?q?=EC=9E=A5=20=ED=98=95=EC=8B=9D=EC=9D=84=20UUID=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../user/auth-form/ProfileImageContainer.tsx  | 21 ++++++++++++-------
 src/mocks/mockData.ts                         |  6 +++---
 src/mocks/services/userServiceHandler.ts      |  6 +++---
 src/pages/setting/UserSettingPage.tsx         |  7 +++++--
 4 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/components/user/auth-form/ProfileImageContainer.tsx b/src/components/user/auth-form/ProfileImageContainer.tsx
index 2fe4f39d..2d44b635 100644
--- a/src/components/user/auth-form/ProfileImageContainer.tsx
+++ b/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 });
   };
 
diff --git a/src/mocks/mockData.ts b/src/mocks/mockData.ts
index 162a8591..65d8aeeb 100644
--- a/src/mocks/mockData.ts
+++ b/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',
   },
 ];
diff --git a/src/mocks/services/userServiceHandler.ts b/src/mocks/services/userServiceHandler.ts
index 7bc58402..c81d9492 100644
--- a/src/mocks/services/userServiceHandler.ts
+++ b/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
diff --git a/src/pages/setting/UserSettingPage.tsx b/src/pages/setting/UserSettingPage.tsx
index 773531b7..65dc4f47 100644
--- a/src/pages/setting/UserSettingPage.tsx
+++ b/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