🗺️ Commit Map - 나만의 여행 지도 블로그

여행 경로를 지도 위에 시각화하고, 마크다운으로 기록하는 개인 여행 블로그

여행 다녀오고 사진만 폰에 잠들어 있지 않나요? 🤔
Commit Map으로 나만의 여행 지도를 만들어보세요!

✨ 주요 기능

기능	설명
🗺️ 인터랙티브 지도	여행 경로가 지도 위에 자동으로 연결되어 표시
📍 장소별 마커	관광지, 맛집, 호텔, 공항 등 타입별 아이콘 구분
📅 타임라인 뷰	날짜별로 여행 일정을 한눈에
🎯 D-Day 배지	예정된 여행은 D-Day 카운트다운!
🌍 다국가 여행	여러 나라를 경유하는 여행도 완벽 지원
📝 마크다운 작성	익숙한 마크다운으로 자유롭게 기록
🚀 GitHub Pages 배포	무료로 나만의 여행 블로그 운영

🎬 미리보기

🏠 메인 페이지: 여행 카드 목록 + 지도 미리보기
📍 상세 페이지: 인터랙티브 지도 + 경로 연결 + 장소 팝업
📅 타임라인: 날짜별 일정 정리

🚀 5분 만에 시작하기

1️⃣ 레포지토리 Fork & Clone

# 이 레포를 Fork한 후
git clone https://github.com/YOUR_USERNAME/commit-map.git
cd commit-map

2️⃣ 의존성 설치 & 실행

npm install
npm run dev

브라우저에서 http://localhost:4321 접속! 🎉

버전 관리

서비스의 기본 버전은 package.json의 version을 기준으로 합니다. GitHub Pages 배포에서는 GitHub Actions의 실행 번호를 붙여 0.0.1+build.123처럼 배포마다 자동으로 증가하는 버전을 표시합니다. 빌드하면 푸터와 meta 태그에 버전, 빌드 커밋, 빌드 시간이 함께 표시됩니다.

npm run version:patch  # 0.0.1 -> 0.0.2
npm run version:minor  # 0.0.1 -> 0.1.0
npm run version:major  # 0.0.1 -> 1.0.0

3️⃣ 나만의 여행 추가

src/content/posts/ 폴더에 마크다운 파일 생성:

---
title: "2026 도쿄 여행"
date: 2026-01-30
endDate: 2026-02-02
country: "일본"
tripType: ["sightseeing", "food"]
locations:
  - name: "나리타 공항"
    lat: 35.7720
    lng: 140.3929
    type: airport
    visitDate: "1/30"
    
  - name: "도쿄 스카이트리"
    lat: 35.7101
    lng: 139.8107
    type: attraction
    visitDate: "1/31"
    note: "634m 전망대에서 도쿄 야경!"
---

# 여행 후기
마크다운으로 자유롭게 작성하세요!

4️⃣ GitHub Pages 배포 (무료!)

1. GitHub에서 Fork한 레포로 이동
2. Settings → Pages → Source: GitHub Actions 선택
3. 코드 Push하면 자동 배포! 🚀

https://YOUR_USERNAME.github.io/commit-map

📁 프로젝트 구조

commit-map/
├── src/
│   ├── content/
│   │   └── posts/          # 👈 여기에 여행 포스트 추가!
│   │       ├── 2026-01-30-tokyo.md
│   │       └── 2026-02-12-bali.md
│   ├── components/         # 지도, 카드 등 컴포넌트
│   ├── layouts/            # 페이지 레이아웃
│   └── pages/              # 라우트 페이지
└── public/                 # 이미지 등 정적 파일

📝 포스트 작성 가이드

파일명 규칙

YYYY-MM-DD-제목.md
예: 2026-01-30-tokyo-kawaguchiko.md

필수 필드

필드	설명	예시
title	여행 제목	"2026 도쿄 여행"
date	시작일	2026-01-30
country	대표 국가	"일본"
locations	장소 목록	아래 참조

장소(Location) 필드

필드	필수	설명
name	✅	장소 이름
lat	✅	위도 (Google Maps에서 확인)
lng	✅	경도
type	⭕	attraction, restaurant, hotel, airport, cafe, shopping, nature, temple 등
visitDate	⭕	방문일 "1/30"
note	⭕	짧은 메모
order	⭕	방문 순서 (경로 연결용)
link	⭕	구글맵 링크 등

여행 테마 (tripType)

tripType: ["sightseeing", "food", "nature", "culture", "shopping", "healing", "adventure"]

🤖 AI로 포스트 자동 생성하기 (Antigravity)

이 프로젝트에는 Antigravity (구글 AI 코딩 어시스턴트) 워크플로우가 내장되어 있습니다!
프로젝트를 clone하고 Antigravity로 열면, 자연어로 여행 일정만 말해도 포스트가 자동 생성됩니다.

사용 방법

1. VSCode에서 Antigravity 확장 설치
2. 이 프로젝트 clone 후 열기
3. 프롬프트 입력창에 /add-content-field + 여행 일정 입력!

실제 사용 예시

프롬프트 입력창에 이렇게 입력하면:

/add-content-field 26년 1월 30일부터 2/2일 도쿄 여행이야
30일부터 2/1일까진 가와구치코에 시키-노-야도 후지산에서 온천 숙박하면서 
불꽃축제, 사케증류소 견학, 후지산 전망, 로프웨이 즐기고 
2/1일에 도쿄 아사쿠사 와서 일루미네이션이랑 빅카메라에서 면세쇼핑할거야
나리타 공항 출도착이야 오후 12시 도착, 15시 40분 이륙

AI가 자동으로:

• ✅ src/content/posts/2026-01-30-tokyo-kawaguchiko.md 파일 생성
• ✅ 모든 장소의 좌표(lat, lng) 자동 입력
• ✅ 날짜별 일정표, 하이라이트, 여행 팁 작성
• ✅ 적절한 태그, 카테고리, 장소 타입 설정

더 많은 예시

/add-content-field 2/12일 자카르타 가서 3박, 뜨만사파리 방문하고 
마사지 받고 리모트 근무하고, 2/15일 싱가포르에서 1박 두리안 먹고
2/16일 발리 와서 사누르에서 스쿠버다이빙 3일 할거야

/add-content-field 3/28일 마카오 공항 12시 도착
소피텔 마카오 2박, 카지노 구경하고 에펠탑 보고 육포 사고 딤섬 먹을거야

💡 팁: 숙소명, 관광지, 맛집, 액티비티 등을 자연어로 자유롭게 설명하면 AI가 알아서 구조화해줍니다!

💡 팁 & 트릭

좌표 찾는 법

1. Google Maps 접속
2. 원하는 장소 우클릭
3. 좌표 클릭하면 복사됨! (예: 35.7101, 139.8107)

D-Day 배지

• date가 오늘 이후면 자동으로 D-30 같은 배지 표시
• 여행 끝나면 자동으로 "최근 여행"으로 이동

다국가 여행

countries: ["일본", "한국"]  # 여러 나라 경유 시
locations:
  - name: "도쿄"
    country: "일본"         # 장소별 국가 지정

🤝 기여하기

버그 리포트, 기능 제안, PR 모두 환영합니다! 🙌

1. Fork
2. Feature 브랜치 생성 (git checkout -b feature/amazing-feature)
3. 커밋 (git commit -m 'Add amazing feature')
4. Push (git push origin feature/amazing-feature)
5. Pull Request!

📄 라이선스

MIT License - 자유롭게 사용하세요!

---

영문 여행 글

• 한국어 원본은 src/content/posts/<slug>.md, 영어 본문과 문구 프리셋은 src/content/postTranslations/<slug>-en.md에 둡니다.
• 번역 파일의 postSlug와 lang(en·ja·zh, 생략 시 en)으로 원본과 언어를 연결합니다. 제목·소개·태그·나라, 장소명·설명, 항공편 설명, 비용 항목명·단위·메모까지 영어로 작성합니다. 여러 나라를 거치는 글은 countries에 대표 나라 외 나라명을 "싱가포르": "Singapore"처럼 적습니다.
• locations는 원본 장소명, flights는 편명, expenses는 원본 비용 항목명을 키로 사용합니다. 같은 장소명이 여러 번 나오면 두 번째부터 장소명#2, 장소명#3으로 씁니다. 누락·불일치·중복 연결은 빌드 오류로 확인합니다.
• 날짜·금액·통화·좌표·외부 링크·순서는 원본에서 공유합니다. 영문 프리셋에 복사하지 않습니다.
• /posts/<slug>/ko/, /en/, /ja/, /zh/는 해당 언어를 직접 렌더링합니다. 언어 선택은 실제 페이지 링크이며, 언어가 지정된 URL은 저장 설정보다 우선합니다.
• 기존 본문 내 lang-ko/lang-en 형식은 계속 지원합니다. 영어 콘텐츠가 없는 글은 영문 버튼을 숨기고, 기존 /en/ 접근은 /ko/로 보냅니다.
• 검증: npm run build 후 node --test tests/postLanguagePages.test.mjs.

홈은 /(한국어)와 /en/(영어)에서 같은 화면 컴포넌트를 사용합니다. 영문 홈의 카드·지도·나라 필터는 각 글의 영문 프리셋을 공유하며, 공개 글에 영문 프리셋이 없으면 빌드가 실패합니다. 영문 홈에서 글을 열거나 영문 글에서 목록으로 돌아갈 때도 영문 경로를 유지합니다.

네 언어 선택과 기본값

홈은 /·/en/·/ja/·/zh/, 상세는 /posts/<slug>/ko/·en/·ja/·zh/를 지원합니다. 헤더에는 현재 언어 코드(KO·EN·JP·CN)만 보이고, CN은 중국어 간체입니다. 홈과 상세가 같은 번역 데이터 프리셋을 공유합니다.

언어 없는 홈·상세 주소에서는 ?lang= 지정 → 직접 선택해 저장한 언어(commit-map-lang) → 브라우저 선호 언어 → 영어 순으로 결정합니다. 지역 접미사도 처리하며, 위치 권한이나 IP 조회는 사용하지 않습니다. 브라우저 저장소가 차단되어도 기본 선택은 동작합니다. 한국어 홈 버튼은 /?lang=ko로 이동하므로 저장소를 쓸 수 없어도 직접 선택이 우선합니다.

언어 버튼에 마우스를 올리거나 키보드 포커스를 두거나 누르면(터치) 고를 수 있는 언어 목록이 펼쳐지고, 바깥을 누르거나 Esc로 닫힙니다. 일본어·중국어를 포함해 상세 본문·지도·항공·비용·장소 설명도 해당 프리셋을 사용하며 날짜·금액·좌표는 공통 원본을 유지합니다.