feat(STUDY-306): 스터디 페이지 상단에 nav 바 추가

[KwonDeaGeun]

Summary by CodeRabbit

• 새로운 기능

  • 모바일용 햄버거 메뉴와 슬라이딩 모바일 패널 추가로 모바일 내비게이션 개선
  • 데스크톱(중간 이상)에서는 우측 내비게이션 표시로 반응형 레이아웃 강화

• 접근성

  • 메뉴 열기/닫기 동작에 대한 ARIA 레이블 등 접근성 개선 적용
  • 오버레이 클릭으로 메뉴 닫기 등 사용자 상호작용 향상

• API 변경

  • 헤더 구성 관련 공개 API가 변경되어 통합된 프로퍼티 구조로 업데이트 필요

[coderabbitai]

Warning

Rate limit exceeded

@KwonDeaGeun has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 1 minutes and 47 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

Walkthrough

Header 컴포넌트에 모바일 메뉴 토글을 위한 로컬 상태(menuOpen)가 추가되고, 데스크톱(md+)용 우측 네비게이션과 모바일용 햄버거 버튼 및 슬라이드 메뉴/오버레이가 도입되었습니다. 또한 public API에서 right prop이 제거되어 HeaderProps와 컴포넌트 시그니처가 변경되었습니다.

Changes

Cohort / File(s)	Summary
Header 반응형 UI 및 API 변경 src/components/ui/Header.tsx	useState로 menuOpen 상태 추가. 데스크톱(md+)에 우측 네비게이션 유지, 모바일에 햄버거 버튼과 슬라이드 메뉴 패널(닫기 버튼, HOME, MYPAGE) 및 오버레이 추가. 접근성용 aria-label 포함. Public API 변경: HeaderProps에서 right?: React.ReactNode 제거, Header 컴포넌트 시그니처에서 right prop 삭제. 변경량: +118/-26.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 변경사항의 주요 내용과 일치합니다. Header 컴포넌트에 반응형 네비게이션 바(모바일 메뉴 및 데스크톱 네비게이션)가 추가되었으며, 이는 스터디 페이지 상단의 nav 바 추가라는 제목과 명확하게 대응됩니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/components/ui/Header.tsx`:
- Around line 40-54: The mobile menu panel is missing the right prop, so add the
same {right} JSX into the mobile/menu panel render (the block rendered for small
screens, e.g., the div opposite the desktop "hidden items-center gap-3 md:flex"
nav) so mobile users see the same content; insert {right} in the mobile panel's
JSX (inside the md:hidden / mobile menu container where other nav links are
rendered), ensuring it is wrapped/styled consistently with the desktop placement
(use the same spacing/relative classes or a container element) so behavior and
layout match.

🧹 Nitpick comments (4)

src/components/ui/Header.tsx (4)

41-52: 네비게이션 링크가 데스크톱/모바일에서 중복 정의되어 있습니다.

HOME, MYPAGE 링크의 URL과 텍스트가 두 곳에 하드코딩되어 있어, 링크 추가/변경 시 양쪽 모두 수정해야 합니다. 링크 데이터를 배열로 추출하면 유지보수가 쉬워집니다.

♻️ 링크 데이터 추출 예시

+const NAV_LINKS = [
+    { href: "https://homepage.dkuaegis.org", label: "HOME" },
+    { href: "https://mypage.dkuaegis.org", label: "MYPAGE" },
+] as const;
+
 const Header: React.FC<HeaderProps> = ({ onBack, right }) => {

그 후 데스크톱과 모바일에서 NAV_LINKS.map()으로 렌더링하면 됩니다.

Also applies to: 102-115

---

89-98: 이미 lucide-react를 import하고 있으므로 X 아이콘을 사용하세요.

Line 1에서 lucide-react의 ArrowLeft를 import하고 있는데, 닫기 버튼에 직접 SVG를 작성하는 대신 X 아이콘을 사용하면 일관성을 유지할 수 있습니다.

♻️ lucide-react X 아이콘 사용

-import { ArrowLeft } from "lucide-react";
+import { ArrowLeft, X } from "lucide-react";

-                    <svg
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                        className="h-6 w-6 text-gray-900"
-                        aria-hidden="true"
-                    >
-                        <path d="M18 6L6 18M6 6l12 12" />
-                    </svg>
+                    <X className="h-6 w-6 text-gray-900" aria-hidden="true" />

---

119-126: 오버레이 backdrop에 트랜지션이 없어 패널 애니메이션과 불일치합니다.

모바일 메뉴 패널(Lines 69-74)은 transition-all duration-300으로 슬라이드 애니메이션이 적용되어 있지만, 오버레이는 menuOpen 조건부 렌더링으로 즉시 나타나고 사라집니다. 패널과 동일한 방식으로 visible/invisible + opacity 트랜지션을 적용하면 더 자연스럽습니다.

♻️ 오버레이에 트랜지션 적용

-            {menuOpen && (
-                <button
-                    type="button"
-                    className="fixed inset-0 z-[99] bg-black/60 md:hidden"
-                    onClick={() => setMenuOpen(false)}
-                    aria-label="메뉴 닫기"
-                />
-            )}
+            <button
+                type="button"
+                className={`fixed inset-0 z-[99] bg-black/60 transition-opacity duration-300 md:hidden ${
+                    menuOpen
+                        ? "visible opacity-100"
+                        : "invisible opacity-0"
+                }`}
+                onClick={() => setMenuOpen(false)}
+                aria-label="메뉴 닫기"
+            />

---

30-37: fontFamily 인라인 스타일이 두 곳에서 반복됩니다.

동일한 fontFamily 스타일이 Line 32-33과 Line 79에 중복되어 있습니다. Tailwind의 font-[...] 유틸리티를 사용하거나, tailwind.config에서 커스텀 폰트 패밀리를 정의하면 인라인 스타일 중복을 제거할 수 있습니다.

Also applies to: 77-82