모바일에서 상단 Header 버튼 확장 시 nav 영역 밖으로 삐져나옴

[GulSam00]

상단 Header의 확장형 버튼(다크모드/출석체크/문의)을 클릭하면 아이콘 전용(icon) 사이즈에서 라벨이 붙는 default 사이즈로 커지는데, 이때 header 컨테이너와 버튼 그룹에 overflow 방지 스타일이 없어 모바일 좁은 화면에서 nav 영역이 화면 밖으로 삐져나오는 현상이 발생한다.

원인 분석

• apps/web/src/Header.tsx:101 — <header>에 overflow-x-hidden 등 넘침 방지 스타일 없음
• apps/web/src/Header.tsx:108 — 우측 버튼 그룹(flex items-center gap-2)에 min-w-0/shrink 처리 없어 확장된 버튼 폭만큼 그대로 늘어남
• 좌측 로고(text-5xl, Header.tsx:103)가 이미 폭을 상당히 차지한 상태에서 버튼이 확장되면 합산 폭이 좁은 모바일 뷰포트를 초과함

작업 체크리스트

• header 컨테이너 및 버튼 그룹에 overflow 방지 스타일(min-w-0, overflow-x-hidden 등) 적용
• 버튼 확장 시 다른 버튼/로고 영역이 자연스럽게 축소되도록 레이아웃 조정 (flex-shrink, truncate 등)
• 로고(SINGCODE) 폰트 크기 모바일 반응형 검토
• 실제 모바일 뷰포트(360px~ 375px)에서 각 버튼 확장 시나리오 QA