diff --git a/src/components/user/auth-form/ProfileImageContainer.tsx b/src/components/user/auth-form/ProfileImageContainer.tsx index 3ce3cb17..f38f5549 100644 --- 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 index 20ac3efb..eafa5052 100644 --- 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 index 1843aa8c..db55b2f4 100644 --- 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: 'momoco@gmail.com', provider: 'LOCAL', nickname: 'momoco', - profileImageName: null, + fileName: null, bio: "Hi, I'm Momoco!", links: ['momoco@github.com'], }, @@ -204,7 +204,7 @@ export const USER_DUMMY: UserInfo[] = [ email: 'brown@example.com', provider: 'LOCAL', nickname: '브라운', - profileImageName: 'Image1.jpg', + fileName: 'Image1.jpg', bio: '게임을 좋아하는 개발자', links: ['brown@example.com'], }, @@ -215,7 +215,7 @@ export const USER_DUMMY: UserInfo[] = [ email: 'cony@example.com', provider: 'kakao', nickname: '코니', - profileImageName: 'Image2.png', + fileName: 'Image2.png', bio: '커피와 책을 사랑하는 디자이너', links: ['cony@example.com'], }, @@ -226,7 +226,7 @@ export const USER_DUMMY: UserInfo[] = [ email: 'leonard@example.com', provider: 'google', nickname: '레너드', - profileImageName: 'Image3.jpeg', + fileName: 'Image3.jpeg', bio: '자연을 사랑하는 사진작가', links: ['leonard@example.com'], }, @@ -237,7 +237,7 @@ export const USER_DUMMY: UserInfo[] = [ email: 'sally@example.com', provider: 'LOCAL', nickname: '샐리', - profileImageName: 'Image1.webp', + fileName: 'Image1.webp', bio: '24시간이 모자란 워커홀릭 개발자', links: ['sally@example.com'], }, @@ -248,7 +248,7 @@ export const USER_DUMMY: UserInfo[] = [ email: 'james@example.com', provider: 'kakao', nickname: '제임스', - profileImageName: 'Image2.png', + fileName: 'Image2.png', bio: '커피를 코드로 바꾸는 마법사', links: ['james@example.com'], }, @@ -259,7 +259,7 @@ export const USER_DUMMY: UserInfo[] = [ email: 'edward@example.com', provider: 'google', nickname: '에드워드', - profileImageName: 'Image3.jpeg', + fileName: 'Image3.jpeg', bio: '버그를 춤추게 하는 디버깅의 달인', links: ['edward@example.com'], }, @@ -270,7 +270,7 @@ export const USER_DUMMY: UserInfo[] = [ email: 'mary@example.com', provider: 'LOCAL', nickname: '메리', - profileImageName: 'Image4.jpg', + fileName: 'Image4.jpg', bio: '픽셀을 요리하는 디자인 셰프', links: ['mary@example.com'], }, @@ -281,7 +281,7 @@ export const USER_DUMMY: UserInfo[] = [ email: 'tom@example.com', provider: 'LOCAL', nickname: '톰', - profileImageName: 'Image5.jpeg', + fileName: 'Image5.jpeg', bio: '알고리즘으로 세상을 정복하려는 꿈나무', links: ['tom@example.com'], }, diff --git a/src/mocks/services/authServiceHandler.ts b/src/mocks/services/authServiceHandler.ts index 6644a7c7..3f1af102 100644 --- 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 index 793533a8..05331a83 100644 --- 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 index caef0dd1..2fd63c41 100644 --- 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() {
{/* 프로필 이미지 */} setValue('profileImageName', url)} + imageUrl={watch('fileName')} + setImageUrl={(url: string) => setValue('fileName', url)} /> {/* 아이디 */} diff --git a/src/stores/useStore.ts b/src/stores/useStore.ts index 573d73c1..15d2464b 100644 --- a/src/stores/useStore.ts +++ b/src/stores/useStore.ts @@ -81,7 +81,7 @@ const createUserSlice: StateCreator = (set) => ({ nickname: '', bio: null, links: [], - profileImageName: null, + fileName: null, }, setUserInfo: (newUserInfo: User) => @@ -104,7 +104,7 @@ const createUserSlice: StateCreator = (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 index eee72db0..259aef5a 100644 --- 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; +export type UserProfileImageForm = Pick; export type SearchUser = Pick; export type UserWithRole = SearchUser & Pick; @@ -28,7 +28,7 @@ export type EditUserInfoResponse = Pick; export type EditUserInfoRequest = Omit; export type EditUserLinksForm = Pick; -export type UserSignUpForm = Omit & { +export type UserSignUpForm = Omit & { verificationCode: string; password: string; checkPassword: string;