Create flow.md (Summary of Flow Drilldown for Hanmac ERP)

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** 버튼을 눌러 전체 업무 흐름과 담당 부서 현황을 한눈에 파악할 수 있습니다.