EV 충전소 관제 시스템 — 프론트엔드

강화학습(SAC) 기반 AI 스케줄링과 실시간 MQTT 텔레메트리를 연동한 B2B 관리자용 관제 대시보드입니다.
LLM 기반 챗봇 및 스케줄 자동 요약 기능을 포함합니다.

---

기술 스택

Frontend

라이브러리	버전	용도
React	18.3.1	UI 프레임워크
TypeScript	—	타입 안전성
React Router	7	다중 페이지 라우팅
TanStack Query	v5	서버 상태 관리 및 캐싱
Recharts	2	차트·데이터 시각화
Tailwind CSS	v4	스타일링
Shadcn/ui (Radix UI)	—	UI 컴포넌트
MUI (Material UI)	v7	추가 UI 컴포넌트
Framer Motion	v12	애니메이션
next-themes	—	다크/라이트 모드
Sonner	v2	Toast 알림
Lucide React	0.487	아이콘
react-kakao-maps-sdk	v1.2.1	지도
date-fns	v3	날짜 처리

Backend (Spring Boot, 별도 레포)

• Spring Boot 3 — REST API + SSE 서버 (배포 주소는 .env.local의 VITE_API_BASE로 설정)
• PostgreSQL — 스케줄·통계 영구 저장
• MQTT — IoT 디바이스 실시간 텔레메트리 수신
• AI 스케줄링 서버 — SAC 강화학습 모델 (Qwen LLM 탑재)

외부 API

• 카카오맵 API — 충전소 지도 시각화
• 기상청 KMA API — 실시간 기상·단기 예보

---

실행 방법

요구사항

• Node.js 18 이상
• (선택) Spring Boot 백엔드 서버 접근 가능한 환경

설치 및 실행

# 의존성 설치
npm install

# 개발 서버 실행 (백엔드 프록시 자동 설정)
npm run dev

브라우저에서 http://localhost:5173 접속

빌드

npm run build

---

카카오맵 API 키 설정

.env.local 의 VITE_KAKAO_MAP_KEY 에 발급받은 JavaScript 키를 넣으면 index.html 의 appkey 로 자동 주입됩니다.

1. Kakao Developers 접속
2. 앱 생성 후 JavaScript 키 복사
3. 플랫폼 > Web에 http://localhost:5173 등록

---

백엔드 프록시 구성

vite.config.ts에서 아래 경로를 자동으로 http://localhost:8080으로 프록시합니다.

경로	대상
/api/*	Spring Boot REST API
/sse/*	SSE 스트림
/schedule/*	스케줄 관련 엔드포인트
/ai/*	AI 서버 연동 엔드포인트
/asos/*	기상청 ASOS API CORS 우회
/kma/*	기상청 apihub CORS 우회

---

페이지 구조

/ (DashboardLayout)
├── /           Dashboard          — 통합 관제 대시보드
├── /map        MapView            — 충전소 지도
├── /energy     EnergyMonitoring   — 에너지 모니터링
├── /ai         AIOptimization     — AI 스케줄 분석
├── /statistics Statistics         — 통계 및 리포트
└── /admin      AdminConsole       — 관리자 콘솔

전역 위젯 (모든 페이지)
├── ChatbotWidget      — DGX LLM 기반 AI 챗봇 (우하단 플로팅)
└── LlmSummaryWidget   — LLM 스케줄 요약 (우하단 플로팅)

---

주요 기능 요약

기능	구현 상태	데이터 소스
실시간 KPI 모니터링	완료	SSE
실시간 충전소 상태 테이블	완료	SSE
카카오맵 충전소 지도	완료	SSE + 하드코딩
기상 현황 + 예보 슬라이더	완료	기상청 API
AI 스케줄 현황 및 차트	완료	DB + SSE
에너지 분석 (태양광 예측/실제)	완료	SSE + DB + 기상청
AI 의사결정 분포	완료	DB
P2P 전력 융통 분석	완료	DB
누적 비용 절감 추이	완료	DB
일별 통계 + CSV 리포트	완료	DB
AI 챗봇 (DGX LLM)	완료	/api/chat/message
LLM 스케줄 자동 요약	완료	SSE schedule 이벤트
MQTT 긴급 정지 / 재시작	완료	REST /api/control/command
AI 스케줄 즉시 실행	완료	REST /ai/request
AI 자동 제어 ON/OFF	UI만 완료	백엔드 API 미연결

---

컴포넌트 구조

src/
├── main.tsx
└── app/
    ├── App.tsx                    — 테마 프로바이더, 라우터
    ├── routes.tsx                 — 라우트 정의
    ├── pages/
    │   ├── Dashboard.tsx
    │   ├── MapView.tsx
    │   ├── EnergyMonitoring.tsx
    │   ├── AIOptimization.tsx
    │   ├── Statistics.tsx
    │   ├── AdminConsole.tsx
    │   └── NotFound.tsx
    ├── components/
    │   ├── DashboardLayout.tsx    — 사이드바 레이아웃
    │   ├── ChatbotWidget.tsx      — AI 챗봇 플로팅 위젯
    │   ├── LlmSummaryWidget.tsx   — LLM 스케줄 요약 위젯
    │   └── ui/                    — Shadcn/ui 컴포넌트
    └── services/
        ├── api.ts                 — REST / SSE / 챗봇 API
        ├── weatherApi.ts          — 기상청 API
        └── mockData.ts            — 목 데이터 생성기

---

데이터 흐름

IoT 디바이스
    │ MQTT
    ▼
Spring Boot 백엔드 (localhost:8080)
    ├── 인메모리 저장 (최신 텔레메트리)
    ├── DB 저장 (hourly_snapshot, schedule_job 등)
    └── SSE 브로드캐스트 ──→ 프론트엔드
                              ├── 실시간 전력·충전 상태 표시
                              └── TanStack Query 캐시 갱신

AI 스케줄링 서버 (SAC + Qwen LLM)
    │ SAC 모델 추론 결과 + LLM 요약 텍스트
    ▼
Spring Boot /ai/result 콜백
    ├── DB 저장 (schedule_result, hourly_plan 등)
    └── SSE schedule 이벤트 브로드캐스트 ──→ 프론트엔드 즉시 반영
                                              ├── AI 스케줄 차트 갱신
                                              └── LlmSummaryWidget 자동 표시

사용자 챗봇 메시지
    ↓
Spring Boot /api/chat/message
    └── DGX LLM 서버 전달 → 응답 반환

데이터 소스별 상세 분류는 DATA_SOURCES.md 참조.

---

미구현 항목 (백엔드 API 미제공)

기능	현재 상태
AI 자동 제어 ON/OFF	로컬 상태만 (toast 표시)