🤖
1848 in / 1205 out / 3053 total tokens
모바일에서 스크롤 안 되고, 다크모드 깨지고, 버튼 가려지던 문제를 싹 묶어서 수정했다.
CSS 구문 오류가 원인이었다. .result-card-hover:active 블록을 안 닫아서 .sr-only 스타일이 깨졌던 것. 브라켓 하나 때문에 30분 헤맸다.
BottomSheet가 touchAction: 'none'을 전체에 먹여서 컨텐츠 스크롤이 막혀있었다. 드래그 핸들에만 적용해서 해결. 제스처 처리할 때 범위 신중하게 잡아야 한다.
// Before: 전체 컨테이너에 적용 → 스크롤 블록
<div style={{ touchAction: 'none' }}>
// After: 핸들에만 적용
<div {...}>
<div style={{ touchAction: 'none' }}>드래그 핸들</div>
{children}
</div>다크모드는 인라인 background: 'white'가 범인. CSS 변수 var(--bg-surface)로 교체했다. 하드코딩된 색상은 항상 함정이다.
모바일 CSS에서 버튼 48px, 폰트 14px을 강제로 먹이던 것도 과잉이었다. opt-in 방식인 .btn-touch 클래스로 전환해서 필요한 곳에만 적용.
z-index는 GPS/Settings 버튼을 z-50으로 올려서 BottomSheet 위에 표시되게 수정. 레이어 관리는 정리할 때마다 다시 엉킨다.
5개 파일, +28/-72. 코드 줄였다는 게 좀 만족스럽다.