[🔀 FE] feat: 프로필 수정 API 연결

src/app/profile/edit/page.tsx

@@ -3,22 +3,25 @@
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { ChevronLeft } from 'lucide-react';
-import { useQuery } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { EditNickname } from '@/widgets/profile-edit/EditNickname';
 import { EditMbti } from '@/widgets/profile-edit/EditMbti';
 import { EditKeywords } from '@/widgets/profile-edit/EditKeywords';
 import { EditBio } from '@/widgets/profile-edit/EditBio';
 import { RetroButton } from '@/shared/ui/button/RetroButton';
-import { getMyProfile } from '@/features/member/api/member.api';
+import { getMyProfile, updateMyProfile } from '@/features/member/api/member.api';
 import { PERSONALITY_KEYWORDS, type PersonalityKeywordKey } from '@/shared/lib/personalityKeyword';
 
 export default function ProfileEditPage() {
   const router = useRouter();
+  const queryClient = useQueryClient();
   const [nickname, setNickname] = useState('');
   const [mbti, setMbti] = useState('');
   const [keywords, setKeywords] = useState<PersonalityKeywordKey[]>([]);
   const [bio, setBio] = useState('');
   const [isHydrated, setIsHydrated] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
 
   const { data, isLoading, isError } = useQuery({
     queryKey: ['member', 'me'],
@@ -40,10 +43,49 @@ export default function ProfileEditPage() {
     setIsHydrated(true);
   }, [data, isHydrated]);
 
-  const handleSave = () => {
-    console.log('Saved:', { nickname, mbti, keywords, bio });
-    alert('프로필이 수정되었습니다!');
-    router.back();
+  const handleSave = async () => {
+    if (isSaving || isLoading) return;
+
+    const trimmedNickname = nickname.trim();
+    const normalizedMbti = mbti.trim().toUpperCase();
+
+    if (!trimmedNickname) {
+      alert('닉네임을 입력해주세요.');
+      return;
+    }
+
+    if (normalizedMbti.length !== 4) {
+      alert('MBTI 4글자를 선택해주세요.');
+      return;
+    }
+
+    if (keywords.length === 0) {
+      alert('성격 키워드를 1개 이상 선택해주세요.');
+      return;
+    }
+
+    try {
+      setIsSaving(true);
+      await updateMyProfile({
+        nickname: trimmedNickname,
+        mbti: normalizedMbti,
+        personalityTypes: keywords,
+        bio,
+      });
+
+      await queryClient.invalidateQueries({ queryKey: ['member', 'me'] });
+      alert('프로필이 수정되었습니다!');
+      router.back();
+    } catch (error) {
+      if (error instanceof AxiosError) {
+        const message = (error.response?.data as { message?: string } | undefined)?.message;
+        alert(message || '프로필 수정에 실패했습니다.');
+      } else {
+        alert('프로필 수정에 실패했습니다.');
+      }
+    } finally {
+      setIsSaving(false);
+    }
   };
 
   return (
@@ -89,8 +131,13 @@ export default function ProfileEditPage() {
       </div>
 
       <div className="fixed bottom-6 left-0 right-0 mx-auto max-w-[480px] px-6 z-10 pb-[env(safe-area-inset-bottom)]">
-        <RetroButton onClick={handleSave} className="w-full" variant="yellow" disabled={isLoading}>
-          수정 완료
+        <RetroButton
+          onClick={handleSave}
+          className="w-full"
+          variant="yellow"
+          disabled={isLoading || isSaving}
+        >
+          {isSaving ? '수정 중...' : '수정 완료'}
         </RetroButton>
       </div>
     </main>

src/features/member/api/member.api.ts

@@ -1,6 +1,6 @@
 import { apiInstance } from '@/shared/api/apiInstance';
 import type { ApiResponse } from '@/shared/api/api.types';
-import type { MyProfileResponse } from './member.types';
+import type { MyProfileResponse, UpdateMyProfileRequest } from './member.types';
 
 const toObjectRecord = (value: unknown): Record<string, unknown> => {
   if (!value || typeof value !== 'object') return {};
@@ -26,6 +26,26 @@ const toStringArray = (value: unknown): string[] => {
     .filter((item): item is string => Boolean(item));
 };
 
+const toPersonalityTypes = (obj: Record<string, unknown>): string[] => {
+  const personalityTypes = toStringArray(obj.personalityTypes);
+  if (personalityTypes.length > 0) return personalityTypes;
+
+  const rawPersonalities = obj.personalities;
+  if (!Array.isArray(rawPersonalities)) return [];
+
+  return rawPersonalities
+    .map((item) => {
+      if (typeof item === 'string') return item.trim();
+      if (!item || typeof item !== 'object') return '';
+
+      const personality = item as Record<string, unknown>;
+      const code = toStringSafe(personality.code)?.trim();
+      const description = toStringSafe(personality.description)?.trim();
+      return code || description || '';
+    })
+    .filter((item): item is string => Boolean(item));
+};
+
 const pickFirstString = (obj: Record<string, unknown>, keys: string[]): string | undefined => {
   for (const key of keys) {
     const value = toStringSafe(obj[key])?.trim();
@@ -54,8 +74,27 @@ export const getMyProfile = async (): Promise<MyProfileResponse> => {
     collegeName: pickFirstString(obj, ['collegeName', 'department', 'major']),
     age: pickFirstNumber(obj, ['age']),
     mbtiCode: pickFirstString(obj, ['mbtiCode', 'mbti'])?.toUpperCase(),
-    personalityTypes: toStringArray(obj.personalityTypes),
+    personalityTypes: toPersonalityTypes(obj),
     bio: pickFirstString(obj, ['bio', 'description', 'introduction']),
     faceShape: pickFirstString(obj, ['faceShape', 'animalType']),
   };
 };
+
+const normalizeUpdatePayload = (payload: UpdateMyProfileRequest) => {
+  const nickname = payload.nickname.trim();
+  const mbti = payload.mbti.trim().toUpperCase();
+  const bio = payload.bio?.trim() ?? '';
+
+  return {
+    nickname,
+    mbti,
+    mbtiCode: mbti,
+    personalityTypes: payload.personalityTypes,
+    ...(bio ? { bio } : {}),
+  };
+};
+
+export const updateMyProfile = async (payload: UpdateMyProfileRequest): Promise<void> => {
+  const body = normalizeUpdatePayload(payload);
+  await apiInstance.patch<ApiResponse<null>>('/v1/members/me', body);
+};

src/features/member/api/member.types.ts

@@ -10,3 +10,10 @@ export interface MyProfileResponse {
   bio?: string;
   faceShape?: string;
 }
+
+export interface UpdateMyProfileRequest {
+  nickname: string;
+  mbti: string;
+  personalityTypes: string[];
+  bio?: string;
+}

src/widgets/profile-edit/EditKeywords.tsx

@@ -22,7 +22,7 @@ export function EditKeywords({ value, onChange }: Props) {
     if (value.includes(key)) {
       onChange(value.filter((selectedKey) => selectedKey !== key));
     } else {
-      if (value.length >= 5) return;
+      if (value.length >= 3) return;
       onChange([...value, key]);
     }
   };
@@ -36,7 +36,7 @@ export function EditKeywords({ value, onChange }: Props) {
         selected={selectedLabels}
         onToggle={toggleKeyword}
       />
-      <p className="text-xs text-right text-gray-500">최대 5개까지 선택할 수 있어요.</p>
+      <p className="text-xs text-right text-gray-500">최대 3개까지 선택할 수 있어요.</p>
     </div>
   );
 }

src/widgets/profile/ProfileHero.tsx

@@ -3,7 +3,10 @@
 import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { getMyProfile } from '@/features/member/api/member.api';
-import { PERSONALITY_KEY_TO_LABEL, type PersonalityKeywordKey } from '@/shared/lib/personalityKeyword';
+import {
+  PERSONALITY_KEY_TO_LABEL,
+  type PersonalityKeywordKey,
+} from '@/shared/lib/personalityKeyword';
 
 const toKeywordLabel = (keyword: string): string => {
   const mapped = PERSONALITY_KEY_TO_LABEL[keyword as PersonalityKeywordKey];