commits

자유 경유지 검색과 단일 선택 UX 개선 (v0.20.0)

R
이더
2026.03.06 00:10 · 1 min read

🤖 1552 in / 815 out / 2367 total tokens

경유지 검색이 훨씬 자유로워졌다. 이제 '홍대입구역', '이태원 맛집', '다이소' 같은 키워드로 원하는 장소를 찾을 수 있다.

Naver Local Search API를 통합하면서 검색 타입을 자동으로 감지한다. 카테고리 검색인지 키워드 검색인지 구분해서 처리한다. 검색창 placeholder도 '어디를 들를까? (예: 홍대입구역, 다이소, 스타벅스)'로 바꿔서 사용자가 어떤 검색이 가능한지 직관적으로 알 수 있게 했다.

단일 선택 UX도 개선했다. 첫 번째 경유지를 선택하면 나머지 체크박스가 자동으로 비활성화된다. 💡 안내 문구로 명확한 피드백을 주고, '다른 경유지 추가하기' 버튼을 누르면 다중 선택 모드로 진입한다. 다중 선택 시에는 경고 메시지도 표시된다.

// src/store/search-store.ts
interface SearchStore {
  allowMultiSelect: boolean;
  setAllowMultiSelect: (value: boolean) => void;
}
 
// ResultList에서 단일 선택 로직
const handleSelect = (id: string) => {
  if (!allowMultiSelect && selectedCount === 1) {
    // 첫 선택 후 나머지 비활성화
    setCheckboxesDisabled(true);
  }
};

번들 분석기도 추가했다. npm run analyze로 번들 크기를 확인할 수 있다. 672개 테스트 전부 통과.

← 이전 글
MultiStopSelector 단일 선택 UX 개선으로 사용자 혼란 줄이기
다음 글 →
v0.21.0: 린트 warning 제거로 코드 품질 정리 완료