[Project Intro] Wattup #1 프로젝트 소개

 

⚡ PROJECT WATTUP

WattUp

공공데이터 기반 전기차 충전소 확인 및 예약 플랫폼

React FastAPI Kafka Kubernetes Debezium PostgreSQL MongoDB

Introduction

이 플랫폼은 무엇인가요?

전기차 보급이 빠르게 늘어나고 있지만, 충전소 정보는 여전히 파편화되어 있습니다. WattUp은 공공데이터 API를 활용해 실시간으로 전국 충전소 현황을 지도 위에 보여주고, 원하는 충전소를 바로 예약할 수 있는 서비스입니다.

핵심 기능

• 지역구 선택 시 지도가 해당 좌표로 이동하며 충전소를 클러스터링으로 표시
• zoom 단계에 따라 충전소 개수 또는 충전기 개수를 마커 숫자로 표시
• 충전소 마커 클릭 시 우측 모달에서 충전기 정보, 이미지, 예약 가능 시간 확인
• 예약자 번호 입력 후 예약 확정 — 실시간으로 DB에 반영

User Flow

어떻게 사용하나요?

1

지역구 선택

화면 왼쪽 상단 드롭다운에서 원하는 구를 선택합니다. 지도가 해당 구 좌표로 자동 이동합니다.

2

클러스터링 마커 확인

zoom 레벨에 따라 충전소들이 클러스터링됩니다. 마커의 숫자는 해당 구역의 충전소 개수를 나타냅니다.

3

개별 충전소 마커

지도를 확대하면 개별 충전소 마커가 나타납니다. 마커의 숫자는 해당 충전소의 충전기 개수입니다.

4

충전소 상세 정보

마커를 클릭하면 우측에 모달이 열립니다. 충전기 타입, 이용 가능 현황, 운영 시간, 이미지 정보를 확인할 수 있습니다.

5

예약 완료

예약 가능 시간을 선택하고 예약자 번호를 입력한 후 확인 버튼을 누르면 예약이 완료됩니다.

Screenshots

서비스 화면

마커 색상은 충전소 이용 가능 여부를 나타냅니다.

 

이용 가능

 

일부 가능

 

이용 불가

 

내 위치

🗺️ 클러스터링 마커 — zoom 레벨별 충전소 집계

📍 개별 충전소 마커 — 충전기 개수 표시

📋 충전소 상세 정보 모달

📌 내 위치 표시 마커

Tech Stack

사용 기술

Frontend

React Naver Maps API

Backend

FastAPI Python

 

Database

PostgreSQL MongoDB

Streaming / CDC

Kafka Debezium

Infra

Kubernetes Docker Nginx Tailscale

Environment

OCI VirtualBox

Team

팀 구성

총 6명이 역할을 나누어 개발했습니다.

🎨

Frontend

2명

⚙️

Backend

2명

🗄️

DB / Kafka / Debezium

2명

☸️

Kubernetes 배포

개별 진행

WattUp ⚡ — 공공데이터 기반 전기차 충전소 예약 플랫폼
FastAPI · Kafka · Kubernetes · Debezium · PostgreSQL · MongoDB