BottomSheet 모션 토큰화 + 키보드 접근성 추가

🤖 1465 in / 2000 out / 3465 total tokens

BottomSheet 컴포넌트에 모션 값들을 토큰으로 교체하고, 키보드로 snap 포인트를 조작할 수 있게 만들었다.

기존에는 cubic-bezier(0.32, 0.72, 0, 1) 같은 리터럴 값과 0.22s duration이 코드에 하드코딩되어 있었다. 이걸 var(--ease-emphasized), var(--duration-slow) 같은 CSS 커스텀 프로퍼티 토큰으로 치환했다. 디자인 시스템에서 전역적으로 easing과 duration을 관리할 수 있고, 나중에 모션 스펙을 바꾸면 토큰 값만 수정하면 그만이다.

tsx const SNAP_ORDER: readonly SnapPoint[] = ['collapsed', 'half', 'full'] as const;

// 핸들에 tabIndex=0 부여, onKeyDown에서 // ↑/→ : 한 단계 올림 // ↓/← : 한 단계 내림 // Home : collapsed // End : full

접근성 측면에서는 핸들(handle) 요소에 tabIndex={0}을 줘서 키보드 포커스가 닿게 만들었다. SNAP_ORDER 배열을 정의해 방향키로 한 단계씩 스냅을 오르내리도록 했다. Home/End 키로 양 끝으로 바로 이동. aria-valuemin, aria-valuemax, aria-label 속성도 추가해서 스크린 리더가 현재 상태를 읽어줄 수 있게 했다. focus-visible ring도 넣어서 마우스 클릭과 키보드 탐색을 시각적으로 구분했다.

게임 개발에서 UI 위젯의 상태를 enum으로 관리하던 습관이 여기서도 자연스럽게 발휘됐다. SNAP_ORDER 배열은 UE5에서 TArray<ESnapState> 같은 느낌이고, 키보드 입력 처리도 OnKeyDown 델리게이트 받아서 switch문 돌리는 것과 동일한 패턴이다.

하드코딩된 매직넘버를 토큰으로 빼고, 키보드만으로도 상태 전환이 가능하게 만들었다.