♻️ [Refactor]: 유저 정보 수정 로직 useMutation으로 변경

Author: zero0205

apps/client/src/entities/user/api/userApi.ts

@@ -1,4 +1,4 @@
-import { UserData } from '@/entities/user';
+import { UserData, MutationUserData } from '@/entities/user';
 import { axiosInstance } from '@/shared/api';
 
 export const getUserInfo = async (): Promise<UserData> => {
@@ -17,3 +17,12 @@ export const getUserProfileImage = async (): Promise<string> => {
 
   return response.data.data.profileImage;
 };
+
+export const patchUserInfo = async (formData: MutationUserData) => {
+  const response = await axiosInstance.patch('/v1/members/info', formData);
+  if (!response.data.success) {
+    throw new Error(response.data.message);
+  }
+
+  return response.data;
+};

apps/client/src/entities/user/index.ts

@@ -1,3 +1,3 @@
-export type { UserData } from './model/types';
-export { getUserInfo, getUserProfileImage } from './api/userApi';
-export { useUserData, useProfileImage } from './model/queries';
+export type { UserData, MutationUserData } from './model/types';
+export { getUserInfo, getUserProfileImage, patchUserInfo } from './api/userApi';
+export { useUserData, useProfileImage, useUserDataMutation } from './model/queries';

apps/client/src/entities/user/model/queries.ts

@@ -1,6 +1,8 @@
-import { useQuery } from '@tanstack/react-query';
-import { getUserInfo, getUserProfileImage } from '@/entities/user';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { getUserInfo, getUserProfileImage, patchUserInfo } from '@/entities/user';
 import { userKeys } from './queryFactory';
+import { useToast } from '@/shared/lib';
+import { MutationUserData } from './types';
 
 export const useUserData = () => {
   const {
@@ -22,3 +24,32 @@ export const useProfileImage = (isLoggedIn: boolean) => {
 
   return { profileImgUrl: data, isLoading, error };
 };
+
+export const useUserDataMutation = (onSuccessCallback: () => void) => {
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+
+  return useMutation({
+    mutationFn: (formData: MutationUserData) => patchUserInfo(formData),
+    onSuccess: async data => {
+      if (data.success) {
+        toast({ title: '프로필 업데이트 성공', variant: 'default' });
+        await queryClient.invalidateQueries({ queryKey: userKeys.profile(), refetchType: 'active' });
+        onSuccessCallback();
+      } else {
+        toast({
+          title: '프로필 업데이트 실패',
+          description: data.message || '알 수 없는 오류가 발생했습니다',
+          variant: 'destructive',
+        });
+      }
+    },
+    onError: error => {
+      toast({
+        title: '프로필 업데이트 실패',
+        description: error instanceof Error ? error.message : '네트워크 오류가 발생했습니다',
+        variant: 'destructive',
+      });
+    },
+  });
+};

apps/client/src/entities/user/model/types.ts

@@ -15,3 +15,12 @@ export type UserData = {
   contacts: Contacts;
   profileImage: string;
 };
+
+export type MutationUserData = {
+  contacts: {
+    email: string;
+    github: string;
+    blog: string;
+    linkedin: string;
+  };
+} & Pick<UserData, 'camperId' | 'name' | 'field'>;

apps/client/src/features/editProfile/lib/index.ts

@@ -0,0 +1,2 @@
+export type { FormInput } from './types';
+export { transformFormToApiData } from './utils';

apps/client/src/features/editProfile/lib/types.ts

@@ -0,0 +1,11 @@
+import { Field } from '@/shared/types';
+
+export type FormInput = {
+  camperId: string | undefined;
+  name: string | undefined;
+  field: Field | undefined;
+  email: string | undefined;
+  github: string | undefined;
+  blog: string | undefined;
+  linkedIn: string | undefined;
+};

apps/client/src/features/editProfile/lib/utils.ts

@@ -0,0 +1,15 @@
+import { Field } from '@/shared/types';
+import { FormInput } from './types';
+import { MutationUserData } from '@/entities/user';
+
+export const transformFormToApiData = (data: FormInput, selectedField: Field | undefined): MutationUserData => ({
+    name: data.name!,
+    camperId: data.camperId!,
+    field: selectedField!,
+    contacts: {
+      email: data.email ? data.email : '',
+      github: data.github ? data.github : '',
+      blog: data.blog ? data.blog : '',
+      linkedin: data.linkedIn ? data.linkedIn : '',
+    },
+  });

apps/client/src/features/editProfile/ui/EditUserInfo.tsx

@@ -1,27 +1,16 @@
 import { useForm } from 'react-hook-form';
 import { useState } from 'react';
 import { Avatar, AvatarFallback, AvatarImage } from '@/shared/ui/shadcn/avatar';
-import { UserData } from '@/pages/Profile';
-import { Field } from '@/shared/types/sharedTypes';
+import { UserData, useUserDataMutation } from '@/entities/user';
+import { Field } from '@/shared/types';
 import { Button } from '@/shared/ui/shadcn/button';
-import { axiosInstance } from '@/shared/api';
-import { useToast } from '@/shared/lib';
+import { FormInput, transformFormToApiData } from '../lib';
 
 type EditUserInfoProps = Readonly<{
   userData: UserData | undefined;
   toggleEditing: () => void;
 }>;
 
-export type FormInput = {
-  camperId: string | undefined;
-  name: string | undefined;
-  field: Field | undefined;
-  email: string | undefined;
-  github: string | undefined;
-  blog: string | undefined;
-  linkedIn: string | undefined;
-};
-
 export function EditUserInfo({ userData, toggleEditing }: EditUserInfoProps) {
   const [selectedField, setSelectedField] = useState<Field | undefined>(userData?.field);
   const {
@@ -39,34 +28,18 @@ export function EditUserInfo({ userData, toggleEditing }: EditUserInfoProps) {
       linkedIn: userData?.contacts.linkedIn,
     },
   });
-  const { toast } = useToast();
+  const { mutateAsync } = useUserDataMutation(toggleEditing);
 
   const handleSelectField = (field: Field) => {
     setSelectedField(selectedField === field ? '' : field);
   };
 
   const handlePatchUserInfo = (data: FormInput) => {
-    const formData = {
-      name: data.name,
-      camperId: data.camperId,
-      field: selectedField,
-      contacts: {
-        email: data.email ? data.email : '',
-        github: data.github ? data.github : '',
-        blog: data.blog ? data.blog : '',
-        linkedin: data.linkedIn ? data.linkedIn : '',
-      },
-    };
+    const formData = transformFormToApiData(data, selectedField);
 
     if (!formData.field) return;
 
-    axiosInstance.patch('/v1/members/info', formData).then(response => {
-      if (response.data.success) {
-        toggleEditing();
-      } else {
-        toast({ variant: 'destructive', title: '유저 정보 수정 실패' });
-      }
-    });
+    mutateAsync(formData);
   };
 
   return (