369 lines
11 KiB
Markdown
369 lines
11 KiB
Markdown
# sirsoft-admin_basic 레이아웃
|
|
|
|
> **템플릿 식별자**: `sirsoft-admin_basic` (type: admin)
|
|
> **관련 문서**: [컴포넌트](./components.md) | [핸들러](./handlers.md) | [레이아웃 JSON 스키마](../../layout-json.md)
|
|
|
|
---
|
|
|
|
## TL;DR (5초 요약)
|
|
|
|
```text
|
|
1. 베이스: _admin_base.json (사이드바 + 헤더 + 콘텐츠 슬롯)
|
|
2. 코어 페이지 17개: 대시보드, 사용자, 역할, 설정, 확장 관리 등
|
|
3. Partial 70개+: 탭, 모달, 패널, 필터 등
|
|
4. 에러 페이지 6개: 401, 403, 404, 500, 503, maintenance
|
|
5. 패턴: 목록(DataGrid+Pagination), 상세(Card), 폼(Form+FormField), 설정(Tab)
|
|
```
|
|
|
|
---
|
|
|
|
## 목차
|
|
|
|
1. [페이지 맵 (트리 구조)](#페이지-맵-트리-구조)
|
|
2. [카테고리별 가이드](#카테고리별-가이드)
|
|
- [목록 페이지 패턴](#목록-페이지-패턴)
|
|
- [상세 페이지 패턴](#상세-페이지-패턴)
|
|
- [폼 페이지 패턴](#폼-페이지-패턴)
|
|
- [설정 페이지 패턴](#설정-페이지-패턴)
|
|
- [확장 관리 패턴](#확장-관리-패턴)
|
|
- [에러 페이지 패턴](#에러-페이지-패턴)
|
|
|
|
---
|
|
|
|
## 페이지 맵 (트리 구조)
|
|
|
|
```text
|
|
_admin_base.json (베이스 레이아웃)
|
|
│
|
|
├── admin_dashboard.json (대시보드)
|
|
├── admin_login.json (로그인 — _admin_base 미상속)
|
|
│
|
|
├── 사용자 관리
|
|
│ ├── admin_user_list.json (목록)
|
|
│ ├── admin_user_form.json (생성/수정)
|
|
│ └── admin_user_detail.json (상세)
|
|
│
|
|
├── 역할 관리
|
|
│ ├── admin_role_list.json (목록)
|
|
│ │ └── partials/admin_role_list/_modal_delete.json
|
|
│ └── admin_role_form.json (생성/수정)
|
|
│
|
|
├── 메뉴 관리
|
|
│ └── admin_menu_list.json (3패널 레이아웃)
|
|
│ └── partials/admin_menu_list/
|
|
│ ├── _panel_menu_list.json (좌측: 메뉴 트리)
|
|
│ ├── _panel_form.json (중앙: 편집 폼)
|
|
│ ├── _panel_detail.json (중앙: 상세 보기)
|
|
│ ├── _panel_view.json (우측: 미리보기)
|
|
│ └── _modal_delete.json
|
|
│
|
|
├── 환경 설정
|
|
│ └── admin_settings.json (탭 네비게이션)
|
|
│ └── partials/admin_settings/
|
|
│ ├── _tab_general.json (일반)
|
|
│ ├── _tab_mail.json (메일 발송 SMTP 설정)
|
|
│ ├── _tab_notification_definitions.json (알림 정의)
|
|
│ ├── _tab_security.json (보안)
|
|
│ ├── _tab_upload.json (업로드)
|
|
│ ├── _tab_drivers.json (드라이버)
|
|
│ ├── _tab_seo.json (SEO)
|
|
│ ├── _tab_advanced.json (고급)
|
|
│ ├── _tab_info.json (시스템 정보)
|
|
│ ├── _modal_cache_delete.json
|
|
│ ├── _modal_core_changelog.json
|
|
│ ├── _modal_core_update_guide.json
|
|
│ ├── _modal_core_update_result.json
|
|
│ ├── _modal_notification_template_form.json
|
|
│ ├── _modal_notification_template_preview.json
|
|
│ └── _modal_password_confirm.json
|
|
│
|
|
├── 모듈 관리
|
|
│ └── admin_module_list.json
|
|
│ └── partials/admin_module_list/
|
|
│ ├── _modal_detail.json
|
|
│ ├── _modal_install.json
|
|
│ ├── _modal_manual_install.json
|
|
│ ├── _modal_uninstall.json
|
|
│ ├── _modal_update.json
|
|
│ ├── _modal_deactivate_warning.json
|
|
│ ├── _modal_force_activate.json
|
|
│ ├── _modal_force_deactivate.json
|
|
│ ├── _modal_extension_license.json
|
|
│ └── _modal_refresh_layouts.json
|
|
│
|
|
├── 플러그인 관리
|
|
│ └── admin_plugin_list.json
|
|
│ └── partials/admin_plugin_list/
|
|
│ ├── (모듈과 동일 구조 — 10개 모달)
|
|
│ └── ...
|
|
│
|
|
├── 템플릿 관리
|
|
│ ├── admin_template_list.json
|
|
│ │ └── partials/admin_template_list/
|
|
│ │ ├── _tab_admin.json (Admin 템플릿 탭)
|
|
│ │ ├── _tab_user.json (User 템플릿 탭)
|
|
│ │ ├── _modal_detail.json
|
|
│ │ ├── _modal_install.json
|
|
│ │ ├── _modal_manual_install.json
|
|
│ │ ├── _modal_uninstall.json
|
|
│ │ ├── _modal_update.json
|
|
│ │ ├── _modal_activate.json
|
|
│ │ ├── _modal_deactivate.json
|
|
│ │ ├── _modal_force_activate.json
|
|
│ │ ├── _modal_extension_license.json
|
|
│ │ └── _modal_refresh_layouts.json
|
|
│ └── admin_template_layout_edit.json (레이아웃 편집기)
|
|
│ └── partials/admin_template_layout_edit/_modal_version_history.json
|
|
│
|
|
├── 스케줄 관리
|
|
│ └── admin_schedule_list.json
|
|
│ └── partials/admin_schedule_list/
|
|
│ ├── _tab_schedules.json
|
|
│ ├── _modal_form.json
|
|
│ ├── _modal_delete.json
|
|
│ ├── _modal_duplicate.json
|
|
│ ├── _modal_history.json
|
|
│ └── _modal_run.json
|
|
│
|
|
├── 메일 발송 로그
|
|
│ └── admin_mail_send_log_list.json
|
|
│ └── partials/admin_mail_send_log_list/
|
|
│ ├── _partial_datagrid.json
|
|
│ └── _partial_filter.json
|
|
│
|
|
├── 공통 Partial
|
|
│ ├── partials/_modal_changelog.json
|
|
│ └── partials/_modal_license.json
|
|
│
|
|
├── 에러 페이지
|
|
│ └── errors/
|
|
│ ├── 401.json (인증 필요)
|
|
│ ├── 403.json (접근 거부)
|
|
│ ├── 404.json (페이지 없음)
|
|
│ ├── 500.json (서버 오류)
|
|
│ ├── 503.json (서비스 불가)
|
|
│ └── maintenance.json (점검 중)
|
|
│
|
|
├── 오버라이드
|
|
│ └── overrides/sirsoft-sample/index.json
|
|
│
|
|
└── 테스트
|
|
└── template_partial_test.json
|
|
└── partials/template_partial_test/
|
|
├── _content_section.json
|
|
├── _header_section.json
|
|
└── _info_card.json
|
|
```
|
|
|
|
---
|
|
|
|
## 카테고리별 가이드
|
|
|
|
### 목록 페이지 패턴
|
|
|
|
**대표**: `admin_user_list.json`, `admin_role_list.json`
|
|
|
|
**구성**:
|
|
```text
|
|
extends: _admin_base
|
|
slots.content:
|
|
└── PageHeader (제목, 액션 버튼)
|
|
└── FilterGroup (선택적)
|
|
└── DataGrid (columns, data, pagination)
|
|
└── Pagination
|
|
```
|
|
|
|
**data_sources**:
|
|
```json
|
|
{
|
|
"id": "users",
|
|
"endpoint": "/api/admin/users",
|
|
"method": "GET",
|
|
"auto_fetch": true,
|
|
"params": { "page": "{{_local.page ?? 1}}", "per_page": "{{_local.per_page ?? 15}}" }
|
|
}
|
|
```
|
|
|
|
**핸들러 패턴**:
|
|
- `apiCall` — 삭제, 상태 변경
|
|
- `navigate` — 상세/수정 페이지 이동
|
|
- `setState` — 필터, 페이지네이션 상태
|
|
|
|
**Partial 구조**: 모달 (삭제 확인, 상세 보기 등)
|
|
|
|
---
|
|
|
|
### 상세 페이지 패턴
|
|
|
|
**대표**: `admin_user_detail.json`
|
|
|
|
**구성**:
|
|
```text
|
|
extends: _admin_base
|
|
data_sources: [상세 API (route.id 기반)]
|
|
slots.content:
|
|
└── PageHeader
|
|
└── Card (기본 정보 섹션)
|
|
└── Card (활동 내역 섹션)
|
|
└── Card (권한 정보 섹션)
|
|
```
|
|
|
|
**data_sources**:
|
|
```json
|
|
{
|
|
"id": "user",
|
|
"endpoint": "/api/admin/users/{{route.id}}",
|
|
"method": "GET",
|
|
"auto_fetch": true
|
|
}
|
|
```
|
|
|
|
**핸들러 패턴**:
|
|
- `apiCall` — 상태 변경 (활성화/비활성화, 역할 변경)
|
|
- `navigate` — 목록으로 이동, 수정 페이지 이동
|
|
|
|
---
|
|
|
|
### 폼 페이지 패턴
|
|
|
|
**대표**: `admin_user_form.json`, `admin_role_form.json`
|
|
|
|
**구성**:
|
|
```text
|
|
extends: _admin_base
|
|
data_sources: [상세 API (수정 시), 참조 데이터 (Select 옵션)]
|
|
slots.content:
|
|
└── PageHeader
|
|
└── Form
|
|
├── FormField + Input (텍스트)
|
|
├── FormField + Select (선택)
|
|
├── FormField + Toggle (토글)
|
|
└── Button (저장/취소)
|
|
```
|
|
|
|
**핸들러 패턴**:
|
|
- `apiCall` — 생성 (POST) / 수정 (PUT)
|
|
- `navigate` — 성공 후 목록/상세로 이동
|
|
|
|
**주의사항**:
|
|
```text
|
|
✅ Form 내 Button에 type="button" 명시 (submit 방지)
|
|
✅ 수정 폼은 route.id 존재 여부로 생성/수정 구분
|
|
✅ FormField에 error prop으로 서버 검증 에러 표시
|
|
```
|
|
|
|
---
|
|
|
|
### 설정 페이지 패턴
|
|
|
|
**대표**: `admin_settings.json`
|
|
|
|
**구성**:
|
|
```text
|
|
extends: _admin_base
|
|
data_sources: [설정 API]
|
|
slots.content:
|
|
└── PageHeader
|
|
└── TabNavigation (tabs)
|
|
└── Div (탭별 partial 조건부 렌더링)
|
|
├── if: activeTab === 'general' → partial: _tab_general.json
|
|
├── if: activeTab === 'mail' → partial: _tab_mail.json
|
|
├── if: activeTab === 'security' → partial: _tab_security.json
|
|
└── ...
|
|
```
|
|
|
|
**Partial 구조**: `partials/admin_settings/_tab_*.json` (9개 탭)
|
|
|
|
**핸들러 패턴**:
|
|
- `setState` — 탭 전환
|
|
- `apiCall` — 설정 저장
|
|
- `openModal` — 확인 다이얼로그
|
|
|
|
---
|
|
|
|
### 확장 관리 패턴
|
|
|
|
**대표**: `admin_module_list.json`, `admin_plugin_list.json`, `admin_template_list.json`
|
|
|
|
**구성**:
|
|
```text
|
|
extends: _admin_base
|
|
data_sources: [확장 목록 API]
|
|
slots.content:
|
|
└── PageHeader (새로고침, 수동 설치 버튼)
|
|
└── DataGrid/CardGrid (확장 목록)
|
|
├── StatusBadge (상태)
|
|
├── ActionMenu (설치/활성화/비활성화/삭제/업데이트)
|
|
└── ExtensionBadge (모듈 식별)
|
|
modals:
|
|
├── _modal_detail.json (상세 정보)
|
|
├── _modal_install.json (설치 확인)
|
|
├── _modal_uninstall.json (삭제 확인)
|
|
├── _modal_update.json (업데이트)
|
|
└── _modal_force_activate.json 등
|
|
```
|
|
|
|
**핸들러 패턴**:
|
|
- `apiCall` — 설치, 활성화, 비활성화, 삭제, 업데이트
|
|
- `openModal` — 확인 다이얼로그
|
|
- `setState` — 선택된 확장 정보 저장
|
|
|
|
**특수사항**:
|
|
- 템플릿 관리는 Admin/User 탭 분리 (`_tab_admin.json`, `_tab_user.json`)
|
|
- 레이아웃 편집기 (`admin_template_layout_edit.json`)는 CodeEditor + 실시간 미리보기
|
|
|
|
---
|
|
|
|
### 에러 페이지 패턴
|
|
|
|
**대표**: `errors/404.json`
|
|
|
|
**구성**:
|
|
```text
|
|
(extends 없음 — 독립 레이아웃)
|
|
components:
|
|
└── Div (전체 화면 중앙 정렬)
|
|
├── Icon (에러 아이콘)
|
|
├── H1 (에러 코드)
|
|
├── P (에러 메시지)
|
|
└── Button (홈으로 이동)
|
|
```
|
|
|
|
**핸들러 패턴**:
|
|
- `navigate` — 대시보드/홈으로 이동
|
|
|
|
---
|
|
|
|
## 베이스 레이아웃 구조
|
|
|
|
### _admin_base.json
|
|
|
|
모든 관리자 페이지의 공통 구조를 정의합니다.
|
|
|
|
```text
|
|
_admin_base.json
|
|
├── init_actions: [initTheme, initMenuFromUrl]
|
|
├── data_sources: [admin_menu, notifications]
|
|
├── components:
|
|
│ ├── AdminSidebar (menu: admin_menu.data)
|
|
│ ├── AdminHeader (user, notifications)
|
|
│ ├── Toast
|
|
│ ├── PageTransitionIndicator
|
|
│ └── Div (content area)
|
|
│ └── slot: "content" (← 하위 레이아웃이 채움)
|
|
└── AdminFooter
|
|
```
|
|
|
|
**슬롯**:
|
|
- `content` — 각 페이지의 메인 콘텐츠가 삽입되는 위치
|
|
|
|
---
|
|
|
|
## 관련 문서
|
|
|
|
- [sirsoft-admin_basic 컴포넌트](./components.md)
|
|
- [sirsoft-admin_basic 핸들러](./handlers.md)
|
|
- [레이아웃 JSON 스키마](../../layout-json.md)
|
|
- [레이아웃 상속](../../layout-json-inheritance.md)
|
|
- [sirsoft-basic 레이아웃](../sirsoft-basic/layouts.md)
|