🗺️ Pathfinder

Next.js 15, MapboxGL, TypeScript로 구축된 현대적이고 인터랙티브한 지도 애플리케이션입니다. Pathfinder는 실시간 날씨 데이터, 위치 검색, 사용자 정의 가능한 지도 스타일과 같은 기능으로 원활한 지도 경험을 제공합니다.

데모 · 버그 신고 · 기능 요청

✨ 기능

🌓 다크/라이트 모드 지원
🏢 3D 건물 시각화
🔍 자동 완성 위치 검색
🌤️ 실시간 날씨 정보
📍 현재 위치 감지
🛰️ 거리/위성 뷰 전환
📱 완전 반응형 디자인
⌨️ 키보드 단축키 지원
🎨 Tailwind CSS와 shadcn/ui를 사용한 현대적인 UI

🚀 시작하기

필수 조건

Node.js 22+
Mapbox API 키 (Mapbox에서 발급)
OpenWeather API 키 (OpenWeather에서 발급)
npm 또는 yarn

설치

저장소 클론:

git clone https://github.com/shadowoff09/pathfinder.git
cd pathfinder

의존성 설치:

npm install
or
yarn install

환경 변수 설정:
.env.example 파일을 .env.local로 복사하세요:

     cp .env.example .env.local
     ``
   .env.local 파일을 열고 Mapbox API 키를 추가하세요:

     
`env
     NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=your_mapbox_token_here
     NEXT_PUBLIC_WEATHER_API_KEY=your_weather_api_key_here
     `
   API 키를 다음에서 가져오세요:
     Mapbox - 지도 기능용
     OpenWeather - 날씨 데이터용
개발 서버 시작:

bash
npm run dev
or
yarn dev


브라우저에서 http://localhost:3000 을 엽니다.
🎮 사용법
지도 탐색
이동: 클릭 후 드래그
확대/축소: 스크롤 또는 확대/축소 컨트롤 사용
회전: 우클릭 후 드래그
뷰 초기화: Ctrl+Q 키 누르기
기능
검색창을 통해 위치 검색
거리뷰와 위성뷰 전환
거리뷰 모드에서 3D 건물 보기 (줌 레벨 15 이상)
날씨 정보 확인 (줌 레벨 14 이상)
한 번의 클릭으로 현재 위치 가져오기
좌표를 클립보드에 복사
🛠️ 사용 기술
Next.js 15 - React 프레임워크
TypeScript - 타입 안전성
Mapbox GL JS - 지도 API
Tailwind CSS - 스타일링
shadcn/ui - UI 컴포넌트
React Map GL - Mapbox GL의 React 래퍼
🤝 기여하기
기여를 환영합니다! Pull Request를 자유롭게 제출해 주세요. 주요 변경 사항의 경우, 변경하고자 하는 내용을 먼저 논의하기 위해 이슈를 열어 주세요.