feat: 마이페이지 유저 프로필 조회 API 연동

[waldls]

📌 관련 이슈번호

close : #129

🔍 구현한 내용

마이페이지 유저 프로필 조회 API 연동

• useGetUserProfile를 통해 React Query 기반으로 유저 프로필 조회하도록 연동했습니다.
• useQueryClient를 사용해 USER_PROFILE 쿼리 캐시 데이터를 활용하도록 구성했습니다.

MyPage UI에 유저 프로필 데이터 바인딩

• 사용자명, 이메일, 가입일, 라이프스타일 태그 등을 프로필 API 응답 기반으로 렌더링하도록 수정했습니다.
• RecentlyViewedFloating 컴포넌트에도 유저 이름을 프로필 데이터 기준으로 전달하도록 반영했습니다.

RoundedLifestyleTag 라벨 렌더링 수정

• 태그 컴포넌트에서 label이 정상적으로 렌더링되도록 JSX 구조를 정리했습니다.

📸 스크린샷 or 실행 영상

• 프로필 수정 API (연동 시작x) Swagger를 통해 수정한 값이 화면에 반영

default.mov

• 로그아웃 후 다른 계정으로 로그인 시 유저 프로필 정보가 정상적으로 갱신

default.mp4

📢 리뷰어에게

• files changed에서 줄바꿈 및 prettier 설정 차이로 인한 diff가 다소 보이는데, 해당 부분은 무시해주시고 유저 프로필 API 연동 및 쿼리 캐시 활용 부분 위주로 봐주시면 될 것 같습니다.

[github-actions]

✅ PREVIEW https://device-life-frontend-lkff-9usx3lyef-yuminparks-projects.vercel.app

[Seony777]

// MyPage.tsx:105
const userProfile = queryClient.getQueryData<UserProfileResult>([queryKey.USER_PROFILE]);

현재 이렇게 getQueryData()로 유저정보를 가져오고 있는데 이럴 경우 캐시가 업데이트되어도 컴포넌트가 리렌더되지 않는 케이스가 발생할 수 있을 거 같습니다!
(ex. 창을 두개 띄운경우, 비로그인으로 마이페이지 들어왔다가 로그인 후 다시 오는경우)

const { user: userProfile } = useAuth();
이런식으로 React Query를 실제 구독하는 방식으로 유저 프로필을 가져오면 업데이트 된 캐시가 바로 반영되어 좋을 거 같습니다!

[github-actions]

✅ PREVIEW https://device-life-frontend-lkff-dasjfvk27-yuminparks-projects.vercel.app

[waldls]

// MyPage.tsx:105
const userProfile = queryClient.getQueryData<UserProfileResult>([queryKey.USER_PROFILE]);

현재 이렇게 getQueryData()로 유저정보를 가져오고 있는데 이럴 경우 캐시가 업데이트되어도 컴포넌트가 리렌더되지 않는 케이스가 발생할 수 있을 거 같습니다! (ex. 창을 두개 띄운경우, 비로그인으로 마이페이지 들어왔다가 로그인 후 다시 오는경우)

const { user: userProfile } = useAuth(); 이런식으로 React Query를 실제 구독하는 방식으로 유저 프로필을 가져오면 업데이트 된 캐시가 바로 반영되어 좋을 거 같습니다!

말씀주신대로 useAuth()에서 React Query를 구독하는 방식으로 변경하여 캐시 업데이트 시 MyPage에도 즉시 반영되도록 수정했습니다! 확인 후 이상 없으면 승인 부탁드립니다!

[Seony777]

고생하셨습니다~!