Admin Pro Kit — React
관리자 레이아웃, 권한(RBAC), 메뉴, 데이터 테이블을 갖춘 관리자 화면 키트. 내 API에 연결하면 바로 운영 화면이 됩니다.
ReactTypeScriptReact RouterNext.js
주요 기능
- 권한에 따라 걸러지는 사이드 메뉴·버튼·페이지
- 와일드카드·거부 규칙을 지원하는 RBAC
- 정렬·검색·필터·페이지·선택을 갖춘 데이터 테이블
- 테이블 상태 주소 저장(새로고침·링크 공유 유지)
- REST 데이터 소스(세션 쿠키 포함)
- 다크 모드·모바일 메뉴·접근성 기본 지원
무엇을 해결하나요
관리자 화면을 만들 때마다 반복되는 레이아웃, 권한에 따른 메뉴·버튼 숨김, 목록 화면(정렬·검색·필터·페이지)을 처음부터 만들지 않도록 검증된 뼈대를 제공합니다. 내 API를 연결하면 바로 운영 화면으로 쓸 수 있습니다.
이런 곳에 맞습니다
- React로 자사 서비스의 백오피스·운영 도구를 직접 만드는 팀
- 역할별로 보이는 메뉴와 할 수 있는 작업이 달라야 하는 관리자 화면
포함 구성
- packages/core: 권한 판정(와일드카드·거부), 메뉴 필터·현재 위치 계산, 테이블 쿼리와 URL 동기화, REST/메모리 데이터 소스
- packages/react: AdminLayout, PageHeader, AccessProvider, Can, RequirePermission, DataTable, useUrlTableQuery, 테마용 CSS
- examples/react-vite: React Router 7 예제
- docs: React 연결 가이드
설치 방법
- 압축을 풀고
pnpm install→pnpm dev로 예제 확인 packages/core,packages/react를 프로젝트로 복사(workspace)- 로그인 사용자의 역할을
AccessProvider에 넣고, 메뉴를 정의해AdminLayout으로 감싸기 - 목록 API를
createRestDataSource로 연결해DataTable사용
지원 환경
- React 18 / 19
- React Router 7, Next.js App Router(클라이언트 컴포넌트), TanStack Router 등 라우터 무관
- Node.js 22.13 이상 (개발 환경)
- React 18 이상 프로젝트
- 목록 API가 { rows, total } 형태로 응답(다른 형태는 변환 함수로 연결)
자주 묻는 질문
Tailwind나 다른 UI 라이브러리와 같이 쓸 수 있나요?
키트 스타일은 dt- 접두사와 CSS 변수만 사용해 다른 CSS와 충돌하지 않습니다. 버튼·입력 등은 기존 디자인 시스템 컴포넌트로 바꿔 써도 됩니다.
서버 권한 검사도 들어 있나요?
권한 판정 함수(createAccess)는 프레임워크와 무관해 Node.js 서버에서도 그대로 쓸 수 있습니다. 화면 검사만으로는 안전하지 않으니 API에서도 같은 규칙을 검사하세요.
Vue 버전은 있나요?
React 버전을 먼저 출시하고, 같은 core 패키지를 쓰는 Vue 버전을 이어서 제공합니다.
업데이트 이력
공개된 버전 이력이 아직 없습니다.
환불 정책
환불 및 청약철회
- 다운로드 전: 결제일로부터 7일 안에 전액 환불해 드립니다.
- 다운로드 후: 디지털 콘텐츠의 특성상 청약철회가 제한됩니다(전자상거래법 제17조 제2항 제5호). 주문 단계에서 이 내용을 고지하고 동의를 받습니다.
- 상품 하자: 표시·광고 내용과 다르거나 계약 내용과 다르게 이행된 경우, 공급받은 날부터 3개월 이내 또는 그 사실을 안 날(알 수 있었던 날)부터 30일 이내에 청약철회할 수 있습니다.
- 환불이 완료되면 해당 주문의 라이선스와 다운로드 권한은 즉시 정지됩니다.
- 환불은 입금하신 계좌로 영업일 기준 3일 안에 처리합니다.
초안입니다. 법령·사업자 정보 확인 후 확정합니다.