647 lines
44 KiB
Markdown
647 lines
44 KiB
Markdown
# 플로우 관리 시스템 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 설계를 도식화했습니다!
|