데모플랫폼·매칭
지역 샵 지도·운영 웹 데모
공개 지도 위 가상 샵 80곳을 지도와 목록에서 함께 고르고, 숨김이 공개 화면에 반영되는지 볼 수 있습니다.
local-shop-map-demo-158413-production.up.railway.app
열어 보시면 이런 걸 확인하실 수 있습니다
- 샵 찾기에서 고양·파주와 동을 고르면 지도와 목록이 같은 가상 샵을 가리킵니다
- 목록을 누르면 지도에서 같은 번호가, 지도 번호를 누르면 목록이 함께 선택됩니다
- 샵 상세에서 가상 전화번호를 미리 보기만 하고 실제 발신은 하지 않습니다
- 샵 관리에서 숨김을 적용하면 지도·목록에서 빠집니다(브라우저 메모리에만 반영, 새로고침하면 초기화)
만들면서 풀어야 했던 것
- 지도 배경은 OpenStreetMap 공개 원본에서 도로·수계·지명을 지역 단위로 추출해 쓰고, 샵 이름·주소·전화·위치·소개는 모두 가상으로 따로 만들어 연결했습니다. 목록·상세 이미지는 공개 이용허락 사진을 쓴 분위기 예시와 직접 구성한 가상 3D 공간(일부 소품은 CC0 공개 모델)이라 실제 매장 사진과 구별되며, 카카오·네이버 지도 연동 결과는 아닙니다.
- 지도와 목록이 서로 다른 대상을 가리키지 않도록 모든 화면이 하나의 데이터 원장을 봅니다. 지도에는 전체 검색 결과를, 목록에는 페이지당 최대 20곳을 보여 주며 전체 건수와 현재 페이지 건수를 따로 적었고, 숨긴 샵은 지도·목록·공개 상세에서 함께 빠집니다.
- 사진 파일을 고른 직후 다른 샵 편집으로 넘어가면, 늦게 끝난 사진 읽기 결과가 엉뚱한 샵에 붙을 수 있었습니다. 편집마다 순번을 매겨 같은 편집일 때만 결과를 반영하도록 고치고 이 상황을 재현하는 회귀 검사를 추가했으며, 사진은 현재 브라우저 안의 미리보기로만 반영됩니다.
비슷한 걸 만들어 보고 싶으시다면
구간 견적으로 규모를 먼저 가늠해 보시거나, 조건을 적어 보내 주시면 범위를 정리해 회신드립니다.