React와 한국석유공사 오피넷 Open API를 활용한 지역별 최저가 주유소 조회 서비스입니다.
유종과 지역을 선택하면 공개 데이터 기준 최저가 주유소 목록을 가격 낮은 순으로 확인할 수 있습니다.
본 프로젝트는 포트폴리오 및 학습 목적으로 제작되었습니다.
- 유종별 최저가 주유소 조회
- 지역별 최저가 주유소 조회
- 가격 낮은 순 정렬
- 페이지네이션 기반 목록 표시 (페이지당 10개)
- 카카오맵 길찾기 버튼 제공
- 최저가, 평균가, 데이터 갱신 시점 표시
- GitHub Pages 정적 배포
- GitHub Actions 기반 데이터 생성 및 자동 배포
- API Key를 GitHub Actions Secret으로 관리
| 구분 | 사용 기술 |
|---|---|
| Frontend | React, JavaScript |
| Build Tool | Vite |
| Styling | CSS3, Responsive Layout |
| Data | JSON |
| External API | 한국석유공사 오피넷 Open API |
| Automation | Node.js Script, proj4 |
| CI/CD | GitHub Actions |
| Deploy | GitHub Pages |
| Version Control | Git, GitHub |
.
├── .github/
│ └── workflows/
│ └── deploy-github-pages.yml
├── public/
│ ├── .nojekyll
│ └── data/
│ └── oil-prices.json
├── scripts/
│ └── fetch-opinet.mjs
├── src/
│ ├── components/
│ ├── utils/
│ ├── App.jsx
│ ├── main.jsx
│ └── styles.css
├── .env.example
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
├── LICENSE
└── README.md
가격 정보는 한국석유공사 오피넷 Open API 기준입니다. 실제 주유소 판매 가격과 차이가 있을 수 있습니다.
MIT License