Chore: #128 유저 정보 값 수정

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

@@ -7,7 +7,7 @@ import useToast from '@hooks/useToast';
 import { useEffect } from 'react';
 
 type ProfileImageContainerProps = {
-  imageUrl: string;
+  imageUrl: string | null;
   setImageUrl: (url: string) => void;
 };
 
@@ -34,12 +34,12 @@ export default function ProfileImageContainer({ imageUrl, setImageUrl }: Profile
 
     const image = URL.createObjectURL(file);
     setImageUrl(image);
-    setValue('profileImageUrl', image);
+    setValue('profileImageName', image);
   };
 
   const handleRemoveImg = () => {
     setImageUrl('');
-    setValue('profileImageUrl', '');
+    setValue('profileImageName', '');
   };
 
   return (

src/mocks/mockData.ts

@@ -23,12 +23,12 @@ type ProjectUser = {
 export const JWT_TOKEN_DUMMY = 'mocked-header.mocked-payload-4.mocked-signature';
 
 export const USER_INFO_DUMMY = {
-  // provider: 'LOCAL',
-  // userId: 1,
+  provider: 'LOCAL',
+  userId: 1,
   username: 'test123',
   email: '[email protected]',
   nickname: 'momoco',
-  profileImageUrl: '',
+  profileImageName: null,
   bio: "Hi, I'm Momoco!",
   links: ['[email protected]'],
 };
@@ -43,7 +43,7 @@ export const USER_DUMMY: User[] = [
     nickname: '판다',
     bio: '풀스택 개발자를 목표중',
     links: [],
-    profileImageUrl: null,
+    profileImageName: null,
   },
   {
     userId: 2,
@@ -53,7 +53,7 @@ export const USER_DUMMY: User[] = [
     nickname: '카멜레온',
     bio: '디자이너 + 프론트엔드 육각형 인재',
     links: [],
-    profileImageUrl: null,
+    profileImageName: null,
   },
   {
     userId: 3,
@@ -63,7 +63,7 @@ export const USER_DUMMY: User[] = [
     nickname: '랫서판다',
     bio: '급성장중인 프론트엔드 취준생',
     links: [],
-    profileImageUrl: null,
+    profileImageName: null,
   },
   {
     userId: 4,
@@ -73,7 +73,7 @@ export const USER_DUMMY: User[] = [
     nickname: '북금곰',
     bio: '힘을 숨긴 프론트엔드 취준생',
     links: [],
-    profileImageUrl: null,
+    profileImageName: null,
   },
   {
     userId: 5,
@@ -83,7 +83,7 @@ export const USER_DUMMY: User[] = [
     nickname: '호랑이',
     bio: '백엔드 5년차',
     links: [],
-    profileImageUrl: null,
+    profileImageName: null,
   },
   {
     userId: 6,
@@ -93,7 +93,7 @@ export const USER_DUMMY: User[] = [
     nickname: '나무늘보',
     bio: '식스센스 초감각형 풀스택 개발자',
     links: [],
-    profileImageUrl: null,
+    profileImageName: null,
   },
   {
     userId: 7,
@@ -103,7 +103,7 @@ export const USER_DUMMY: User[] = [
     nickname: '웜뱃',
     bio: '초럭키비키 백엔드 개발자',
     links: [],
-    profileImageUrl: null,
+    profileImageName: null,
   },
   {
     userId: 8,
@@ -113,7 +113,7 @@ export const USER_DUMMY: User[] = [
     nickname: '벨루가',
     bio: '팔방미인 디자이너',
     links: [],
-    profileImageUrl: null,
+    profileImageName: null,
   },
   {
     userId: 9,
@@ -123,7 +123,7 @@ export const USER_DUMMY: User[] = [
     nickname: '펭귄',
     bio: 'MySQL, Postgre SQL DBA',
     links: [],
-    profileImageUrl: null,
+    profileImageName: null,
   },
   {
     userId: 10,
@@ -133,7 +133,7 @@ export const USER_DUMMY: User[] = [
     nickname: '비버',
     bio: 'DevOps 3년차',
     links: [],
-    profileImageUrl: null,
+    profileImageName: null,
   },
   {
     userId: 11,
@@ -143,7 +143,7 @@ export const USER_DUMMY: User[] = [
     nickname: '판다아빠',
     bio: '풀스택 개발자 10년차',
     links: [],
-    profileImageUrl: null,
+    profileImageName: null,
   },
   {
     userId: 12,
@@ -153,7 +153,7 @@ export const USER_DUMMY: User[] = [
     nickname: '판다엄마',
     bio: '디자이너 10년차',
     links: [],
-    profileImageUrl: null,
+    profileImageName: null,
   },
   {
     userId: 13,
@@ -163,7 +163,7 @@ export const USER_DUMMY: User[] = [
     nickname: '판다형',
     bio: 'DevOps 2년차',
     links: [],
-    profileImageUrl: null,
+    profileImageName: null,
   },
   {
     userId: 14,
@@ -173,7 +173,7 @@ export const USER_DUMMY: User[] = [
     nickname: '판다누나',
     bio: 'DBA 2년차',
     links: [],
-    profileImageUrl: null,
+    profileImageName: null,
   },
   {
     userId: 15,
@@ -183,7 +183,7 @@ export const USER_DUMMY: User[] = [
     nickname: '판다동생',
     bio: '미래의 슈퍼 개발자',
     links: [],
-    profileImageUrl: null,
+    profileImageName: null,
   },
 ] as const;
 

src/pages/setting/UserSettingPage.tsx

@@ -18,13 +18,13 @@ export default function UserSettingPage() {
       nickname: userInfoData.nickname,
       bio: userInfoData.bio,
       links: userInfoData.links,
-      profileImageUrl: userInfoData.profileImageUrl,
+      profileImageName: userInfoData.profileImageName,
     },
   });
 
   // form 전송 함수
   const onSubmit = async (data: EditUserInfoForm) => {
-    const { username, email, profileImageUrl, ...filteredData } = data;
+    const { username, email, profileImageName, ...filteredData } = data;
     console.log(data);
 
     // TODO: 폼 제출 로직 작성
@@ -36,8 +36,8 @@ export default function UserSettingPage() {
         <form onSubmit={methods.handleSubmit(onSubmit)} className="mx-auto max-w-300 space-y-8">
           {/* 프로필 이미지 */}
           <ProfileImageContainer
-            imageUrl={methods.watch('profileImageUrl')}
-            setImageUrl={(url: string) => methods.setValue('profileImageUrl', url)}
+            imageUrl={methods.watch('profileImageName')}
+            setImageUrl={(url: string) => methods.setValue('profileImageName', url)}
           />
 
           {/* 아이디 */}

src/pages/user/SignUpPage.tsx

@@ -19,21 +19,21 @@ export default function SignUpPage() {
   const methods = useForm<UserSignUpForm>({
     mode: 'onChange',
     defaultValues: {
-      username: '',
+      username: null,
       email: '',
       code: '',
       nickname: '',
       password: '',
       checkPassword: '',
-      bio: '',
+      bio: null,
       links: [],
-      profileImageUrl: '',
+      profileImageName: null,
     },
   });
 
   // form 전송 함수
   const onSubmit = async (data: UserSignUpForm) => {
-    const { username, code, checkPassword, profileImageUrl, ...filteredData } = data;
+    const { username, code, checkPassword, profileImageName, ...filteredData } = data;
     console.log(data);
 
     const verifyResult = verifyCode(methods.watch('code'), methods.setError);
@@ -42,17 +42,19 @@ export default function SignUpPage() {
     // TODO: 폼 제출 로직 수정 필요
     try {
       // 회원가입 폼
-      const formData = { ...filteredData, username, code, profileImageUrl };
+      const formData = { ...filteredData, username, code, profileImageName };
       const registrationResponse = await axios.post(`http://localhost:8080/api/v1/user/${username}`, formData);
       if (registrationResponse.status !== 200) return toastError('회원가입에 실패했습니다. 다시 시도해 주세요.');
 
       // 이미지 폼
-      if (!methods.watch('profileImageUrl')) return toastSuccess('회원가입이 완료되었습니다.');
+      if (!methods.watch('profileImageName')) return toastSuccess('회원가입이 완료되었습니다.');
       const imgFormData = new FormData();
       try {
-        const jpeg = await reduceImageSize(profileImageUrl);
+        if (!profileImageName) return;
+
+        const jpeg = await reduceImageSize(profileImageName);
         const file = new File([jpeg], new Date().toISOString(), { type: 'image/jpeg' });
-        imgFormData.append('profileImageUrl', file);
+        imgFormData.append('profileImageName', file);
         imgFormData.append('username', username ?? '');
 
         const imageResponse = await axios.post(`http://localhost:8080/api/v1/users/file`, imgFormData, {
@@ -75,8 +77,8 @@ export default function SignUpPage() {
       <form onSubmit={methods.handleSubmit(onSubmit)} className="w-300 space-y-8">
         {/* 프로필 이미지 */}
         <ProfileImageContainer
-          imageUrl={methods.watch('profileImageUrl')}
-          setImageUrl={(url: string) => methods.setValue('profileImageUrl', url)}
+          imageUrl={methods.watch('profileImageName')}
+          setImageUrl={(url: string) => methods.setValue('profileImageName', url)}
         />
 
         {/* 아이디 */}

src/services/authService.ts

@@ -1,7 +1,7 @@
 import { authAxios, defaultAxios } from '@services/axiosProvider';
 
 import type { AxiosRequestConfig } from 'axios';
-import type { EditUserInfoForm, UserSignInForm } from '@/types/UserType';
+import type { User, UserSignInForm } from '@/types/UserType';
 
 /**
  * 사용자 로그인 API
@@ -34,10 +34,10 @@ export async function getAccessToken(axiosConfig: AxiosRequestConfig = {}) {
  * @export
  * @async
  * @param {AxiosRequestConfig} [axiosConfig={}] - axios 요청 옵션 설정 객체
- * @returns {Promise<AxiosResponse<EditUserInfoForm>>}
+ * @returns {Promise<AxiosResponse<User>>}
  */
 export async function getUserInfo(axiosConfig: AxiosRequestConfig = {}) {
-  return authAxios.get<EditUserInfoForm>('user/me', axiosConfig);
+  return authAxios.get<User>('user/me', axiosConfig);
 }
 
 /**

src/stores/useStore.ts

@@ -2,7 +2,7 @@ import { create, StateCreator } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import { AUTH_SETTINGS } from '@constants/settings';
 import { decrypt, encrypt } from '@utils/cryptoHelper';
-import { EditUserInfoForm } from '@/types/UserType';
+import { User } from '@/types/UserType';
 
 // Auth Slice
 type AuthStore = {
@@ -16,8 +16,8 @@ type AuthStore = {
 
 // User Slice
 type UserStore = {
-  userInfo: EditUserInfoForm;
-  setUserInfo: (newUserInfo: EditUserInfoForm) => void;
+  userInfo: User;
+  setUserInfo: (newUserInfo: User) => void;
 };
 
 // Combined Store
@@ -58,14 +58,16 @@ const createAuthSlice: StateCreator<Store, [], [], AuthStore> = (set) => ({
 // User Slice Creator
 const createUserSlice: StateCreator<Store, [], [], UserStore> = (set) => ({
   userInfo: {
-    username: '',
+    provider: 'LOCAL',
+    userId: 0,
+    username: null,
     email: '',
     nickname: '',
-    bio: '',
+    bio: null,
     links: [],
-    profileImageUrl: '',
+    profileImageName: null,
   },
-  setUserInfo: (newUserInfo: EditUserInfoForm) =>
+  setUserInfo: (newUserInfo: User) =>
     set({
       userInfo: newUserInfo,
     }),

src/types/UserType.tsx

@@ -8,7 +8,7 @@ export type User = {
   nickname: string;
   bio: string | null;
   links: string[];
-  profileImageUrl: string;
+  profileImageName: string | null;
 };
 
 export type UserWithRole = User & Role;