357 lines
9.6 KiB
Markdown
357 lines
9.6 KiB
Markdown
|
# V2 컴포넌트 마이그레이션 분석 보고서
|
|||
|
|
|
|||
|
|
> 작성일: 2026-01-27
|
|||
|
|
> 목적: 미구현 V1 컴포넌트들의 V2 마이그레이션 가능성 분석
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 1. 현황 요약
|
|||
|
|
|
|||
|
|
| 구분 | 개수 | 비율 |
|
|||
|
|
|------|------|------|
|
|||
|
|
| V1 총 컴포넌트 | 7,170개 | 100% |
|
|||
|
|
| V2 마이그레이션 완료 | 5,212개 | 72.7% |
|
|||
|
|
| **미구현 (분석 대상)** | **~520개** | **7.3%** |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 2. 미구현 컴포넌트 상세 분석
|
|||
|
|
|
|||
|
|
### 2.1 ✅ 통합 가능 (기존 V2 컴포넌트로 대체)
|
|||
|
|
|
|||
|
|
#### 2.1.1 `unified-list` (97개) → `v2-table-list`
|
|||
|
|
|
|||
|
|
**분석 결과**: ✅ **통합 가능**
|
|||
|
|
|
|||
|
|
| 항목 | unified-list | v2-table-list |
|
|||
|
|
|------|-------------|---------------|
|
|||
|
|
| 테이블 뷰 | ✅ | ✅ |
|
|||
|
|
| 카드 뷰 | ✅ | ❌ (추가 필요) |
|
|||
|
|
| 검색 | ✅ | ✅ |
|
|||
|
|
| 페이지네이션 | ✅ | ✅ |
|
|||
|
|
| 편집 가능 | ✅ | ✅ |
|
|||
|
|
|
|||
|
|
**결론**: `v2-table-list`에 `cardView` 모드만 추가하면 통합 가능. 또는 DB 마이그레이션으로 `v2-table-list`로 변환.
|
|||
|
|
|
|||
|
|
**작업량**: 중간 (v2-table-list 확장 또는 DB 마이그레이션)
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
#### 2.1.2 `autocomplete-search-input` (50개) → `v2-select`
|
|||
|
|
|
|||
|
|
**분석 결과**: ✅ **통합 가능**
|
|||
|
|
|
|||
|
|
| 항목 | autocomplete-search-input | v2-select |
|
|||
|
|
|------|--------------------------|-----------|
|
|||
|
|
| 자동완성 드롭다운 | ✅ | ✅ (mode: autocomplete) |
|
|||
|
|
| 테이블 데이터 검색 | ✅ | ✅ (dataSource 설정) |
|
|||
|
|
| 표시/값 필드 분리 | ✅ | ✅ |
|
|||
|
|
|
|||
|
|
**결론**: `v2-select`의 `mode: "autocomplete"` 또는 `mode: "combobox"`로 대체 가능.
|
|||
|
|
|
|||
|
|
**작업량**: 낮음 (DB 마이그레이션만)
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
#### 2.1.3 `repeater-field-group` (24개) → `v2-repeater`
|
|||
|
|
|
|||
|
|
**분석 결과**: ✅ **통합 가능**
|
|||
|
|
|
|||
|
|
`v2-repeater`가 이미 다음을 지원:
|
|||
|
|
- 인라인 테이블 모드
|
|||
|
|
- 모달 선택 모드
|
|||
|
|
- 버튼 모드
|
|||
|
|
|
|||
|
|
**결론**: `v2-repeater`의 `renderMode: "inline"`으로 대체.
|
|||
|
|
|
|||
|
|
**작업량**: 낮음 (DB 마이그레이션만)
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
#### 2.1.4 `simple-repeater-table` (1개) → `v2-repeater`
|
|||
|
|
|
|||
|
|
**분석 결과**: ✅ **통합 가능**
|
|||
|
|
|
|||
|
|
**결론**: `v2-repeater`로 대체.
|
|||
|
|
|
|||
|
|
**작업량**: 매우 낮음
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 2.2 ⚠️ Renderer 추가만 필요 (코드 구조 있음)
|
|||
|
|
|
|||
|
|
#### 2.2.1 `split-panel-layout2` (8개)
|
|||
|
|
|
|||
|
|
**분석 결과**: ⚠️ **Renderer 추가 필요**
|
|||
|
|
|
|||
|
|
- V1 Renderer: `SplitPanelLayout2Renderer.tsx` ✅ 존재
|
|||
|
|
- V2 Renderer: ❌ 없음
|
|||
|
|
- Component: `SplitPanelLayout2Component.tsx` ✅ 존재
|
|||
|
|
|
|||
|
|
**결론**: V2 형식으로 DB 마이그레이션만 하면 됨 (기존 Renderer가 `split-panel-layout2` ID로 등록됨).
|
|||
|
|
|
|||
|
|
**작업량**: 매우 낮음 (DB 마이그레이션만)
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
#### 2.2.2 `repeat-screen-modal` (7개)
|
|||
|
|
|
|||
|
|
**분석 결과**: ⚠️ **Renderer 추가 필요**
|
|||
|
|
|
|||
|
|
- V1 Renderer: `RepeatScreenModalRenderer.tsx` ✅ 존재
|
|||
|
|
- 정의: `hidden: true` (v2-repeat-screen-modal 사용으로 패널에서 숨김)
|
|||
|
|
|
|||
|
|
**결론**: 기존 Renderer 사용 가능, DB 마이그레이션만.
|
|||
|
|
|
|||
|
|
**작업량**: 매우 낮음
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
#### 2.2.3 `related-data-buttons` (5개)
|
|||
|
|
|
|||
|
|
**분석 결과**: ⚠️ **Renderer 추가 필요**
|
|||
|
|
|
|||
|
|
- V1 Renderer: `RelatedDataButtonsRenderer.tsx` ✅ 존재
|
|||
|
|
- Component: `RelatedDataButtonsComponent.tsx` ✅ 존재
|
|||
|
|
|
|||
|
|
**결론**: 기존 Renderer 사용 가능, DB 마이그레이션만.
|
|||
|
|
|
|||
|
|
**작업량**: 매우 낮음
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 2.3 ❌ 별도 V2 개발 필요 (복잡한 구조)
|
|||
|
|
|
|||
|
|
#### 2.3.1 `entity-search-input` (99개)
|
|||
|
|
|
|||
|
|
**분석 결과**: ❌ **별도 개발 필요**
|
|||
|
|
|
|||
|
|
**특징**:
|
|||
|
|
```typescript
|
|||
|
|
// 모달 기반 엔티티 검색
|
|||
|
|
- 테이블 선택 (tableName)
|
|||
|
|
- 검색 필드 설정 (searchFields)
|
|||
|
|
- 모달 팝업 (modalTitle, modalColumns)
|
|||
|
|
- 값/표시 필드 분리 (valueField, displayField)
|
|||
|
|
- 추가 정보 표시 (additionalFields)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**복잡도 요인**:
|
|||
|
|
1. 모달 검색 UI가 필요
|
|||
|
|
2. 다양한 테이블 연동
|
|||
|
|
3. 추가 필드 연계 로직
|
|||
|
|
|
|||
|
|
**권장 방안**:
|
|||
|
|
- `v2-entity-search` 새로 개발
|
|||
|
|
- 또는 `v2-select`에 `mode: "entity"` 추가
|
|||
|
|
|
|||
|
|
**작업량**: 높음 (1-2일)
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
#### 2.3.2 `modal-repeater-table` (68개)
|
|||
|
|
|
|||
|
|
**분석 결과**: ❌ **별도 개발 필요**
|
|||
|
|
|
|||
|
|
**특징**:
|
|||
|
|
```typescript
|
|||
|
|
// 모달에서 항목 검색 + 동적 테이블
|
|||
|
|
- 소스 테이블 (sourceTable, sourceColumns)
|
|||
|
|
- 모달 검색 (modalTitle, modalButtonText, multiSelect)
|
|||
|
|
- 동적 컬럼 추가 (columns)
|
|||
|
|
- 계산 규칙 (calculationRules)
|
|||
|
|
- 고유 필드 (uniqueField)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**복잡도 요인**:
|
|||
|
|
1. 모달 검색 + 선택
|
|||
|
|
2. 동적 테이블 행 추가/삭제
|
|||
|
|
3. 계산 규칙 (단가 × 수량 = 금액)
|
|||
|
|
4. 중복 방지 로직
|
|||
|
|
|
|||
|
|
**권장 방안**:
|
|||
|
|
- `v2-repeater`의 `modal` 모드 확장
|
|||
|
|
- `ItemSelectionModal` + `RepeaterTable` 재사용
|
|||
|
|
|
|||
|
|
**작업량**: 중간 (v2-repeater가 이미 기반 제공)
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
#### 2.3.3 `selected-items-detail-input` (83개)
|
|||
|
|
|
|||
|
|
**분석 결과**: ❌ **별도 개발 필요**
|
|||
|
|
|
|||
|
|
**특징**:
|
|||
|
|
```typescript
|
|||
|
|
// 선택된 항목들의 상세 입력
|
|||
|
|
- 데이터 소스 (dataSourceId)
|
|||
|
|
- 표시 컬럼 (displayColumns)
|
|||
|
|
- 추가 입력 필드 (additionalFields)
|
|||
|
|
- 타겟 테이블 (targetTable)
|
|||
|
|
- 레이아웃 (grid/table)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**복잡도 요인**:
|
|||
|
|
1. 부모 컴포넌트에서 데이터 수신
|
|||
|
|
2. 동적 필드 생성
|
|||
|
|
3. 다중 테이블 저장
|
|||
|
|
|
|||
|
|
**권장 방안**:
|
|||
|
|
- `v2-selected-items-detail` 새로 개발
|
|||
|
|
- 또는 `v2-repeater`에 `mode: "detail-input"` 추가
|
|||
|
|
|
|||
|
|
**작업량**: 중간~높음
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
#### 2.3.4 `conditional-container` (53개)
|
|||
|
|
|
|||
|
|
**분석 결과**: ❌ **별도 개발 필요**
|
|||
|
|
|
|||
|
|
**특징**:
|
|||
|
|
```typescript
|
|||
|
|
// 조건부 UI 분기
|
|||
|
|
- 제어 필드 (controlField, controlLabel)
|
|||
|
|
- 조건별 섹션 (sections: [{condition, label, screenId}])
|
|||
|
|
- 기본값 (defaultValue)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**복잡도 요인**:
|
|||
|
|
1. 셀렉트박스 값에 따른 동적 UI 변경
|
|||
|
|
2. 화면 임베딩 (screenId)
|
|||
|
|
3. 상태 관리 복잡
|
|||
|
|
|
|||
|
|
**권장 방안**:
|
|||
|
|
- `v2-conditional-container` 새로 개발
|
|||
|
|
- 조건부 렌더링 + 화면 임베딩 로직
|
|||
|
|
|
|||
|
|
**작업량**: 높음
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
#### 2.3.5 `universal-form-modal` (26개)
|
|||
|
|
|
|||
|
|
**분석 결과**: ❌ **별도 개발 필요**
|
|||
|
|
|
|||
|
|
**특징**:
|
|||
|
|
```typescript
|
|||
|
|
// 범용 폼 모달
|
|||
|
|
- 섹션 기반 레이아웃
|
|||
|
|
- 반복 섹션
|
|||
|
|
- 채번규칙 연동
|
|||
|
|
- 다중 테이블 저장
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**복잡도 요인**:
|
|||
|
|
1. 동적 섹션 구성
|
|||
|
|
2. 채번규칙 연동
|
|||
|
|
3. 다중 테이블 저장
|
|||
|
|
4. 반복 필드 그룹
|
|||
|
|
|
|||
|
|
**권장 방안**:
|
|||
|
|
- `v2-universal-form` 새로 개발
|
|||
|
|
- 또는 기존 컴포넌트 유지 (특수 목적)
|
|||
|
|
|
|||
|
|
**작업량**: 매우 높음 (3일 이상)
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 2.4 🟢 V1 유지 권장 (특수 목적)
|
|||
|
|
|
|||
|
|
| 컴포넌트 | 개수 | 이유 |
|
|||
|
|
|----------|------|------|
|
|||
|
|
| `tax-invoice-list` | 1 | 세금계산서 전용, 재사용 낮음 |
|
|||
|
|
| `mail-recipient-selector` | 1 | 메일 전용, 재사용 낮음 |
|
|||
|
|
| `unified-select` | 5 | → v2-select로 이미 마이그레이션 |
|
|||
|
|
| `unified-date` | 2 | → v2-date로 이미 마이그레이션 |
|
|||
|
|
| `unified-repeater` | 2 | → v2-repeater로 이미 마이그레이션 |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 3. 마이그레이션 우선순위 권장
|
|||
|
|
|
|||
|
|
### 3.1 즉시 처리 (1일 이내)
|
|||
|
|
|
|||
|
|
| 순위 | 컴포넌트 | 개수 | 작업 |
|
|||
|
|
|------|----------|------|------|
|
|||
|
|
| 1 | `split-panel-layout2` | 8 | DB 마이그레이션만 |
|
|||
|
|
| 2 | `repeat-screen-modal` | 7 | DB 마이그레이션만 |
|
|||
|
|
| 3 | `related-data-buttons` | 5 | DB 마이그레이션만 |
|
|||
|
|
| 4 | `autocomplete-search-input` | 50 | → v2-select 변환 |
|
|||
|
|
| 5 | `repeater-field-group` | 24 | → v2-repeater 변환 |
|
|||
|
|
|
|||
|
|
**총: 94개 컴포넌트**
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 3.2 단기 처리 (1주 이내)
|
|||
|
|
|
|||
|
|
| 순위 | 컴포넌트 | 개수 | 작업 |
|
|||
|
|
|------|----------|------|------|
|
|||
|
|
| 1 | `unified-list` | 97 | → v2-table-list 확장 또는 변환 |
|
|||
|
|
| 2 | `modal-repeater-table` | 68 | v2-repeater modal 모드 확장 |
|
|||
|
|
|
|||
|
|
**총: 165개 컴포넌트**
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 3.3 중기 처리 (2주 이상)
|
|||
|
|
|
|||
|
|
| 순위 | 컴포넌트 | 개수 | 작업 |
|
|||
|
|
|------|----------|------|------|
|
|||
|
|
| 1 | `entity-search-input` | 99 | v2-entity-search 신규 개발 |
|
|||
|
|
| 2 | `selected-items-detail-input` | 83 | v2-selected-items-detail 개발 |
|
|||
|
|
| 3 | `conditional-container` | 53 | v2-conditional-container 개발 |
|
|||
|
|
| 4 | `universal-form-modal` | 26 | v2-universal-form 개발 |
|
|||
|
|
|
|||
|
|
**총: 261개 컴포넌트**
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 4. 권장 아키텍처
|
|||
|
|
|
|||
|
|
### 4.1 V2 컴포넌트 통합 계획
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
v2-input ← text-input, number-input, textarea, unified-input ✅ 완료
|
|||
|
|
v2-select ← select-basic, checkbox, radio, autocomplete ⚠️ 진행중
|
|||
|
|
v2-date ← date-input, unified-date ✅ 완료
|
|||
|
|
v2-media ← file-upload, image-widget ✅ 완료
|
|||
|
|
v2-table-list ← table-list, unified-list ⚠️ 확장 필요
|
|||
|
|
v2-repeater ← repeater-field-group, modal-repeater-table,
|
|||
|
|
simple-repeater-table, related-data-buttons ⚠️ 진행중
|
|||
|
|
v2-entity-search ← entity-search-input (신규 개발 필요)
|
|||
|
|
v2-conditional ← conditional-container (신규 개발 필요)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 5. 결론
|
|||
|
|
|
|||
|
|
### 즉시 처리 가능 (Renderer/DB만)
|
|||
|
|
- `split-panel-layout2`, `repeat-screen-modal`, `related-data-buttons`: **20개**
|
|||
|
|
- `autocomplete-search-input` → `v2-select`: **50개**
|
|||
|
|
- `repeater-field-group` → `v2-repeater`: **24개**
|
|||
|
|
|
|||
|
|
### 통합 검토 필요
|
|||
|
|
- `unified-list` → `v2-table-list` 확장: **97개**
|
|||
|
|
- `modal-repeater-table` → `v2-repeater` 확장: **68개**
|
|||
|
|
|
|||
|
|
### 신규 개발 필요
|
|||
|
|
- `entity-search-input`: **99개** (복잡도 높음)
|
|||
|
|
- `selected-items-detail-input`: **83개**
|
|||
|
|
- `conditional-container`: **53개**
|
|||
|
|
- `universal-form-modal`: **26개**
|
|||
|
|
|
|||
|
|
### 유지
|
|||
|
|
- 특수 목적 컴포넌트: **3개** (tax-invoice-list, mail-recipient-selector)
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 6. 다음 단계
|
|||
|
|
|
|||
|
|
1. **즉시**: `split-panel-layout2`, `repeat-screen-modal`, `related-data-buttons` DB 마이그레이션
|
|||
|
|
2. **이번 주**: `autocomplete-search-input` → `v2-select`, `repeater-field-group` → `v2-repeater` 변환
|
|||
|
|
3. **다음 주**: `unified-list`, `modal-repeater-table` 통합 설계
|
|||
|
|
4. **이후**: `entity-search-input`, `conditional-container` 신규 개발 계획 수립
|