2024.04 - 재직중
예약 검색 날짜 경계 결함 추적
선택이 막힌다는 신고를 따라가다 같은 코드에서 정반대 방향의 결함을 찾은 사례. 품절인 밤이 낀 예약이 통과하고 있었다.
- 역할
- 예약 검색·날짜 선택 영역 담당
- Next.js
- React
- TypeScript
- date-fns
- TanStack Query
문제
"검색 캘린더에서 체크아웃 날짜가 선택되지 않는다"로 접수됐다. 막히면 안 되는데 막히는 문제다.
원인을 따라가는 과정에서 같은 코드가 막혀야 하는데 안 막히는 경우도 있다는 걸 알게 됐다. 그쪽이 훨씬 위험했다.
해결
세 층이 겹쳐 있었다.
| # | 원인 | 결과 |
|---|---|---|
| 1 | 같은 날짜를 다시 클릭하면 체크아웃 하루 전 보정이 구간을 역전시킴. 날짜 라이브러리가 역전된 구간을 조용히 정렬해버려 오탐 | 정상 날짜가 선택 불가로 판정 |
| 2 | 클릭이 앱 로직에서 거부돼도 캘린더 라이브러리 내부 focus는 그대로 진행 | 다음 클릭이 엉뚱한 날짜와 조합됨 |
| 3 | 공용 날짜 유틸이 "yyyy-MM-dd" 문자열을 UTC 자정으로 해석. 캘린더 쪽 Date는 로컬 자정 기준이라 두 기준이 9시간 어긋나 있었음 | 품절인 밤이 낀 예약이 그대로 통과 |
3번은 캘린더 버그가 아니라 공용 유틸의 기존 결함이었다. 문자열 입력만 로컬 자정으로 맞추도록 앞단에 분기를 넣어 고쳤고, 이 유틸을 쓰는 호출부를 전부 훑어 회귀가 없는지 확인했다.
2번은 상태를 앱과 라이브러리 두 곳에서 관리하던 구조가 원인이라, 거부 시 캘린더를 리마운트해 라이브러리 focus만 초기화했다. 선택 범위 상태는 건드리지 않아 보이는 달이 이전 선택으로 되돌아가지 않게 했다.
효과
- 신고된 증상과 반대 방향의 결함까지 함께 제거했다
- 시간대 파싱 기준이 코드베이스 안에서 두 가지로 갈려 있던 것을 하나로 맞췄다
- 앞서 같은 영역에서 코드 리뷰를 계기로 파생 결함 4건을 하루 안에 순차 해결한 적이 있다 - 숙박 일수 미갱신, 딥링크 진입 후 재조회 누락, 체크아웃 당일까지 판매불가 검사에 포함, 쿼리 키 고정으로 인한 캐시 혼선