힐링스팟 지도 검색 서비스

카카오 지도 위에 마사지샵 위치를 마커로 표시하고, 같은 데이터를 리스트 카드로 동시에 보여주어 지도 이동과 리스트 스크롤이 서로 맞물려 동작합니다.

• Kakao Maps JavaScript SDK 커스텀 마커 클러스터링으로 지도 위 다수 샵 핀을 그룹화해 표시
• 지도 뷰포트(bounds) 변경 이벤트와 리스트 스크롤을 양방향 동기화해 지도 이동 시 리스트가 자동 갱신되는 구조 설계
• React Query로 샵 목록 API 응답을 캐싱하고 staleTime을 분리 설정해 지도 재조회 빈도를 최소화

지도 마커 클릭과 리스트 카드 hover를 상호 연동해 지도-리스트 간 실시간 동기화 UX를 구현합니다.

고양·파주 권역 내 동 단위로 검색 범위를 좁힐 수 있는 필터를 제공하여 사용자가 원하는 지역의 샵만 빠르게 찾을 수 있도록 구현합니다.

• 동 단위 행정구역 데이터를 PostgreSQL에 정규화 저장하고 다중 선택 필터 쿼리를 설계
• 필터 상태를 URL 쿼리 파라미터와 동기화해 필터링 결과를 링크로 공유 가능하도록 구현
• Zustand로 필터 전역 상태를 관리해 지도·리스트·필터 칩 UI 간 상태 일관성 유지

다중 동 선택 필터와 검색 결과 카운트를 실시간 반영하는 필터링 로직을 구현합니다.

상호, 사진, 주소, 영업시간, 소개글을 한 화면에서 확인하고 버튼 한 번으로 바로 전화를 걸 수 있는 상세 페이지를 구현합니다.

• 샵 상세 API에 사진·영업시간·소개글을 포함한 단일 엔드포인트를 설계해 상세 페이지 로딩을 단순화
• tel: 스킴 링크로 즉시 다이얼러 연결, 클릭 이벤트를 별도 로그 테이블에 기록하는 구조 설계
• 이미지 갤러리에 Lazy loading과 Intersection Observer를 적용해 초기 렌더 부담 경감

비회원도 로그인 없이 상세 정보를 즉시 조회하고 전화 연결까지 이어지는 원스텝 플로우를 구현합니다.

앱스토어 설치 없이 브라우저에서 홈 화면에 추가해 네이티브 앱처럼 실행할 수 있는 구조를 구현합니다.

• Service Worker 캐싱 전략(정적 자원은 Cache First, API 응답은 Network First)을 분리 설계
• Web App Manifest로 아이콘·스플래시·전체화면 모드를 구성해 네이티브 앱과 유사한 진입 경험 구현
• beforeinstallprompt 이벤트를 감지해 커스텀 설치 유도 배너를 자체 구현

앱스토어 등록 없이 홈 화면 추가만으로 네이티브 앱과 유사한 진입 경험을 제공하는 PWA 구조를 구현합니다.