오늘은 밀려 있던 테스트 작업부터 시작했다. coveralls 대시보드를 열어보니 code-block 커버리지가 3.36%로 찍혀 있었다. 컴포넌트 크기에 비해 너무 낮아서, 더 미루기 전에 한번 잡아보기로 했다.
code-block.test.tsx에 총 14개 테스트를 추가했다. children 모드와 HTML(code) 모드를 나눠서 렌더링을 확인하고, hidden sections 접기/펼치기, FullscreenView 진입/종료까지 커버했다. createPortal과 클립보드 API는 모킹해서 처리했다.
icon-button 쪽은 사정이 좀 달랐다. 5개 케이스가 있었는데 당장 고치기보다는 describe.skip으로 스킵 처리하고, 나중에 컴포넌트 구조를 정리하면서 다시 작성하기로 했다. 지금 억지로 맞추면 컴포넌트 변경 때마다 깨질 게 뻔하니까.
모바일 프레젠테이션 모드에서 코드블록의 "전체보기"를 누르면 FullscreenView가 세로 방향으로 표시되는 문제가 있었다. 프레젠테이션은 rotate(90deg)로 화면 전체를 가로로 돌려놓은 상태인데, FullscreenView는 그 정보를 모른 채 body 기준 fixed inset-0으로 붙어버리니 방향이 안 맞는 것이다.
해결은 FullscreenView에 zIndex와 rotate prop을 추가하는 방향으로 갔다. 프레젠테이션 컴포넌트에서 FullscreenView를 열 때
rotate={needsRotation}
과
zIndex={60}
을 넘겨주면, FullscreenView 내부에서 회전 여부와 z-index를 외부 컨텍스트에 맞게 처리한다.
이건 재현 경로가 꽤 길었다. 프레젠테이션 진입 -> 코드 전체보기 열기 -> 코드 닫기 -> 프레젠테이션 종료. 이 순서대로 하면 페이지 스크롤이 완전히 먹통이 된다.
원인을 추적해 보니 useEffect 의존성 배열에 fullscreenCode 상태가 들어가 있었다. 코드 전체보기를 열고 닫을 때마다 effect의 cleanup과 재실행이 반복되면서 overflow 복원 순서가 꼬여버린 것이다.
구체적으로 말하면, cleanup에서 overflow를 원래 값으로 돌리는 로직이 있는데 코드 전체보기가 닫힐 때 cleanup이 한 번, 재실행 시 다시 hidden으로 설정되는 사이클이 돈다. 프레젠테이션이 아직 열려 있는 상태에서 overflow가 잠깐 풀렸다가 다시 잠기는데, 이때 저장해 둔 "원래 값"이 hidden으로 덮어씌워진다. 결국 프레젠테이션 종료 시 hidden을 복원해 버리니 스크롤이 안 되는 것이다.
해결은 간단했다. fullscreenCode를 ref로 바꿔서 최신값을 참조하되, 의존성 배열에서는 제거했다. effect가 불필요하게 재실행되지 않으니 overflow 복원 순서도 정상으로 돌아왔다.
테스트 커버리지 올리기와 버그 잡기를 병행한 하루였다. 특히 두 번째 버그는 useEffect 의존성 배열이 만들어내는 부수효과의 좋은 사례라서 기억해 둘 만하다. 상태값을 의존성에 넣으면 effect 사이클이 예상보다 자주 돌 수 있고, 그 안에서 DOM을 직접 조작하는 코드가 있으면 순서 문제가 생기기 쉽다.