diff --git a/flow.md b/flow.md new file mode 100644 index 0000000..a06810b --- /dev/null +++ b/flow.md @@ -0,0 +1,44 @@ +# Flow Drilldown Prototype (한맥ERP) + +이 문서는 한맥ERP의 비즈니스 프로세스를 시각화하고 관리하기 위한 **Flow Drilldown** 프로토타입의 주요 기능과 구조를 설명합니다. + +## 1. 개요 +한맥ERP의 전체 업무 흐름을 메인 단계(Main Flow), 상세 단계(Sub Flow), 세부 항목(Drill Flow)의 3단계 계층 구조로 시각화하여 관리할 수 있는 도구입니다. + +## 2. 주요 기능 +- **계층적 흐름 관리**: 메인 단계 선택 시 하위 단계가 자동으로 전개되는 드릴다운 인터페이스를 제공합니다. +- **편집 모드**: 프로세스 단계를 추가, 수정, 삭제하거나 순서를 조정할 수 있습니다. +- **상세 정보 기록**: 각 단계별로 메모(Note), 시스템 경로(System Path), 담당 팀, 관련 시스템 정보를 입력할 수 있습니다. +- **이미지 업로드 및 관리**: 각 업무 단계의 화면 설계서나 참고 이미지를 여러 장 업로드하고 관리할 수 있습니다. +- **프로세스 맵 (Sitemap)**: 전체 비즈니스 프로세스를 한눈에 파악할 수 있는 전체 지도를 제공하며, 팀별/시스템별 필터링이 가능합니다. +- **데이터 가져오기/내보내기**: 작업한 플로우 모델과 메타데이터를 JSON 파일로 백업하거나 복구할 수 있습니다. + +## 3. 업무 프로세스 구조 (한맥ERP 기준) +### Main Flow (1단계) +1. **사전조사** +2. **입찰** +3. **계약** +4. **계획** +5. **기성** +6. **외주** +7. **실행률/손익분석** + +### Sub Flow (2단계 - 예시) +- **입찰**: 입찰공고 -> 참여검토 -> 입찰진행 -> 입찰결과 +- **기성**: 견적검토 -> 기성청구 -> 기성검토 -> 전표작성 -> 수금 +- **외주**: 외주견적검토 -> 외주계약 -> 외주기성청구 -> 외주기성검토 -> 전표작성 -> 출금 + +### Drill Flow (3단계 - 예시) +- **기성청구**: 기성내역 등록 -> 증빙 첨부 -> 청구 상신 +- **외주계약**: 외주업체 선정 -> 단가 협의 -> 외주계약관리 + +## 4. 기술 스택 +- **Frontend**: Vanilla JS, HTML5, CSS3 +- **Storage**: Browser LocalStorage (데이터 영속성 유지) +- **Layout**: CSS Flexbox & Grid 기반의 반응형 레이아웃 + +## 5. 사용 방법 +1. 메인 화면에서 확인하고자 하는 **MAIN FLOW** 단계를 클릭합니다. +2. 우측으로 전개되는 **SUB FLOW** 및 **DRILL FLOW**를 통해 세부 업무를 확인합니다. +3. 각 단계를 클릭하면 우측 **STEP DETAIL** 패널에서 상세 설명과 이미지를 확인하거나 편집할 수 있습니다. +4. 상단 **MAP** 버튼을 눌러 전체 업무 흐름과 담당 부서 현황을 한눈에 파악할 수 있습니다.