Feat/markup/landing-page/DEVING-78 #87

Lee-Dong-Seok · 2025-03-20T18:11:50Z

📝 주요 작업 내용

마이페이지 정보 변경 시 헤더 정보 즉시 반영 안되는 문제 해결
마이페이지 이미지 기본 이미지로 변경 가능하게 구현

📺 스크린샷

🔗 참고 사항

💬 리뷰 요구사항

📃 관련 이슈

ex) #이슈 번호

Summary by CodeRabbit

새로운 기능
- 프로필 이미지 리셋 버튼이 추가되어, 사용자가 기본 이미지로 손쉽게 전환할 수 있습니다.
- 헤더가 개선되어 최신 배너 정보가 실시간으로 반영됩니다.
- 프로필 및 이미지 업데이트 후 배너 데이터가 자동으로 새로 고침되어 일관된 사용자 경험을 제공합니다.
- 로그인 시 배너 데이터를 불러오고, 로그아웃 시 이를 초기화하는 기능이 도입되었습니다.
- 기본 프로필 이미지 URL 상수가 도입되어 이미지 표준화가 이루어졌습니다.

coderabbitai · 2025-03-20T18:11:57Z

Walkthrough

이 PR은 프로필 이미지와 배너 데이터 관리를 개선합니다. ProfileImage 컴포넌트에 기본 이미지로 리셋하는 핸들러가 추가되고, 확인 시 배너 쿼리 갱신을 위해 queryClient.invalidateQueries가 호출됩니다. Header 컴포넌트는 userInfo prop을 선택적으로 받고, useBannerQueries 훅을 활용하도록 수정되었습니다. 또한, 기본 이미지 URL 상수가 추가되었으며, 마이페이지와 유저 mutation 훅에서 배너 데이터 취소, 롤백, 갱신 로직이 도입되었습니다.

Changes

파일 경로	변경 요약
`src/app/…/ProfileImage.tsx`	기본 이미지 리셋 기능(`handleResetToDefault`) 추가 및 확인 시 배너 쿼리 인밸리데이션 실행
`src/components/common/Header.tsx`	`userInfo` prop을 선택적으로 변경, `useBannerQueries` 훅 도입 및 `useEffect` 의존성 업데이트
`src/constants/…/mypageConstant.tsx`	기본 이미지 URL을 가진 `DEFAULT_PROFILE_IMAGE` 상수 추가
`src/hooks/…/useMyPageMutation.tsx`	updateProfile, updateProfileImage mutation에 배너 데이터 관리(쿼리 취소, 이전 데이터 롤백, onSuccess 수정) 추가
`src/hooks/…/useUserMutation.ts`	로그인 시 배너 데이터 fetch 및 캐시 설정, 로그아웃 시 배너 데이터 클리어 로직 추가

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

📝 Generate Docstrings

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.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

netlify · 2025-03-20T18:12:08Z

✅ Deploy Preview for deving-together ready!

Name	Link
🔨 Latest commit	`6e2f458`
🔍 Latest deploy log	https://app.netlify.com/sites/deving-together/deploys/67dc5a695bdbbc0008a5d12c
😎 Deploy Preview	https://deploy-preview-87--deving-together.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 30 Accessibility: 95 Best Practices: 83 SEO: 100 PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

codecov · 2025-03-20T18:12:56Z

Codecov Report

All modified and coverable lines are covered by tests ✅

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

github-actions · 2025-03-20T18:13:26Z

CI Status Report

검사 결과

Lint: ✅ success
Format: ✅ success
Type Check: ✅ success
Tests: ✅ success
Build: ✅ success

✅ 모든 검사가 통과되었습니다.

coderabbitai

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

📥 Commits

Reviewing files that changed from the base of the PR and between 6af2bd0 and 6e2f458.

📒 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: 모든 관련 쿼리 무효화

이미지 업데이트 후 프로필과 배너 쿼리를 모두 무효화하여 다음 렌더링에서 최신 데이터를 가져오도록 보장합니다.

refactor(DEVING-78): 헤더 정보 즉시 반영 구현, 마이페이지 기본이미지 변경 구현

6e2f458

Lee-Dong-Seok added AI Review ♻️ refactor labels Mar 20, 2025

Lee-Dong-Seok requested review from clyde-yoonjae and lee1nna March 20, 2025 18:11

Lee-Dong-Seok self-assigned this Mar 20, 2025

Lee-Dong-Seok requested a review from dbswl701 March 20, 2025 18:15

coderabbitai bot reviewed Mar 20, 2025

View reviewed changes

Lee-Dong-Seok merged commit b0f62e1 into dev Mar 21, 2025
10 checks passed

Lee-Dong-Seok deleted the feat/markup/landing-page/DEVING-78 branch March 21, 2025 14:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feat/markup/landing-page/DEVING-78 #87

Feat/markup/landing-page/DEVING-78 #87

Uh oh!

Lee-Dong-Seok commented Mar 20, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Mar 20, 2025 •

edited

Loading

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

netlify bot commented Mar 20, 2025 •

edited

Loading

Uh oh!

codecov bot commented Mar 20, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Mar 20, 2025

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Feat/markup/landing-page/DEVING-78 #87

Feat/markup/landing-page/DEVING-78 #87

Uh oh!

Conversation

Lee-Dong-Seok commented Mar 20, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 주요 작업 내용

📺 스크린샷

🔗 참고 사항

💬 리뷰 요구사항

📃 관련 이슈

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Mar 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

netlify bot commented Mar 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for deving-together ready!

Uh oh!

codecov bot commented Mar 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions bot commented Mar 20, 2025

CI Status Report

검사 결과

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Lee-Dong-Seok commented Mar 20, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 20, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

netlify bot commented Mar 20, 2025 •

edited

Loading

codecov bot commented Mar 20, 2025 •

edited

Loading