그늘지도 · FE

서울 테헤란로의 시간별 그늘을 지도에서 살펴보는 React 웹 프런트엔드입니다. 시간 선택, 휴식 장소·버스 정류장 조회, 경로 화면을 제공합니다. 화면의 자료는 검수 단계이며 실제 길찾기 안내로 사용하지 않습니다.

이미지는 원본 GIS 자료와 연결되지 않은 합성 데모 화면입니다. 표시된 경로·장소·수치는 테스트용입니다.

저장소 연결

역할	저장소
웹 프런트엔드	FE
Spring Boot 조회 API·PostGIS	BE
자료 처리·OpenAPI 계약·로컬 WMTS	data-pipeline

세 저장소를 같은 상위 폴더에 각각 frontend, backend, data-pipeline이라는 이름으로 둡니다. 계약 타입 재생성은 ../data-pipeline/contracts/openapi.yaml을 읽습니다.

실행

Node.js 22.12 이상이 필요합니다.

cd frontend
Copy-Item .env.example .env
npm install
npm run dev

기본 주소는 http://127.0.0.1:5173입니다. Vite는 /api/v1 요청을 http://127.0.0.1:8080의 BE로 전달합니다. .env에서 VITE_API_MODE=mock을 쓰면 API 없이 UI를 볼 수 있고, real로 바꾸면 실제 조회 API를 사용합니다. /?demo=1은 합성 예시 화면입니다.

npm run test
npm run build
npm run contracts

실제 시간별 그늘 타일을 보려면 data-pipeline의 처리 결과와 로컬 WMTS 서버가 필요합니다. frontend/public/data에 생성되는 카탈로그와 로컬 환경변수는 Git에 올리지 않습니다.

데이터 공개 범위

이 저장소에는 UI 소스, 테스트용 합성 fixture, 합성 데모 소개 이미지가 포함됩니다. 원본 GIS 자료, 생성 타일, 실제 DB 자료, .env는 .gitignore로 제외합니다.