V2 컴포넌트 규칙 추가 및 기존 컴포넌트 자동 등록 개선: 화면 컴포넌트 개발 가이드에 V2 컴포넌트 사용 규칙을 명시하고, ComponentsPanel에서 수동으로 추가하던 table-list 컴포넌트를 자동 등록으로 변경하여 관리 효율성을 높였습니다. 또한, V2 컴포넌트 목록과 수정/개발 시 규칙을 추가하여 일관된 개발 환경을 조성하였습니다.
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
---
|
||||
description: 화면 컴포넌트 개발 시 필수 가이드 - 엔티티 조인, 폼 데이터, 다국어 지원
|
||||
description: 화면 컴포넌트 개발 시 필수 가이드 - V2 컴포넌트, 엔티티 조인, 폼 데이터, 다국어 지원
|
||||
alwaysApply: false
|
||||
---
|
||||
|
||||
@@ -13,6 +13,7 @@ alwaysApply: false
|
||||
|
||||
## 목차
|
||||
|
||||
0. [V2 컴포넌트 규칙 (최우선)](#0-v2-컴포넌트-규칙-최우선)
|
||||
1. [컴포넌트별 테이블 설정 (핵심 원칙)](#1-컴포넌트별-테이블-설정-핵심-원칙)
|
||||
2. [엔티티 조인 컬럼 활용 (필수)](#2-엔티티-조인-컬럼-활용-필수)
|
||||
3. [폼 데이터 관리](#3-폼-데이터-관리)
|
||||
@@ -22,6 +23,93 @@ alwaysApply: false
|
||||
|
||||
---
|
||||
|
||||
## 0. V2 컴포넌트 규칙 (최우선)
|
||||
|
||||
### 핵심 원칙
|
||||
|
||||
**화면관리 시스템에서는 반드시 V2 컴포넌트만 사용하고 수정합니다.**
|
||||
|
||||
원본 컴포넌트(v2 접두사 없는 것)는 더 이상 사용하지 않으며, 모든 수정/개발은 V2 폴더에서 진행합니다.
|
||||
|
||||
### V2 컴포넌트 목록 (18개)
|
||||
|
||||
| 컴포넌트 ID | 이름 | 경로 |
|
||||
|------------|------|------|
|
||||
| `v2-button-primary` | 기본 버튼 | `v2-button-primary/` |
|
||||
| `v2-text-display` | 텍스트 표시 | `v2-text-display/` |
|
||||
| `v2-divider-line` | 구분선 | `v2-divider-line/` |
|
||||
| `v2-table-list` | 테이블 리스트 | `v2-table-list/` |
|
||||
| `v2-card-display` | 카드 디스플레이 | `v2-card-display/` |
|
||||
| `v2-split-panel-layout` | 분할 패널 | `v2-split-panel-layout/` |
|
||||
| `v2-numbering-rule` | 채번 규칙 | `v2-numbering-rule/` |
|
||||
| `v2-table-search-widget` | 검색 필터 | `v2-table-search-widget/` |
|
||||
| `v2-repeat-screen-modal` | 반복 화면 모달 | `v2-repeat-screen-modal/` |
|
||||
| `v2-section-paper` | 섹션 페이퍼 | `v2-section-paper/` |
|
||||
| `v2-section-card` | 섹션 카드 | `v2-section-card/` |
|
||||
| `v2-tabs-widget` | 탭 위젯 | `v2-tabs-widget/` |
|
||||
| `v2-location-swap-selector` | 출발지/도착지 선택 | `v2-location-swap-selector/` |
|
||||
| `v2-rack-structure` | 렉 구조 | `v2-rack-structure/` |
|
||||
| `v2-unified-repeater` | 통합 리피터 | `v2-unified-repeater/` |
|
||||
| `v2-pivot-grid` | 피벗 그리드 | `v2-pivot-grid/` |
|
||||
| `v2-aggregation-widget` | 집계 위젯 | `v2-aggregation-widget/` |
|
||||
| `v2-repeat-container` | 리피터 컨테이너 | `v2-repeat-container/` |
|
||||
|
||||
### 파일 경로
|
||||
|
||||
```
|
||||
frontend/lib/registry/components/
|
||||
├── v2-button-primary/ ← V2 컴포넌트 (수정 대상)
|
||||
├── v2-table-list/ ← V2 컴포넌트 (수정 대상)
|
||||
├── v2-split-panel-layout/ ← V2 컴포넌트 (수정 대상)
|
||||
├── ...
|
||||
├── button-primary/ ← 원본 (수정 금지)
|
||||
├── table-list/ ← 원본 (수정 금지)
|
||||
├── split-panel-layout/ ← 원본 (수정 금지)
|
||||
└── ...
|
||||
```
|
||||
|
||||
### 수정/개발 시 규칙
|
||||
|
||||
1. **버그 수정**: V2 폴더의 파일만 수정
|
||||
2. **기능 추가**: V2 폴더에만 추가
|
||||
3. **새 컴포넌트 생성**: `v2-` 접두사로 폴더 생성, ID도 `v2-` 접두사 사용
|
||||
4. **원본 폴더는 절대 수정하지 않음**
|
||||
|
||||
### 컴포넌트 등록
|
||||
|
||||
V2 컴포넌트는 `frontend/lib/registry/components/index.ts`에서 등록됩니다:
|
||||
|
||||
```typescript
|
||||
// V2 컴포넌트들 (화면관리 전용)
|
||||
import "./v2-unified-repeater/UnifiedRepeaterRenderer";
|
||||
import "./v2-button-primary/ButtonPrimaryRenderer";
|
||||
import "./v2-split-panel-layout/SplitPanelLayoutRenderer";
|
||||
// ... 기타 v2 컴포넌트들
|
||||
```
|
||||
|
||||
### Definition 네이밍 규칙
|
||||
|
||||
V2 컴포넌트의 Definition은 `V2` 접두사를 사용합니다:
|
||||
|
||||
```typescript
|
||||
// index.ts
|
||||
export const V2TableListDefinition = createComponentDefinition({
|
||||
id: "v2-table-list",
|
||||
name: "테이블 리스트",
|
||||
// ...
|
||||
});
|
||||
|
||||
// Renderer.tsx
|
||||
import { V2TableListDefinition } from "./index";
|
||||
|
||||
export class TableListRenderer extends AutoRegisteringComponentRenderer {
|
||||
static componentDefinition = V2TableListDefinition;
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 1. 컴포넌트별 테이블 설정 (핵심 원칙)
|
||||
|
||||
### 핵심 원칙
|
||||
@@ -949,6 +1037,14 @@ export const MyComponentConfigPanel: React.FC<ConfigPanelProps> = ({
|
||||
|
||||
새 컴포넌트 개발 시 다음 항목을 확인하세요:
|
||||
|
||||
### V2 컴포넌트 규칙 (최우선)
|
||||
|
||||
- [ ] V2 폴더(`v2-*/`)에서 작업 중인지 확인
|
||||
- [ ] 원본 폴더는 수정하지 않음
|
||||
- [ ] 컴포넌트 ID에 `v2-` 접두사 사용
|
||||
- [ ] Definition 이름에 `V2` 접두사 사용 (예: `V2TableListDefinition`)
|
||||
- [ ] Renderer에서 올바른 V2 Definition 참조 확인
|
||||
|
||||
### 컴포넌트별 테이블 설정 (핵심)
|
||||
|
||||
- [ ] 화면 메인 테이블과 다른 테이블을 사용할 수 있는지 확인
|
||||
|
||||
Reference in New Issue
Block a user