HeuJung
6c63536f81
번들 확장 20개 전부에 AGENTS.md · README.md · docs/ 를 채우고, 코어가 들고 있던 확장 소유 문서 두 갈래를 그 확장으로 옮긴다. 번들 템플릿의 컴포넌트· 핸들러·레이아웃 상세와 확장이 구독하는 활동 로그 훅 목록이 그 대상이며, 코어에는 총계와 링크만 남아 확장이 기능을 늘릴 때 코어 문서를 고쳐야 하던 역방향 의존이 사라진다. 전수 완비를 확인하고 강제를 조인다 — 문서 동반 룰을 대상 목록 없는 error 로 승격하고, 검사 스크립트가 문서 미보유를 실패로 올리며, 미채움 마커 baseline 을 0 으로 기록한다. 한쪽만 조이면 "새 확장이 문서 없이 들어와도 초록" 인 상태가 남는데 그 결과는 이상 0건과 구분되지 않는다. 집필 과정에서 드러난 생성기 결함 셋을 함께 고친다. 스케줄 주기 열이 계약 키를 읽지 않아 모든 확장에서 '-' 였고, 네임스페이스를 붙인 핸들러 등록 키가 수집에서 통째로 빠졌으며, README 골격이 폐기된 히어로 배지를 계속 찍어내고 있었다. 셋 다 산출물이 아니라 원천이 틀린 것이라, 가드의 모집단에 생성기 출력 자체를 넣어 다음 확장이 같은 상태로 태어나는 경로를 막는다.
7.3 KiB
7.3 KiB
그누보드7 프론트엔드 개발 가이드
이 문서는 그누보드7의 프론트엔드 및 템플릿 시스템 개발 규칙의 인덱스입니다.
핵심 원칙
필수: 기본 컴포넌트 사용 (HTML 태그 직접 사용 금지)
필수: 기본 컴포넌트만 사용 (Div, Button, H2 등)
✅ 필수: 집합 컴포넌트 재사용 우선
✅ 필수: 다크 모드 light/dark variant 함께 지정
템플릿 시스템 개요
그누보드7 템플릿 엔진은 JSON 기반 레이아웃 정의를 통해 화면을 동적으로 생성하는 시스템입니다.
핵심 특징:
- JSON 기반 레이아웃 정의 (코드 수정 없이 UI 변경)
- 컴포넌트 기반 아키텍처 (재사용성)
- 동적 데이터 바인딩 (API 자동 연결)
- 자동 발견 메커니즘 (
/templates디렉토리 스캔) - 코어 렌더링 엔진과 템플릿 컴포넌트 분리
템플릿 타입:
| 타입 | 레이아웃 편집 | 버전 히스토리 | 용도 |
|---|---|---|---|
| admin | ❌ 불가 | ❌ 미사용 | 관리자 인터페이스 |
| user | ✅ 가능 | ✅ 자동 생성 | 사용자 웹사이트 |
컴포넌트 개발
| 문서 | 설명 |
|---|---|
| component-props-composite.md | 컴포넌트 Props 레퍼런스 - Composite |
| component-props.md | 컴포넌트 Props 레퍼런스 |
| components-advanced.md | 컴포넌트 고급 기능 |
| components-patterns.md | 컴포넌트 패턴 및 다국어 |
| components-types.md | 컴포넌트 타입별 개발 규칙 |
| components.md | 컴포넌트 개발 규칙 |
| layout-json-components-loading.md | 레이아웃 JSON - 데이터 로딩 및 생명주기 |
| layout-json-components-rendering.md | 레이아웃 JSON - 조건부/반복 렌더링 |
| layout-json-components-slots.md | 레이아웃 JSON - 슬롯 시스템 |
| layout-json-components.md | 레이아웃 JSON - 컴포넌트 (반복 렌더링, Blur, 생명주기, 슬롯) |
레이아웃 및 데이터
스타일링 및 UI
| 문서 | 설명 |
|---|---|
| dark-mode.md | 다크 모드 지원 (engine-v1.1.0+) |
| responsive-layout.md | 반응형 레이아웃 개발 (engine-v1.1.0+) |
| tailwind-safelist.md | Tailwind Safelist 가이드 |
템플릿 개발
| 문서 | 설명 |
|---|---|
| editors.md | 에디터 컴포넌트 가이드 |
| template-development.md | 템플릿 개발 가이드라인 |
| template-handlers.md | 템플릿 전용 핸들러 |
테스트
| 문서 | 설명 |
|---|---|
| layout-testing.md | 그누보드7 레이아웃 파일 렌더링 테스트 가이드 |
인증 및 보안
| 문서 | 설명 |
|---|---|
| auth-system.md | 인증 시스템 (AuthManager) |
| modal-usage.md | Modal 컴포넌트 사용 가이드 |
| security.md | 보안 및 검증 |
기타
| 문서 | 설명 |
|---|---|
| identity-guard-interceptor.md | IdentityGuardInterceptor — 코어 본인인증 인터셉터 레퍼런스 |
| identity-verification-ui.md | 본인인증(IDV) 공통 UI 가이드 |
컴포넌트 타입 요약
| 타입 | 설명 | 예시 |
|---|---|---|
| basic | HTML 태그 래핑 | Button, Input, Div, Icon |
| composite | 기본 컴포넌트 조합 | Card, Modal, PageHeader, DataGrid |
| layout | 자식 요소 배치 | Container, Grid, Flex |
데이터 바인딩 문법 (빠른 참조)
{
"props": {
"title": "{{user.name}}", // API 데이터
"userId": "{{route.id}}", // URL 파라미터
"label": "$t:dashboard.title", // 다국어
"total": "{{users?.data?.total ?? 0}}" // Optional Chaining + Nullish Coalescing
}
}
다크 모드 색상 매핑 (빠른 참조)
배경: bg-white dark:bg-gray-800
테두리: border-gray-200 dark:border-gray-700
텍스트: text-gray-900 dark:text-white
강조: bg-green-50 dark:bg-green-900/20
관련 문서
- AGENTS.md - 그누보드7 개발 가이드 (메인)
- backend/ - 백엔드 개발 규칙
- database-guide.md - 데이터베이스 규칙
- testing-guide.md - 테스트 규칙