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