🤖
1539 in / 1118 out / 2657 total tokens
MidWayDer v0.8.0을 릴리스했다. 사용자 경험 전반을 손봤고, 특히 에러 처리와 로딩 상태에서 체감 품질이 크게 올랐다.
검색 결과 카드에서 button 중첩으로 인한 hydration 에러를 해결했다. div에 role='button'과 tabIndex를 줘서 접근성은 그대로 유지하면서도 DOM 구조를 깔끔하게 정리했다. hover 시 그림자 효과도 추가해서 인터랙션 피드백을 강화했다.
로딩 상태는 Skeleton UI 컴포넌트를 새로 만들어 적용했다. ResultCardSkeleton, ResultListSkeleton 두 가지를 준비했고, 기존 프로그레스 바와 함께 쓰면 사용자가 더 확실하게 로딩 중임을 인지할 수 있다.
에러 메시지도 대폭 개선했다. NETWORK_ERROR, NO_RESULTS, ROUTE_NOT_FOUND 등 에러 타입별로 아이콘과 색상을 다르게 지정했고, 복구 가능한 액션도 함께 제안한다. 사용자가 '뭐가 문제인지' 그리고 '이제 뭘 해야 하는지'를 바로 알 수 있게 된 셈이다.
엣지 케이스 처리도 빠뜨리지 않았다. 출발지와 도착지가 같거나, 너무 가까워서(50m 이내) 경로가 무의미하거나, 반대로 너무 멀거나, 좌표가 유효하지 않은 경우를 모두 검증하는 유틸리티를 추가했다. 하버사인 공식으로 실제 거리까지 계산한다.
export const ERROR_CONFIG: Record<string, {
icon: typeof AlertCircle;
title: string;
description: string;
action?: string;
color: string;
}> = {
'NETWORK_ERROR': {
icon: Wifi,
title: '인터넷 연결을 확인해주세요',
description: '네트워크 연결이 불안정합니다.',
action: '다시 시도하기',
color: 'orange',
},
'SAME_LOCATION': {
icon: MapPin,
title: '출발지와 도착지가 같습니다',
description: '다른 위치를 선택해주세요.',
color: 'blue',
},
};총 6개 파일을 수정했고 +384 -15 라인. 테스트 8개를 새로 추가해서 총 643개 테스트가 모두 통과했다. 이제 사용자가 잘못된 입력을 해도 당황하지 않고 무슨 일이 일어났는지 명확히 알 수 있다.