feat(blog): 모바일·태블릿용 ToC 대체 UI — 플로팅 버튼 + 바텀시트 (#85)#132
Merged
Conversation
- xl(1280px) 미만에서 우하단 플로팅 버튼 → 바텀시트로 목차 제공 - 기존 Toc 컴포넌트·스크롤스파이 재사용, 배경 격리는 useModalA11y 훅(#106) 재사용 - Toc에 컨테이너 클래스 오버라이드 prop 추가, MobileToc 단위 테스트 7건 추가
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
- useModalA11y가 첫 마킹 시점의 inert 여부를 스냅샷해, React가 inert로 관리하는 닫힌 시트/패널의 속성을 다른 모달이 지우지 않게 수정(회귀 테스트 추가) - 해시 딥링크 스크롤을 Toc(데스크톱·모바일 2곳 마운트)에서 PostDetail 1곳으로 승격해 중복 실행 제거(post-detail 테스트 추가) - Esc는 document 레벨에서 수신(포커스 위치 무관), 시트 열림 시 활성 항목 scrollIntoView 노출, 목차 링크 탭 타깃 세로 패딩 확대
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
배경
포스트 상세의 ToC 컨테이너가
hidden xl:flex라 1280px 미만(모바일·태블릿·1024~1279px 노트북)에서 목차와 현재 위치 추적 수단이 완전히 사라진다. 이슈에서 제안한 대체 UI 중 "우하단 플로팅 버튼 → 바텀시트" 방식을 채택했다. 접이식(<details>)과 달리 본문을 스크롤한 뒤에도 접근 가능하고, 스크롤스파이(현재 위치 표시)까지 그대로 활용할 수 있기 때문이다.구현
mobile-toc.tsx(신규): xl 미만 전용 우하단 플로팅 버튼 + 바텀시트useModalA11y재사용role=dialog/aria-modal, 열림 시 닫기 버튼 포커스, Esc·배경 클릭 닫기, Tab 포커스 트랩, 닫힘 시 트리거 포커스 복원(기존mobile-sidebar와 동일 패턴)toc.tsx: 컨테이너 클래스 오버라이드classNameprop 추가(기본값은 기존 데스크톱 240px 패널 그대로) — 목차 항목 렌더링·activeId·딥링크 로직을 바텀시트에서 그대로 재사용post-detail.tsx: 인라인 스크롤 핸들러를scrollToHeading으로 추출해 데스크톱 ToC와 MobileToc가 공유, 스크롤스파이activeTocId도 두 UI에 동일 전달범위 밖
검증
pnpm run build성공 (turbo, Next.js 프로덕션 빌드)pnpm run lint통과 (--max-warnings 0)apps/blogpnpm test통과: 23 suites / 101 tests (MobileToc 신규 테스트 7건 — 빈 목차 미렌더, 개폐·inert 격리, 항목 클릭 시 콜백+닫힘, Esc·오버레이 닫기, 포커스 이동/복원, activeId 전달)Closes #85