플로우 구현
This commit is contained in:
kjs
646
docs/FLOW_MANAGEMENT_UI_DESIGN.md
Normal file
646
docs/FLOW_MANAGEMENT_UI_DESIGN.md
Normal file
@@ -0,0 +1,646 @@
|
||||
# 플로우 관리 시스템 UI 설계
|
||||
|
||||
## 1. 플로우 관리 화면 (/flow-management)
|
||||
|
||||
### 1.1 전체 레이아웃
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 플로우 관리 [+ 새 플로우] [저장] │
|
||||
├──────────────┬──────────────────────────────────────┬───────────────┤
|
||||
│ │ │ │
|
||||
│ 플로우 목록 │ 플로우 편집 캔버스 │ 속성 패널 │
|
||||
│ (좌측) │ (중앙) │ (우측) │
|
||||
│ │ │ │
|
||||
│ ┌────────┐ │ ┌──────┐ │ ┌───────────┐ │
|
||||
│ │플로우 1│ │ │ │ ┌──────┐ │ │ 단계명: │ │
|
||||
│ ├────────┤ │ │ 구매 │─────▶│ 설치 │ │ │ [구매] │ │
|
||||
│ │플로우 2│ │ │ │ └──────┘ │ │ │ │
|
||||
│ ├────────┤ │ └──────┘ │ │ │ 색상: │ │
|
||||
│ │플로우 3│ │ │ │ │ [파랑] │ │
|
||||
│ └────────┘ │ ▼ │ │ │ │
|
||||
│ │ ┌──────┐ │ │ 조건 설정: │ │
|
||||
│ [테이블 선택]│ │ 폐기 │ │ │ │ │
|
||||
│ [product_ │ └──────┘ │ │ 컬럼: │ │
|
||||
│ dtg ] │ │ │ [status] │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ │ 연산자: │ │
|
||||
│ │ │ │ [equals] │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ │ 값: │ │
|
||||
│ │ │ │ [구매완료]│ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ │[+조건추가]│ │
|
||||
│ │ │ └───────────┘ │
|
||||
├──────────────┴──────────────────────────────────────┴───────────────┤
|
||||
│ 도구 모음: [노드 추가] [연결] [삭제] [정렬] [줌 인/아웃] [미니맵] │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 1.2 플로우 노드 상세
|
||||
|
||||
```
|
||||
┌─────────────────────────────┐
|
||||
│ 구매 [x] │ ← 닫기 버튼
|
||||
├─────────────────────────────┤
|
||||
│ 상태: status = '구매완료' │ ← 조건 요약
|
||||
│ AND install_date IS NULL │
|
||||
├─────────────────────────────┤
|
||||
│ 데이터: 15건 │ ← 현재 조건에 맞는 데이터 수
|
||||
└─────────────────────────────┘
|
||||
↓
|
||||
[연결선 라벨]
|
||||
↓
|
||||
┌─────────────────────────────┐
|
||||
│ 설치 [x] │
|
||||
├─────────────────────────────┤
|
||||
│ 상태: status = '설치완료' │
|
||||
│ AND disposal_date IS NULL │
|
||||
├─────────────────────────────┤
|
||||
│ 데이터: 8건 │
|
||||
└─────────────────────────────┘
|
||||
```
|
||||
|
||||
### 1.3 조건 빌더 UI
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ 조건 설정 [AND▼] │
|
||||
├─────────────────────────────────────────────┤
|
||||
│ 조건 1: [- 삭제]│
|
||||
│ ┌───────────┬──────────┬──────────────┐ │
|
||||
│ │ 컬럼 │ 연산자 │ 값 │ │
|
||||
│ │ [status▼] │[equals▼] │[구매완료 ]│ │
|
||||
│ └───────────┴──────────┴──────────────┘ │
|
||||
│ │
|
||||
│ 조건 2: [- 삭제]│
|
||||
│ ┌───────────┬──────────┬──────────────┐ │
|
||||
│ │ 컬럼 │ 연산자 │ 값 │ │
|
||||
│ │[install_ │[is_null▼]│ │ │
|
||||
│ │ date ▼]│ │ │ │
|
||||
│ └───────────┴──────────┴──────────────┘ │
|
||||
│ │
|
||||
│ [+ 조건 추가] │
|
||||
└─────────────────────────────────────────────┘
|
||||
|
||||
연산자 옵션:
|
||||
- equals (같음)
|
||||
- not_equals (같지 않음)
|
||||
- in (포함)
|
||||
- not_in (포함하지 않음)
|
||||
- greater_than (크다)
|
||||
- less_than (작다)
|
||||
- is_null (NULL)
|
||||
- is_not_null (NULL 아님)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. 화면관리에서 플로우 위젯 배치
|
||||
|
||||
### 2.1 화면 편집기 (ScreenDesigner)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 화면 편집기 - DTG 제품 관리 [저장] │
|
||||
├─────────────┬───────────────────────────────────────┬───────────────┤
|
||||
│ │ │ │
|
||||
│ 컴포넌트 │ 캔버스 │ 속성 패널 │
|
||||
│ │ │ │
|
||||
│ ┌─────────┐ │ ┌─────────────────────────────────┐ │ 타입: │
|
||||
│ │ 입력필드 │ │ │ DTG 제품 라이프사이클 │ │ [flow-widget] │
|
||||
│ ├─────────┤ │ ├─────┬─────┬─────┬─────┬─────────┤ │ │
|
||||
│ │ 버튼 │ │ │구매 │ │설치 │ │ 폐기 │ │ 플로우 선택: │
|
||||
│ ├─────────┤ │ │ │ → │ │ → │ │ │ [DTG 라이프 │
|
||||
│ │ 테이블 │ │ │ 15건│ │ 8건 │ │ 3건 │ │ 사이클 ▼] │
|
||||
│ ├─────────┤ │ └─────┴─────┴─────┴─────┴─────────┘ │ │
|
||||
│ │플로우 │ │ ◀ 드래그앤드롭으로 배치 │ 레이아웃: │
|
||||
│ └─────────┘ │ │ [가로▼] │
|
||||
│ │ ┌─────────────────────────────────┐ │ │
|
||||
│ │ │ 제품 상세 정보 │ │ 카드 너비: │
|
||||
│ │ │ ┌────────────┬───────────────┐ │ │ [200px] │
|
||||
│ │ │ │ 제품명: │ [ ] │ │ │ │
|
||||
│ │ │ │ 구매일자: │ [ ] │ │ │ 데이터 카운트 │
|
||||
│ │ │ │ 설치일자: │ [ ] │ │ │ [✓] 표시 │
|
||||
│ │ │ │ 폐기일자: │ [ ] │ │ │ │
|
||||
│ │ │ └────────────┴───────────────┘ │ │ 연결선 │
|
||||
│ │ └─────────────────────────────────┘ │ [✓] 표시 │
|
||||
│ │ │ │
|
||||
└─────────────┴───────────────────────────────────────┴───────────────┘
|
||||
```
|
||||
|
||||
### 2.2 플로우 위젯 설정 패널
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ 플로우 위젯 설정 │
|
||||
├─────────────────────────────────────┤
|
||||
│ 플로우 선택: │
|
||||
│ ┌───────────────────────────────┐ │
|
||||
│ │ DTG 제품 라이프사이클 ▼ │ │
|
||||
│ └───────────────────────────────┘ │
|
||||
│ │
|
||||
│ 레이아웃: │
|
||||
│ ( ) 가로 (•) 세로 │
|
||||
│ │
|
||||
│ 카드 너비: │
|
||||
│ [200px ] │
|
||||
│ │
|
||||
│ 카드 높이: │
|
||||
│ [120px ] │
|
||||
│ │
|
||||
│ [✓] 데이터 카운트 표시 │
|
||||
│ [✓] 연결선 표시 │
|
||||
│ [ ] 컴팩트 모드 │
|
||||
│ │
|
||||
│ 카드 스타일: │
|
||||
│ ┌─────────────────────────────┐ │
|
||||
│ │ 테두리 색상: [단계별 색상 ▼] │ │
|
||||
│ │ 배경 색상: [흰색 ▼] │ │
|
||||
│ │ 그림자: [중간 ▼] │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. 실제 화면에서 플로우 표시 (InteractiveScreenViewer)
|
||||
|
||||
### 3.1 가로 레이아웃
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ DTG 제품 관리 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ DTG 제품 라이프사이클 │
|
||||
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
|
||||
│ │ 구매 │ │ 설치 │ │ 폐기 │ │
|
||||
│ │ │ → │ │ → │ │ │
|
||||
│ │ 15건 │ │ 8건 │ │ 3건 │ │
|
||||
│ └─────────────┘ └─────────────┘ └─────────────┘ │
|
||||
│ ↑ 클릭하면 데이터 리스트 모달 열림 │
|
||||
│ │
|
||||
│ ───────────────────────────────────────────────────────────────── │
|
||||
│ │
|
||||
│ 제품 상세 정보 │
|
||||
│ ┌──────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 제품명: [DTG-001 ] │ │
|
||||
│ │ 구매일자: [2024-01-15 ] │ │
|
||||
│ │ 설치일자: [2024-02-20 ] │ │
|
||||
│ │ 폐기일자: [ ] │ │
|
||||
│ └──────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 3.2 세로 레이아웃
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ DTG 제품 관리 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ DTG 제품 라이프사이클 │
|
||||
│ ┌─────────────┐ │
|
||||
│ │ 구매 │ │
|
||||
│ │ │ │
|
||||
│ │ 15건 │ │
|
||||
│ └─────────────┘ │
|
||||
│ ↓ │
|
||||
│ ┌─────────────┐ │
|
||||
│ │ 설치 │ │
|
||||
│ │ │ │
|
||||
│ │ 8건 │ │
|
||||
│ └─────────────┘ │
|
||||
│ ↓ │
|
||||
│ ┌─────────────┐ │
|
||||
│ │ 폐기 │ │
|
||||
│ │ │ │
|
||||
│ │ 3건 │ │
|
||||
│ └─────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. 플로우 단계 클릭 시 데이터 리스트 모달
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 구매 단계 - 데이터 목록 [X 닫기] │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌──┬──────────┬────────────┬────────────┬──────────┬──────────┐ │
|
||||
│ │□ │ 제품명 │ 구매일자 │ 구매금액 │ 구매처 │ 상태 │ │
|
||||
│ ├──┼──────────┼────────────┼────────────┼──────────┼──────────┤ │
|
||||
│ │☑ │ DTG-001 │ 2024-01-15 │ 15,000,000 │ A업체 │ 구매완료 │ │
|
||||
│ │☑ │ DTG-002 │ 2024-01-20 │ 15,500,000 │ B업체 │ 구매완료 │ │
|
||||
│ │□ │ DTG-003 │ 2024-02-01 │ 14,800,000 │ A업체 │ 구매완료 │ │
|
||||
│ │□ │ DTG-004 │ 2024-02-05 │ 16,200,000 │ C업체 │ 구매완료 │ │
|
||||
│ │☑ │ DTG-005 │ 2024-02-10 │ 15,000,000 │ B업체 │ 구매완료 │ │
|
||||
│ │□ │ DTG-006 │ 2024-02-15 │ 15,300,000 │ A업체 │ 구매완료 │ │
|
||||
│ │□ │ DTG-007 │ 2024-02-20 │ 15,700,000 │ B업체 │ 구매완료 │ │
|
||||
│ │□ │ DTG-008 │ 2024-02-25 │ 16,000,000 │ C업체 │ 구매완료 │ │
|
||||
│ └──┴──────────┴────────────┴────────────┴──────────┴──────────┘ │
|
||||
│ │
|
||||
│ 선택된 항목: 3개 [1] [2] [3] [4] [5] │
|
||||
│ │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ [취소] [설치 단계로 이동] ← │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 4.1 단계 이동 확인 대화상자
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ 단계 이동 확인 │
|
||||
├─────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 선택한 3개의 제품을 │
|
||||
│ '구매' 단계에서 '설치' 단계로 │
|
||||
│ 이동하시겠습니까? │
|
||||
│ │
|
||||
│ 이동 사유 (선택): │
|
||||
│ ┌─────────────────────────────────┐ │
|
||||
│ │ 설치 일정 확정 │ │
|
||||
│ │ │ │
|
||||
│ └─────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [취소] [확인] │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. 오딧 로그 (이력) 화면
|
||||
|
||||
### 5.1 제품 상세 화면 내 이력 탭
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 제품 상세: DTG-001 │
|
||||
├──────┬──────────────────────────────────────────────────────────────┤
|
||||
│ 기본 │ 플로우 이력 │ 문서 │ AS 이력 │ │
|
||||
├──────┴──────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ DTG 제품 라이프사이클 이력 │
|
||||
│ │
|
||||
│ ┌──────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 2024-02-20 14:30:25 │ │
|
||||
│ │ [구매] → [설치] │ │
|
||||
│ │ 변경자: 홍길동 (설치팀) │ │
|
||||
│ │ 사유: 고객사 설치 완료 │ │
|
||||
│ └──────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌──────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 2024-01-15 09:15:00 │ │
|
||||
│ │ [시작] → [구매] │ │
|
||||
│ │ 변경자: 김철수 (구매팀) │ │
|
||||
│ │ 사유: 신규 제품 구매 등록 │ │
|
||||
│ └──────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 5.2 타임라인 뷰
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 플로우 이력 (타임라인) │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 2024-01-15 │
|
||||
│ │ │
|
||||
│ ● 구매 (김철수) │
|
||||
│ │ "신규 제품 구매 등록" │
|
||||
│ │ │
|
||||
│ │ (36일 경과) │
|
||||
│ │ │
|
||||
│ 2024-02-20 │
|
||||
│ │ │
|
||||
│ ● 설치 (홍길동) │
|
||||
│ │ "고객사 설치 완료" │
|
||||
│ │ │
|
||||
│ │ (진행 중...) │
|
||||
│ │ │
|
||||
│ ○ 폐기 (예정) │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. 플로우 위젯 스타일 변형
|
||||
|
||||
### 6.1 컴팩트 모드
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ DTG 라이프사이클 │
|
||||
│ [구매 15] → [설치 8] → [폐기 3] │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 6.2 카드 상세 모드
|
||||
|
||||
```
|
||||
┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
|
||||
│ 구매 │ │ 설치 │ │ 폐기 │
|
||||
├──────────────────┤ ├──────────────────┤ ├──────────────────┤
|
||||
│ │ │ │ │ │
|
||||
│ 15건 │→ │ 8건 │→ │ 3건 │
|
||||
│ │ │ │ │ │
|
||||
├──────────────────┤ ├──────────────────┤ ├──────────────────┤
|
||||
│ 조건: │ │ 조건: │ │ 조건: │
|
||||
│ status=구매완료 │ │ status=설치완료 │ │ status=폐기완료 │
|
||||
│ │ │ │ │ │
|
||||
│ 최근 업데이트: │ │ 최근 업데이트: │ │ 최근 업데이트: │
|
||||
│ 2024-02-25 │ │ 2024-02-20 │ │ 2024-01-15 │
|
||||
└──────────────────┘ └──────────────────┘ └──────────────────┘
|
||||
```
|
||||
|
||||
### 6.3 프로그레스 바 스타일
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ DTG 제품 라이프사이클 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 구매 ━━━━━━━━━ 설치 ━━━━━━━━━ 폐기 │
|
||||
│ 15건 57% 8건 31% 3건 12% │
|
||||
│ ████████████▓▓▓▓▓▓▓▓▓░░░░░░░░ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 모바일 반응형 디자인
|
||||
|
||||
### 7.1 모바일 뷰 (세로)
|
||||
|
||||
```
|
||||
┌─────────────────────┐
|
||||
│ ☰ DTG 제품 관리 │
|
||||
├─────────────────────┤
|
||||
│ │
|
||||
│ 라이프사이클: │
|
||||
│ │
|
||||
│ ┌───────────────┐ │
|
||||
│ │ 구매 │ │
|
||||
│ │ 15건 │ │
|
||||
│ └───────────────┘ │
|
||||
│ ↓ │
|
||||
│ ┌───────────────┐ │
|
||||
│ │ 설치 │ │
|
||||
│ │ 8건 │ │
|
||||
│ └───────────────┘ │
|
||||
│ ↓ │
|
||||
│ ┌───────────────┐ │
|
||||
│ │ 폐기 │ │
|
||||
│ │ 3건 │ │
|
||||
│ └───────────────┘ │
|
||||
│ │
|
||||
│ ─────────────── │
|
||||
│ │
|
||||
│ 제품 정보 │
|
||||
│ 제품명: DTG-001 │
|
||||
│ 구매일: 2024-01-15 │
|
||||
│ 설치일: 2024-02-20 │
|
||||
│ │
|
||||
└─────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. 플로우 편집기 상세 기능
|
||||
|
||||
### 8.1 노드 추가 메뉴
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ 캔버스 우클릭 메뉴 │
|
||||
├─────────────────────────────────────────┤
|
||||
│ ➕ 단계 추가 │
|
||||
│ 🔗 연결선 추가 │
|
||||
│ 📋 붙여넣기 │
|
||||
│ ─────────────────────────────────── │
|
||||
│ 🎨 배경 색상 변경 │
|
||||
│ 📏 격자 설정 │
|
||||
│ 🔍 확대/축소 │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 8.2 노드 우클릭 메뉴
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ 단계 메뉴 │
|
||||
├─────────────────────────────────────────┤
|
||||
│ ✏️ 편집 │
|
||||
│ 📋 복사 │
|
||||
│ 🗑️ 삭제 │
|
||||
│ ─────────────────────────────────── │
|
||||
│ 🔗 다음 단계로 연결 │
|
||||
│ 🎨 색상 변경 │
|
||||
│ 📊 데이터 미리보기 (15건) │
|
||||
│ ─────────────────────────────────── │
|
||||
│ ⬆️ 앞으로 가져오기 │
|
||||
│ ⬇️ 뒤로 보내기 │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 8.3 미니맵
|
||||
|
||||
```
|
||||
┌──────────────────────┐
|
||||
│ 미니맵 [X] │
|
||||
├──────────────────────┤
|
||||
│ ┌────────────────┐ │
|
||||
│ │ ● │ │
|
||||
│ │ ● │ │
|
||||
│ │ │ │
|
||||
│ │ ● │ │
|
||||
│ │ │ │
|
||||
│ │ [====] ←현재 │ │
|
||||
│ │ 뷰포트│ │
|
||||
│ └────────────────┘ │
|
||||
│ │
|
||||
│ 줌: 100% │
|
||||
│ [－] ■■■■■ [＋] │
|
||||
└──────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. 플로우 템플릿 선택 화면
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 새 플로우 만들기 [X 닫기] │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 템플릿 선택: │
|
||||
│ │
|
||||
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
|
||||
│ │ 빈 플로우 │ │ 3단계 플로우 │ │ 승인 플로우 │ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ │ │ ● → ● → ● │ │ ● → ● → ● │ │
|
||||
│ │ + │ │ │ │ ↓ ↓ │ │
|
||||
│ │ │ │ │ │ ● ● │ │
|
||||
│ └──────────────┘ └──────────────┘ └──────────────┘ │
|
||||
│ │
|
||||
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
|
||||
│ │ 구매→설치 │ │ 품질검사 │ │ 커스텀 │ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ ● → ● → ● │ │ ● → ● → ● │ │ │ │
|
||||
│ │ │ │ ↓ ↓ ↓ │ │ 불러오기 │ │
|
||||
│ │ │ │ ● ● ● │ │ │ │
|
||||
│ └──────────────┘ └──────────────┘ └──────────────┘ │
|
||||
│ │
|
||||
│ 또는 │
|
||||
│ │
|
||||
│ 플로우 이름: [ ] │
|
||||
│ 연결 테이블: [product_dtg ▼] │
|
||||
│ │
|
||||
│ [취소] [빈 플로우로 시작] │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 10. 데이터 흐름 다이어그램
|
||||
|
||||
### 10.1 전체 시스템 흐름
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 플로우 관리 시스템 │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
│
|
||||
┌────────────────────────┼────────────────────────┐
|
||||
│ │ │
|
||||
▼ ▼ ▼
|
||||
┌───────────────┐ ┌───────────────┐ ┌───────────────┐
|
||||
│ 플로우 정의 │ │ 조건 설정 │ │ 시각화 편집 │
|
||||
│ (정의/수정) │ │ (SQL 변환) │ │ (React Flow) │
|
||||
└───────┬───────┘ └───────┬───────┘ └───────┬───────┘
|
||||
│ │ │
|
||||
└────────────────────────┼────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────┐
|
||||
│ 데이터베이스 저장 │
|
||||
│ - flow_definition │
|
||||
│ - flow_step │
|
||||
│ - flow_step_connection │
|
||||
└────────────┬────────────┘
|
||||
│
|
||||
▼
|
||||
┌────────────────────────┼────────────────────────┐
|
||||
│ │ │
|
||||
▼ ▼ ▼
|
||||
┌───────────────┐ ┌───────────────┐ ┌───────────────┐
|
||||
│ 화면관리 │ │ 실시간 카운트 │ │ 데이터 이동 │
|
||||
│ (위젯 배치) │ │ (조건 조회) │ │ (상태 변경) │
|
||||
└───────┬───────┘ └───────┬───────┘ └───────┬───────┘
|
||||
│ │ │
|
||||
└────────────────────────┼────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────┐
|
||||
│ 사용자 화면에 표시 │
|
||||
│ + 오딧 로그 기록 │
|
||||
└─────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 11. 사용자 시나리오 플로우
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 시나리오: DTG 제품 라이프사이클 관리 │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
단계 1: 플로우 정의
|
||||
─────────────────────
|
||||
관리자가 플로우 관리 화면에서:
|
||||
1. "새 플로우" 클릭
|
||||
2. 이름: "DTG 제품 라이프사이클" 입력
|
||||
3. 테이블: "product_dtg" 선택
|
||||
4. "구매", "설치", "폐기" 3개 단계 추가
|
||||
5. 각 단계의 조건 설정
|
||||
6. 저장
|
||||
|
||||
단계 2: 화면에 배치
|
||||
─────────────────────
|
||||
관리자가 화면관리에서:
|
||||
1. "DTG 제품 관리" 화면 열기
|
||||
2. 컴포넌트 팔레트에서 "플로우 위젯" 드래그
|
||||
3. "DTG 제품 라이프사이클" 플로우 선택
|
||||
4. 레이아웃 및 스타일 설정
|
||||
5. 저장
|
||||
|
||||
단계 3: 일반 사용자 사용
|
||||
─────────────────────
|
||||
일반 사용자가:
|
||||
1. "DTG 제품 관리" 화면 접속
|
||||
2. 플로우 위젯에서 각 단계별 건수 확인
|
||||
- 구매: 15건
|
||||
- 설치: 8건
|
||||
- 폐기: 3건
|
||||
3. "구매" 단계 클릭 → 데이터 리스트 모달 열림
|
||||
4. 설치 완료된 제품 2개 선택
|
||||
5. "설치 단계로 이동" 버튼 클릭
|
||||
6. 이동 사유 입력: "설치 완료"
|
||||
7. 확인 → 데이터 이동 및 오딧 로그 기록
|
||||
|
||||
단계 4: 이력 조회
|
||||
─────────────────────
|
||||
사용자가:
|
||||
1. 특정 제품(DTG-001) 상세 화면 열기
|
||||
2. "플로우 이력" 탭 클릭
|
||||
3. 모든 상태 변경 이력 확인
|
||||
- 언제, 누가, 어떤 단계로 이동했는지
|
||||
- 이동 사유
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 12. 색상 및 테마
|
||||
|
||||
### 12.1 기본 색상 팔레트
|
||||
|
||||
```
|
||||
플로우 단계 색상:
|
||||
┌──────┬──────┬──────┬──────┬──────┬──────┐
|
||||
│ 파랑 │ 초록 │ 주황 │ 빨강 │ 보라 │ 회색 │
|
||||
│#3B82F6│#10B981│#F59E0B│#EF4444│#8B5CF6│#6B7280│
|
||||
└──────┴──────┴──────┴──────┴──────┴──────┘
|
||||
|
||||
상태별 색상:
|
||||
- 시작: 파랑
|
||||
- 진행 중: 초록
|
||||
- 대기: 주황
|
||||
- 완료: 회색
|
||||
- 거부/폐기: 빨강
|
||||
```
|
||||
|
||||
### 12.2 다크모드
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ 플로우 관리 (다크모드) │
|
||||
├─────────────────────────────────────────┤
|
||||
│ 배경: #1F2937 (어두운 회색) │
|
||||
│ 카드: #374151 (중간 회색) │
|
||||
│ 텍스트: #F9FAFB (밝은 회색) │
|
||||
│ 강조: #3B82F6 (파랑) │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
이상으로 플로우 관리 시스템의 UI 설계를 도식화했습니다!
|
||||
216
docs/PHASE1_FLOW_IMPLEMENTATION_SUMMARY.md
Normal file
216
docs/PHASE1_FLOW_IMPLEMENTATION_SUMMARY.md
Normal file
@@ -0,0 +1,216 @@
|
||||
# Phase 1 플로우 관리 시스템 구현 완료 보고서
|
||||
|
||||
## 구현 일시
|
||||
|
||||
2024년 (구현 완료)
|
||||
|
||||
## 구현 내역
|
||||
|
||||
### 1. 데이터베이스 구조 ✅
|
||||
|
||||
#### 생성된 테이블 (5개)
|
||||
|
||||
1. **flow_definition** - 플로우 정의
|
||||
|
||||
- 플로우 이름, 설명, 연결 테이블명
|
||||
- 활성화 상태 관리
|
||||
- 생성자 및 타임스탬프
|
||||
|
||||
2. **flow_step** - 플로우 단계
|
||||
|
||||
- 단계 이름, 순서, 조건(JSONB)
|
||||
- 색상, 캔버스 위치(X, Y)
|
||||
- 타임스탬프
|
||||
|
||||
3. **flow_step_connection** - 플로우 단계 연결
|
||||
|
||||
- 시작 단계 → 종료 단계
|
||||
- 연결선 라벨
|
||||
|
||||
4. **flow_data_status** - 데이터의 현재 플로우 상태
|
||||
|
||||
- 레코드별 현재 단계 추적
|
||||
- 수정자 및 타임스탬프
|
||||
- UNIQUE 제약조건 (flowId + tableName + recordId)
|
||||
|
||||
5. **flow_audit_log** - 플로우 상태 변경 이력
|
||||
- 이전 단계 → 이동 단계
|
||||
- 변경자, 변경 사유, 타임스탬프
|
||||
|
||||
#### 생성된 인덱스 (13개)
|
||||
|
||||
- 테이블명, 활성 상태, 단계 순서, 레코드 조회 등 성능 최적화
|
||||
|
||||
### 2. 백엔드 서비스 구현 ✅
|
||||
|
||||
#### 서비스 파일 (6개)
|
||||
|
||||
1. **flowConditionParser.ts**
|
||||
|
||||
- JSON 조건을 SQL WHERE 절로 변환
|
||||
- 12개 연산자 지원 (equals, not_equals, in, not_in, greater_than, less_than, >=, <=, is_null, is_not_null, like, not_like)
|
||||
- SQL 인젝션 방지 (컬럼명 검증)
|
||||
- 조건 유효성 검증
|
||||
|
||||
2. **flowDefinitionService.ts**
|
||||
|
||||
- 플로우 정의 CRUD
|
||||
- 테이블 존재 여부 확인
|
||||
- 테이블명, 활성 상태로 필터링
|
||||
|
||||
3. **flowStepService.ts**
|
||||
|
||||
- 플로우 단계 CRUD
|
||||
- 단계 순서 재정렬 기능
|
||||
- 조건 JSON 검증
|
||||
|
||||
4. **flowConnectionService.ts**
|
||||
|
||||
- 플로우 단계 연결 관리
|
||||
- 순환 참조 체크 (DFS 알고리즘)
|
||||
- 나가는/들어오는 연결 조회
|
||||
|
||||
5. **flowExecutionService.ts**
|
||||
|
||||
- 단계별 데이터 카운트 조회
|
||||
- 단계별 데이터 리스트 조회 (페이징 지원)
|
||||
- 모든 단계별 카운트 일괄 조회
|
||||
- 현재 플로우 상태 조회
|
||||
|
||||
6. **flowDataMoveService.ts**
|
||||
- 데이터 단계 이동 (트랜잭션 처리)
|
||||
- 여러 데이터 일괄 이동
|
||||
- 오딧 로그 기록
|
||||
- 플로우 이력 조회 (단일 레코드 / 전체 플로우)
|
||||
|
||||
### 3. API 컨트롤러 및 라우터 ✅
|
||||
|
||||
#### FlowController (20개 엔드포인트)
|
||||
|
||||
**플로우 정의 (5개)**
|
||||
|
||||
- POST /api/flow/definitions - 생성
|
||||
- GET /api/flow/definitions - 목록
|
||||
- GET /api/flow/definitions/:id - 상세
|
||||
- PUT /api/flow/definitions/:id - 수정
|
||||
- DELETE /api/flow/definitions/:id - 삭제
|
||||
|
||||
**플로우 단계 (3개)**
|
||||
|
||||
- POST /api/flow/definitions/:flowId/steps - 생성
|
||||
- PUT /api/flow/steps/:stepId - 수정
|
||||
- DELETE /api/flow/steps/:stepId - 삭제
|
||||
|
||||
**플로우 연결 (2개)**
|
||||
|
||||
- POST /api/flow/connections - 생성
|
||||
- DELETE /api/flow/connections/:connectionId - 삭제
|
||||
|
||||
**플로우 실행 (3개)**
|
||||
|
||||
- GET /api/flow/:flowId/step/:stepId/count - 단계별 카운트
|
||||
- GET /api/flow/:flowId/step/:stepId/data - 단계별 데이터 리스트
|
||||
- GET /api/flow/:flowId/counts - 모든 단계별 카운트
|
||||
|
||||
**데이터 이동 (2개)**
|
||||
|
||||
- POST /api/flow/move - 단일 데이터 이동
|
||||
- POST /api/flow/move-batch - 여러 데이터 일괄 이동
|
||||
|
||||
**오딧 로그 (2개)**
|
||||
|
||||
- GET /api/flow/audit/:flowId/:recordId - 레코드별 이력
|
||||
- GET /api/flow/audit/:flowId - 플로우 전체 이력
|
||||
|
||||
### 4. 타입 정의 ✅
|
||||
|
||||
**types/flow.ts** - 완전한 TypeScript 타입 정의
|
||||
|
||||
- 22개 인터페이스 및 타입
|
||||
- 요청/응답 타입 분리
|
||||
- ConditionOperator 타입 정의
|
||||
|
||||
### 5. 통합 완료 ✅
|
||||
|
||||
- app.ts에 flowRoutes 등록
|
||||
- 데이터베이스 마이그레이션 실행 완료
|
||||
- 모든 테이블 및 인덱스 생성 완료
|
||||
|
||||
## 구현된 주요 기능
|
||||
|
||||
### 1. 조건 시스템
|
||||
|
||||
- 복잡한 AND/OR 조건 지원
|
||||
- 12개 연산자로 유연한 필터링
|
||||
- SQL 인젝션 방지
|
||||
|
||||
### 2. 순환 참조 방지
|
||||
|
||||
- DFS 알고리즘으로 순환 참조 체크
|
||||
- 무한 루프 방지
|
||||
|
||||
### 3. 트랜잭션 처리
|
||||
|
||||
- 데이터 이동 시 원자성 보장
|
||||
- flow_data_status + flow_audit_log 동시 업데이트
|
||||
- 실패 시 자동 롤백
|
||||
|
||||
### 4. 성능 최적화
|
||||
|
||||
- 적절한 인덱스 생성
|
||||
- 페이징 지원
|
||||
- 필터링 쿼리 최적화
|
||||
|
||||
### 5. 오딧 로그
|
||||
|
||||
- 모든 상태 변경 추적
|
||||
- 변경자, 변경 사유 기록
|
||||
- 단계명 조인 (from_step_name, to_step_name)
|
||||
|
||||
## 테스트 준비
|
||||
|
||||
**test-flow-api.rest** 파일 생성 (20개 테스트 케이스)
|
||||
|
||||
- 플로우 정의 CRUD
|
||||
- 플로우 단계 관리
|
||||
- 플로우 연결 관리
|
||||
- 데이터 조회 (카운트, 리스트)
|
||||
- 데이터 이동 (단일, 일괄)
|
||||
- 오딧 로그 조회
|
||||
|
||||
## 다음 단계 (Phase 2)
|
||||
|
||||
### 프론트엔드 구현
|
||||
|
||||
1. React Flow 라이브러리 설치
|
||||
2. FlowEditor 컴포넌트
|
||||
3. FlowConditionBuilder UI
|
||||
4. FlowList 컴포넌트
|
||||
5. FlowStepPanel 속성 편집
|
||||
|
||||
### 예상 소요 시간: 1주
|
||||
|
||||
## 기술 스택
|
||||
|
||||
- **Backend**: Node.js + Express + TypeScript
|
||||
- **Database**: PostgreSQL
|
||||
- **ORM**: Raw SQL (트랜잭션 세밀 제어)
|
||||
- **Validation**: 커스텀 검증 로직
|
||||
|
||||
## 코드 품질
|
||||
|
||||
- ✅ TypeScript 타입 안전성
|
||||
- ✅ 에러 처리
|
||||
- ✅ SQL 인젝션 방지
|
||||
- ✅ 트랜잭션 관리
|
||||
- ✅ 코드 주석 및 문서화
|
||||
|
||||
## 결론
|
||||
|
||||
Phase 1의 모든 목표가 성공적으로 완료되었습니다. 백엔드 API가 완전히 구현되었으며, 데이터베이스 스키마도 안정적으로 생성되었습니다. 이제 프론트엔드 구현(Phase 2)을 진행할 준비가 완료되었습니다.
|
||||
|
||||
---
|
||||
|
||||
**구현 완료일**: 2024년
|
||||
**구현자**: AI Assistant
|
||||
**검토 상태**: 대기 중
|
||||
Reference in New Issue
Block a user