[feat] 지도 인터랙션 고도화, 종합 점수 API 연동 및 큐레이션 리포트 잠금 기능 구현

[HSCHEOL]

개요

지도의 정보 전달력을 높이기 위해 종합 데이터 점수(안전, 접근성)를 연동하고, 시인성을 개선했습니다. 또한 비교 페이지에 '리포트 잠금 및 해제' 시스템을 도입하여 서비스의 프리미엄 가치를 더했습니다.

주요 변경 사항

1. 종합 데이터 점수 및 상세 정보 API 연동

• 안전 모듈 완성: useGetSafetyRoute API를 연동하여 지하철역까지의 안전 도보 경로를 표시하고, 경로 내 **CCTV 및 가로등 개수(안전 종합 점수)**를 실제 데이터로 반영했습니다.
• 접근성 모듈 완성: useGetTraffic API를 연동하여 선택된 매물의 실시간 접근성 종합 점수와 주변 교통 시설 데이터를 지도 마커 및 리스트에 동기화했습니다.
• 자동차 소요 시간 예측: useGetTMapPrediction API를 통해 타임 슬라이더 조작 시 실시간 자동차 이동 거리 및 소요 시간을 계산하도록 구현했습니다.

2. 큐레이션 비교 리포트 잠금 시스템

• 영역별 선택적 잠금: 상단 '내 매물 비교하기' 카드는 항상 노출하고, 하단의 상세 분석인 '큐레이션 결과' 및 '기본 정보 비교' 영역만 선택적으로 잠그도록 설계했습니다.
• 잠금 모달 (CompareModal): Figma 디자인을 완벽히 반영하여 잠금 아이콘, 진행 안내, "무료 이용권으로 열람하기" 버튼을 포함하는 전용 모달을 추가했습니다.
• 블러(Blur) 효과: 잠금 영역에만 강력한 blur-lg 효과를 적용하여 데이터 노출을 방지하고 유료 서비스 같은 시각적 깊이감을 더했습니다.

3. 지도 UX 및 인터랙션 고도화

• 타임슬라이더 지능형 노출: 소음/접근성 모듈 활성화 시에만 하단에서 부드럽게 나타나는 framer-motion 애니메이션을 추가했습니다.
• 다이내믹 마커 시스템: 줌 레벨에 따른 마커 사라짐 버그를 수정하고, 전체 마커에 +5px 크기 보정을 적용하여 시인성을 극대화했습니다.
• 초기 로딩 최적화: 지도의 기본 중심점을 구일역으로 변경하고, 초기 줌 레벨을 2로 조정하여 더 상세한 첫 화면을 제공합니다.

작업 내역

• 안전 모듈 경로 및 설비 통계 API 연동
• 접근성 모듈 교통 시설 및 소요 시간 API 연동
• framer-motion 기반 타임슬라이더 애니메이션 구현
• 줌 레벨 기반 마커 스케일링 로직 보완
• 큐레이션 비교 페이지 영역별 잠금 및 블러 처리
• 지도 초기 중심점(구일역) 및 줌 레벨(2) 설정

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
frontend	Ready	Preview, Comment	Feb 10, 2026 0:38am