feat: 메인화면 검색창 기능 UI 구현

[rina1201]

✨ 무엇을 바꿨나요?

mock 데이터 추가 생성 및
메인화면 내 검색창 기능 UI 구현

🔗 관련 이슈

Closes #17

💡 왜 바꿨나요?

mock 데이터 추가 이유 : 검색창 기능 확인해보기 위해서 아래 5가지 장소를 추가 등록했습니다.

1. (대구) 음식점1
2. (대구) 음식점2
3. (대구) 서브웨이
4. (인천) 서브웨이
5. (서울) 서브웨이

• 대구와 인천 지역의 추가는 검색 시 화면 이동을 보기 위함입니다.
• 서브웨이를 총 3군데 지점으로 추가한 이유는, 동일한 이름 검색 시 모달 화면에 어떻게 보일지와,
  해당 기능은 아니지만, 추후 제작할 '릴스 등록 시 장소 변경'을 위해 같은 프렌차이즈이지만 다른 지점으로 설정했습니다.

📝 주요 변경 사항

1. mock 데이터 변경
2. 검색 시 모달창 생성

👀 리뷰어가 보면 좋은 부분

1. 검색 모달창 기준

• 사용자가 입력하는 한 글자 한 글자 기준으로 모달에 뜨는 장소 리스트가 실시간으로 반영되게 설계했습니다.
• 모달 내 리스트 개수 : 최대 5개
• 모달 내 우선순위: 입력어와 일치하는 장소명 (1순위) > 입력어가 포함된 주소지 (2순위)
• 정렬: 2순위 내 경합 시 한글 자음(ㄱㄴㄷ) > 숫자(123) 순 정렬
• 클릭: 장소 클릭 시 장소 상세정보와 함께 노출되도록 하였습니다.

2. 지도 이동 및 범위

• 검색 버튼 클릭 시에만 지도가 이동하도록 설계했습니다. (타이핑 중 이동 제한)
• mock 데이터에 없을 경우 '시/구/동' 단위 지명 검색 시 해당 지역으로 좌표 이동 (카카오 API 연동)
  (위의 API를 확인하는 과정에서 src\features\map\utils\map-search.ts 파일이 생성되었습니다. 예를 들어 '서울'과 '서울시'의 입력값은 같아야 함을 다른 지역으로도 여러번 테스트 하다가 해당 파일의 길이가 길어졌습니다.)
• 최적화 뷰: 지역을 검색할 때, 지역 내 내가 저장한 장소핀이 한 화면에 모두 보이도록 지정했습니다 (대구 및 인천을 검색해보시면 확인 가능합니다!)
• 검색 결과가 여러 개(예: '서브웨이' 3곳)일 경우, 모든 핀이 한 화면에 들어오도록 지도 사이즈가 자동 축소됩니다 (서브웨이를 검색해보시면 확인 가능합니다!)

해당 화면 역시 dev/SelectOption 에서 확인 가능합니다.
빠르게 위의 기준을 확인할 수 있는 검색어들입니다.

1. 서울 -> 인천 -> 대구 : 지역 검색 시, 한 화면 안에 저장된 장소핀들이 모두 들어오도록 합니다.
2. 서브웨이 : 지역 검색 시, 한 화면 안에 저장된 장소들이 모두 들어오도록 합니다.
3. 동 : '동'을 입력하시면 모달 내 우선순위를 확인할 수 있습니다 (장소명과 일치하는 '동성로~' 가 가장 위에 뜨고, 아래에는 지역명인 '동대문구'가 리스트됩니다.)
4. mock 데이터에 없는 기타 장소들(사당, 강북, 강릉 등): 지정된 장소가 없더라도 지역 검색 시 지도 이동이 가능함을 확인할 수 있습니다.
5. 카테고리 지정하고도 잘 나타나는 것을 확인했습니다. (mock 데이터 상 '양식' 이 많아서, '양식'으로 확인해보시면 좋을 것 같습니다!)

🧪 테스트

방식 (해당하는 것만 체크)

• [O] 로컬 환경에서 확인
• 운영 환경에서 확인
• 단위 / 통합 테스트
• 해당 없음

메모 (시나리오, 커맨드, 스크린샷 링크 등 — 선택)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
udidura	Ready	Preview, Comment	May 2, 2026 11:54am