V2 컴포넌트 규칙 추가 및 기존 컴포넌트 자동 등록 개선: 화면 컴포넌트 개발 가이드에 V2 컴포넌트 사용 규칙을 명시하고, ComponentsPanel에서 수동으로 추가하던 table-list 컴포넌트를 자동 등록으로 변경하여 관리 효율성을 높였습니다. 또한, V2 컴포넌트 목록과 수정/개발 시 규칙을 추가하여 일관된 개발 환경을 조성하였습니다.

This commit is contained in:
kjs
2026-01-19 14:52:11 +09:00
parent 901cb04a88
commit 338f3c27fd
116 changed files with 48850 additions and 61 deletions

View File

@@ -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 참조 확인
### 컴포넌트별 테이블 설정 (핵심)
- [ ] 화면 메인 테이블과 다른 테이블을 사용할 수 있는지 확인