issue-sample/flow.md

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