95bef976a5
- 여러 문서의 내용을 업데이트하여 최신 정보를 반영하였습니다. - 컴포넌트 개발 가이드와 관련된 문서의 목차를 재구성하고, V2 및 Zod 레이아웃 시스템에 대한 내용을 추가하였습니다. - 화면 컴포넌트 개발 가이드를 개선하여 핵심 원칙과 패턴을 명확히 설명하였습니다. - 불필요한 문서 및 가이드를 삭제하고, 통합된 가이드를 통해 개발자들이 쉽게 참고할 수 있도록 하였습니다.
186 lines
6.9 KiB
Markdown
186 lines
6.9 KiB
Markdown
# Phase 0: 컴포넌트 사용 현황 분석
|
|
|
|
## 분석 일시
|
|
|
|
2024-12-19
|
|
|
|
## 분석 대상
|
|
|
|
- 활성화된 화면 정의 (screen_definitions.is_active = 'Y')
|
|
- 화면 레이아웃 (screen_layouts)
|
|
|
|
---
|
|
|
|
## 1. 컴포넌트별 사용량 순위
|
|
|
|
### 상위 15개 컴포넌트
|
|
|
|
| 순위 | 컴포넌트 | 사용 횟수 | 사용 화면 수 | V2 매핑 |
|
|
| :--: | :-------------------------- | :-------: | :----------: | :------------------------------ |
|
|
| 1 | button-primary | 571 | 364 | V2Input (type: button) |
|
|
| 2 | text-input | 805 | 166 | **V2Input (type: text)** |
|
|
| 3 | table-list | 130 | 130 | V2List (viewMode: table) |
|
|
| 4 | table-search-widget | 127 | 127 | V2List (searchable: true) |
|
|
| 5 | select-basic | 121 | 76 | **V2Select** |
|
|
| 6 | number-input | 86 | 34 | **V2Input (type: number)** |
|
|
| 7 | date-input | 83 | 51 | **V2Date** |
|
|
| 8 | file-upload | 41 | 18 | V2Media (type: file) |
|
|
| 9 | tabs-widget | 39 | 39 | V2Group (type: tabs) |
|
|
| 10 | split-panel-layout | 39 | 39 | V2Layout (type: split) |
|
|
| 11 | category-manager | 38 | 38 | V2Biz (type: category) |
|
|
| 12 | numbering-rule | 31 | 31 | V2Biz (type: numbering) |
|
|
| 13 | selected-items-detail-input | 29 | 29 | 복합 컴포넌트 |
|
|
| 14 | modal-repeater-table | 25 | 25 | V2List (modal: true) |
|
|
| 15 | image-widget | 29 | 29 | V2Media (type: image) |
|
|
|
|
---
|
|
|
|
## 2. V2 컴포넌트별 통합 대상 분석
|
|
|
|
### V2Input (예상 통합 대상: 891개)
|
|
|
|
| 기존 컴포넌트 | 사용 횟수 | 비율 |
|
|
| :------------ | :-------: | :---: |
|
|
| text-input | 805 | 90.3% |
|
|
| number-input | 86 | 9.7% |
|
|
|
|
**우선순위: 1위** - 가장 많이 사용되는 컴포넌트
|
|
|
|
### V2Select (예상 통합 대상: 140개)
|
|
|
|
| 기존 컴포넌트 | 사용 횟수 | widgetType |
|
|
| :------------------------ | :-------: | :--------- |
|
|
| select-basic (category) | 65 | category |
|
|
| select-basic (null) | 50 | - |
|
|
| autocomplete-search-input | 19 | entity |
|
|
| entity-search-input | 20 | entity |
|
|
| checkbox-basic | 7 | checkbox |
|
|
| radio-basic | 5 | radio |
|
|
|
|
**우선순위: 2위** - 다양한 모드 지원 필요
|
|
|
|
### V2Date (예상 통합 대상: 83개)
|
|
|
|
| 기존 컴포넌트 | 사용 횟수 |
|
|
| :---------------- | :-------: |
|
|
| date-input (null) | 58 |
|
|
| date-input (date) | 23 |
|
|
| date-input (text) | 2 |
|
|
|
|
**우선순위: 3위**
|
|
|
|
### V2List (예상 통합 대상: 283개)
|
|
|
|
| 기존 컴포넌트 | 사용 횟수 | 비고 |
|
|
| :-------------------- | :-------: | :---------- |
|
|
| table-list | 130 | 기본 테이블 |
|
|
| table-search-widget | 127 | 검색 테이블 |
|
|
| modal-repeater-table | 25 | 모달 반복 |
|
|
| repeater-field-group | 15 | 반복 필드 |
|
|
| card-display | 11 | 카드 표시 |
|
|
| simple-repeater-table | 1 | 단순 반복 |
|
|
|
|
**우선순위: 4위** - 핵심 데이터 표시 컴포넌트
|
|
|
|
### V2Media (예상 통합 대상: 70개)
|
|
|
|
| 기존 컴포넌트 | 사용 횟수 |
|
|
| :------------ | :-------: |
|
|
| file-upload | 41 |
|
|
| image-widget | 29 |
|
|
|
|
### V2Layout (예상 통합 대상: 62개)
|
|
|
|
| 기존 컴포넌트 | 사용 횟수 |
|
|
| :------------------ | :-------: |
|
|
| split-panel-layout | 39 |
|
|
| screen-split-panel | 21 |
|
|
| split-panel-layout2 | 2 |
|
|
|
|
### V2Group (예상 통합 대상: 99개)
|
|
|
|
| 기존 컴포넌트 | 사용 횟수 |
|
|
| :-------------------- | :-------: |
|
|
| tabs-widget | 39 |
|
|
| conditional-container | 23 |
|
|
| section-paper | 11 |
|
|
| section-card | 10 |
|
|
| text-display | 13 |
|
|
| universal-form-modal | 7 |
|
|
| repeat-screen-modal | 5 |
|
|
|
|
### V2Biz (예상 통합 대상: 79개)
|
|
|
|
| 기존 컴포넌트 | 사용 횟수 |
|
|
| :--------------------- | :-------: |
|
|
| category-manager | 38 |
|
|
| numbering-rule | 31 |
|
|
| flow-widget | 8 |
|
|
| rack-structure | 2 |
|
|
| related-data-buttons | 2 |
|
|
| location-swap-selector | 2 |
|
|
| tax-invoice-list | 1 |
|
|
|
|
---
|
|
|
|
## 3. 구현 우선순위 결정
|
|
|
|
### Phase 1 우선순위 (즉시 효과가 큰 컴포넌트)
|
|
|
|
| 순위 | V2 컴포넌트 | 통합 대상 수 | 영향 화면 수 | 이유 |
|
|
| :---: | :---------------- | :----------: | :----------: | :--------------- |
|
|
| **1** | **V2Input** | 891개 | 200+ | 가장 많이 사용 |
|
|
| **2** | **V2Select** | 140개 | 100+ | 다양한 모드 필요 |
|
|
| **3** | **V2Date** | 83개 | 51 | 비교적 단순 |
|
|
|
|
### Phase 2 우선순위 (데이터 표시 컴포넌트)
|
|
|
|
| 순위 | V2 컴포넌트 | 통합 대상 수 | 이유 |
|
|
| :---: | :---------------- | :----------: | :--------------- |
|
|
| **4** | **V2List** | 283개 | 핵심 데이터 표시 |
|
|
| **5** | **V2Layout** | 62개 | 레이아웃 구조 |
|
|
| **6** | **V2Group** | 99개 | 콘텐츠 그룹화 |
|
|
|
|
### Phase 3 우선순위 (특수 컴포넌트)
|
|
|
|
| 순위 | V2 컴포넌트 | 통합 대상 수 | 이유 |
|
|
| :---: | :------------------- | :----------: | :------------ |
|
|
| **7** | **V2Media** | 70개 | 파일/이미지 |
|
|
| **8** | **V2Biz** | 79개 | 비즈니스 특화 |
|
|
| **9** | **V2Hierarchy** | 0개 | 신규 기능 |
|
|
|
|
---
|
|
|
|
## 4. 주요 발견 사항
|
|
|
|
### 4.1 button-primary 분리 검토
|
|
|
|
- 사용량: 571개 (1위)
|
|
- 현재 계획: V2Input에 포함
|
|
- **제안**: 별도 `V2Button` 컴포넌트로 분리 검토
|
|
- 버튼은 입력과 성격이 다름
|
|
- 액션 타입, 스타일, 권한 등 복잡한 설정 필요
|
|
|
|
### 4.2 conditional-container 처리
|
|
|
|
- 사용량: 23개
|
|
- 현재 계획: 공통 conditional 속성으로 통합
|
|
- **확인 필요**: 기존 화면에서 어떻게 마이그레이션할지
|
|
|
|
### 4.3 category 관련 컴포넌트
|
|
|
|
- select-basic (category): 65개
|
|
- category-manager: 38개
|
|
- **총 103개**의 카테고리 관련 컴포넌트
|
|
- 카테고리 시스템 통합 중요
|
|
|
|
---
|
|
|
|
## 5. 다음 단계
|
|
|
|
1. [ ] 데이터 마이그레이션 전략 설계 (Phase 0-2)
|
|
2. [ ] sys_input_type JSON Schema 설계 (Phase 0-3)
|
|
3. [ ] DynamicConfigPanel 프로토타입 (Phase 0-4)
|
|
4. [ ] V2Input 구현 시작 (Phase 1-1)
|
|
|