fix: 내 정보 변경 오류 수정 (#152)

* feat: 내 정보 관련 api 변경

* feat: 내 정보 변경 api 이용 하는 곳 코드 변경

* fix: 닉네임 변경시 클라이언트 오류 수정

Author: wibaek

src/app/my/modify/MyInfoModifyForm.tsx

@@ -3,15 +3,13 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
-import { updateMyNicknameApi } from "@/services/myInfo";
+import { updateMyInfoApi } from "@/services/myInfo";
 
 import BlockBtn from "@/components/button/BlockBtn";
 import ConfirmCancelModal from "@/components/modal/ConfirmCancelModal";
 
 import { MyInfo } from "@/types/myInfo";
 
-import { useAlert } from "@/context/AlertContext";
-
 type MyInfoModifyFormProps = {
   myInfo: MyInfo;
 };
@@ -20,12 +18,11 @@ const MyInfoModifyForm = ({ myInfo }: MyInfoModifyFormProps) => {
   const [nickname, setNickname] = useState<string>(myInfo.nickname);
   const [isChangeModalOpen, setIsChangeModalOpen] = useState<boolean>(false);
   const router = useRouter();
-  const { alert } = useAlert();
 
   const updateNickname = async (newNickname: string) => {
+    setIsChangeModalOpen(false);
     try {
-      setIsChangeModalOpen(false);
-      await updateMyNicknameApi(newNickname);
+      await updateMyInfoApi({ nickname: newNickname });
       await alert("닉네임이 변경되었습니다");
       router.refresh();
     } catch (err) {

src/app/my/modify/MyProfileImageModify.tsx

@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useRef } from "react";
 
-import { updateMyProfileImage } from "@/services/myInfo";
+import { updateMyInfoApi } from "@/services/myInfo";
 
 import { MyInfo } from "@/types/myInfo";
 
@@ -17,7 +17,7 @@ const MyProfileImageModify = ({ myInfo }: MyProfileImageModifyProps) => {
 
   const updateProfileImage = async (imageFile: File) => {
     try {
-      await updateMyProfileImage(imageFile);
+      await updateMyInfoApi({ file: imageFile });
       alert("프로필 이미지가 변경되었습니다");
       router.refresh();
     } catch (err) {

src/services/myInfo.ts

@@ -2,23 +2,24 @@ import { AxiosResponse } from "axios";
 
 import { axiosInstance } from "@/utils/axiosInstance";
 
-import { MyInfo, MyInfoSimple, MyNickname, MyProfileImage } from "@/types/myInfo";
+import { MyInfo, MyInfoPatchRequest, MyInfoSimple } from "@/types/myInfo";
 import { ListUniversity } from "@/types/university";
 
 export const getMyInfoApi = (): Promise<AxiosResponse<MyInfo>> => axiosInstance.get("/my");
 
-export const getMyInfoSimpleApi = (): Promise<AxiosResponse<MyInfoSimple>> => axiosInstance.get("/my/update");
+export const updateMyInfoApi = (request: MyInfoPatchRequest): Promise<AxiosResponse<MyInfoSimple>> => {
+  const convertedRequest: FormData = new FormData();
+  if (request.nickname) {
+    convertedRequest.append("nickname", request.nickname);
+  }
+  if (request.file) {
+    convertedRequest.append("file", request.file);
+  }
 
-export const updateMyInfoApi = (data: MyInfoSimple): Promise<AxiosResponse<MyInfoSimple>> =>
-  axiosInstance.patch("/my/update", data);
+  return axiosInstance.patch("/my", convertedRequest, {
+    headers: { "Content-Type": "multipart/form-data" },
+  });
+};
 
 export const getMyWishUniversityApi = (): Promise<AxiosResponse<ListUniversity[]>> =>
   axiosInstance.get("/universities/like");
-
-export const updateMyNicknameApi = (nickname: string): Promise<AxiosResponse<MyNickname>> =>
-  // DEPRECATED: Use updateMyInfoApi instead
-  axiosInstance.patch("/my/update/nickname", { nickname });
-
-export const updateMyProfileImage = (file: File): Promise<AxiosResponse<MyProfileImage>> =>
-  // DEPRECATED: Use updateMyInfoApi instead
-  axiosInstance.patch("/my/update/profileImage", { file }, { headers: { "Content-Type": "multipart/form-data" } });

src/types/myInfo.ts

@@ -11,15 +11,12 @@ export interface MyInfo {
 }
 
 export interface MyInfoSimple {
-  // 내 정보 수정 페이지에서 사용
   nickname: string;
   profileImageUrl: string;
 }
 
-export interface MyNickname {
-  nickname: string;
-}
-
-export interface MyProfileImage {
-  profileImageUrl: string;
+export interface MyInfoPatchRequest {
+  // 내 정보 수정 페이지에서 사용
+  nickname?: string;
+  file?: Blob; // 프로필 이미지
 }