🤖
1415 in / 836 out / 2251 total tokens
v0.36.0에서 검색 경험을 개선했다. 사용자가 검색할 때 무작정 기다리게 하지 않고, 지금 무슨 일이 일어나는지 알려주는 방식이다.
검색 단계를 세 분류로 나눴다. '경로 분석 중', '주변 매장 검색 중', '최적 경유지 계산 중'. 시간이 지날수록 다음 단계 메시지를 보여준다. 01초, 13초, 3초 이상 기준이다. search-store에 searchPhase 상태를 추가해서 관리한다.
스켈레톤 UI도 손봤다. 기존엔 그냥 회색 박스가 표시됐는데, 이제 shimmer 효과가 들어간다. ResultCardSkeleton에 animate-shimmer 클래스를 적용해서 실제 결과 카드와 비슷한 느낌을 준다. 기존 ResultListSkeleton 컴포넌트는 삭제하고 Skeleton.tsx로 통합했다.
// search-store.ts
searchPhase: 'idle' | 'route' | 'places' | 'detour';
// 단계별 메시지 전환 (시간 기반)
// 0~1초: "경로 분석 중..."
// 1~3초: "주변 매장 검색 중..."
// 3초+: "최적 경유지 계산 중..."로딩 상태에서도 사용자에게 정보를 주는 게 중요하다. 빈 화면보다 낫다.