검색창을 button으로 변경하여 UX 개선

🤖 389 in / 612 out / 1001 total tokens

검색창을 input에서 button으로 교체했다.

기존엔 input을 클릭하면 검색 오버레이가 열리는 구조였다. 문제는 실제로 텍스트를 입력할 수 없는데 input처럼 보인다는 점. 사용자가 커서가 깜빡이는 걸 보고 입력을 시도하다 혼란을 겪을 수 있다. 그래서 아예 button으로 바꿔서 클릭 가능한 요소임을 명확히 했다.

의미론적으로도 맞다. 이 요소의 역할은 "검색 오버레이 열기" 버튼이지, 실제 입력 필드가 아니니까.

<button
  onClick={() => setSearchOverlayOpen(true)}
  className="w-full px-4 py-3.5 rounded-2xl text-base text-gray-400 text-left flex items-center gap-3"
>
  <Search className="w-5 h-5 text-gray-400" />
  <span>어디를 들를까? (예: 홍대입구역, 다이소)</span>
</button>

코드도 더 깔끔해졌다. 불필요한 readonly 속성이나 복잡한 스타일링 없이, button과 placeholder 역할을 하는 span만으로 구현. 22줄이 14줄로 줄었다.

UX React 리팩토링 시맨틱HTML