Fix: #279 이미지 업로드 및 조회 오류 수정 (#284)

* Fix: #279 이미지 파일 변수명 변경 * Fix: #279 이미지 삭제 시 파일 변수명 변경 * Fix: #279 누락된 핸들러 내부 이미지 파일 변수명 변경
GU-99 · Dec 10, 2024 · d3fcfb3 · d3fcfb3
1 parent 3529f62
commit d3fcfb3
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 40 deletions.
diff --git a/src/components/user/auth-form/ProfileImageContainer.tsx b/src/components/user/auth-form/ProfileImageContainer.tsx
@@ -34,8 +34,8 @@ export default function ProfileImageContainer({ imageUrl, setImageUrl }: Profile
       setImageUrl(profileImageUrl);
     };
 
-    if (userInfo.profileImageName) handleGetProfileImage(userInfo.profileImageName);
-  }, [userInfo.profileImageName]);
+    if (userInfo.fileName) handleGetProfileImage(userInfo.fileName);
+  }, [userInfo.fileName]);
 
   useEffect(() => {
     return () => {

diff --git a/src/hooks/query/useUserQuery.ts b/src/hooks/query/useUserQuery.ts
@@ -40,7 +40,7 @@ export function useUploadProfileImage() {
       if (!imageName) return toastError('이미지 업로드에 실패했습니다. 다시 시도해 주세요.');
 
       toastSuccess('이미지가 업로드되었습니다.');
-      editUserInfo({ profileImageName: imageName });
+      editUserInfo({ fileName: imageName });
       queryClient.invalidateQueries({ queryKey: userProfileImageQueryKey });
     },
   });
@@ -59,7 +59,7 @@ export function useDeleteProfileImage() {
     onError: () => toastError('이미지 삭제에 실패했습니다. 다시 시도해 주세요.'),
     onSuccess: () => {
       toastSuccess('이미지가 삭제되었습니다.');
-      editUserInfo({ profileImageName: null });
+      editUserInfo({ fileName: null });
       queryClient.invalidateQueries({ queryKey: userProfileImageQueryKey });
     },
   });

diff --git a/src/mocks/mockData.ts b/src/mocks/mockData.ts
@@ -30,7 +30,7 @@ export const USER_DUMMY: UserInfo[] = [
     nickname: '판다',
     bio: '풀스택 개발자를 목표중',
     links: [],
-    profileImageName: null,
+    fileName: null,
   },
   {
     userId: 2,
@@ -41,7 +41,7 @@ export const USER_DUMMY: UserInfo[] = [
     nickname: 'kakao_oauth_2',
     bio: '디자이너 + 프론트엔드 육각형 인재',
     links: [],
-    profileImageName: null,
+    fileName: null,
   },
   {
     userId: 3,
@@ -52,7 +52,7 @@ export const USER_DUMMY: UserInfo[] = [
     nickname: '랫서판다',
     bio: '급성장중인 프론트엔드 취준생',
     links: [],
-    profileImageName: null,
+    fileName: null,
   },
   {
     userId: 4,
@@ -63,7 +63,7 @@ export const USER_DUMMY: UserInfo[] = [
     nickname: '북금곰',
     bio: '힘을 숨긴 프론트엔드 취준생',
     links: [],
-    profileImageName: null,
+    fileName: null,
   },
   {
     userId: 5,
@@ -74,7 +74,7 @@ export const USER_DUMMY: UserInfo[] = [
     nickname: '호랑이',
     bio: '백엔드 5년차',
     links: [],
-    profileImageName: null,
+    fileName: null,
   },
   {
     userId: 6,
@@ -85,7 +85,7 @@ export const USER_DUMMY: UserInfo[] = [
     nickname: '나무늘보',
     bio: '식스센스 초감각형 풀스택 개발자',
     links: [],
-    profileImageName: null,
+    fileName: null,
   },
   {
     userId: 7,
@@ -96,7 +96,7 @@ export const USER_DUMMY: UserInfo[] = [
     nickname: 'kakao_oauth_7',
     bio: '초럭키비키 백엔드 개발자',
     links: [],
-    profileImageName: null,
+    fileName: null,
   },
   {
     userId: 8,
@@ -107,7 +107,7 @@ export const USER_DUMMY: UserInfo[] = [
     nickname: '벨루가',
     bio: '팔방미인 디자이너',
     links: [],
-    profileImageName: null,
+    fileName: null,
   },
   {
     userId: 9,
@@ -118,7 +118,7 @@ export const USER_DUMMY: UserInfo[] = [
     nickname: '펭귄',
     bio: 'MySQL, Postgre SQL DBA',
     links: [],
-    profileImageName: null,
+    fileName: null,
   },
   {
     userId: 10,
@@ -129,7 +129,7 @@ export const USER_DUMMY: UserInfo[] = [
     nickname: 'google_oauth_10',
     bio: 'DevOps 3년차',
     links: [],
-    profileImageName: null,
+    fileName: null,
   },
   {
     userId: 11,
@@ -140,7 +140,7 @@ export const USER_DUMMY: UserInfo[] = [
     nickname: '판다아빠',
     bio: '풀스택 개발자 10년차',
     links: [],
-    profileImageName: null,
+    fileName: null,
   },
   {
     userId: 12,
@@ -151,7 +151,7 @@ export const USER_DUMMY: UserInfo[] = [
     nickname: '판다엄마',
     bio: '디자이너 10년차',
     links: [],
-    profileImageName: null,
+    fileName: null,
   },
   {
     userId: 13,
@@ -162,7 +162,7 @@ export const USER_DUMMY: UserInfo[] = [
     nickname: '판다형',
     bio: 'DevOps 2년차',
     links: [],
-    profileImageName: null,
+    fileName: null,
   },
   {
     userId: 14,
@@ -173,7 +173,7 @@ export const USER_DUMMY: UserInfo[] = [
     nickname: '판다누나',
     bio: 'DBA 2년차',
     links: [],
-    profileImageName: null,
+    fileName: null,
   },
   {
     userId: 15,
@@ -184,7 +184,7 @@ export const USER_DUMMY: UserInfo[] = [
     nickname: '판다동생',
     bio: '미래의 슈퍼 개발자',
     links: [],
-    profileImageName: null,
+    fileName: null,
   },
   {
     userId: 16,
@@ -193,7 +193,7 @@ export const USER_DUMMY: UserInfo[] = [
     email: '[email protected]',
     provider: 'LOCAL',
     nickname: 'momoco',
-    profileImageName: null,
+    fileName: null,
     bio: "Hi, I'm Momoco!",
     links: ['[email protected]'],
   },
@@ -204,7 +204,7 @@ export const USER_DUMMY: UserInfo[] = [
     email: '[email protected]',
     provider: 'LOCAL',
     nickname: '브라운',
-    profileImageName: 'Image1.jpg',
+    fileName: 'Image1.jpg',
     bio: '게임을 좋아하는 개발자',
     links: ['[email protected]'],
   },
@@ -215,7 +215,7 @@ export const USER_DUMMY: UserInfo[] = [
     email: '[email protected]',
     provider: 'kakao',
     nickname: '코니',
-    profileImageName: 'Image2.png',
+    fileName: 'Image2.png',
     bio: '커피와 책을 사랑하는 디자이너',
     links: ['[email protected]'],
   },
@@ -226,7 +226,7 @@ export const USER_DUMMY: UserInfo[] = [
     email: '[email protected]',
     provider: 'google',
     nickname: '레너드',
-    profileImageName: 'Image3.jpeg',
+    fileName: 'Image3.jpeg',
     bio: '자연을 사랑하는 사진작가',
     links: ['[email protected]'],
   },
@@ -237,7 +237,7 @@ export const USER_DUMMY: UserInfo[] = [
     email: '[email protected]',
     provider: 'LOCAL',
     nickname: '샐리',
-    profileImageName: 'Image1.webp',
+    fileName: 'Image1.webp',
     bio: '24시간이 모자란 워커홀릭 개발자',
     links: ['[email protected]'],
   },
@@ -248,7 +248,7 @@ export const USER_DUMMY: UserInfo[] = [
     email: '[email protected]',
     provider: 'kakao',
     nickname: '제임스',
-    profileImageName: 'Image2.png',
+    fileName: 'Image2.png',
     bio: '커피를 코드로 바꾸는 마법사',
     links: ['[email protected]'],
   },
@@ -259,7 +259,7 @@ export const USER_DUMMY: UserInfo[] = [
     email: '[email protected]',
     provider: 'google',
     nickname: '에드워드',
-    profileImageName: 'Image3.jpeg',
+    fileName: 'Image3.jpeg',
     bio: '버그를 춤추게 하는 디버깅의 달인',
     links: ['[email protected]'],
   },
@@ -270,7 +270,7 @@ export const USER_DUMMY: UserInfo[] = [
     email: '[email protected]',
     provider: 'LOCAL',
     nickname: '메리',
-    profileImageName: 'Image4.jpg',
+    fileName: 'Image4.jpg',
     bio: '픽셀을 요리하는 디자인 셰프',
     links: ['[email protected]'],
   },
@@ -281,7 +281,7 @@ export const USER_DUMMY: UserInfo[] = [
     email: '[email protected]',
     provider: 'LOCAL',
     nickname: '톰',
-    profileImageName: 'Image5.jpeg',
+    fileName: 'Image5.jpeg',
     bio: '알고리즘으로 세상을 정복하려는 꿈나무',
     links: ['[email protected]'],
   },

diff --git a/src/mocks/services/authServiceHandler.ts b/src/mocks/services/authServiceHandler.ts
@@ -42,7 +42,7 @@ const authServiceHandler = [
       userId: USER_DUMMY.length + 1,
       provider: 'LOCAL',
       email,
-      profileImageName: null,
+      fileName: null,
       ...restSignUpData,
     };
     USER_DUMMY.push(newUser);
@@ -182,7 +182,7 @@ const authServiceHandler = [
         email,
         provider,
         nickname: userInfo.id,
-        profileImageName: null,
+        fileName: null,
         bio: null,
         links: [],
       };

diff --git a/src/mocks/services/userServiceHandler.ts b/src/mocks/services/userServiceHandler.ts
@@ -94,7 +94,7 @@ const userServiceHandler = [
     const uploadName = extension ? `${fileName}_${Date.now()}.${extension}` : `${fileName}_${Date.now()}`;
 
     // 유저 정보에 이미지 추가
-    USER_DUMMY[userIndex].profileImageName = uploadName;
+    USER_DUMMY[userIndex].fileName = uploadName;
 
     // 프로필 이미지 더미 데이터 추가
     const profileImageIndex = PROFILE_IMAGE_DUMMY.findIndex((user) => user.userId === userId);
@@ -162,7 +162,7 @@ const userServiceHandler = [
       );
     }
 
-    USER_DUMMY[userIndex].profileImageName = null;
+    USER_DUMMY[userIndex].fileName = null;
 
     const fileIndex = PROFILE_IMAGE_DUMMY.findIndex((file) => file.userId === userId);
     if (fileIndex === -1) {

diff --git a/src/pages/setting/UserSettingPage.tsx b/src/pages/setting/UserSettingPage.tsx
@@ -23,7 +23,7 @@ export default function UserSettingPage() {
       email: userInfoData.email,
       nickname: userInfoData.nickname,
       bio: userInfoData.bio,
-      profileImageName: userInfoData.profileImageName,
+      fileName: userInfoData.fileName,
     },
   });
   const { formState, register, watch, setValue, handleSubmit } = methods;
@@ -56,8 +56,8 @@ export default function UserSettingPage() {
           <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
             {/* 프로필 이미지 */}
             <ProfileImageContainer
-              imageUrl={watch('profileImageName')}
-              setImageUrl={(url: string) => setValue('profileImageName', url)}
+              imageUrl={watch('fileName')}
+              setImageUrl={(url: string) => setValue('fileName', url)}
             />
 
             {/* 아이디 */}

diff --git a/src/stores/useStore.ts b/src/stores/useStore.ts
@@ -81,7 +81,7 @@ const createUserSlice: StateCreator<Store, [], [], UserStore> = (set) => ({
     nickname: '',
     bio: null,
     links: [],
-    profileImageName: null,
+    fileName: null,
   },
 
   setUserInfo: (newUserInfo: User) =>
@@ -104,7 +104,7 @@ const createUserSlice: StateCreator<Store, [], [], UserStore> = (set) => ({
         nickname: '',
         bio: null,
         links: [],
-        profileImageName: null,
+        fileName: null,
       },
     });
     localStorage.removeItem('user-storage');

diff --git a/src/types/UserType.tsx b/src/types/UserType.tsx
@@ -10,14 +10,14 @@ export type User = {
   nickname: string;
   bio: string | null;
   links: string[];
-  profileImageName: string | null;
+  fileName: string | null;
 };
 
 export type UserInfo = User & {
   password: string | null;
 };
 
-export type UserProfileImageForm = Pick<User, 'profileImageName'>;
+export type UserProfileImageForm = Pick<User, 'fileName'>;
 
 export type SearchUser = Pick<User, 'userId' | 'nickname'>;
 export type UserWithRole = SearchUser & Pick<Role, 'roleName'>;
@@ -28,7 +28,7 @@ export type EditUserInfoResponse = Pick<User, 'userId' | 'nickname' | 'bio'>;
 export type EditUserInfoRequest = Omit<EditUserInfoResponse, 'userId'>;
 export type EditUserLinksForm = Pick<User, 'links'>;
 
-export type UserSignUpForm = Omit<User, 'userId' | 'provider' | 'profileImageName'> & {
+export type UserSignUpForm = Omit<User, 'userId' | 'provider' | 'fileName'> & {
   verificationCode: string;
   password: string;
   checkPassword: string;