AvatarButton 컴포넌트 생성 #178
AvatarButton 컴포넌트 생성 #178
Conversation
dashboard, games(library), home navigation
WalkthroughAvatar/logout UI is unified by introducing a new AvatarButton component and replacing prior dropdown/state logic across dashboard, games, and HomeNavigation. useAuth usage is simplified to { user, logout }. A prior button export is removed. Console logs and unused handlers are cleaned up. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User as 사용자
participant Page as 페이지 (Dashboard/Games/HomeNav)
participant Avatar as AvatarButton
participant Auth as useAuth
participant Router as Router
User->>Page: 페이지 방문
Page->>Auth: useAuth() 호출
Auth-->>Page: { user, logout }
Page->>Avatar: render with src = user?.profileImageUrl
User->>Avatar: 아바타 클릭
Avatar->>Avatar: 드롭다운 표시 ("로그아웃")
User->>Avatar: "로그아웃" 선택
Avatar->>Page: onClick 콜백
Page->>Auth: logout()
Auth-->>Page: 완료
Page->>Router: navigate("/")
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
🧪 Generate unit tests
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:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![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 (8)
service/app/src/widgets/HomeNavigation.tsx (3)
18-21: 미사용 프로퍼티 제거 제안(HomeNavigationProps.isLoggedIn).컴포넌트에서 사용되지 않습니다. 타입을 간소화해 주세요.
다음 변경을 권장합니다:
interface HomeNavigationProps { - isLoggedIn?: boolean className?: string }
41-43: 테마 토글, resolvedTheme 기준으로 통일 권장.다른 파일과 달리 theme를 사용하고 있어 'system' 모드에서 토글 방향이 어긋날 수 있습니다.
- const handleThemeToggle = () => { - setTheme(theme === "dark" ? "light" : "dark") - } + const handleThemeToggle = () => { + setTheme(resolvedTheme === "dark" ? "light" : "dark") + }
25-25: 아바타 이미지 전달 누락 — 사용자 프로필 이미지 표시 제안.다른 화면과 일관되게 프로필 이미지를 사용하면 UX가 좋아집니다.
- const { isLoading: authLoading, isAuthenticated, logout, login } = useAuth() + const { isLoading: authLoading, isAuthenticated, logout, login, user } = useAuth()- <AvatarButton onClick={handleLogoutClick} /> + <AvatarButton onClick={handleLogoutClick} src={user?.profileImageUrl || undefined} />Also applies to: 110-110
service/app/src/app/games/page.tsx (1)
166-169: 빈 문자열(src="") 대비한 안전한 전달 권장.프로필 URL이 빈 문자열일 경우 Next/Image가 실패할 수 있어 기본 아바타로 폴백하도록 처리하세요.
- <AvatarButton - onClick={handleLogoutClick} - src={user?.profileImageUrl} - /> + <AvatarButton + onClick={handleLogoutClick} + src={user?.profileImageUrl || undefined} + />service/app/src/widgets/components/avatarButton.tsx (3)
20-33: 트리거 버튼에 접근성 라벨 추가 제안.이미지 대체텍스트만으로도 이름이 생기지만, 버튼 자체에 의도를 드러내는 라벨을 부여하면 더 명확합니다.
- <DropdownMenuTrigger asChild> - <SecondaryPlainIconButton size="lg" className="size-[42px] shrink-0"> + <DropdownMenuTrigger asChild> + <SecondaryPlainIconButton + size="lg" + className="size-[42px] shrink-0" + aria-label="사용자 메뉴 열기" + >
15-18: src 빈 문자열 폴백 처리.prop으로 빈 문자열이 전달되면 기본 이미지로 안전하게 폴백하도록 방어 코드를 추가하세요.
export default function AvatarButton({ src = "/avatar.svg", onClick, }: AvatarButtonProps) { - return ( + const safeSrc = typeof src === "string" && src.trim() ? src : "/avatar.svg" + return ( <DropdownMenuRoot> <DropdownMenuTrigger asChild> <SecondaryPlainIconButton size="lg" className="size-[42px] shrink-0"> <Image - src={src} + src={safeSrc} alt="사용자 프로필 사진" width={42} height={42} className="size-full rounded-full" placeholder="blur" blurDataURL="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzI3IiBoZWlnaHQ9IjQ1OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZTVlN2ViIi8+PC9zdmc+" />Also applies to: 24-31
10-13: 핸들러 명시성 개선 제안(onClick → onLogout).의도를 드러내는 네이밍이 가독성을 높입니다. 외부 사용처 변경이 필요한 점만 참고하세요.
-interface AvatarButtonProps { - src?: string - onClick: () => void -} +interface AvatarButtonProps { + src?: string + onLogout: () => void +} ... - onClick, + onLogout, ... - onClick={onClick} + onClick={onLogout}Also applies to: 41-46
service/app/src/app/dashboard/page.tsx (1)
188-188: 빈 문자열(src="") 대비한 안전한 전달 권장.프로필 URL이 비어 있으면 기본 아바타로 폴백하도록 처리하세요.
- <AvatarButton onClick={handleLogoutClick} src={user?.profileImageUrl} /> + <AvatarButton onClick={handleLogoutClick} src={user?.profileImageUrl || undefined} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (4)
service/app/src/app/dashboard/page.tsx(3 hunks)service/app/src/app/games/page.tsx(2 hunks)service/app/src/widgets/HomeNavigation.tsx(2 hunks)service/app/src/widgets/components/avatarButton.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Component names in code must use PascalCase
Files:
service/app/src/widgets/HomeNavigation.tsxservice/app/src/widgets/components/avatarButton.tsxservice/app/src/app/dashboard/page.tsxservice/app/src/app/games/page.tsx
🧬 Code graph analysis (4)
service/app/src/widgets/HomeNavigation.tsx (1)
service/app/src/widgets/components/avatarButton.tsx (1)
AvatarButton(15-50)
service/app/src/widgets/components/avatarButton.tsx (2)
shared/design/src/components/menu/index.tsx (4)
DropdownMenuRoot(106-106)DropdownMenuTrigger(107-107)DropdownMenuContent(104-104)DropdownMenuItem(105-105)shared/design/src/components/button/secondaryPlainIconButton.tsx (1)
SecondaryPlainIconButton(42-42)
service/app/src/app/dashboard/page.tsx (2)
service/app/src/entities/auth/hooks/useAuth.ts (1)
useAuth(18-110)service/app/src/widgets/components/avatarButton.tsx (1)
AvatarButton(15-50)
service/app/src/app/games/page.tsx (1)
service/app/src/widgets/components/avatarButton.tsx (1)
AvatarButton(15-50)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: ci
🔇 Additional comments (8)
service/app/src/widgets/HomeNavigation.tsx (2)
16-16: AvatarButton 도입으로 중복 제거 깔끔합니다.내비게이션의 아바타/로그아웃 UI가 단일 컴포넌트로 정리되어 유지보수성이 좋아졌습니다.
58-60: 로그아웃 후 이동 정책 확인 요청.대시보드 페이지는 "/"로 리디렉트하지만 이 컴포넌트는 현재 페이지에 머뭅니다. 의도된 동작인지 확인 부탁드립니다.
service/app/src/app/games/page.tsx (2)
19-19: AvatarButton 도입 LGTM.헤더의 사용자 메뉴가 일관화되어 좋습니다.
26-27: useAuth API 정렬 LGTM.logout 포함한 구조분해로 API 변경과 일치합니다.
service/app/src/widgets/components/avatarButton.tsx (1)
15-15: PascalCase 컴포넌트 규칙 준수 확인.AvatarButton 컴포넌트 네이밍이 가이드에 부합합니다.
service/app/src/app/dashboard/page.tsx (3)
21-21: AvatarButton 도입 LGTM.헤더 우측 사용자 메뉴가 통일되었습니다.
27-27: useAuth 사용 정돈 LGTM.{ logout, user }만을 사용해 간결합니다.
149-152: 로그아웃 후 리디렉션 방식 확인.이 페이지는 "/"로 이동합니다. HomeNavigation 및 GamesPage와의 일관성을 유지할지 결정이 필요합니다.
|
❌ 테스트 실패 테스트가 실패했습니다. Actions 로그를 확인해주세요. |
|
Deploy preview for re-creation ready! ✅ Preview Built with commit 73da722. |
📝 설명
기존에는 중복 코드로 작성되어 있던 네비게이션의 AvatarButton을 컴포넌트화 했습니다. (공통 컴포넌트 X /
service/app내부 일반 컴포넌트)🛠️ 주요 변경 사항
리뷰 시 고려해야 할 사항
Summary by CodeRabbit
신규 기능
UI/UX