[feat] 마이페이지 드롭다운 구현

[mgYang53]

📄 설명

Header 컴포넌트의 프로필 아바타 클릭 시 나타나는 마이페이지 드롭다운 구현 + 메인페이지 사용자 닉네임 연동

피그마 요구사항

• 마이페이지 드롭다운

  • 크기: 376×514px (고정)
  • 위치: 프로필 아바타로부터 하단 16px
  • 기능: 프로필 이미지 변경/제거, 닉네임 수정, 저장, 로그아웃, 탈퇴하기

• 메인페이지 인사말 (Figma node: 3128-15405)

  • "안녕하세요, {닉네임}님!"
  • "읽고 있는 책과 생각을 기록해보세요"
  • 스타일: typo-heading2/semibold, 색상: black / grey-600

공통 컴포넌트 분리

OnboardingPage와 MyPageDropdown에서 재사용 가능한 컴포넌트/hook 분리

• ProfileImagePicker: 프로필 이미지 선택 UI (variant: onboarding / mypage)
• NicknameInput: 닉네임 입력 필드 (검증 상태 표시)
• useProfileForm: 프로필 폼 상태 관리 hook

---

✅ 해야 할 일

Phase 1: API & Hooks

• user.endpoints.ts - PROFILE_IMAGE 엔드포인트 추가
• user.api.ts - updateNickname, updateProfileImage, deleteProfileImage 함수 추가
• useUpdateNickname.ts - 닉네임 업데이트 hook
• useUpdateProfileImage.ts - 프로필 이미지 업데이트 hook
• useDeleteProfileImage.ts - 프로필 이미지 삭제 hook
• useDeleteUser.ts - 회원 탈퇴 hook
• useUserProfile.ts - 사용자 프로필 조회 hook

Phase 2: 공통 컴포넌트

• useProfileForm.ts - 공통 프로필 폼 상태 관리 hook
• ProfileImagePicker.tsx - 공통 프로필 이미지 선택 UI
• NicknameInput.tsx - 공통 닉네임 입력 컴포넌트
• hooks/index.ts - export 추가
• components/index.ts - export 추가

Phase 3: 마이페이지 컴포넌트

• MyPageDropdown.tsx - 메인 드롭다운
• features/user/index.ts - components export 추가
• 탈퇴 확인 모달 - useGlobalModalStore.openConfirm 활용

Phase 4: 통합 & 리팩토링

• Header.tsx - Popover 연동, useUserProfile 연동
• OnboardingPage.tsx - ProfileImagePicker, NicknameInput, useProfileForm 사용으로 리팩토링

Phase 5: 메인페이지 사용자 이름 연동

• 메인페이지에 사용자 닉네임 표시 UI 구현
  • "안녕하세요, {닉네임}님!" (typo-heading2, black)
  • "읽고 있는 책과 생각을 기록해보세요" (typo-heading2, grey-600)
• useUserProfile hook 연동

---

📝 메모

검증 항목

1. 프로필 이미지 변경/제거 → Header 아바타 반영 ✅
2. 닉네임 수정 → 중복 체크 → 저장 ✅
3. 로그아웃 → 로그인 페이지 이동 ✅
4. 탈퇴하기 → 모달 → 탈퇴 처리 ✅
5. OnboardingPage 리팩토링 후 기존 기능 유지 ✅
6. 메인페이지에서 사용자 닉네임 표시 (Phase 5)