[FEAT] 프로필 조회 화면에 profileImageUrl 표시#205
Conversation
- 프로필 조회 API 응답의 profileImageUrl을 설정 화면에 표시했습니다 - 값이 없을 경우 기존 placeholder를 유지했습니다 - next/image가 Google 프로필 이미지 도메인을 허용하도록 설정을 추가했습니다
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 43 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
Walkthrough프로필 조회 상태의 Changes프로필 이미지 표시
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
Timo Performance ReportBundle Size — timo-web
Lighthouse — timo-web
Image Optimization — timo-web
측정 커밋: |
![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
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@apps/timo-web/app/`[locale]/(main)/settings/_components/account/SettingsProfileView.tsx:
- Around line 56-66: Update the profile image Image component in
SettingsProfileView to include the Next.js priority prop, ensuring the
above-the-fold profile image is preloaded for LCP optimization while leaving the
fallback placeholder unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 57b6e053-9e5c-4b8d-9372-7970448048c8
📒 Files selected for processing (4)
apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsxapps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsProfileContainer.tsxapps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile.tsapps/timo-web/next.config.js
jjangminii
left a comment
jjangminii
left a comment
There was a problem hiding this comment.
체크아웃해서 프사 뜨는거 확인했습니다~~
- above-the-fold 프로필 이미지가 LCP 최적화를 위해 preload되도록 Image 컴포넌트에 priority prop을 추가했습니다
2 participants
ISSUE 🔗
close #204
What is this PR? 🔍
프로필 조회 API 응답에 존재하던 profileImageUrl 필드가 설정 페이지 프로필 화면에 반영되지 않고 있던 문제를 수정했습니다.
배경
UserProfileResponse에profileImageUrl필드가 이미 내려오고 있었지만, 설정 화면(SettingsProfileView)에서는 항상 회색 placeholder(div)만 렌더링했습니다.useSettingsProfile훅부터SettingsProfileContainer→SettingsProfileView까지profileImageUrl을 prop으로 전달하고, 값이 있을 때만next/image로 실제 이미지를 렌더링하도록 했습니다.프로필 이미지 표시
useSettingsProfile의profileState에profileImageUrl을 추가하고,SettingsProfileView에서 값이 있으면 실제 이미지를, 없으면 기존 placeholder를 렌더링하도록 했습니다.UserProfileResponse.profileImageUrl은 zod 스키마상nullish()(string | null | undefined)이므로, 훅 레벨에서profile.profileImageUrl ?? undefined로 정규화해 View의string | undefinedprop 타입과 맞췄습니다.SettingsProfileView는profileImageUrl존재 여부로 분기해<Image src={profileImageUrl} .../>또는 기존 회색 원형 placeholder를 렌더링합니다.next.config.js — 외부 이미지 도메인 허용
images.remotePatterns에lh3.googleusercontent.com을 추가했습니다.OauthCallbackContainer참고),profileImageUrl은 Google이 제공하는 프로필 사진 URL입니다. Next.jsnext/image는next.config.js에 등록되지 않은 외부 호스트의 이미지를 런타임에서 차단하므로, 이 설정이 없으면 프로필 이미지 렌더링 시 에러가 발생합니다.To Reviewers
Google이 아닌 다른 이미지 호스트를 통해
profileImageUrl이 내려오는 케이스가 있는지 백엔드 스펙 기준으로 확인 부탁드립니다. 현재는lh3.googleusercontent.com단일 도메인만 허용 목록에 추가했습니다.Screenshot 📷
Test Checklist ✔
pnpm check-types통과pnpm lint통과