모바일 메뉴 UX 개선: 햄버거 메뉴 Drawer 추가 및 접근성 강화

[Copilot]

모바일 환경에서 기존 scrollable tabs를 Drawer 기반 햄버거 메뉴로 교체하여 사용성을 개선하고 WCAG 2.1 AA 접근성 기준을 완전히 준수합니다.

주요 변경사항

모바일 네비게이션

• Drawer 메뉴: 280px 좌측 슬라이드 Drawer로 교체 (기존 scrollable tabs 제거)
• 햄버거 버튼: 좌측 상단에 배치, 동적 aria-label ("메뉴 열기" ↔ "메뉴 닫기")
• 아이콘: 각 메뉴 항목에 Material 아이콘 추가 (Dashboard, ListAlt, ShowChart, Feed, Chat, GridOn)
• 선택 상태: primary.main 배경 + primary.contrastText 텍스트 (WCAG AA 대비 준수)
• 터치 최적화: ListItemButton 최소 높이 56px

데스크톱 네비게이션

• 탭에 아이콘 추가 (iconPosition="start")
• 햄버거 메뉴 숨김

접근성 (WCAG 2.1 AA)

// 동적 aria-label
<IconButton
  aria-label={drawerOpen ? "메뉴 닫기" : "메뉴 열기"}
  aria-expanded={drawerOpen}
  aria-controls="mobile-menu-list"
/>

// Tab-TabPanel 연결
<Tab id={`tab-${index}`} aria-controls={`tabpanel-${index}`} />
<TabPanel id={`tabpanel-${index}`} aria-labelledby={`tab-${index}`} />

코드 품질

• 중복 제거: trackTabChange 공통 함수로 탭/Drawer 네비게이션 추적 통합
• 안정적인 key: 메뉴 항목에 고유 ID 추가 ("dashboard", "etf-list" 등), React key로 사용
• 스타일 통합: ListItemButton의 &.Mui-selected 내에서 아이콘 색상 관리

스크린샷

모바일 - 메뉴 닫힘

모바일 - 메뉴 열림

모바일 - 선택 상태

영향 범위

• 변경: frontend/src/App.tsx (+174/-30)
• 호환성: 기존 탭 기반 네비게이션 로직 유지, 모바일/데스크톱 분기 처리
• 추적: menu_item_clicked 이벤트 추가 (interaction_type: "drawer"), 기존 tab_changed 이벤트 유지

Original prompt

모바일 페이지에서 메뉴 사용성을 개선해줘

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.