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