✨Feat: 공통 드롭다운 메뉴 기능 구현 #43
Conversation
Walkthrough이번 변경에서는 전역 CSS에 하단 테두리 유틸리티 클래스를 추가하고, 파비콘 경로를 수정했습니다. 또한, Dropdown 및 UserDropdown 컴포넌트가 새롭게 도입되었고, Header 컴포넌트가 리팩토링되어 사용자 인터페이스와 테마 토글 기능이 개선되었습니다. 프로필 표시 방식도 동적으로 변경되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Header
participant UserDropdown
participant Router
User->>Header: 페이지 상단 접근
Header->>UserDropdown: 프로필/드롭다운 렌더링
User->>UserDropdown: 프로필 클릭 (드롭다운 오픈)
User->>UserDropdown: "마이페이지" 클릭
UserDropdown->>Router: "/mypage"로 이동
User->>UserDropdown: "로그아웃" 클릭
UserDropdown->>UserDropdown: 로그아웃 콘솔 출력
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! ✨ Finishing Touches
🪧 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
🔭 Outside diff range comments (1)
src/app/shared/components/common/Profile.tsx (1)
50-62:⚠️ Potential issue
imageUrl프롭이 실제로 사용되지 않음
imageUrl을 전달해도 항상 고정 경로(/images/profile.gif)가 렌더링되어 프롭의 의미가 사라집니다. 또한alt텍스트가 닉네임을 포함하지 않아 접근성 측면에서도 보완이 필요합니다.- <Image - src="/images/profile.gif" - fill - alt="프로필 이미지" - className="size-full object-cover" - /> + <Image + src={imageUrl} + fill + alt={`${nickname}의 프로필 이미지`} + className="size-full object-cover" + />
🧹 Nitpick comments (7)
src/app/globals.css (1)
43-45: Tailwind 기본 유틸리티와 중복 정의 위험Tailwind CSS에는 이미
border-b유틸리티가 존재합니다. 동일한 이름에 접두사를 붙이지 않고.Border-bottom클래스를 추가하면 팀원들이border-bvs.Border-bottom두 가지 중 어떤 것을 써야 하는지 혼란스러울 수 있고, 스타일 일관성도 깨질 여지가 있습니다. 기존 유틸리티에@apply로 색상만 확장하거나, 프로젝트 컨벤션에 맞춘 프리픽스(예:App-border-b)를 붙여 중복을 피하는 방안을 검토해 주세요.src/app/layout.tsx (1)
12-13: 파비콘 메타데이터 확장 고려단일
icon항목만 설정하면 일부 브라우저나 PWA 환경에서 고해상도 아이콘이 누락될 수 있습니다. 다음과 같이shortcut또는 다양한sizes를 추가해 대응 범위를 넓히는 것을 권장드립니다.icons: { - icon: '/favicon.ico', + icon: '/favicon.ico', + shortcut: '/favicon-32x32.png', + other: [ + { rel: 'apple-touch-icon', url: '/apple-touch-icon.png', sizes: '180x180' }, + ], },src/app/shared/components/common/header/UserDropdown.tsx (1)
29-37: 다크 모드 호버 스타일 누락
hover:bg-gray-100 hover:text-black만 지정되어 있어 다크 모드에서 호버 시 글자가 안 보일 수 있습니다. Tailwind 다크 변형을 함께 지정해 주세요.- className="w-full p-5 text-xs hover:bg-gray-100 hover:text-black" + className="w-full p-5 text-xs hover:bg-gray-100 hover:text-black dark:hover:bg-[#2E2E2E] dark:hover:text-white"src/app/shared/components/common/Dropdown/Dropdown.tsx (1)
33-58: 드롭다운 내부 클릭 후 자동 닫힘 기능 추가 제안현재 메뉴 항목을 클릭해도 드롭다운이 그대로 열린 채로 남습니다. UX 측면에서 클릭 시 자동 닫힘이 자연스러우므로
children렌더링 시onClick콜백을 주입하거나,context/render props패턴으로close()함수를 노출하는 방식의 개선을 고려해 주세요.src/app/shared/components/common/header/Header.tsx (3)
26-45: 접근성·UI 세부사항 보완 제안
- 현재 페이지를 나타내기 위해
font-semibold만 주고 있는데, 스크린리더용aria-current="page"속성을 함께 부여하면 접근성이 향상됩니다.- 두 버튼의 radius 값이
rounded-mdvsrounded-6로 다릅니다. 디자인 의도라면 OK지만 통일 의도라면 확인 부탁드립니다.mr-16이 두 링크 중 하나에만 들어가 있어 좌우 여백이 비대칭입니다.-<Link - href="/dashboard" - className={cn( - 'Border-btn flex items-center gap-6 rounded-md border-solid px-12 py-6', - pathname === '/dashboard' && 'font-semibold', - )} -> +<Link + href="/dashboard" + aria-current={pathname === '/dashboard' ? 'page' : undefined} + className={cn( + 'Border-btn flex items-center gap-6 rounded-md border-solid px-12 py-6', + pathname === '/dashboard' && 'font-semibold', + )} +>동일하게
/modal링크도 적용하면 됩니다.
53-60:next/image성능 속성 누락
fill모드를 사용할 때는sizes속성을 지정하지 않으면 CLS(레이아웃 이동) 및 불필요한 리사이즈가 발생할 수 있습니다.<Image src="/images/collaborator.png" fill + sizes="48px" alt="초대된 사용자" style={{ objectFit: 'cover' }} />필요 시
priority플래그도 고려해 주세요.
61-61: 구분 기호|는 엘리먼트로 감싸는 편이 안전맨-바로가기 구분용
|가 텍스트 노드로 노출되어 있어 마진 조정·ARIA 속성 부여가 어렵습니다. 최소한<span aria-hidden ...>로 감싸 두면 스타일·접근성 관리가 용이합니다.- | + <span aria-hidden="true" className="px-8 text-gray-400">|</span>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
public/favicon.icois excluded by!**/*.icopublic/favicon.pngis excluded by!**/*.png
📒 Files selected for processing (6)
src/app/globals.css(1 hunks)src/app/layout.tsx(1 hunks)src/app/shared/components/common/Dropdown/Dropdown.tsx(1 hunks)src/app/shared/components/common/Profile.tsx(1 hunks)src/app/shared/components/common/header/Header.tsx(2 hunks)src/app/shared/components/common/header/UserDropdown.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
src/app/shared/components/common/header/UserDropdown.tsx (2)
src/app/shared/components/common/Dropdown/Dropdown.tsx (1)
Dropdown(13-59)src/app/shared/components/common/Profile.tsx (1)
Profile(46-80)
src/app/shared/components/common/Dropdown/Dropdown.tsx (1)
src/app/shared/lib/cn.ts (1)
cn(4-6)
src/app/shared/components/common/header/Header.tsx (3)
src/app/shared/lib/cn.ts (1)
cn(4-6)src/app/shared/components/common/header/UserDropdown.tsx (1)
UserDropdown(7-42)src/app/shared/components/ThemeToggle.tsx (1)
ThemeToggle(6-27)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: eslint-check
🔇 Additional comments (3)
src/app/shared/components/common/header/UserDropdown.tsx (1)
14-16: 로그아웃 로직 미구현
console.log으로만 처리되어 있어 실제 인증 상태가 변경되지 않습니다. NA API 호출 또는authContext.logout()같은 실제 구현으로 교체하거나TODO:주석으로 명시해 주세요.src/app/shared/components/common/header/Header.tsx (2)
5-9: 임포트 구성 깔끔, 별다른 이슈 없음
next/link,next/navigation, 신규 공통 컴포넌트들이 올바르게 임포트되어 있습니다.use client지시어도 포함되어 있어 SSR-hydration 오류 우려도 없습니다.
64-67: 공통 드롭다운·다크모드 토글 통합 정상 동작 확인
UserDropdown과ThemeToggle이 동일 flex 컨테이너로 묶여 있어 레이아웃도 깔끔합니다. 추가 피드백 없습니다.
| <Profile nickname="닉네임" size={36} /> | ||
| </div> |
There was a problem hiding this comment.
닉네임 하드코딩
<Profile>에 "닉네임"을 하드코딩하면 실제 사용자 정보를 표시하지 못합니다. session 또는 user 컨텍스트에서 닉네임을 받아와 전달하도록 수정해 주세요.
- <Profile nickname="닉네임" size={36} />
+ <Profile nickname={user.nickname} imageUrl={user.imageUrl} size={36} />Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/app/shared/components/common/header/UserDropdown.tsx at lines 22-23, the
Profile component currently has the nickname prop hardcoded as "닉네임". Replace
this hardcoded string by retrieving the actual user's nickname from the session
or user context and pass it dynamically to the Profile component to display the
correct user information.
| width, | ||
| { | ||
| 'left-0': align === 'left', | ||
| 'right-0': align === 'right', | ||
| 'left-1/2 -translate-x-1/2': align === 'center', | ||
| }, |
There was a problem hiding this comment.
드롭다운 컴포넌트 사용 시에 와 같이 사용해주시면 좌측 정렬이 가능해집니다!!
이후에 사용해보고 너무 치우친다 싶으면 'leftt-0' 부분을 'left-4'와 같이 조정해주는 식으로 변경하면 될 것 같습니당
| trigger={ | ||
| <div className="flex cursor-pointer items-center gap-8"> | ||
| <Profile nickname="닉네임" size={36} /> | ||
| </div> |
There was a problem hiding this comment.
오... 프롭으로 아예 jsx 덩어리를 전달할수도 있군요
There was a problem hiding this comment.
맞아용~ JSX 덩어리 전체를 prop으로 전달하는 게 가능하다고 합니다.
이는 실제로 레고 블럭처럼 조립 가능하고 재사용성과 유연성 증가하는 동시에 역할 분리도 확실해서 React에서 매우 일반적이고 강력한 패턴이라고 합니다!!
📌 변경 사항 개요
공통 드롭다운 메뉴 기능 구현
✨ 요약
공통 드롭다운 메뉴 기능 구현
📝 상세 내용
🐛Fix: favicon 길쭉해보이는 문제 수정
🫧 modify:
✨feat:
🔗 관련 이슈
🖼️ 스크린샷
✅ 체크리스트
💡 참고 사항
Summary by CodeRabbit
신규 기능
버그 수정
스타일