MidWayDer v0.16.0: 자유 경유지 검색과 단일 선택 UX

🤖 2170 in / 811 out / 2981 total tokens

자유 경유지 검색 기능이 완성됐다. MVP 단계가 끝났다.

검색창이 바뀌었다. "어디를 들를까?"라는 친근한 placeholder와 함께 홍대입구역, 다이소, 스타벅스 같은 예시를 보여준다. 이제 카테고리뿐 아니라 자유롭게 검색어를 입력할 수 있다. 백엔드는 이미 v0.15.0에서 준비돼 있었고, 이번엔 프론트엔드 UX를 맞췄다.

단일 선택 UX가 핵심이다. 첫 번째 경유지를 고르면 나머지는 비활성화된다. ResultCard와 CompactCard에 disabled prop을 추가해서 회색으로 흐려지게 했다. 안내 메시지도 넣었다. 하나만 선택하면 더 효율적인 경로를 얻을 수 있다는 점, 여러 개 고르면 복잡해진다는 점을 사용자에게 알린다.

interface CompactCardProps {
  // ...
  disabled?: boolean;
}
 
export const CompactCard = React.memo(function CompactCard({
  result, index, isSelected, swipeHandlers, swipeVisual,
  disabled = false,
}: CompactCardProps) {
  // disabled 시 회색 처리 + 클릭 차단
});

API 라우트도 정리했다. category를 searchQuery로 통합해서 카테고리와 자유 검색어를 하나의 흐름으로 처리한다. 659개 테스트가 통과했고, TODO.md에 적어둔 Phase 1, 2, 3이 전부 끝났다. 11개 파일, +213 -101줄. MVP 완성.

React UX MVP 검색기능 MidWayDer