Conversation
Zepelown
requested review from
lepitaaar,
oesnuj,
seongje973,
seongwon030 and
suhyun113
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| Cohort / File(s) | Summary |
|---|---|
헤더 드롭다운 스타일 추가frontend/src/components/common/Header/Header.styles.ts |
IntroduceButtonStyles에서 width 제거 및 flex-shrink: 0 추가. 드롭다운용 스타일 컴포넌트 3개 추가/export: DropdownContainer, DropdownMenu, DropdownItem(상대/절대 배치, 정렬, hover 스타일). |
헤더 로직/렌더링 수정frontend/src/components/common/Header/Header.tsx |
데스크톱 헤더에 드롭다운 상태(isDropdownOpen) 도입 및 마우스 진입/이탈로 열림/닫힘. “공지사항” 드롭다운과 “Patch Notes” 항목 추가(외부 Notion 링크 새 탭 오픈). 데스크톱/모바일 내비 링크 세트 분리 및 전달 데이터 교체. |
Sequence Diagram(s)
sequenceDiagram
autonumber
actor User
participant Header as DesktopHeader
participant UI as DropdownMenu
participant Browser
User->>Header: 마우스 진입(공지사항)
Header->>Header: isDropdownOpen = true
Header->>UI: 드롭다운 렌더
User->>UI: Patch Notes 클릭
UI->>Browser: window.open(Notion URL, _blank)
User->>Header: 마우스 이탈(공지사항 영역)
Header->>Header: isDropdownOpen = false
Header-->>UI: 드롭다운 언마운트
sequenceDiagram
autonumber
actor User
participant Header as MobileMenuDrawer
participant Browser
User->>Header: 메뉴 열기
Header->>Header: 모바일 링크 표시(모아동 소개/총동연 소개/Patch Notes)
User->>Header: Patch Notes 탭
Header->>Browser: window.open(Notion URL, _blank)
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related issues
- Moadong/moadong#770: 헤더에 Patch Notes 링크 노출을 다루며, 본 PR의 드롭다운/링크 추가와 목적이 일치합니다.
Possibly related PRs
- [feature] 소개페이지 임시 이미지로 대체 및 메뉴바 구현 #366: 동일 헤더 파일(Header.tsx, Header.styles.ts)에서 내비/버튼 및 모바일 드로어 관련 수정을 수행하여 코드 레벨로 밀접히 연관됩니다.
Suggested reviewers
- seongwon030
- oesnuj
Pre-merge checks and finishing touches
✅ Passed checks (5 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Linked Issues Check | ✅ Passed | PR은 링크된 이슈 MOA-266의 요구사항인 패치 노트 연결 링크를 헤더에 성공적으로 추가했으며 데스크탑과 모바일 버전 모두 적용되어 요구사항을 충족합니다. |
| Out of Scope Changes Check | ✅ Passed | 스타일 수정과 컴포넌트 분할은 패치 노트 드롭다운 UI 구현을 지원하기 위한 변경으로 링크된 이슈의 범위를 벗어나지 않습니다. |
| Docstring Coverage | ✅ Passed | No functions found in the changes. Docstring coverage check skipped. |
| Title Check | ✅ Passed | 제목은 헤더에 패치 노트를 추가하는 주요 변경 사항을 명확히 요약하고 있으며 불필요한 정보나 모호한 표현이 없습니다. ‘feat:’ 접두사를 사용해 기능 추가임을 일관되게 표시하고 있어 팀의 커밋 기록 스타일에도 부합합니다. 한 문장으로 간결하게 작성되어 동료들이 히스토리를 스캔할 때 주요 변경점을 즉시 파악할 수 있습니다. |
✨ Finishing touches
- 📝 Generate docstrings
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Post copyable unit tests in a comment
- Commit unit tests in branch
feature/#770-patch-note-MOA-266
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 @coderabbitai help to get the list of available commands and usage tips.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/src/components/common/Header/Header.styles.ts (1)
66-87: 세미콜론 누락으로 인한 CSS 구문 오류69번 라인에서
flex-shrink: 0뒤에 세미콜론이 누락되어 스타일이 제대로 적용되지 않습니다.다음 diff를 적용하여 수정하세요:
export const IntroduceButtonStyles = styled.a` margin-left: 45px; // width: 63px; - flex-shrink: 0 + flex-shrink: 0; height: 43px;
🧹 Nitpick comments (2)
frontend/src/components/common/Header/Header.styles.ts (1)
197-208: 스타일 중복을 제거하여 DRY 원칙 준수
DropdownContainer가IntroduceButtonStyles와 동일한 속성들(margin-left,height,font-weight,font-size,line-height)을 중복하고 있습니다. 공통 스타일을 재사용하도록 리팩토링하는 것을 권장합니다.다음과 같이 공통 스타일을 추출할 수 있습니다:
+const BaseHeaderItemStyles = styled.div` + margin-left: 45px; + height: 43px; + font-weight: 500; + font-size: 14px; + line-height: 42px; + color: inherit; + text-decoration: none; +`; + -export const DropdownContainer = styled.div` +export const DropdownContainer = styled(BaseHeaderItemStyles)` position: relative; display: inline-block; - margin-left: 45px; cursor: pointer; - height: 43px; - font-weight: 500; - font-size: 14px; - line-height: 42px; - color: inherit; - text-decoration: none; `;frontend/src/components/common/Header/Header.tsx (1)
68-70: 주석 처리된 코드 제거주석 처리된 코드는 불필요하므로 제거하는 것이 좋습니다. 버전 관리 시스템에 히스토리가 남아있습니다.
- {/* <Styled.IntroduceButtonStyles as='div'> - 공지사항 - </Styled.IntroduceButtonStyles> */} <span>공지사항</span>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
frontend/src/components/common/Header/Header.styles.ts(2 hunks)frontend/src/components/common/Header/Header.tsx(6 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx}: Replace magic numbers with named constants for clarity.
Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Assign complex boolean conditions to named variables.
Use consistent return types for similar functions and hooks.
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.
Define constants near related logic or ensure names link them clearly.
Files:
frontend/src/components/common/Header/Header.styles.tsfrontend/src/components/common/Header/Header.tsx
frontend/**/*.tsx
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.tsx: Abstract complex logic/interactions into dedicated components or higher-order components (HOCs).
Separate significantly different conditional UI/logic into distinct components.
Colocate simple, localized logic or use inline definitions to reduce context switching.
Choose field-level or form-level cohesion based on form requirements.
Break down broad state management into smaller, focused hooks or contexts.
Use component composition instead of props drilling.
Files:
frontend/src/components/common/Header/Header.tsx
🔇 Additional comments (5)
frontend/src/components/common/Header/Header.styles.ts (2)
211-222: LGTM!드롭다운 메뉴의 위치 지정 및 스타일링이 적절합니다.
z-index,transform을 통한 중앙 정렬, 그림자 효과가 올바르게 구현되어 있습니다.
224-236: LGTM!드롭다운 아이템의 호버 효과와 레이아웃이 적절하게 구현되어 있습니다.
frontend/src/components/common/Header/Header.tsx (3)
1-1: LGTM!
useState추가 및 드롭다운 상태 관리가 적절합니다.Also applies to: 40-40
159-176: LGTM!데스크톱과 모바일용 네비게이션 데이터를 명확하게 분리한 것이 좋습니다. 각 플랫폼의 UI 요구사항을 잘 반영하고 있습니다.
186-190: LGTM!컴포넌트에 적절한 네비게이션 데이터를 전달하고 있습니다.
Also applies to: 192-200
| <Styled.DropdownContainer | ||
| onMouseEnter={() => setDropdownOpen(true)} | ||
| onMouseLeave={() => setDropdownOpen(false)} | ||
| > | ||
| {/* <Styled.IntroduceButtonStyles as='div'> | ||
| 공지사항 | ||
| </Styled.IntroduceButtonStyles> */} | ||
| <span>공지사항</span> | ||
|
|
||
| {isDropdownOpen && ( | ||
| <Styled.DropdownMenu> | ||
| <Styled.DropdownItem | ||
| onClick={() => | ||
| window.open( | ||
| 'https://honorable-cough-8f9.notion.site/1e8aad232096804f9ea9ee4f5cf0cd10', | ||
| '_blank', | ||
| ) | ||
| } | ||
| > | ||
| 패치 노트 | ||
| </Styled.DropdownItem> | ||
| {/* 다른 메뉴 아이템이 필요하면 여기에 추가할 수 있습니다. */} | ||
| </Styled.DropdownMenu> | ||
| )} | ||
| </Styled.DropdownContainer> | ||
| )} |
There was a problem hiding this comment.
키보드 접근성 지원 추가 필요
드롭다운이 마우스 호버로만 동작하여 키보드 사용자가 접근할 수 없습니다. onKeyDown 이벤트를 추가하여 Enter/Space 키로 드롭다운을 열고, Escape 키로 닫을 수 있도록 해야 합니다.
다음과 같이 키보드 이벤트 핸들러를 추가하세요:
<Styled.DropdownContainer
+ tabIndex={0}
onMouseEnter={() => setDropdownOpen(true)}
onMouseLeave={() => setDropdownOpen(false)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ setDropdownOpen(!isDropdownOpen);
+ } else if (e.key === 'Escape') {
+ setDropdownOpen(false);
+ }
+ }}
>🤖 Prompt for AI Agents
frontend/src/components/common/Header/Header.tsx around lines 64 to 89: the
dropdown only responds to mouse hover and lacks keyboard accessibility; add
keyboard handlers and accessibility attributes so Enter or Space opens the
dropdown, Escape closes it, and focus can reach the trigger. Specifically, add
an onKeyDown handler on the DropdownContainer that calls setDropdownOpen(true)
for Enter/Space, setDropdownOpen(false) for Escape, ensure the trigger element
is focusable (add tabIndex=0 if needed), and include appropriate ARIA attributes
(e.g., role="button" and aria-expanded={isDropdownOpen}) so screen readers and
keyboard users can operate the menu.
| onClick={() => | ||
| window.open( | ||
| 'https://honorable-cough-8f9.notion.site/1e8aad232096804f9ea9ee4f5cf0cd10', | ||
| '_blank', | ||
| ) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
하드코딩된 URL을 상수로 추출
Notion URL이 여러 곳(76-81번 라인, 170-174번 라인)에 중복되어 있습니다. 코딩 가이드라인에 따라 매직 넘버/문자열을 명명된 상수로 교체해야 합니다.
파일 상단에 상수를 정의하세요:
+const PATCH_NOTE_URL = 'https://honorable-cough-8f9.notion.site/1e8aad232096804f9ea9ee4f5cf0cd10';
+
interface NavLinkData {
label: string;
handler: () => void;
}그리고 해당 URL을 사용하는 모든 곳을 업데이트하세요:
<Styled.DropdownItem
onClick={() =>
window.open(
- 'https://honorable-cough-8f9.notion.site/1e8aad232096804f9ea9ee4f5cf0cd10',
+ PATCH_NOTE_URL,
'_blank',
)
} {
label: '패치 노트',
handler: () =>
window.open(
- 'https://honorable-cough-8f9.notion.site/1e8aad232096804f9ea9ee4f5cf0cd10',
+ PATCH_NOTE_URL,
'_blank',
),
},Also applies to: 170-174
🤖 Prompt for AI Agents
In frontend/src/components/common/Header/Header.tsx around lines 76-81 and
170-174, the Notion URL is hardcoded in multiple places; extract the URL into a
named constant at the top of the file (e.g., NOTION_GUIDE_URL) and replace all
hardcoded occurrences with that constant, updating both onClick handlers so they
call window.open(NOTION_GUIDE_URL, '_blank'); ensure the constant is properly
exported/imported if needed elsewhere and run lint/format to validate.
suhyun113
left a comment
suhyun113
left a comment
There was a problem hiding this comment.
화면 크기가 줄어들때, 헤더의 버튼이 검색창과 겹쳐지는 문제가 있네요..
이부분 준서님께서 반응형으로 작업해두신 것 같은데 참고하시면 될듯합니당
수고하셨습니다~
lepitaaar
left a comment
lepitaaar
left a comment
There was a problem hiding this comment.
헤더에 패치노트 추가 수고하셨습니당
모바일 햄버거부분도 임시로 고치셨군요
| background-color: white; | ||
| box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1); | ||
| border-radius: 8px; | ||
| z-index: 3; // 다른 요소들 위에 보이도록 z-index를 높게 설정합니다. |
There was a problem hiding this comment.
z-index 3 값을 사용한 기준이있을까요?
3 participants
#️⃣연관된 이슈
#770
📝작업 내용
패치 노트 링크를 헤더에 추가하였습니다.
-> 데스크탑 헤더 데이터와 모바일 헤더 데이터를 분리했습니다.
데스크탑 버전
모바일 버전
Summary by CodeRabbit
신규 기능
스타일