[sunwoo162]

개요 💡

#43 리뷰에서 나온 모바일 navbar 넘침 문제를 해결합니다. 관리자·기숙사자치회 계정은 사용자 페이지 navbar에 관리자 페이지 버튼이 추가로 보이는데, 이 버튼의 텍스트가 모바일에서도 항상 보여서 360px 전후 화면에서 navbar가 한 줄을 넘쳤습니다.

작업내용 ⌨️

• 관리자 페이지 버튼 (UserNavbar)
  • LayoutDashboard 아이콘을 추가했습니다. 1024px 미만에서는 아이콘만 보이고, 1024px 이상에서 텍스트가 같이 보입니다.
  • 버튼 크기를 로그아웃 버튼과 맞췄습니다(640px 미만 32×32, 640~1024px 36×36).
  • 텍스트는 sr-only로 남겨 화면 리더가 버튼 이름을 읽습니다. 마우스를 올리면 title 툴팁이 뜹니다.
  • 아이콘 색을 메뉴 아이콘과 같은 회색으로 맞췄습니다.
• 알림 배지: 640px 미만에서는 종 아이콘 오른쪽 위에 겹쳐 표시해 가로 공간을 차지하지 않습니다. 640px 이상은 기존처럼 옆에 표시합니다.
• 로고: 360px 미만에서만 조금 작게(h-5) 표시합니다.
• 메뉴 링크 접근성: 모바일에서는 메뉴 라벨이 숨겨져 링크 이름이 비어 있었습니다. 각 링크에 aria-label을 붙였고, 알림 링크는 알림 99개 이상처럼 개수까지 읽힙니다.
• 기기 예약 안내 문구: break-keep을 붙여 "…선택하세" / "요"처럼 한 글자만 다음 줄로 떨어지지 않게 했습니다.
• tests/user-navbar-responsive.test.mjs를 추가해 위 반응형 클래스와 aria-label을 확인합니다.

검증

• biome lint ., tsc --noEmit, node --test tests/*.test.mjs(59개), next build 모두 통과했습니다.
• 헤드리스 Chrome(모바일 에뮬레이션)에 API를 가짜 데이터로 채워 실제 화면을 측정했습니다.
  • 관리자·기숙사자치회·일반 사용자 계정, 알림 0개·9개·99+개 조합을 봤습니다.
  • 폭은 320 / 344 / 360 / 375 / 390 / 412 / 430 / 639 / 640 / 767 / 768 / 1023 / 1024 / 1280px를 확인했습니다.
  • /user, /my-page, /notifications 세 페이지에서 가로 스크롤, 요소 겹침, 세로 정렬 어긋남, 콘솔 에러가 모두 0건입니다.
  • 가장 빠듯한 경우(320px, 관리자, 알림 99+)도 13.6px 여유가 있습니다. 수정 전에는 약 37px가 모자랐습니다.
• 실제 기기에서는 확인하지 않았습니다. Preview에서 관리자 계정으로 한 번 확인 부탁드립니다.

[vercel]

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

Project	Deployment	Actions	Updated
washer	Ready	Preview	Nov 8, 2026 11:59pm UTC

[inryeok-bot]

변경사항과 관련 코드 경로를 확인했으며, 현재 수정이 필요한 문제는 발견하지 못했습니다.

[jjhhss100906]

확인했습니다! #43에서 나온 navbar 넘침 문제를 아이콘 축소 + sr-only 라벨로 정리해주셔서 모바일 레이아웃과 화면 리더 이름이 둘 다 챙겨진 것 같습니다 👍 폭별 측정 결과까지 정리해주셔서 리뷰하기 편했습니다.

사소한 부분 두 가지만 남깁니다. (필수는 아닙니다)

1. 1024px 이상에서 관리자 페이지 버튼은 lg:h-8(32px)인데, 옆의 로그아웃 버튼은 sm:h-9(36px)이 그대로 유지돼서 두 버튼 높이가 4px 차이 날 것 같습니다. 640~1024px 구간처럼 lg에서도 높이를 맞추는 건 어떨까요? (예: lg:h-9)
2. tests/user-navbar-responsive.test.mjs의 /<Link\s+key=\{href\}\s+href=\{href\}\s+aria-label=\{/ 정규식은 JSX 속성 순서가 바뀌면 실패할 것 같습니다. [web] 로그인 화면 반응형 대응 #41 때 클래스 순서 이슈와 비슷하게, aria-label={ 존재 여부만 확인하거나 nav 링크 블록 안에서 순서와 무관하게 찾는 방식이면 더 견고할 것 같습니다.

[sunwoo162]

리뷰 감사합니다! 두 가지 다 반영했습니다.

1. 501f141 에서 관리자 페이지 버튼의 lg:h-8을 제거했습니다. 이제 lg 이상에서도 sm:size-9 높이(36px)가 유지돼서 로그아웃 버튼과 높이가 같습니다. 1024px / 1280px에서 두 버튼 모두 36px로 나오는 것 확인했습니다.
2. ff0c196 에서 navigationItems.map( 블록 안에서 aria-label={ 존재 여부만 확인하도록 바꿨습니다. 로고 링크랑 로그아웃 버튼은 문자열 aria-label="..."이라 겹치지 않고, 속성 순서가 바뀌어도 깨지지 않습니다.

[jjhhss100906]

반영 확인했습니다! 감사합니다 👍