14 KiB
14 KiB
화면 전체 분석 보고서
분석 대상:
/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%) |
핵심 결론:
- 현재 V2 컴포넌트로 65% 화면 구현 가능
- v2-grouped-table 1개 컴포넌트 개발로 85%까지 확대
- v2-tree-view 추가로 92% 도달
- 나머지 8%는 화면별 특수 UI (타임라인, 모바일 스타일)로 개별 개발 필요