Feat: create region select page

[JSH99]

개요

close #62

스크린샷

주요 내용

• 지역 검색(선택) 페이지 마크업
• chakra Tag 커스텀
• 지역 선택 시 태그 추가
• 검색창 스타일 변화 적용
• 검색 필터링 적용 X (기능 추후 추가 예정)

고민한 점, 질문거리

문제: 스타일 변경 자체는 적용되었으나, 스타일이 변경되면 검색 버튼이 눌리지 않아 submit이 되지 않는 오류 발생 (두 번 눌러야 submit 됨)
input에 focus 됐을 때 왼쪽 -> 오른쪽처럼 검색창 위치가 변경되고 검색 버튼을 누른 후에도 오른쪽 스타일로 유지되어야 하는데, onFocus만으로는 정상적으로 스타일이 변경되지 않았습니다..
그래서 포커스, 클릭, 액티브, 검색이 완료되었는지 등 여러 이벤트와 값을 생성해서 해당 boolean 값에 따라 적용해봤는데 잘 안 돼서 고민을 오래 했습니다,,
디버깅 해봤을 때 검색 버튼 자체가 안 눌리고 있었기 때문에 검색 완료된 시점으로 스타일 분기 처리를 하면 안 될 것 같아서 포커스가 되었는지 isInputFocused 값과, input에 입력되고 있는 regionValue 값을 검사하여 포커스 되었거나 검색어가 있을 때는 검색창이 상단에 고정되도록 수정했더니 해결되었습니다.
이틀 동안 해결 못 했었는데 useForm의 watch를 사용했더니 되는 문제였습니다,,

사담으로 조금 더 적어보자면,, useForm을 처음 써봐서 어떻게 작성해야 제대로 사용하는 건지 잘 모르겠는 이슈 때문에 더 오래 걸렸던 것 같습니다,,
그리고 사실 모바일에서는 searchable 속성 하나만 추가하면 제가 열심히 구현한 포커스 됐을 때 검색창이 위로 붙는 스타일이 ☆자동으로☆ 적용된다고 하더라고요^^...
모바일에서는 자연스럽고 원래 있는 UI라 디자인이 그렇게 나온 것 같은데 웹에서는 레퍼런스가 존재하지 않아서 많이 헤맸습니다..🥲
그래서 처음에 단순무식하게 포커스로 class명을 분기한 건데, 오래 걸리긴 했지만 해결하고 기뻐서 transition으로 자연스러움도 한 스푼 넣었습니다 하하

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
trip-vote	✅ Ready (Inspect)	Visit Preview	Jan 12, 2024 4:11pm

[SKY-PEY]

검색창 클릭했을때 위로 올라붙는 게 pc버전에서도 동일하게 적용되도록 하신거죠? 짧은 시간안에 많이 하신 것 같은데요ㅎㅎ
고생많으셨어요!!🤗🤗🤗

[JSH99]

네네, pc에서도 동일하게 적용돼요! 검색창 위로 붙이는 게 이렇게 오래 걸릴 줄 몰랐네요 😂

[HOOOO98]

자연스럽게 구현하신 거 같아요!! 고생하셨습니다~!👍