[Feat] users/me api 함수 구현 #218
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Walkthrough사용자 데이터 조회 흐름을 쿠키 기반에서 React Query 훅 기반으로 전환합니다. 새로운 Changes
Sequence DiagramsequenceDiagram
actor User
participant MyPage as MyPage<br/>Component
participant useGetMe as useGetMe<br/>Hook
participant ReactQuery as React Query
participant API as API Service<br/>(apiV1)
participant Server as Backend<br/>Server
User->>MyPage: 마이페이지 방문
MyPage->>useGetMe: useGetMe() 호출
useGetMe->>ReactQuery: 쿼리 조회<br/>(userKeys.me())
alt 캐시된 데이터 존재
ReactQuery-->>useGetMe: 캐시된 사용자 데이터
else 캐시 미존재 또는 만료
ReactQuery->>API: API.userService.getMe()
API->>Server: GET /users/me
Server-->>API: 사용자 데이터
API-->>ReactQuery: 응답 반환
ReactQuery->>ReactQuery: 데이터 정규화<br/>(profileImage, profileMessage, mbti)
ReactQuery-->>useGetMe: 정규화된 사용자 데이터
end
useGetMe-->>MyPage: 사용자 정보 제공
MyPage-->>User: 마이페이지 렌더링
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 추가 검토 필요 영역:
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
📊 Coverage Report
📉 #218을 main에 병합하면 coverage가 Coverage 요약@@ Coverage Diff @@
## main #218 +/- ##
===========================================
- Coverage 31.58% 31.57% -0.01%
===========================================
Files 162 163 +1
Lines 7164 7198 +34
Branches 254 255 +1
===========================================
+ Hits 2263 2273 +10
+ Misses 4901 4925 +24 영향받은 파일
|
🎭 Playwright Report✨ E2E Test가 성공적으로 완료되었습니다. Test 요약 내용을 확인해주세요.
📊 Test Summary
📜 Test Details✅ Passed Tests (3)
|
🎨 Storybook Report✅ 변경 사항이 없습니다 모든 Story가 이전 빌드와 동일합니다.
|
🚀 PR Preview Report✨ Build가 성공적으로 완료되었습니다. Preview에서 변경사항을 확인하세요.
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/api/service/user-service/index.ts (1)
47-49: 팔로우 리스트 조회 API가 주석으로만 표시되어 있습니다.6번 항목으로
getfollowUsers가 언급되어 있지만 구현은 없습니다. 향후 구현 예정인 것으로 보이며, 현재 PR 범위에는 포함되지 않은 것으로 판단됩니다.이 API 구현이 필요하다면 이슈를 생성하여 추적하시겠습니까?
src/hooks/use-user/use-user-get-me/index.ts (2)
10-15:select에서 null 값을 빈 문자열로 변환하는 로직을 검토하세요.
profileImage,profileMessage,mbti필드에 대해 null/undefined를 빈 문자열로 변환하고 있습니다. 이는 컴포넌트에서 null 체크를 줄이기 위한 것으로 보이지만, null(데이터 없음)과 빈 문자열(빈 값)의 의미적 차이가 사라집니다.UI에서 "프로필 메시지를 입력하세요"와 같은 placeholder를 표시해야 하는 경우, null과 빈 문자열을 구분해야 할 수도 있습니다.
현재 구현이 의도된 것이라면 문제없지만, 만약 null과 빈 문자열을 구분해야 하는 요구사항이 있다면 이 변환 로직을 제거하는 것을 고려해보세요.
7-16: React Query 옵션 추가를 고려하세요.현재 기본 React Query 옵션을 사용하고 있습니다. 사용자 데이터의 특성에 따라 다음 옵션 추가를 고려해보세요:
staleTime: 사용자 데이터가 얼마나 자주 변경되는지에 따라 설정gcTime: 캐시 유지 시간 설정refetchOnWindowFocus: 탭 포커스 시 재조회 여부옵션 추가 예시
export const useGetMe = () => { const query = useQuery({ queryKey: userKeys.me(), queryFn: () => API.userService.getMe(), + staleTime: 1000 * 60 * 5, // 5분 + gcTime: 1000 * 60 * 10, // 10분 select: (data) => ({ ...data, profileImage: data.profileImage ?? '', profileMessage: data.profileMessage ?? '', mbti: data.mbti ?? '', }), }); return query; };
📜 Review details
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/api/service/user-service/index.ts(2 hunks)src/app/(user)/mypage/page.tsx(1 hunks)src/hooks/use-user/use-user-get-me/index.ts(1 hunks)src/hooks/use-user/use-user-image-update/index.ts(1 hunks)src/hooks/use-user/use-user-update/index.ts(1 hunks)src/lib/query-key/query-key-user/index.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (5)
src/hooks/use-user/use-user-get-me/index.ts (2)
src/lib/query-key/query-key-user/index.ts (1)
userKeys(1-6)src/api/index.ts (1)
API(22-22)
src/hooks/use-user/use-user-update/index.ts (1)
src/lib/query-key/query-key-user/index.ts (1)
userKeys(1-6)
src/hooks/use-user/use-user-image-update/index.ts (1)
src/lib/query-key/query-key-user/index.ts (1)
userKeys(1-6)
src/api/service/user-service/index.ts (2)
src/api/core/index.ts (1)
apiV1(105-105)src/types/service/user.ts (9)
UpdateMyInfoPayloads(21-25)User(1-15)UpdateMyImagePayloads(27-29)UpdateMyNotificationQueryParams(31-33)GetUserPathParams(17-19)GetNicknameAvailabilityQueryParams(47-49)Availability(43-45)GetEmailAvailabilityQueryParams(51-53)UnfollowQueryParams(39-41)
src/app/(user)/mypage/page.tsx (1)
src/hooks/use-user/use-user-get-me/index.ts (1)
useGetMe(6-18)
🔇 Additional comments (6)
src/api/service/user-service/index.ts (2)
57-60: 새로운getMe메서드 구현이 올바릅니다.현재 로그인한 사용자 정보를 가져오는 API가 잘 구현되었습니다. 타입과 엔드포인트 경로가 올바르게 설정되어 있습니다.
1-1: user-service만apiV1을 사용하고 있으며, 다른 service들과 API 인스턴스 불일치가 발생했습니다.검증 결과, user-service의 모든 엔드포인트는
apiV1을 사용하도록 변경되었으나, group-service, follower-service, auth-service는 여전히 기존api인스턴스를 사용하고 있습니다. 이는 전체 시스템의 API 인스턴스 사용이 불일치하는 상태입니다. 다음을 확인하세요:
apiV1로의 변경이 의도된 것인지 (예: 다른 API 버전 사용)- 다른 service들도 함께 마이그레이션해야 하는지
- 아니면 user-service만 선택적으로 v1을 사용하는 것인지
src/hooks/use-user/use-user-image-update/index.ts (1)
11-13: 캐시 무효화 로직이 올바르게 변경되었습니다.프로필 이미지 업데이트 후
userKeys.me()를 무효화하여 현재 사용자 데이터가 새로고침되도록 변경되었습니다. 이는 새로운 me 기반 캐시 전략과 일관성 있게 구현되었습니다.src/lib/query-key/query-key-user/index.ts (1)
5-5:me쿼리 키가 올바르게 추가되었습니다.현재 사용자 데이터를 위한
me()키가 추가되었습니다.item네임스페이스 하위에 위치하지만,userId가 number 타입이므로 문자열 'me'와 충돌할 가능성은 없습니다.참고:
me키가item하위에 있는 것이 의미적으로는 다소 어색할 수 있으나, 캐시 무효화 패턴을 고려하면 합리적인 구조입니다.src/app/(user)/mypage/page.tsx (1)
1-14: 쿠키 기반 로직에서 React Query 기반으로 성공적으로 전환되었습니다.
useGetMe훅을 사용하여 현재 사용자 데이터를 가져오도록 변경되었습니다. 이는 데이터 관리를 중앙화하고 캐싱 전략을 개선하는 좋은 변경입니다.src/hooks/use-user/use-user-update/index.ts (1)
11-13: 캐시 무효화 로직이 올바르게 변경되었습니다.프로필 정보 업데이트 후
userKeys.me()를 무효화하여 현재 사용자 데이터만 새로고침되도록 변경되었습니다. 이는 불필요한 캐시 무효화를 방지하고 새로운 me 기반 캐시 전략과 일관성 있게 구현되었습니다.
📝 변경 사항
💡 내 유저 정보 조회 기능 추가
users/me함수 구현useUserGetMe커스텀 훅 구현💡 mypage 로직 수정
기존에 userId를 이용해 데이터를 불러오는 로직을
users/meapi를 통해 불러오도록 수정💡 queryKey 추가
mypage 조회용 querykey를 추가하였습니다.
💡 프로필 수정 로직 수정
🔗 관련 이슈
Closes #
🧪 테스트 방법
📸 스크린샷 (선택)
📋 체크리스트
💬 추가 코멘트
CodeRabbit Review는 자동으로 실행되지 않습니다.
Review를 실행하려면 comment에 아래와 같이 작성해주세요
Summary by CodeRabbit
릴리스 노트
✏️ Tip: You can customize this high-level summary in your review settings.