플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - 지도 좌표 기반 리스트 정렬과 스크롤 동기화 시 성능 저하 없이 실시간 갱신하는 로직 설계 필요 - 동 단위 행정구역 경계 데이터의 정확한 매핑과 필터 조합 시 검색 결과 정합성 유지 필요 - PWA 설치 유도 배너의 브라우저별(iOS Safari/Android Chrome) 동작 차이를 흡수하는 대응 로직 필요 - 비회원 다건 조회 트래픽 증가 시 지도 API 호출
프로젝트 성과
지도-리스트 실시간 동기화 엔진 구현
지도 뷰포트 변경과 리스트 스크롤을 양방향 바인딩, 마커 클러스터링으로 다수 핀을 그룹화하는 구조 구현
동 단위 다중 필터 쿼리 설계
행정구역 계층 테이블 기반 다중 선택 필터 쿼리 설계, URL 쿼리 파라미터로 필터 상태 공유 구조 구현
PWA 오프라인 캐싱 전략 구현
Cache First/Network First 전략을 리소스 유형별로 분리 설계, Service Worker 생명주기 관리 구조 구축
비회원 상세 조회 원스텝 플로우 설계
인증 없이 상세·전화연결까지 이어지는 원스텝 UX 설계, tel: 링크 클릭 로깅 구조 구현
핵심 기능
지도·리스트 통합 검색
카카오 지도 위에 마사지샵 위치를 마커로 표시하고, 같은 데이터를 리스트 카드로 동시에 보여주어 지도 이동과 리스트 스크롤이 서로 맞물려 동작합니다
진행 단계
요구사항 분석 및 지도 데이터 스키마 설계
2026.09
샵 위치·영업정보 DB 스키마 설계, Kakao Maps 좌표 체계 정의 및 동 단위 행정구역 테이블 매핑
프로젝트 상세
1) 포트폴리오 소개 지도와 리스트가 함께 동작하는 지역 기반 마사지샵 검색 모바일 웹을 React + Node.js 기반으로 설계·구현합니다. 로그인 없이 누구나 지도·리스트로 샵을 탐색하고, 동 단위 필터와 상세 페이지의 전화 연결까지 이어지는 원스텝 탐색 플로우를 구현하며, PWA 구조로 홈 화면 설치를 지원합니다. 2) 작업 범위 - 지도·리스트 통합 검색: 카카오 지도 위에 마사지샵 위치를
