프로젝트 소개
Antdv Next Admin이란
Antdv Next Admin은 Vue 3 + TypeScript + Ant Design Vue를 기반으로 구축된 최신 관리 시스템 스캐폴드입니다. 바로 사용 가능한 엔터프라이즈급 백오피스 솔루션을 제공하며, 개발자가 기능적이고 뛰어난 사용자 경험을 가진 관리 시스템을 신속하게 구축할 수 있도록 지원합니다.
핵심 기능
최신 기술 스택
- Vue 3.4 — Composition API +
<script setup>문법 사용 - TypeScript 5 — 엄격한 타입 검사, 완전한 타입 정의
- Vite 5 — 초고속 개발 서버 및 빌드 도구
- Pinia — 차세대 상태 관리(Setup Store 문법)
- Vue Router 4 — 동적 라우팅, 권한 필터링 지원
권한 관리
완전한 RBAC(역할 기반 접근 제어) 권한 시스템:
- 라우트 레벨 권한 — 사용자 역할에 따라 접근 가능한 라우트를 동적으로 생성
- 버튼 레벨 권한 —
v-permission디렉티브로 버튼 표시 제어 - 프로그래밍 방식 권한 —
usePermission()컴포저블 함수로 로직 내에서 검증 - 컴포넌트 권한 —
<PermissionButton>컴포넌트로 래핑
Pro 컴포넌트
효율적인 설정 기반 컴포넌트:
| 컴포넌트 | 설명 |
|---|---|
| ProTable | 고급 테이블, 검색 폼, 툴바, 페이지네이션, 컬럼 타입 렌더링, 컬럼 필터링, 컬럼 드래그 조정 지원 |
| ProForm | 고급 폼, 20+ 필드 타입, 그리드 레이아웃, 폼 검증, 동적 옵션 지원 |
| ProModal | 고급 모달, 드래그 이동, 엣지 리사이즈, 전체 화면 전환 지원 |
테마 시스템
- 6가지 프리셋 테마 컬러: 블루(기본), 그린, 퍼플, 레드, 오렌지, 시안
- 라이트 / 다크 / 시스템 따라가기 3가지 모드
- 사이드바 독립 라이트·다크 테마
- 100+ CSS 디자인 변수
국제화
- 중국어와 영어 내장
- 런타임 동적 전환 지원
- vue-i18n 기반, 새로운 언어 확장 용이
기타 기능
- 멀티 탭 시스템(KeepAlive 캐시, 우클릭 메뉴, 고정 탭 지원)
- 수직 / 수평 2가지 레이아웃 모드
- 모바일 반응형 적응
- Mock 데이터 시스템(faker.js 기반)
- 전역 키보드 빠른 검색(
Ctrl+K) - 리치 텍스트 에디터(TipTap)
- ECharts 차트 통합
기술 스택
| 기술 | 버전 | 설명 |
|---|---|---|
| Vue | 3.4 | 프로그레시브 JavaScript 프레임워크 |
| TypeScript | 5 | JavaScript 슈퍼셋, 정적 타입 |
| Vite | 5 | 차세대 빌드 도구 |
| Pinia | 2 | Vue 상태 관리 |
| Vue Router | 4 | Vue 공식 라우터 |
| vue-i18n | 11 | 국제화 플러그인 |
| antdv-next | 1.x | Ant Design Vue 컴포넌트 라이브러리 |
| Axios | 1.6 | HTTP 요청 라이브러리 |
| ECharts | 5 | 데이터 시각화 차트 |
| TipTap | 3 | 리치 텍스트 에디터 |
브라우저 호환성
모든 최신 브라우저 지원, IE는 미지원.
| 브라우저 | 버전 |
|---|---|
| Chrome | >= 87 |
| Firefox | >= 78 |
| Safari | >= 14 |
| Edge | >= 88 |
데모 계정
| 계정 | 비밀번호 | 설명 |
|---|---|---|
admin | 123456 | 관리자, 전체 권한 보유 |
user | 123456 | 일반 사용자, 제한된 권한 |