Feat/markup/landing-page/DEVING-78 #87
Conversation
Walkthrough이 PR은 프로필 이미지와 배너 데이터 관리를 개선합니다. ProfileImage 컴포넌트에 기본 이미지로 리셋하는 핸들러가 추가되고, 확인 시 배너 쿼리 갱신을 위해 queryClient.invalidateQueries가 호출됩니다. Header 컴포넌트는 userInfo prop을 선택적으로 받고, useBannerQueries 훅을 활용하도록 수정되었습니다. 또한, 기본 이미지 URL 상수가 추가되었으며, 마이페이지와 유저 mutation 훅에서 배너 데이터 취소, 롤백, 갱신 로직이 도입되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant U as 사용자
participant P as ProfileImage 컴포넌트
participant S as 이미지 서버
participant Q as QueryClient
U->>P: "기본 이미지로 리셋" 버튼 클릭
P->>S: 기본 이미지 Blob 요청
S-->>P: 기본 이미지 Blob 반환
P->>P: 객체 URL 생성 및 상태 업데이트
U->>P: "확인" 버튼 클릭
P->>Q: banner 쿼리 인밸리데이션 호출
Q-->>P: 배너 데이터 갱신
sequenceDiagram
participant U as 사용자
participant L as 로그인 Mutation
participant Q as QueryClient
participant B as 배너 API
participant LO as 로그아웃 Mutation
U->>L: 로그인 요청
L->>Q: 토큰 저장 및 배너 쿼리 취소
L->>B: getBanner 호출
B-->>L: 배너 데이터 반환
L->>Q: 배너 데이터 캐시 설정
U->>LO: 로그아웃 요청
LO->>Q: 배너 데이터 클리어
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for deving-together ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Codecov ReportAll modified and coverable lines are covered by tests ✅ 🚀 New features to boost your workflow:
|
CI Status Report검사 결과
✅ 모든 검사가 통과되었습니다. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/hooks/mutations/useMyPageMutation.tsx (2)
53-60: 배너 데이터 동기화 로직 추가프로필 정보 변경 시 배너 데이터도 함께 업데이트하여 UI 일관성을 보장합니다. 다만,
previousBannerData가 없는 경우의 처리도 고려해보세요.if (previousBannerData) { queryClient.setQueryData(QUERY_KEYS.banner(), { ...previousBannerData, name: newProfileData.name, }); +} else { + console.warn('배너 데이터가 존재하지 않아 업데이트를 건너뛰었습니다.'); }
81-93: 비동기 onSuccess 처리 및 배너 데이터 갱신프로필 업데이트 성공 후 최신 배너 데이터를 가져오는 비동기 로직 추가는 좋은 접근법입니다. 다만, 오류 발생 시 사용자에게 알림을 고려해 보세요.
try { const bannerData = await getBanner(); if (bannerData) { queryClient.setQueryData(QUERY_KEYS.banner(), bannerData); } } catch (error) { console.error('배너 데이터 가져오기 실패:', error); + showToast('프로필은 업데이트되었으나 배너 데이터 갱신에 실패했습니다.', 'warning'); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/app/(user-page)/mypage/_features/ProfileImage.tsx(5 hunks)src/components/common/Header.tsx(3 hunks)src/constants/mypage/mypageConstant.tsx(1 hunks)src/hooks/mutations/useMyPageMutation.tsx(5 hunks)src/hooks/mutations/useUserMutation.ts(3 hunks)
🧰 Additional context used
🧬 Code Definitions (3)
src/components/common/Header.tsx (1)
src/hooks/queries/useMyPageQueries.ts (2) (2)
useBannerQueries(43-50)QUERY_KEYS(6-12)
src/app/(user-page)/mypage/_features/ProfileImage.tsx (2)
src/hooks/queries/useMyPageQueries.ts (1) (1)
QUERY_KEYS(6-12)src/constants/mypage/mypageConstant.tsx (1) (1)
DEFAULT_PROFILE_IMAGE(6-7)
src/hooks/mutations/useUserMutation.ts (1)
src/service/api/mypageProfile.ts (1) (1)
getBanner(111-118)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: check
🔇 Additional comments (28)
src/constants/mypage/mypageConstant.tsx (1)
5-7: 새로운 상수 추가가 잘 됐습니다!기본 프로필 이미지 URL을 상수로 정의함으로써 코드 여러 곳에서 일관되게 사용할 수 있습니다. S3 버킷 경로를 직접 사용하는 것보다 이렇게 상수화하는 것이 좋은 방법입니다.
src/hooks/mutations/useUserMutation.ts (3)
22-23: 필요한 모듈들을 잘 가져왔습니다.배너 관련 기능을 구현하기 위한 필수 모듈들을 정확히 임포트했습니다.
43-53: 로그인 후 즉시 배너 데이터를 가져오는 로직이 잘 구현되었습니다.로그인 성공 후 바로 배너 데이터를 가져와 캐시에 저장함으로써 사용자 경험을 향상시켰습니다. 에러 처리도 적절히 구현되어 있습니다.
148-150: 로그아웃 시 배너 데이터 초기화 로직이 적절합니다.로그아웃 시 배너 쿼리 데이터를 null로 초기화하여 이전 사용자의 정보가 남아있지 않도록 처리한 것이 좋습니다.
src/app/(user-page)/mypage/_features/ProfileImage.tsx (7)
8-9: 필요한 모듈들을 잘 가져왔습니다.헤더 업데이트를 위해 필요한 QUERY_KEYS와 useQueryClient를 적절하게 임포트했습니다.
14-17: 상수 임포트 방식이 효율적입니다.필요한 상수들을 한 번에 가져오는 구조로 변경하여 코드 가독성이 향상되었습니다.
27-27: queryClient 인스턴스 초기화가 적절합니다.React Query 캐시 조작을 위한 queryClient 인스턴스를 컴포넌트 최상단에 선언하여 효율적으로 사용했습니다.
38-38: 기본 이미지 확인 로직이 추가되었습니다.프로필 이미지가 기본 이미지인지 확인하는 로직이 잘 추가되었습니다. 이 로직은 UI에서 기본 이미지로 변경 버튼의 상태를 결정하는 데 사용됩니다.
95-97: 배너 쿼리 무효화 로직이 잘 구현되었습니다.이미지 업데이트 후 배너 쿼리를 무효화하여 헤더에 새 프로필 이미지가 즉시 반영되도록 하는 코드가 적절히 추가되었습니다. PR의 주요 목표인 '즉시 헤더 업데이트' 기능이 이 부분에서 구현되었습니다.
102-128: 기본 이미지로 변경하는 핸들러 구현이 잘 되었습니다.기본 이미지로 변경하는 기능이 체계적으로 구현되어 있습니다. 이미지 URL을 Blob으로 변환하고, 파일 객체로 만들어 사용하는 방식이 적절합니다. 에러 처리도 포함되어 있어 안정적입니다.
242-260: 기본 이미지 변경 UI가 직관적으로 구현되었습니다.기본 이미지 변경 버튼의 UI가 사용자 경험을 고려하여 잘 구현되었습니다. 현재 상태에 따라 버튼의 텍스트와 스타일이 동적으로 변경되며, 이미 기본 이미지가 적용된 경우 버튼이 비활성화됩니다.
src/components/common/Header.tsx (4)
6-6: 필요한 훅을 잘 가져왔습니다.배너 데이터를 가져오기 위한 useBannerQueries 훅을 적절하게 임포트했습니다.
193-193: props 타입 변경이 적절합니다.userInfo를 선택적 prop으로 변경하여 서버에서 데이터를 받지 못하는 경우에도 컴포넌트가 작동하도록 개선되었습니다.
196-203: 배너 정보 관리 로직이 효과적으로 구현되었습니다.서버에서 받은 초기 데이터와 쿼리로 가져온 데이터를 적절히 병합하는 로직이 잘 구현되었습니다. 이 변경으로 사용자 프로필 정보가 변경될 때 헤더에 즉시 반영되는 기능이 가능해졌습니다.
208-212: 의존성 배열 업데이트가 적절합니다.useEffect의 의존성 배열에 queryClient를 추가하여 queryClient 변경 시에도 배너 정보가 업데이트될 수 있도록 개선되었습니다.
src/hooks/mutations/useMyPageMutation.tsx (13)
6-6: getBanner 함수 추가로 배너 데이터 관리 개선헤더의 프로필 정보를 즉시 업데이트하기 위한 적절한 추가입니다.
27-28: 배너 쿼리 취소 로직 추가프로필 업데이트 시 배너 쿼리도 취소하여 데이터 일관성을 유지하는 좋은 접근법입니다.
35-37: 배너 데이터 백업 로직 추가에러 발생 시 롤백을 위해 이전 배너 데이터를 저장하는 것은 좋은 방어적 프로그래밍 기법입니다.
62-62: 반환 객체에 배너 데이터 포함배너 데이터를 context에 포함시켜 에러 발생 시 복원할 수 있도록 하는 좋은 구현입니다.
73-78: 에러 발생 시 배너 데이터 롤백 로직에러 발생 시 프로필 데이터와 함께 배너 데이터도 원래 상태로 롤백하여 데이터 일관성을 유지합니다.
97-99: 배너 쿼리 무효화 추가mutation이 완료된 후 배너 쿼리를 무효화하여 다음 렌더링에서 최신 데이터를 가져오도록 보장합니다.
169-170: 프로필 이미지 업데이트 시 배너 쿼리 취소프로필 이미지 업데이트 시에도 배너 쿼리를 취소하여 데이터 일관성을 유지합니다.
175-177: 프로필 이미지 업데이트 시 배너 데이터 백업배너 데이터를 백업하여 에러 발생 시 롤백할 수 있도록 하는 좋은 접근법입니다.
191-198: 프로필 이미지 변경 시 배너 데이터 동기화프로필 이미지 변경 시 배너 데이터도 함께 업데이트하여 일관된 사용자 경험을 제공합니다.
199-199: 반환 객체에 배너 데이터와 임시 URL 포함이전 데이터와 임시 URL을 context에 포함시켜 에러 발생 시 복원하거나 리소스를 정리할 수 있도록 하는 좋은 구현입니다.
209-214: 이미지 업데이트 실패 시 배너 데이터 롤백에러 발생 시 배너 데이터를 원래 상태로 롤백하여 데이터 일관성을 유지합니다.
222-239: 이미지 업데이트 성공 후 배너 데이터 갱신비동기 onSuccess 함수로 변경하고 최신 배너 데이터를 가져오는 로직이 추가되었습니다. 에러 처리도 적절히 구현되어 있습니다.
242-245: 모든 관련 쿼리 무효화이미지 업데이트 후 프로필과 배너 쿼리를 모두 무효화하여 다음 렌더링에서 최신 데이터를 가져오도록 보장합니다.
1 participant
📝 주요 작업 내용
마이페이지 정보 변경 시 헤더 정보 즉시 반영 안되는 문제 해결
마이페이지 이미지 기본 이미지로 변경 가능하게 구현
📺 스크린샷
🔗 참고 사항
💬 리뷰 요구사항
📃 관련 이슈
ex) #이슈 번호
Summary by CodeRabbit