fix: 분석 리포트 페이지 좁은 화면 레이아웃 복구

[gylee44]

배경

분석 리포트 페이지의 사이드바가 폭과 무관하게 w-60 고정이었다. 393px 폰에서 240px을 먹고 본문에 110px만 남아, 요약 수치도 브리핑 문장도 한 줄에 한 자씩 끊겼다. 리포트를 읽는 것 자체가 불가능한 상태였다.

앞선 PR #19에서 영상 페이지·인증 모달은 정리했지만 분석 페이지는 남아 있었다.

변경

사이드바 → 서랍

• lg 미만에서 w-72 오버레이 서랍으로 전환. 배경 딤 / ESC / 닫기 버튼
• 닫힌 서랍은 invisible로 탭 순서에서 제외 — 1161c61f에서 영상 페이지에 적용한 것과 같은 문법
• 데스크톱 '접기' 상태는 서랍에 적용하지 않고 항상 펼친 모양으로 그림
• 본문 상단에 햄버거 + 영상 제목 스티키 바 추가. 제목이 사이드바에만 있어 서랍을 닫으면 무엇을 보고 있는지 알 수 없었다
• 섹션 이동을 누르면 서랍을 닫는다 — 서랍이 화면을 덮고 있으면 스크롤 결과가 안 보인다
• 100vh → 100dvh

카드 내부 재배치

• 히트맵: 코트 폭 min(152px,32%) → 폰 40%, 태블릿 상한 200px. 32%면 폰에서 코트가 100px로 쪼그라들어 타점이 서로 겹쳐 읽히지 않았다
• 스트로크 도넛: 폰에서 180px → 128px. 원래 폭이면 옆 범례가 한 줄에 "12회 40%"를 못 담아 숫자가 잘렸다. 확대 모달은 도넛을 범례 위로 올려 드라이브 → 드... 잘림 해소
• AI 브리핑 헤더: 제목 + 배지 + 버튼 둘이 폰 폭을 넘어 flex-wrap
• 미확정 말풍선: 왼쪽 정렬로. 가운데 정렬은 칩이 카드 왼쪽 끝에 붙어 있어 말풍선 왼쪽 25px쯤이 카드 밖으로 나가 잘렸다 — 폰뿐 아니라 태블릿에서도 마찬가지였다
• 랠리 결과 행 줄바꿈, 점수 수정 입력 크기, 카드·모달 패딩, 로딩 스켈레톤 사이드바

접근성

• 스티키 바 제목은 h2가 아니라 p. h2를 쓰면 바로 아래 본문 h1보다 먼저 나와 제목 순서가 뒤집힌다
• 서랍 열기/닫기 버튼 44px 터치 목표, aria-label, aria-expanded
• 서랍에 overscroll-contain

검증

• npm run build 통과
• 데스크톱 무변경 확인: 1440×900 변경 전/후 스크린샷이 바이트 단위로 동일 (차이 0픽셀). 되돌리는 기준을 전부 sm:/lg:로 걸었다
• 360 / 393 / 430 / 744 / 1024 / 1440px에서 scrollWidth == clientWidth, 넘치는 요소 0
• 서랍·확대 모달 4종(히트맵·스트로크·능력치·브리핑) 폰 폭에서 개별 확인
• Web Interface Guidelines 감사 실행 — 이 diff 범위의 차단 항목 없음
• 로컬 백엔드가 없어 목업 응답으로 확인했다. 레이아웃 검증에는 충분하지만 실제 데이터 분포(타점 수가 아주 많거나 0인 경우)는 못 봤다
• 실기기 확인은 안 됨 — 머지 후 폰에서 한 번 봐야 한다

후속 과제 (이 PR 범위 밖)

기존 코드에 있던 것들로, 손대면 데스크톱 화면이 바뀌어 이번 PR에서 제외했다.

• h1이 두 개 (사이드바 제목 + 본문 제목)
• animate-pulse / animate-bounce가 prefers-reduced-motion을 무시. Header.tsx는 가드가 있어 규칙이 서로 어긋난다
• "확대" · "다시 생성" 버튼 높이 ~30px (44px 미만)
• 브리핑 로딩 상태에 aria-live 없음

🤖 Generated with Claude Code