Skip to content

feat(site): 모바일 헤더를 햄버거 메뉴로 - #49

Merged
kojoo112 merged 1 commit into
mainfrom
feat/mobile-nav
Sep 27, 2026
Merged

kojoo112 merged 1 commit into
mainfrom
feat/mobile-nav

Conversation

@kojoo112

Copy link
Copy Markdown
Member

무엇을

768px(md) 미만에서 헤더의 인라인 메뉴를 햄버거 버튼 + 드롭다운 패널로 교체했습니다.

왜

모바일에서 메뉴 링크 4개가 공간이 없어 글자가 한 자씩 세로로 꺾이며 로고와 겹쳤습니다 (기존 문제).

어떻게

  • md: 브레이크포인트 기준: 데스크톱 인라인 메뉴는 hidden md:flex, 햄버거는 md:hidden
  • 햄버거 3선 ↔ X 아이콘 전환, aria-expanded/aria-label 부여
  • 패널이 열리면 헤더도 스크롤 상태와 같은 면(blur 배경)을 가져 한 덩어리로 보임
  • 링크 클릭·페이지 이동·Esc 에서 패널 닫힘
  • 색상은 사이트 CSS 변수(--foreground, --hero-foreground 등)만 사용

확인

  • 모바일(375px): 햄버거 열기/닫기, 링크 이동 시 패널 닫힘 확인
  • 데스크톱: 기존 인라인 메뉴 그대로
  • pnpm lint / pnpm typecheck 통과

🤖 Generated with Claude Code

좁은 화면에서 메뉴 4개가 로고와 겹치며 글자가 세로로 꺾였다.
768px 미만에서는 햄버거 버튼 → 아래로 열리는 패널로 바꾼다.
패널이 열리면 헤더도 면을 가져 한 덩어리로 보이고, 링크 이동·
Esc 로 닫힌다. 데스크톱 인라인 메뉴는 그대로.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@vercel

vercel Bot commented Sep 27, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
lawkit Ready Ready Preview Sep 27, 2026 12:46pm UTC

@kojoo112
kojoo112 merged commit d6c4650 into main Sep 27, 2026
3 checks passed
@kojoo112
kojoo112 deleted the feat/mobile-nav branch September 27, 2026 12:49

This branch was successfully deployed

1 active deployment
Preview — 63b86b7f Deployed Sep 27, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant