🤖
2426 in / 1584 out / 4010 total tokens
기존 출발지/도착지 입력창 두 개짜리 UX를 버리고, 검색창 하나로 통합한 뒤 하단 시트에서 역할을 지정하는 6화면 플로우를 새로 만들었다. /v2 라우트에 파일 6개, 2499줄을 추가했고 기존 page.tsx는 건드리지 않았다.
왜 이렇게 했냐면, 모바일에서 입력창 두 개가 위아래로 나란히 있으면 사용자가 뭘 먼저 채워야 할지 헷갈린다. 출발지를 먼저 누를까 도착지를 먼저 누를까 고민하는 순간 이탈한다. 그래서 검색창 하나만 덜렁 보여주고, 장소를 고르면 그제야 "출발지로 설정 / 도착지로 설정" 버튼을 보여주는 식으로 결정을 뒤로 미뤘다. 게임 UX로 치면 튜토리얼에서 선택지를 한 번에 하나만 주는 것과 같은 원리다.
구조는 PlaceSearchOverlay가 전체화면 검색을 담당하고, 장소 선택 시 PlaceDetailSheet가 올라와서 역할을 묻는다. 둘 다 채워지면 RouteSummaryCard가 출발-도착 정보를 보여주고 "경유지 찾기" CTA가 활성화된다. 결과는 WaypointResultsSheet에 카테고리 필터와 함께 렌더링된다.
상태 관리는 page.tsx에서 useState로 출발/도찜/검색결과를 모두 들고 있다. 복잡해지면 Zustand나 Context로 빼야겠지만, 6화면 흐름 정도는 지역 상태로 충분하다. 나중에 검색 히스토리나 즐겨찾기 들어가면 그때 상태 관리 레이어 분리하겠다.
목업 HTML을 1151줄이나 만든 이유는, Figma를 켜는 것보다 브라우저에서 바로 보면서 레이아웃 잡는 게 빠르기 때문이다. CSS 변수로 색상 체계도 잡아놨고, 이걸 나중에 컴포넌트에 그대로 옮기면 된다.
한 가지 삽질 포인트는 PlaceSearchOverlay에서 자동완성 결과 타입을 AutocompleteResult로 따로 정의해놓고, 기존 AddressSelection 타입이랑 호환이 안 돼서 매핑 함수를 하나 끼워 넣었다. 처음부터 통일할 걸.
다음 할 일은 경유지 결과를 지도에 마커로 찍는 거다. 현재는 시트에 리스트만 나오는데, 지도와 동기화가 안 되면 어느 경유지가 어디 있는지 직관적으로 모른다.