전기차 충전소 찾기

공공데이터포털 「한국환경공단_전기자동차 충전소 정보」 API(getChargerInfo)로 시도·시군구별 충전소를 지도에 보여 주는 웹 서비스.

• 화면: HTML + CSS + 순수 JavaScript, 지도는 Leaflet + OpenStreetMap(키 불필요)
• 서버: Vercel 서버리스 함수 (키는 서버 환경변수에만 둔다)
  • api/chargers.js — 충전소 정보. 충전기 단위 응답을 충전소 단위로 묶어 줄여서 돌려준다.
  • api/route.js — TMAP 자동차 경로안내(현재 위치 → 충전소). 거리 · 시간 · 요금 · 경로 좌표만 돌려주고 캐시하지 않는다 (TMAP 약관: 24시간 넘게 저장 금지).

로컬 실행

cp .env.example .env.local   # DATA_GO_KR_KEY(공공데이터포털), TMAP_APP_KEY(SK open API) 입력
npm run dev                  # http://localhost:3000

Vercel 배포

1. 이 폴더를 GitHub 저장소로 올린다 (.env.local 은 올라가지 않음).
2. Vercel 에서 저장소를 Import 한다 (Framework: Other, 빌드 명령 없음).
3. Project Settings → Environment Variables 에 DATA_GO_KR_KEY, TMAP_APP_KEY 를 추가하고 다시 배포한다.

동작 방식

조작	동작
첫 화면 (위치 허용)	현재 위치의 시군구를 자동 선택하고 검색, 지도는 내 위치 중심
지역 미선택 상태로 검색 · 엔터	현재 위치의 시군구로 검색
시군구 선택	API 호출 (같은 지역은 1분간 재사용)
충전기 타입 · 충전소명 입력	받아 둔 결과를 바로 거름 (API에 충전소명·타입 검색 조건이 없음)
검색 버튼 · 충전소명 입력 후 엔터	서버에서 다시 받아 충전기 상태 갱신 (배포본은 CDN 캐시로 최대 5분 전 상태일 수 있음)

속도와 호출 한도

• 공공데이터포털에 9999건을 한 번에 요청하면 5~15초 걸려서, 1000건씩 최대 10개를 동시에 받는다.
• 요청의 약 10%는 응답 없이 멈추므로 5초가 지나면 끊고 다시 요청한다 (최대 3번).
• 한 번 검색에 드는 호출 수 = 그 지역 충전기 수 ÷ 1000 (강남구 6건, 용인시 16건).
• 일일 호출 한도를 아끼려고 같은 지역 결과는 Vercel CDN 에 5분간 캐시한다. 그 뒤에는 이전 결과를 바로 주고 뒤에서 새로 받는다.
• 개발계정은 하루 1,000건이라 부족하다 → 운영계정으로 전환해 사용한다.

현재 위치 → 시군구 (sigungu-points.json)

외부 지오코딩 서비스 없이, 시군구마다 대표 충전소 위치 60곳을 담은 표로 판정한다. 내 위치에서 가까운 대표점 3곳이 거리 가중 투표로 시군구를 고른다 (위치는 브라우저 밖으로 나가지 않음). 전국 충전소 좌표 5,000곳 표본에서 시군구 95.9% · 시도 99.3% 일치 (경계 근처에서 이웃 시군구가 골라질 수 있음).

충전소가 많이 늘거나 행정구역이 바뀌면 다시 만든다 (전체 수집에 20~30분):

K=서비스키 node tools/fetch-raw.mjs regions.js tools/raw.json
node tools/sample-points.mjs tools/raw.json sigungu-points.json 60 2 3

마커 색: 초록 = 충전대기 있음, 주황 = 모두 충전중, 회색 = 그 외(점검·통신이상 등).

테스트 목록

번호	할 일	기대 결과
T1	페이지 열기 → 위치 권한 허용 / 거부	허용: 내 위치(파란 점) 중심 · 거부: 서울시청 중심 + 안내 문구
T2	세종특별자치시 선택	시군구가 자동 선택되고 바로 충전소 표시
T3	서울특별시 → 강남구	"불러오는 중…" 후 충전소 약 1,000곳, 지도가 강남구로 맞춰짐
T4	충전소명에 "이마트" 입력 / 없는 이름 입력	입력 즉시 걸러짐 / "조건에 맞는 충전소가 없습니다."
T5	충전기 타입: 급속 · 완속 · NACS	숫자가 바뀜 (강남구 NACS 는 0곳)
T6	검색 버튼	다시 불러오기 문구가 잠깐 보이고 최신 상태로 갱신, 입력한 충전소명은 유지
T7	마커 클릭	충전기별 상태 · 이용시간 · 운영기관 · 전화 · 주차료 표시 (전화번호 누르면 전화 걸기)
T8	휴대폰 폭(약 375px)	검색 조건이 2줄로 바뀌고 가로 스크롤 없음
T9	http://localhost:3000/.env.local 열기	404 (서비스 키 파일이 노출되지 않음)
T10	위치 허용 후 첫 화면	내 시군구가 자동 선택되고 충전소 표시, 지도는 내 위치 중심
T11	시도 선택 없이 충전소명 입력 → 엔터	내 시군구로 검색되고 결과 위치로 지도 이동
T12	충전소명에 한글 입력 → 엔터 한 번	검색이 한 번만 실행됨 (두 번 누를 필요 없음)
T13	위치 허용 후 마커 → "여기까지 길찾기"	파란 경로선 + "도착" 표시, 아래에 거리 · 시간 · 택시요금(통행료 있으면 함께)
T14	위치 거부 상태에서 길찾기	빨간 글씨로 "현재 위치를 알 수 없어…" 안내, 경로 없음
T15	길찾기 결과의 ✕ 버튼	경로선과 안내 상자가 사라짐