[Spring Boot + React] 관리자 대시보드 구현 (Recharts + 테이블 정렬/필터)

📌 개요

Spring Boot 백엔드와 React 프론트엔드를 연동하여 관리자 대시보드를 구현한 예제입니다. 주요 기능은 다음과 같습니다.

• KPI 카드 (매출, 주문 수, 신규 회원, 전환율)
• 기간별 지표 차트 (Line / Bar / Area 차트 전환)
• 주문 목록 테이블 (정렬, 필터, 검색, 페이징)
• CSV 다운로드

백엔드와 연동되지 않았을 경우에도 더미 데이터로 정상 동작하도록 작성되었습니다.

⚙️ 기술 스택

• Backend: Spring Boot (API 엔드포인트 제공)
• Frontend: React (Vite + TypeScript)
• UI/Chart: Recharts, 기본 CSS 스타일

🗂️ 프로젝트 구조 (Frontend)

src/
├─ App.tsx               # 라우팅 설정
├─ main.tsx              # React 엔트리
└─ pages/
   └─ admin/
      └─ AdminDashboard.tsx  # 관리자 대시보드 컴포넌트

📊 주요 기능

1. KPI 카드

• 매출, 주문 수, 신규 회원, 전환율을 카드 형태로 표시
• 최근 기간(기본: 30일) 데이터 집계

2. 차트 (Recharts)

• LineChart / BarChart / AreaChart 전환 버튼 제공
• 지표: 매출, 주문 수, 신규 회원
• ResponsiveContainer로 반응형 지원

3. 주문 테이블

• 상태 필터(PENDING/PAID/CANCELLED/REFUNDED)
• 주문번호/사용자 검색
• 컬럼 정렬 (클릭 시 오름차순/내림차순 전환)
• 페이지네이션 (이전/다음/처음/마지막)
• 페이지 크기 변경 (10/20/50/100)
• CSV 다운로드

🛠️ 실행 방법

1) 프론트엔드 실행

npm install
npm run dev

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

2) 백엔드 API 연동

Spring Boot에서 다음 엔드포인트를 구현하면 실데이터 기반으로 동작합니다.

• GET /api/admin/kpis?from=YYYY-MM-DD&to=YYYY-MM-DD
• GET /api/admin/metrics?from=YYYY-MM-DD&to=YYYY-MM-DD
• GET /api/admin/orders?from=...&to=...&page=0&size=10&sortBy=createdAt&sortDir=desc&status=&q=

백엔드 미연동 시에는 더미 데이터가 자동 생성되어 화면이 정상 출력됩니다.

📌 마무리

이번 작업으로 관리자 대시보드의 기본 뼈대를 완성했습니다.
실제 운영에서는 백엔드 API를 연결하고, 인증/권한 관리, 추가 통계 기능 등을 확장할 수 있습니다.

✅ 참고

• Git : https://github.com/sanghwa90J/frontend.git