이 웹은 단순한 정적 페이지가 아니라 지도 기반 아파트 정보 관리 앱(PWA) 로 설계되어 있어, 오프라인에서도 작동하고 설치형 앱처럼 사용할 수 있습니다.

■기능과 특징

1. 기본 설정 & 메타데이터

DOCTYPE 및 언어 지정: HTML5 문서, 한국어 지정.

문자 인코딩: UTF-8.

반응형 설정: meta viewport로 모바일 친화적 레이아웃.

PWA(Progressive Web App) 지원:

manifest.json 등록

theme-color 지정

아이콘(apple-touch-icon, favicon, mask-icon) 설정

service-worker.js 등록으로 오프라인 사용 가능

beforeinstallprompt 이벤트로 홈 화면 설치 유도

2. 외부 라이브러리 및 스타일

지도 라이브러리: Leaflet.js (1.9.4)

마커 클러스터: leaflet.markercluster (마커 그룹핑)

Bootstrap 5: UI 구성 및 반응형 디자인

외부 CSS: pano_apartment_style.css (아파트 전용 스타일)

3. 지도 기능

Leaflet 기반 지도 표시

지도 초기화 버튼 (resetMap() 호출)

아파트 마커 표시 및 클러스터링

필터 바: 월세 최소/최대 값 입력 → updateVisibleApartments() 실행

4. 검색 및 위치 기능

주소/장소 검색: searchLocation() 호출

현재 위치로 이동: goToCurrentLocation()

아파트 이름 검색: searchByName()

5. 데이터 저장/불러오기

JSON 저장: downloadVisibleApartments()

JSON 불러오기: 파일 업로드(triggerJsonLoad() → loadApartmentsFromFile())

6. UI 요소

오프캔버스 메뉴 (화면 하단 슬라이드)

아파트 목록 표시 영역

모달창:

아파트 상세정보

새 마커 추가(이름, 설명, 가격, 면적, 방 수, 이미지 URL 입력 가능)

7. 마커 추가 기능

지도 클릭 후 마커 생성

마커 정보 입력 폼 제공

confirmAddMarker()로 최종 추가

8. PWA 설치 안내

첫 방문 시 홈 화면 설치 여부를 confirm() 창으로 물어봄

로컬 스토리지(localStorage)를 사용해 재표시 방지

9. 특징 요약

오프라인 지원 가능 (Service Worker)

모바일 친화적 (반응형 + PWA)

지도 기반 데이터 시각화

사용자 입력 기반 데이터 관리

검색·필터·저장·불러오기 기능 완비

Leaflet + Bootstrap UI 통합