332 lines
14 KiB
Markdown
332 lines
14 KiB
Markdown
|
# 화면 전체 분석 보고서
|
||
|
|
|
||
|
|
> **분석 대상**: `/Users/kimjuseok/Downloads/화면개발 8` 폴더 내 핵심 업무 화면
|
||
|
|
> **분석 기준**: 메뉴별 분류, 3개 이상 재활용 가능한 컴포넌트 식별
|
||
|
|
> **분석 일자**: 2026-01-30
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 1. 현재 사용 중인 V2 컴포넌트 목록
|
||
|
|
|
||
|
|
> **중요**: v2- 접두사가 붙은 컴포넌트만 사용합니다.
|
||
|
|
|
||
|
|
### 입력 컴포넌트
|
||
|
|
| ID | 이름 | 용도 |
|
||
|
|
|----|------|------|
|
||
|
|
| `v2-input` | V2 입력 | 텍스트, 숫자, 비밀번호, 이메일 등 입력 |
|
||
|
|
| `v2-select` | V2 선택 | 드롭다운, 콤보박스, 라디오, 체크박스 |
|
||
|
|
| `v2-date` | V2 날짜 | 날짜, 시간, 날짜범위 입력 |
|
||
|
|
|
||
|
|
### 표시 컴포넌트
|
||
|
|
| ID | 이름 | 용도 |
|
||
|
|
|----|------|------|
|
||
|
|
| `v2-text-display` | 텍스트 표시 | 라벨, 텍스트 표시 |
|
||
|
|
| `v2-card-display` | 카드 디스플레이 | 테이블 데이터를 카드 형태로 표시 |
|
||
|
|
| `v2-aggregation-widget` | 집계 위젯 | 합계, 평균, 개수 등 집계 표시 |
|
||
|
|
|
||
|
|
### 테이블/데이터 컴포넌트
|
||
|
|
| ID | 이름 | 용도 |
|
||
|
|
|----|------|------|
|
||
|
|
| `v2-table-list` | 테이블 리스트 | 데이터 테이블 표시, 페이지네이션, 정렬, 필터 |
|
||
|
|
| `v2-table-search-widget` | 검색 필터 | 화면 내 테이블 검색/필터/그룹 기능 |
|
||
|
|
| `v2-pivot-grid` | 피벗 그리드 | 다차원 데이터 분석 (피벗 테이블) |
|
||
|
|
|
||
|
|
### 레이아웃 컴포넌트
|
||
|
|
| ID | 이름 | 용도 |
|
||
|
|
|----|------|------|
|
||
|
|
| `v2-split-panel-layout` | 분할 패널 | 마스터-디테일 좌우 분할 레이아웃 |
|
||
|
|
| `v2-tabs-widget` | 탭 위젯 | 탭 전환, 탭 내 컴포넌트 배치 |
|
||
|
|
| `v2-section-card` | Section Card | 제목/테두리가 있는 그룹화 컨테이너 |
|
||
|
|
| `v2-section-paper` | Section Paper | 배경색 기반 미니멀 그룹화 컨테이너 |
|
||
|
|
| `v2-divider-line` | 구분선 | 영역 구분 |
|
||
|
|
| `v2-repeat-container` | 리피터 컨테이너 | 데이터 수만큼 내부 컴포넌트 반복 렌더링 |
|
||
|
|
| `v2-repeater` | 리피터 | 반복 컨트롤 |
|
||
|
|
|
||
|
|
### 액션/기타 컴포넌트
|
||
|
|
| ID | 이름 | 용도 |
|
||
|
|
|----|------|------|
|
||
|
|
| `v2-button-primary` | 기본 버튼 | 저장, 삭제 등 액션 버튼 |
|
||
|
|
| `v2-numbering-rule` | 채번규칙 | 자동 코드/번호 생성 |
|
||
|
|
| `v2-category-manager` | 카테고리 관리자 | 카테고리 관리 |
|
||
|
|
| `v2-location-swap-selector` | 위치 교환 선택기 | 위치 교환 기능 |
|
||
|
|
| `v2-rack-structure` | 랙 구조 | 창고 랙 시각화 |
|
||
|
|
| `v2-media` | 미디어 | 미디어 표시 |
|
||
|
|
|
||
|
|
**총 23개 V2 컴포넌트**
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 2. 화면 분류 (메뉴별)
|
||
|
|
|
||
|
|
### 01. 기준정보 (master-data)
|
||
|
|
| 화면명 | 파일명 | 패턴 | 구현 가능 |
|
||
|
|
|--------|--------|------|----------|
|
||
|
|
| 회사정보 | 회사정보.html | 검색+테이블 | ✅ 완전 |
|
||
|
|
| 부서정보 | 부서정보.html | 검색+테이블 | ✅ 완전 |
|
||
|
|
| 품목정보 | 품목정보.html | 검색+테이블+그룹화 | ⚠️ 그룹화 미지원 |
|
||
|
|
| BOM관리 | BOM관리.html | 분할패널+트리 | ⚠️ 트리뷰 미지원 |
|
||
|
|
| 공정정보관리 | 공정정보관리.html | 분할패널+테이블 | ✅ 완전 |
|
||
|
|
| 공정작업기준 | 공정작업기준관리.html | 검색+테이블 | ✅ 완전 |
|
||
|
|
| 품목라우팅 | 품목라우팅관리.html | 분할패널+테이블 | ✅ 완전 |
|
||
|
|
|
||
|
|
### 02. 영업관리 (sales)
|
||
|
|
| 화면명 | 파일명 | 패턴 | 구현 가능 |
|
||
|
|
|--------|--------|------|----------|
|
||
|
|
| 수주관리 | 수주관리.html | 분할패널+테이블 | ✅ 완전 |
|
||
|
|
| 견적관리 | 견적관리.html | 분할패널+테이블 | ✅ 완전 |
|
||
|
|
| 거래처관리 | 거래처관리.html | 분할패널+탭+그룹화 | ⚠️ 그룹화 미지원 |
|
||
|
|
| 판매품목정보 | 판매품목정보.html | 검색+테이블 | ✅ 완전 |
|
||
|
|
| 출하계획관리 | 출하계획관리.html | 검색+테이블 | ✅ 완전 |
|
||
|
|
|
||
|
|
### 03. 생산관리 (production)
|
||
|
|
| 화면명 | 파일명 | 패턴 | 구현 가능 |
|
||
|
|
|--------|--------|------|----------|
|
||
|
|
| 생산계획관리 | 생산계획관리.html | 분할패널+탭+타임라인 | ❌ 타임라인 미지원 |
|
||
|
|
| 생산관리 | 생산관리.html | 검색+테이블 | ✅ 완전 |
|
||
|
|
| 생산실적관리 | 생산실적관리.html | 검색+테이블 | ✅ 완전 |
|
||
|
|
| 작업지시 | 작업지시.html | 탭+그룹화테이블+분할패널 | ⚠️ 그룹화 미지원 |
|
||
|
|
| 공정관리 | 공정관리.html | 분할패널+테이블 | ✅ 완전 |
|
||
|
|
|
||
|
|
### 04. 구매관리 (purchase)
|
||
|
|
| 화면명 | 파일명 | 패턴 | 구현 가능 |
|
||
|
|
|--------|--------|------|----------|
|
||
|
|
| 발주관리 | 발주관리.html | 검색+테이블 | ✅ 완전 |
|
||
|
|
| 공급업체관리 | 공급업체관리.html | 검색+테이블 | ✅ 완전 |
|
||
|
|
| 구매입고 | pages/구매입고.html | 검색+테이블 | ✅ 완전 |
|
||
|
|
|
||
|
|
### 05. 설비관리 (equipment)
|
||
|
|
| 화면명 | 파일명 | 패턴 | 구현 가능 |
|
||
|
|
|--------|--------|------|----------|
|
||
|
|
| 설비정보 | 설비정보.html | 분할패널+카드+탭 | ✅ v2-card-display 활용 |
|
||
|
|
|
||
|
|
### 06. 물류관리 (logistics)
|
||
|
|
| 화면명 | 파일명 | 패턴 | 구현 가능 |
|
||
|
|
|--------|--------|------|----------|
|
||
|
|
| 창고관리 | 창고관리.html | 모바일앱스타일+iframe | ❌ 별도개발 필요 |
|
||
|
|
| 창고정보관리 | 창고정보관리.html | 검색+테이블 | ✅ 완전 |
|
||
|
|
| 입출고관리 | 입출고관리.html | 검색+테이블+그룹화 | ⚠️ 그룹화 미지원 |
|
||
|
|
| 재고현황 | 재고현황.html | 검색+테이블 | ✅ 완전 |
|
||
|
|
|
||
|
|
### 07. 품질관리 (quality)
|
||
|
|
| 화면명 | 파일명 | 패턴 | 구현 가능 |
|
||
|
|
|--------|--------|------|----------|
|
||
|
|
| 검사기준 | 검사기준.html | 검색+테이블 | ✅ 완전 |
|
||
|
|
| 검사정보관리 | 검사정보관리.html | 탭+테이블 | ✅ 완전 |
|
||
|
|
| 검사장비관리 | 검사장비관리.html | 검색+테이블 | ✅ 완전 |
|
||
|
|
| 불량관리 | 불량관리.html | 검색+테이블 | ✅ 완전 |
|
||
|
|
| 클레임관리 | 클레임관리.html | 검색+테이블 | ✅ 완전 |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 3. 화면 UI 패턴 분석
|
||
|
|
|
||
|
|
### 패턴 A: 검색 + 테이블 (가장 기본)
|
||
|
|
**해당 화면**: 약 60% (15개 이상)
|
||
|
|
|
||
|
|
**사용 컴포넌트**:
|
||
|
|
- `v2-table-search-widget`: 검색 필터
|
||
|
|
- `v2-table-list`: 데이터 테이블
|
||
|
|
|
||
|
|
```
|
||
|
|
┌─────────────────────────────────────────┐
|
||
|
|
│ [검색필드들...] [조회] [엑셀] │ ← v2-table-search-widget
|
||
|
|
├─────────────────────────────────────────┤
|
||
|
|
│ 테이블 제목 [신규등록] [삭제] │
|
||
|
|
│ ────────────────────────────────────── │
|
||
|
|
│ □ | 코드 | 이름 | 상태 | 등록일 | │ ← v2-table-list
|
||
|
|
│ □ | A001 | 테스트| 사용 | 2026-01-30 | │
|
||
|
|
└─────────────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
### 패턴 B: 분할 패널 (마스터-디테일)
|
||
|
|
**해당 화면**: 약 25% (8개)
|
||
|
|
|
||
|
|
**사용 컴포넌트**:
|
||
|
|
- `v2-split-panel-layout`: 좌우 분할
|
||
|
|
- `v2-table-list`: 마스터/디테일 테이블
|
||
|
|
- `v2-tabs-widget`: 상세 탭 (선택)
|
||
|
|
|
||
|
|
```
|
||
|
|
┌──────────────────┬──────────────────────┐
|
||
|
|
│ 마스터 리스트 │ 상세 정보 / 탭 │
|
||
|
|
│ ─────────────── │ ┌────┬────┬────┐ │
|
||
|
|
│ □ A001 제품A │ │기본│이력│첨부│ │
|
||
|
|
│ □ A002 제품B ← │ └────┴────┴────┘ │
|
||
|
|
│ □ A003 제품C │ [테이블 or 폼] │
|
||
|
|
└──────────────────┴──────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
### 패턴 C: 탭 + 테이블
|
||
|
|
**해당 화면**: 약 10% (3개)
|
||
|
|
|
||
|
|
**사용 컴포넌트**:
|
||
|
|
- `v2-tabs-widget`: 탭 전환
|
||
|
|
- `v2-table-list`: 탭별 테이블
|
||
|
|
|
||
|
|
```
|
||
|
|
┌─────────────────────────────────────────┐
|
||
|
|
│ [탭1] [탭2] [탭3] │
|
||
|
|
├─────────────────────────────────────────┤
|
||
|
|
│ [테이블 영역] │
|
||
|
|
└─────────────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
### 패턴 D: 특수 UI
|
||
|
|
**해당 화면**: 약 5% (2개)
|
||
|
|
|
||
|
|
- 생산계획관리: 타임라인/간트 차트 → **v2-timeline 미존재**
|
||
|
|
- 창고관리: 모바일 앱 스타일 → **별도 개발 필요**
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 4. 신규 컴포넌트 분석 (3개 이상 재활용 기준)
|
||
|
|
|
||
|
|
### 4.1 v2-grouped-table (그룹화 테이블)
|
||
|
|
**재활용 화면 수**: 5개 이상 ✅
|
||
|
|
|
||
|
|
| 화면 | 그룹화 기준 |
|
||
|
|
|------|------------|
|
||
|
|
| 품목정보 | 품목구분, 카테고리 |
|
||
|
|
| 거래처관리 | 거래처유형, 지역 |
|
||
|
|
| 작업지시 | 작업일자, 공정 |
|
||
|
|
| 입출고관리 | 입출고구분, 창고 |
|
||
|
|
| 견적관리 | 상태, 거래처 |
|
||
|
|
|
||
|
|
**기능 요구사항**:
|
||
|
|
- 특정 컬럼 기준 그룹핑
|
||
|
|
- 그룹 접기/펼치기
|
||
|
|
- 그룹 헤더에 집계 표시
|
||
|
|
- 다중 그룹핑 지원
|
||
|
|
|
||
|
|
**구현 복잡도**: 중
|
||
|
|
|
||
|
|
### 4.2 v2-tree-view (트리 뷰)
|
||
|
|
**재활용 화면 수**: 3개 ✅
|
||
|
|
|
||
|
|
| 화면 | 트리 용도 |
|
||
|
|
|------|----------|
|
||
|
|
| BOM관리 | BOM 구조 (정전개/역전개) |
|
||
|
|
| 부서정보 | 조직도 |
|
||
|
|
| 메뉴관리 | 메뉴 계층 |
|
||
|
|
|
||
|
|
**기능 요구사항**:
|
||
|
|
- 노드 접기/펼치기
|
||
|
|
- 드래그앤드롭 (선택)
|
||
|
|
- 정전개/역전개 전환
|
||
|
|
- 노드 선택 이벤트
|
||
|
|
|
||
|
|
**구현 복잡도**: 중상
|
||
|
|
|
||
|
|
### 4.3 v2-timeline-scheduler (타임라인)
|
||
|
|
**재활용 화면 수**: 1~2개 (기준 미달)
|
||
|
|
|
||
|
|
| 화면 | 용도 |
|
||
|
|
|------|------|
|
||
|
|
| 생산계획관리 | 간트 차트 |
|
||
|
|
| 설비 가동 현황 | 타임라인 |
|
||
|
|
|
||
|
|
**기능 요구사항**:
|
||
|
|
- 시간축 기반 배치
|
||
|
|
- 드래그로 일정 변경
|
||
|
|
- 공정별 색상 구분
|
||
|
|
- 줌 인/아웃
|
||
|
|
|
||
|
|
**구현 복잡도**: 상
|
||
|
|
|
||
|
|
> **참고**: 3개 미만이므로 우선순위 하향
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 5. 컴포넌트 커버리지
|
||
|
|
|
||
|
|
### 현재 V2 컴포넌트로 구현 가능
|
||
|
|
```
|
||
|
|
┌─────────────────────────────────────────────────┐
|
||
|
|
│ 17개 화면 (65%) │
|
||
|
|
│ - 기본 검색 + 테이블 패턴 │
|
||
|
|
│ - 분할 패널 │
|
||
|
|
│ - 탭 전환 │
|
||
|
|
│ - 카드 디스플레이 │
|
||
|
|
└─────────────────────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
### v2-grouped-table 개발 후
|
||
|
|
```
|
||
|
|
┌─────────────────────────────────────────────────┐
|
||
|
|
│ +5개 화면 (22개, 85%) │
|
||
|
|
│ - 품목정보, 거래처관리, 작업지시 │
|
||
|
|
│ - 입출고관리, 견적관리 │
|
||
|
|
└─────────────────────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
### v2-tree-view 개발 후
|
||
|
|
```
|
||
|
|
┌─────────────────────────────────────────────────┐
|
||
|
|
│ +2개 화면 (24개, 92%) │
|
||
|
|
│ - BOM관리, 부서정보(계층) │
|
||
|
|
└─────────────────────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
### 별도 개발 필요
|
||
|
|
```
|
||
|
|
┌─────────────────────────────────────────────────┐
|
||
|
|
│ 2개 화면 (8%) │
|
||
|
|
│ - 생산계획관리 (타임라인) │
|
||
|
|
│ - 창고관리 (모바일 앱 스타일) │
|
||
|
|
└─────────────────────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 6. 신규 컴포넌트 개발 우선순위
|
||
|
|
|
||
|
|
| 순위 | 컴포넌트 | 재활용 화면 수 | 복잡도 | ROI |
|
||
|
|
|------|----------|--------------|--------|-----|
|
||
|
|
| 1 | v2-grouped-table | 5+ | 중 | ⭐⭐⭐⭐⭐ |
|
||
|
|
| 2 | v2-tree-view | 3 | 중상 | ⭐⭐⭐⭐ |
|
||
|
|
| 3 | v2-timeline-scheduler | 1~2 | 상 | ⭐⭐ |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 7. 권장 구현 전략
|
||
|
|
|
||
|
|
### Phase 1: 즉시 구현 (현재 V2 컴포넌트)
|
||
|
|
- 회사정보, 부서정보
|
||
|
|
- 발주관리, 공급업체관리
|
||
|
|
- 검사기준, 검사장비관리, 불량관리
|
||
|
|
- 창고정보관리, 재고현황
|
||
|
|
- 공정작업기준관리
|
||
|
|
- 수주관리, 견적관리, 공정관리
|
||
|
|
- 설비정보 (v2-card-display 활용)
|
||
|
|
- 검사정보관리
|
||
|
|
|
||
|
|
### Phase 2: v2-grouped-table 개발 후
|
||
|
|
- 품목정보, 거래처관리, 입출고관리
|
||
|
|
- 작업지시
|
||
|
|
|
||
|
|
### Phase 3: v2-tree-view 개발 후
|
||
|
|
- BOM관리
|
||
|
|
- 부서정보 (계층 뷰)
|
||
|
|
|
||
|
|
### Phase 4: 개별 개발
|
||
|
|
- 생산계획관리 (타임라인)
|
||
|
|
- 창고관리 (모바일 스타일)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 8. 요약
|
||
|
|
|
||
|
|
| 항목 | 수치 |
|
||
|
|
|------|------|
|
||
|
|
| 전체 분석 화면 수 | 26개 |
|
||
|
|
| 현재 즉시 구현 가능 | 17개 (65%) |
|
||
|
|
| v2-grouped-table 추가 시 | 22개 (85%) |
|
||
|
|
| v2-tree-view 추가 시 | 24개 (92%) |
|
||
|
|
| 별도 개발 필요 | 2개 (8%) |
|
||
|
|
|
||
|
|
**핵심 결론**:
|
||
|
|
1. **현재 V2 컴포넌트**로 65% 화면 구현 가능
|
||
|
|
2. **v2-grouped-table** 1개 컴포넌트 개발로 85%까지 확대
|
||
|
|
3. **v2-tree-view** 추가로 92% 도달
|
||
|
|
4. 나머지 8%는 화면별 특수 UI (타임라인, 모바일 스타일)로 개별 개발 필요
|