문서화
This commit is contained in:
304
README.md
304
README.md
@@ -1,100 +1,31 @@
|
||||
# CoreUI Free React Admin Template [](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%React%204%20Admin%20Template%20&url=https://coreui.io&hashtags=bootstrap,admin,template,dashboard,panel,free,angular,react,vue)
|
||||
# sample.admin.react
|
||||
|
||||
[](https://opensource.org/licenses/MIT)
|
||||
[](https://github.com/coreui/coreui)
|
||||
[![npm package][npm-coreui-badge]][npm-coreui]
|
||||
[![NPM downloads][npm-coreui-download]][npm-coreui]
|
||||
[](https://github.com/coreui/react)
|
||||
[![npm package][npm-coreui-react-badge]][npm-coreui-react]
|
||||
[![NPM downloads][npm-coreui-react-download]][npm-coreui-react]
|
||||
신규 프로젝트 초기 구성 참고용 Sample Admin React
|
||||
|
||||
[npm-coreui]: https://www.npmjs.com/package/@coreui/coreui
|
||||
[npm-coreui-badge]: https://img.shields.io/npm/v/@coreui/coreui.png?style=flat-square
|
||||
[npm-coreui-download]: https://img.shields.io/npm/dm/@coreui/coreui.svg?style=flat-square
|
||||
[npm-coreui-react]: https://www.npmjs.com/package/@coreui/react
|
||||
[npm-coreui-react-badge]: https://img.shields.io/npm/v/@coreui/react.png?style=flat-square
|
||||
[npm-coreui-react-download]: https://img.shields.io/npm/dm/@coreui/react.svg?style=flat-square
|
||||
[npm]: https://www.npmjs.com/package/@coreui/react
|
||||
## Tech Stack
|
||||
- Typescript
|
||||
- CoreUI Free React Admin Template
|
||||
|
||||
[](https://coreui.io/product/free-react-admin-template/)
|
||||
|
||||
CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all!
|
||||
## Build/Run
|
||||
|
||||
## Table of Contents
|
||||
|
||||
* [Versions](#versions)
|
||||
* [CoreUI PRO](#coreui-pro)
|
||||
* [CoreUI PRO React Admin Templates](#coreui-pro-react-admin-templates)
|
||||
* [Quick Start](#quick-start)
|
||||
* [Installation](#installation)
|
||||
* [Basic usage](#basic-usage)
|
||||
* [What's included](#whats-included)
|
||||
* [Documentation](#documentation)
|
||||
* [Components](#components)
|
||||
* [Versioning](#versioning)
|
||||
* [Creators](#creators)
|
||||
* [Community](#community)
|
||||
* [Support CoreUI Development](#support-coreui-development)
|
||||
* [Copyright and License](#copyright-and-license)
|
||||
|
||||
## Versions
|
||||
|
||||
* [CoreUI Free Bootstrap Admin Template](https://github.com/coreui/coreui-free-bootstrap-admin-template)
|
||||
* [CoreUI Free Angular Admin Template](https://github.com/coreui/coreui-free-angular-admin-template)
|
||||
* [CoreUI Free React.js Admin Template (Vite)](https://github.com/coreui/coreui-free-react-admin-template)
|
||||
* [CoreUI Free React.js Admin Template (Create React App)](https://github.com/coreui/coreui-free-react-admin-template-cra)
|
||||
* [CoreUI Free Vue.js Admin Template](https://github.com/coreui/coreui-free-vue-admin-template)
|
||||
|
||||
## CoreUI PRO
|
||||
|
||||
* 💪 [CoreUI PRO Angular Admin Template](https://coreui.io/product/angular-dashboard-template/)
|
||||
* 💪 [CoreUI PRO Bootstrap Admin Template](https://coreui.io/product/bootstrap-dashboard-template/)
|
||||
* 💪 [CoreUI PRO Next.js Admin Template](https://coreui.io/product/next-js-dashboard-template/)
|
||||
* 💪 [CoreUI PRO React Admin Template](https://coreui.io/product/react-dashboard-template/)
|
||||
* 💪 [CoreUI PRO Vue Admin Template](https://coreui.io/product/vue-dashboard-template/)
|
||||
|
||||
## CoreUI PRO React Admin Templates
|
||||
|
||||
| Default Theme | Light Theme |
|
||||
| --- | --- |
|
||||
| [](https://coreui.io/product/react-dashboard-template/?theme=default) | [](https://coreui.io/product/react-dashboard-template/?theme=light)|
|
||||
|
||||
| Modern Theme | Bright Theme |
|
||||
| --- | --- |
|
||||
| [](https://coreui.io/product/react-dashboard-template/?theme=modern) | [](https://coreui.io/product/react-dashboard-template/?theme=bright)|
|
||||
|
||||
## Quick Start
|
||||
|
||||
- [Download the latest release](https://github.com/coreui/coreui-free-react-admin-template/archive/refs/heads/main.zip)
|
||||
- Clone the repo: `git clone https://github.com/coreui/coreui-free-react-admin-template.git`
|
||||
|
||||
### Installation
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
$ npm install
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
``` bash
|
||||
$ yarn install
|
||||
```
|
||||
|
||||
### Basic usage
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
# dev server with hot reload at http://localhost:3000
|
||||
$ npm start
|
||||
```
|
||||
|
||||
or
|
||||
vite.config.ts 에서 포트 변경 가능함
|
||||
|
||||
``` bash
|
||||
# dev server with hot reload at http://localhost:3000
|
||||
$ yarn start
|
||||
```
|
||||
|
||||
Navigate to [http://localhost:3000](http://localhost:3000). The app will automatically reload if you change any of the source files.
|
||||
vscode 계열 IDE 에서 F5 로 debug 실행 가능
|
||||
|
||||
#### Build
|
||||
|
||||
@@ -105,139 +36,100 @@ Run `build` to build the project. The build artifacts will be stored in the `bui
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```bash
|
||||
# build for production with minification
|
||||
$ yarn build
|
||||
build 결과물 테스트
|
||||
```
|
||||
npx serve -s build
|
||||
```
|
||||
--listen 5000 옵션등으로 포트 지정하지 않으면 3000 포트 사용
|
||||
|
||||
## What's included
|
||||
|
||||
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
|
||||
### local test url
|
||||
- 단독 접속 테스트
|
||||
- http://localhost:3000/
|
||||
- vmware nginx 통해서 frontend + backend 통합 접속
|
||||
- http://192.168.70.101/
|
||||
- vmware nginx 설정 필요
|
||||
|
||||
## 프로젝트 구조
|
||||
|
||||
### 상위구조
|
||||
|
||||
```
|
||||
coreui-free-react-admin-template
|
||||
├── public/ # static files
|
||||
│ ├── favicon.ico
|
||||
│ └── manifest.json
|
||||
│
|
||||
├── src/ # project root
|
||||
│ ├── assets/ # images, icons, etc.
|
||||
│ ├── components/ # common components - header, footer, sidebar, etc.
|
||||
│ ├── layouts/ # layout containers
|
||||
│ ├── scss/ # scss styles
|
||||
│ ├── views/ # application views
|
||||
│ ├── _nav.js # sidebar navigation config
|
||||
│ ├── App.js
|
||||
│ ├── index.js
|
||||
│ ├── routes.js # routes config
|
||||
│ └── store.js # template state example
|
||||
│
|
||||
├── index.html # html template
|
||||
├── ...
|
||||
├── package.json
|
||||
├── ...
|
||||
└── vite.config.mjs # vite config
|
||||
sample.admin.react
|
||||
├─ .vscode : VS Code 설정 경로
|
||||
│ └─ launch.json : 디버그 실행 설정
|
||||
├─ build : 빌드 결과물 경로 (npm run build 실행 시 생성)
|
||||
├─ node_modules : npm 패키지 설치 경로
|
||||
├─ public : 정적 파일 경로 (빌드 시 그대로 복사)
|
||||
│ ├─ favicon.ico : 파비콘 이미지
|
||||
│ └─ manifest.json : PWA 매니페스트 설정
|
||||
├─ src : React 소스 경로
|
||||
├─ .browserslistrc : 지원 브라우저 목록 설정
|
||||
├─ .editorconfig : 에디터 공통 설정 (들여쓰기, 인코딩 등)
|
||||
├─ .gitattributes : Git 파일 속성 설정
|
||||
├─ .gitignore : Git 제외 파일 목록
|
||||
├─ .prettierignore : Prettier 제외 파일 목록
|
||||
├─ .prettierrc.js : Prettier 코드 포맷팅 설정
|
||||
├─ eslint.config.mjs : ESLint 코드 검사 설정
|
||||
├─ index.html : HTML 템플릿 (Vite 진입점)
|
||||
├─ LICENSE : 라이선스 파일
|
||||
├─ package.json : 프로젝트 설정 및 의존성 정의
|
||||
├─ package-lock.json : 의존성 버전 잠금 파일
|
||||
├─ README.md : 프로젝트 설명 문서
|
||||
├─ tsconfig.json : TypeScript 컴파일러 설정
|
||||
└─ vite.config.mjs : Vite 빌드 도구 설정
|
||||
```
|
||||
|
||||
## Documentation
|
||||
### React 소스 구조
|
||||
|
||||
The documentation for the CoreUI Admin Template is hosted at our website [CoreUI for React](https://coreui.io/react/docs/templates/installation/)
|
||||
```
|
||||
src
|
||||
├─ assets : 이미지, 브랜드 로고 등 정적 자원 경로
|
||||
├─ axios : API 통신 관련 설정 경로
|
||||
│ ├─ authService.ts : 인증 관련 API (로그인, 로그아웃, 토큰 관리)
|
||||
│ └─ axios.ts : Axios 인스턴스 및 인터셉터 설정
|
||||
├─ components : 재사용 가능한 공통 컴포넌트 경로
|
||||
│ ├─ header
|
||||
│ │ └─ AppHeaderDropdown.tsx : 헤더 우측 사용자 드롭다운 메뉴
|
||||
│ ├─ AppBreadcrumb.tsx : 브레드크럼 네비게이션 컴포넌트
|
||||
│ ├─ AppContent.tsx : 메인 콘텐츠 영역 (라우트 렌더링)
|
||||
│ ├─ AppFooter.tsx : 하단 푸터 컴포넌트
|
||||
│ ├─ AppHeader.tsx : 상단 헤더 컴포넌트
|
||||
│ ├─ AppSidebar.tsx : 좌측 사이드바 컴포넌트
|
||||
│ ├─ AppSidebarNav.tsx : 사이드바 네비게이션 메뉴 컴포넌트
|
||||
│ └─ index.ts : 컴포넌트 export 모음
|
||||
├─ context : React Context 경로
|
||||
│ └─ AuthContext.tsx : 인증 상태 관리 Context (로그인 상태, 사용자 정보)
|
||||
├─ hooks : 커스텀 훅 경로
|
||||
│ └─ useAuth.ts : 인증 Context 사용을 위한 커스텀 훅
|
||||
├─ layout : 레이아웃 컴포넌트 경로
|
||||
│ └─ DefaultLayout.tsx : 기본 레이아웃 (사이드바 + 헤더 + 콘텐츠 + 푸터)
|
||||
├─ routes : 라우팅 관련 경로
|
||||
│ ├─ ProtectedRoute.tsx : 인증 필요 라우트 보호 컴포넌트
|
||||
│ └─ routes.ts : 라우트 정의 (경로, 컴포넌트 매핑)
|
||||
├─ scss : 스타일시트 경로
|
||||
│ └─ style.scss : 전역 스타일 정의
|
||||
├─ services : 도메인별 API 서비스 경로
|
||||
│ ├─ adminMemberService.ts : 어드민 회원 관리 API
|
||||
│ └─ adminMenuService.ts : 어드민 메뉴 관리 API
|
||||
├─ views : 화면(페이지) 컴포넌트 경로
|
||||
│ ├─ admin : 어드민 관리 화면 경로
|
||||
│ │ ├─ AdminMemberManagement.tsx : 어드민 회원 관리 화면
|
||||
│ │ └─ AdminMenuManagement.tsx : 어드민 메뉴 관리 화면
|
||||
│ ├─ dashboard : 대시보드 화면 경로
|
||||
│ │ └─ Dashboard.tsx : 대시보드 메인 화면
|
||||
│ └─ pages : 인증 외 페이지 경로
|
||||
│ ├─ login
|
||||
│ │ └─ Login.tsx : 로그인 화면
|
||||
│ ├─ register
|
||||
│ │ └─ Register.tsx : 어드민 회원가입 신청 화면
|
||||
│ ├─ page404
|
||||
│ │ └─ Page404.tsx : 404 에러 화면
|
||||
│ └─ page500
|
||||
│ └─ Page500.tsx : 500 에러 화면
|
||||
├─ _nav.tsx : 사이드바 네비게이션 메뉴 정의 (정적 메뉴)
|
||||
├─ App.tsx : 애플리케이션 루트 컴포넌트 (라우터 설정)
|
||||
├─ index.tsx : 애플리케이션 진입점 (ReactDOM 렌더링)
|
||||
└─ store.tsx : Redux 스토어 설정 (사이드바 상태 관리)
|
||||
```
|
||||
|
||||
## Components
|
||||
|
||||
CoreUI React.js Admin Templates are built on top of CoreUI and CoreUI PRO UI components libraries, including all of these components.
|
||||
|
||||
- [React Accordion](https://coreui.io/react/docs/components/accordion/)
|
||||
- [React Alert](https://coreui.io/react/docs/components/alert/)
|
||||
- [React Autocomplete](https://coreui.io/react/docs/forms/autocomplete/) **PRO**
|
||||
- [React Avatar](https://coreui.io/react/docs/components/avatar/)
|
||||
- [React Badge](https://coreui.io/react/docs/components/badge/)
|
||||
- [React Breadcrumb](https://coreui.io/react/docs/components/breadcrumb/)
|
||||
- [React Button](https://coreui.io/react/docs/components/button/)
|
||||
- [React Button Group](https://coreui.io/react/docs/components/button-group/)
|
||||
- [React Callout](https://coreui.io/react/docs/components/callout/)
|
||||
- [React Card](https://coreui.io/react/docs/components/card/)
|
||||
- [React Carousel](https://coreui.io/react/docs/components/carousel/)
|
||||
- [React Checkbox](https://coreui.io/react/docs/forms/checkbox/)
|
||||
- [React Close Button](https://coreui.io/react/docs/components/close-button/)
|
||||
- [React Collapse](https://coreui.io/react/docs/components/collapse/)
|
||||
- [React Date Picker](https://coreui.io/react/docs/forms/date-picker/) **PRO**
|
||||
- [React Date Range Picker](https://coreui.io/react/docs/forms/date-range-picker/) **PRO**
|
||||
- [React Dropdown](https://coreui.io/react/docs/components/dropdown/)
|
||||
- [React Floating Labels](https://coreui.io/react/docs/forms/floating-labels/)
|
||||
- [React Footer](https://coreui.io/react/docs/components/footer/)
|
||||
- [React Header](https://coreui.io/react/docs/components/header/)
|
||||
- [React Image](https://coreui.io/react/docs/components/image/)
|
||||
- [React Input](https://coreui.io/react/docs/forms/input/)
|
||||
- [React Input Group](https://coreui.io/react/docs/forms/input-group/)
|
||||
- [React List Group](https://coreui.io/react/docs/components/list-group/)
|
||||
- [React Loading Button](https://coreui.io/react/docs/components/loading-button/) **PRO**
|
||||
- [React Modal](https://coreui.io/react/docs/components/modal/)
|
||||
- [React Multi Select](https://coreui.io/react/docs/forms/multi-select/) **PRO**
|
||||
- [React Navs & Tabs](https://coreui.io/react/docs/components/navs-tabs/)
|
||||
- [React Navbar](https://coreui.io/react/docs/components/navbar/)
|
||||
- [React Offcanvas](https://coreui.io/react/docs/components/offcanvas/)
|
||||
- [React One Time Password Input](https://coreui.io/react/docs/forms/one-time-password-input/) **PRO**
|
||||
- [React Pagination](https://coreui.io/react/docs/components/pagination/)
|
||||
- [React Password Input](https://coreui.io/react/docs/forms/password-input/) **PRO**
|
||||
- [React Placeholder](https://coreui.io/react/docs/components/placeholder/)
|
||||
- [React Popover](https://coreui.io/react/docs/components/popover/)
|
||||
- [React Progress](https://coreui.io/react/docs/components/progress/)
|
||||
- [React Radio](https://coreui.io/react/docs/forms/radio/)
|
||||
- [React Range](https://coreui.io/react/docs/forms/range/)
|
||||
- [React Range Slider](https://coreui.io/react/docs/forms/range-slider/) **PRO**
|
||||
- [React Rating](https://coreui.io/react/docs/forms/rating/)
|
||||
- [React Select](https://coreui.io/react/docs/forms/select/)
|
||||
- [React Sidebar](https://coreui.io/react/docs/components/sidebar/)
|
||||
- [React Smart Pagination](https://coreui.io/react/docs/components/smart-pagination/) **PRO**
|
||||
- [React Smart Table](https://coreui.io/react/docs/components/smart-table/) **PRO**
|
||||
- [React Spinner](https://coreui.io/react/docs/components/spinner/)
|
||||
- [React Stepper](https://coreui.io/react/docs/forms/stepper/) **PRO**
|
||||
- [React Switch](https://coreui.io/react/docs/forms/switch/)
|
||||
- [React Table](https://coreui.io/react/docs/components/table/)
|
||||
- [React Textarea](https://coreui.io/react/docs/forms/textarea/)
|
||||
- [React Time Picker](https://coreui.io/react/docs/forms/time-picker/) **PRO**
|
||||
- [React Toast](https://coreui.io/react/docs/components/toast/)
|
||||
- [React Tooltip](https://coreui.io/react/docs/components/tooltip/)
|
||||
|
||||
## Versioning
|
||||
|
||||
For transparency into our release cycle and in striving to maintain backward compatibility, CoreUI Free Admin Template is maintained under [the Semantic Versioning guidelines](http://semver.org/).
|
||||
|
||||
See [the Releases section of our project](https://github.com/coreui/coreui-free-react-admin-template/releases) for changelogs for each release version.
|
||||
|
||||
## Creators
|
||||
|
||||
**Łukasz Holeczek**
|
||||
|
||||
* <https://twitter.com/lukaszholeczek>
|
||||
* <https://github.com/mrholek>
|
||||
|
||||
**Andrzej Kopański**
|
||||
|
||||
* <https://github.com/xidedix>
|
||||
|
||||
**CoreUI Team**
|
||||
|
||||
* <https://twitter.com/core_ui>
|
||||
* <https://github.com/coreui>
|
||||
* <https://github.com/orgs/coreui/people>
|
||||
|
||||
## Community
|
||||
|
||||
Get updates on CoreUI's development and chat with the project maintainers and community members.
|
||||
|
||||
- Follow [@core_ui on Twitter](https://twitter.com/core_ui).
|
||||
- Read and subscribe to [CoreUI Blog](https://coreui.ui/blog/).
|
||||
|
||||
## Support CoreUI Development
|
||||
|
||||
CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/?framework=react&src=github-coreui-free-react-admin-template) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/).
|
||||
|
||||
## Copyright and License
|
||||
|
||||
copyright 2025 creativeLabs Łukasz Holeczek.
|
||||
|
||||
Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE).
|
||||
Reference in New Issue
Block a user