Feat/84 헤더 마이페이지, 로그아웃 드롭다운 추가 및 로그인 성공 UI 적용 #87
Conversation
WalkthroughAPI 엔드포인트 URL이 팀 ID 기반 상대 경로에서 API 서버 URL 기반 절대 경로로 변경되었습니다. Header 컴포넌트는 글로벌 유저 스토어와 ProfileDropdown 컴포넌트를 사용하도록 리팩터링되었습니다. ProfileDropdown 컴포넌트와 관련 타입이 새로 추가되었습니다. Next.js 이미지 도메인 설정이 중복 제거 및 통합되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Header
participant UserStore
participant ProfileDropdown
participant Router
User->>Header: 페이지 진입
Header->>UserStore: 현재 유저 정보 조회
Header->>ProfileDropdown: 닉네임, 프로필 이미지, onLogout 전달
User->>ProfileDropdown: 프로필 클릭
ProfileDropdown->>ProfileDropdown: 드롭다운 열림
User->>ProfileDropdown: 로그아웃 클릭
ProfileDropdown->>Header: onLogout 호출
Header->>UserStore: 유저 정보 초기화
Header->>Router: 홈으로 리다이렉트
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Suggested labels
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✨ 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. 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 (
|
![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (5)
src/app/api/experiences/getExperiences.ts(1 hunks)src/app/api/experiences/getPopularExperiences.ts(1 hunks)src/components/Header.tsx(2 hunks)src/components/ProfileDropdown.tsx(1 hunks)src/types/profileDropdownTypes.ts(1 hunks)
🔇 Additional comments (13)
src/app/api/experiences/getExperiences.ts (1)
17-18: API 엔드포인트 URL 구성 방식이 변경되었습니다.팀 ID 기반 상대 경로에서 API 서버 URL 기반 절대 경로로 변경되었습니다. 이는 아키텍처적으로 중요한 변경사항입니다.
다음 스크립트를 실행하여 codebase 전반에서 일관된 변경이 적용되었는지 확인해주세요:
#!/bin/bash # Description: API 엔드포인트 URL 구성 방식 변경의 일관성 확인 # NEXT_PUBLIC_TEAM_ID 사용하는 파일들 검색 echo "=== NEXT_PUBLIC_TEAM_ID를 여전히 사용하는 파일들 ===" rg "NEXT_PUBLIC_TEAM_ID" --type ts --type tsx # NEXT_PUBLIC_API_SERVER_URL 사용하는 파일들 검색 echo "=== NEXT_PUBLIC_API_SERVER_URL을 사용하는 파일들 ===" rg "NEXT_PUBLIC_API_SERVER_URL" --type ts --type tsx # 환경 변수 설정 파일 확인 echo "=== 환경 변수 설정 파일들 ===" fd -e env -e local | head -5src/app/api/experiences/getPopularExperiences.ts (1)
10-11: 일관된 API 엔드포인트 변경이 적용되었습니다.이전 파일과 동일한 패턴으로 환경 변수와 URL 구성이 변경되어 일관성이 유지되고 있습니다. 아키텍처 변경이 체계적으로 적용되고 있는 것을 확인했습니다.
src/types/profileDropdownTypes.ts (1)
1-5: 타입 정의가 명확하고 적절합니다.ProfileDropdownProps 인터페이스가 잘 정의되어 있습니다. profileImageUrl을 nullable로 처리한 점과 onLogout 콜백의 시그니처가 적절합니다.
src/components/Header.tsx (5)
6-8: import 구문이 적절하게 추가되었습니다.전역 상태 관리와 새로운 ProfileDropdown 컴포넌트를 위한 import가 올바르게 추가되었습니다.
11-14: 전역 상태 관리로의 리팩터링이 잘 이루어졌습니다.로컬 useState에서 useUserStore를 사용한 전역 상태 관리로 변경된 점이 좋습니다. 로그인 상태 판단 로직도 명확합니다.
16-20: 로그아웃 핸들러 구현이 적절합니다.사용자 상태를 null로 설정하고 홈페이지로 리다이렉트하는 로직이 간단하고 명확합니다.
46-50: ProfileDropdown 컴포넌트 통합이 잘 이루어졌습니다.사용자 정보(nickname, profileImageUrl)와 로그아웃 핸들러가 적절히 전달되고 있습니다. 타입 안정성도 보장됩니다.
23-23: z-index 변경 사항을 검증해주세요.z-index가 10에서 100으로 증가했습니다. 다른 컴포넌트와의 레이어링 충돌이 없는지 확인이 필요합니다.
다음 스크립트로 z-index 사용 현황을 확인해보세요:
#!/bin/bash # Description: z-index 사용 현황 확인 # Expected: 다른 컴포넌트의 z-index와 충돌 여부 확인 # z-index 사용 현황 검색 rg -A 2 -B 2 "z-\d+" --type tsx --type ts --type csssrc/components/ProfileDropdown.tsx (5)
17-25: 외부 클릭 처리 로직이 잘 구현되었습니다.mousedown 이벤트를 사용하여 외부 클릭을 감지하고 드롭다운을 닫는 로직이 적절합니다. 이벤트 리스너의 cleanup도 올바르게 처리되어 있습니다.
27-30: 경로 변경 시 드롭다운 닫기 처리가 좋습니다.usePathname을 사용하여 라우트 변경 시 드롭다운을 자동으로 닫는 UX 고려사항이 잘 반영되어 있습니다.
39-53: 프로필 이미지 처리 로직이 적절합니다.profileImageUrl 존재 여부에 따른 조건부 렌더링이 잘 구현되어 있고, 기본 아이콘 fallback 처리도 적절합니다. 이미지 크기와 스타일링도 일관성 있게 적용되었습니다.
56-74: 드롭다운 메뉴 구현이 잘 되어 있습니다.이벤트 버블링 방지(stopPropagation)와 적절한 스타일링이 적용되어 있습니다. 마이페이지 링크와 로그아웃 버튼의 구현도 적절합니다.
52-52: 닉네임 fallback 텍스트를 검토해주세요.닉네임이 없을 때 '사용자'로 표시되는데, 실제로 nickname이 빈 문자열이나 undefined일 가능성이 있는지 확인이 필요합니다.
다음 스크립트로 사용자 데이터 구조를 확인해보세요:
#!/bin/bash # Description: 사용자 데이터 구조에서 nickname 처리 확인 # Expected: nickname 필드가 항상 존재하는지, 빈 값 처리가 필요한지 확인 # authStore나 사용자 관련 타입 정의 확인 ast-grep --pattern 'interface $_ { $$$ nickname: $_ $$$ }' # nickname 사용 현황 확인 rg -A 3 -B 3 "nickname" --type ts --type tsx
| <div | ||
| className='flex items-center gap-8 cursor-pointer' | ||
| onClick={() => setIsOpen((prev) => !prev)} |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
접근성 개선을 위한 키보드 이벤트 처리 추가를 권장합니다.
현재 클릭 이벤트만 처리하고 있는데, 키보드 접근성을 위해 Enter나 Space 키 처리를 추가하는 것이 좋겠습니다.
다음과 같이 키보드 이벤트 처리를 추가할 수 있습니다:
<div
className='flex items-center gap-8 cursor-pointer'
+ role='button'
+ tabIndex={0}
onClick={() => setIsOpen((prev) => !prev)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ setIsOpen((prev) => !prev);
+ }
+ }}
>🤖 Prompt for AI Agents
In src/components/ProfileDropdown.tsx around lines 35 to 37, the onClick handler
toggles the dropdown but lacks keyboard accessibility. Add an onKeyDown event
handler that listens for Enter and Space key presses to toggle the dropdown
state, ensuring keyboard users can open and close the menu. Also, add
tabIndex={0} to make the div focusable by keyboard navigation.
| const nextConfig: NextConfig = { | ||
| // Docker 배포를 위한 standalone 모드 활성화 | ||
| // 해당 설정은 프로덕션 빌드 시 필요한 파일만 .next/standalone 폴더에 복사됨. | ||
| images: { |
There was a problem hiding this comment.
저도 이 부분 오류나서 수정했는데 ㅋㅋ 동일하시네용
minimo-9
left a comment
minimo-9
left a comment
There was a problem hiding this comment.
드롭다운과 로그아웃 부분 구현해주시느라 고생많으셨습니다! 저부분은 토큰도 지워지는 지 확인해야하는 부분이라 제가 부족한 부분은 추가로 구현해서 넣어 두겠습니다!
LeeCh0129
left a comment
LeeCh0129
left a comment
There was a problem hiding this comment.
헤더에 드롭다운 및 프로필까지 구현해주셨네요! 고생하셨습니다. 덕분에 테스트하기 편해질거 같네요👍
📌 변경 사항 개요
📝 상세 내용
🔗 관련 이슈
🖼️ 스크린샷(선택사항)
globalnomad-header-login.mp4
💡 참고 사항
Summary by CodeRabbit
New Features
개선 사항
기타