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