네이버 지도 API 기반 브랜드별 매장 위치 표시 및 대리점 매칭 대시보드입니다.
| 파일 | URL | 설명 |
|---|---|---|
| 대시보드 | https://chyone123.github.io/store-map/dashboard.html | 메인 대시보드 |
| 지도 | https://chyone123.github.io/store-map/naver_map.html | 매장 위치 지도 |
| 매장 데이터 | https://chyone123.github.io/store-map/stores.html | 전체 매장 데이터 테이블 |
| 브랜드 로고 | https://chyone123.github.io/store-map/logos.html | 브랜드 로고 모음 |
| 픽토그램 | https://chyone123.github.io/store-map/pictograms.html | 픽토그램 아이콘 모음 |
⚠️ 반드시 URL로 접속해야 합니다. 파일을 직접 열면 API 인증 오류 발생!
store-map/
├── dashboard.html # 메인 대시보드 (대리점↔매장 매칭)
├── naver_map.html # 매장 위치 지도
├── stores.html # 전체 매장 데이터 테이블
├── logos.html # 브랜드 로고 모음 (Base64 내장)
├── pictograms.html # 픽토그램 아이콘 모음 (Base64 내장)
└── README.md # 프로젝트 설명 (이 파일)
- 17개 브랜드 / 2,720개 매장 위치 표시
- 납품중 / 미발주 / 신규예정 / 거래종료 필터
- 대리점별 납품 매장 표시 및 반경 표시
- 매장 클릭 시 상세 정보 + 인근 대리점 추천
- 주소/매장명 검색 (자동완성)
- 마커 클러스터링
- 모바일 대응 (반응형 레이아웃)
- 브라우저 캐시로 재접속 시 빠른 로딩
- 전체 컬럼 포함: 구분 / 브랜드 / 점포명 / 우편번호 / 주소 / 발주여부 / 지점명 / 대리점코드 / 대리점명
- 브랜드 / 구분 / 발주여부 필터 드롭다운
- 실시간 검색
- 16개 브랜드 로고 (Base64 내장)
- 13개 픽토그램 아이콘 (Base64 내장)
| 항목 | 값 |
|---|---|
| Application 이름 | maping |
| Client ID (ncpKeyId) | 7mx3psg0wh |
| 등록된 Web 서비스 URL | http://localhost |
| 등록된 Web 서비스 URL | https://chyone123.github.io |
콘솔: https://console.ncloud.com 경로: AI·NAVER API → Maps → Application
CSV 파일 수정 시 아래 순서로 반영하세요.
1. Claude에게 요청 (회사 PC Pro 계정)
수정된 CSV 파일이야.
dashboard.html, stores.html, naver_map.html 업데이트해줘
2. GitHub에 올리기
git add .
git commit -m "매장 데이터 업데이트"
git push또는 브라우저 직접 업로드:
https://github.com/chyone123/store-map/upload/main
| 컬럼명 | 설명 |
|---|---|
| 구분 | 거래중 / 거래중지 |
| 업체명 | 브랜드명 |
| 점포명 | 매장명 |
| 우편번호 | 5자리 우편번호 |
| 주소 | 도로명 주소 (Geocoding에 사용) |
| 발주여부 | 납품중 / 미발주 |
| 지점명 | 지역 지점명 |
| 대리점코드 | 대리점 고유 코드 |
| 대리점명 | 대리점명 |
https://git-scm.com 에서 다운로드 후 설치
git clone https://github.com/chyone123/store-map.git
cd store-mapgit pullgit add .
git commit -m "수정 내용"
git push| 브랜드 | 색상 | 거래 상태 |
|---|---|---|
| UIU커피 | #808080 | 거래종료 |
| 감성커피 | #E33226 | 거래중 |
| 바나프레소 | #F06489 | 거래중 |
| 백억커피 | #1D5C39 | 거래중 |
| 벌크커피 | #808080 | 거래종료 |
| 베러먼데이 | #808080 | 거래종료 |
| 빅웨이브 | #808080 | 거래종료 |
| 엽떡 | #FCE4D6 | 거래중 |
| 영커피 | #002573 | 거래중 |
| 오가다 | #4C4E50 | 거래중 |
| 읍천리382 | #258748 | 거래중 |
| 카페게이트 | #EFA09E | 거래중 |
| 커피빈 | #66467E | 거래중 |
| 크리스피크림도넛 | #106536 | 거래중 |
| 탐앤탐스 | #00FFFF | 거래중 |
| 트리플에이 | #FCFAEB | 거래중 |
| 핑퐁커피 | #808080 | 거래종료 |
- 매장 좌표 미리 변환해서 내장 (로딩 속도 개선)
- 매출 데이터 연동 (매장별 매출 추이 차트)
- Google Sheets 실시간 데이터 연동
- 대리점↔매장 실시간 매칭 고도화
| 도구 | 용도 |
|---|---|
| 네이버 지도 API | 지도 표시, Geocoding, 마커 |
| GitHub Pages | 무료 웹 호스팅 |
| Claude for Excel | 매출 데이터 분석 (회사 PC Pro 계정) |
| Claude Pro (회사 PC) | 개발 작업 |
| 문제 | 원인 | 해결 |
|---|---|---|
| 지도 흰 화면 | 파일 직접 열기 (file://) | URL로 접속 |
| 401 인증 오류 | Web 서비스 URL 미등록 | 네이버 콘솔에서 도메인 등록 |
| API 파라미터 오류 | ncpClientId → ncpKeyId 변경됨 | ncpKeyId 사용 |
| git push 안됨 | Git 사용자 정보 미설정 | git config 이메일/이름 설정 |
| 대화 기록 안보임 | Pro/무료 요금제 대화 분리 | 같은 요금제 계정으로 접속 |
| 로딩 느림 | 매번 Geocoding API 호출 | 캐시 활용 or 좌표 미리 내장 |
회사 PC에서 새 대화 시작할 때:
아래 README와 GitHub 프로젝트를 참고해서 작업 이어서 진행해줘
https://github.com/chyone123/store-map
[README 내용 붙여넣기]
또는 Claude Projects 기능 활용 (Pro 계정):
- 좌측 메뉴 → Projects → New Project
- README, dashboard.html 등 파일 업로드
- 프로젝트 안에서 대화하면 항상 맥락 유지