+ {/* 상세 내용 (펼침) */}
+ {isExpanded && (
+
+ {/* 설명 */}
- ● 상세 업무
+ fontSize: '13px', color: '#374151', padding: '12px',
+ backgroundColor: bgColor, borderRadius: '8px',
+ borderLeft: `3px solid ${color}`, margin: '4px 0 12px',
+ }}>{sub.description}
+
+ {/* Input → Output */}
+
+
+
+ INPUT (필요 자료)
+
+ {sub.input.map((item, i) => (
+
+ ●
+ {item}
+
+ ))}
+
+
→
+
+
+ OUTPUT (산출물)
+
+ {sub.output.map((item, i) => (
+
+ ●
+ {item}
+
+ ))}
+
-
-
-
- {/* 필요 서류 */}
-
-
- ● 필요 서류
-
- {process.documents.map((doc, i) => (
- {doc}
+
+ )}
+
+ );
+}
+
+// --- 상세 모달 컴포넌트 ---
+function DetailModal({ process, onClose }) {
+ const [expandedSub, setExpandedSub] = useState(0); // 첫번째 펼침
+ const modalRef = useRef(null);
+
+ useEffect(() => {
+ const handleEsc = (e) => { if (e.key === 'Escape') onClose(); };
+ document.addEventListener('keydown', handleEsc);
+ return () => document.removeEventListener('keydown', handleEsc);
+ }, [onClose]);
+
+ if (!process) return null;
+
+ return (
+
{ if (e.target === e.currentTarget) onClose(); }}
+ style={{
+ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
+ backgroundColor: 'rgba(0,0,0,0.5)', zIndex: 9999,
+ display: 'flex', alignItems: 'center', justifyContent: 'center',
+ padding: '20px',
+ }}
+ >
+
+ {/* 모달 헤더 */}
+
+
+
+
{process.icon}
+
+
+ {process.id}
+
+ {process.name}
+
+
+
+ 담당: {process.dept}
+ {' · '}상세 업무 {process.subSteps.length}단계
+
+
+
+
+
+
+ {/* 프로세스 설명 */}
+
{process.description}
+
+ {/* 미니 서브플로우 다이어그램 */}
+
+ {process.subSteps.map((sub, i) => (
+
+ setExpandedSub(i)}
+ style={{
+ padding: '4px 10px', borderRadius: '8px', cursor: 'pointer',
+ backgroundColor: expandedSub === i ? process.color : '#FFFFFF',
+ color: expandedSub === i ? '#FFFFFF' : '#374151',
+ fontSize: '11px', fontWeight: 600, whiteSpace: 'nowrap',
+ border: `1px solid ${expandedSub === i ? process.color : '#D1D5DB'}`,
+ transition: 'all 0.15s ease',
+ }}
+ >{sub.name}
+ {i < process.subSteps.length - 1 && }
+
))}
- {/* SAM 연동 */}
-
-
-
● SAM 연동
+ {/* 모달 본문 (스크롤) */}
+
+ {/* 서브스텝 목록 */}
+
+ {process.subSteps.map((sub, i) => (
+
+ setExpandedSub(expandedSub === i ? -1 : i)}
+ />
+ {i < process.subSteps.length - 1 && }
+
+ ))}
+
+
+ {/* 하단 - 필요서류 + SAM 연동 */}
+
+
+
+ 주요 서류
+
+
+ {process.documents.map((doc, i) => (
+ {doc}
+ ))}
+
+
+
- {process.samLink ? (
-
- ↗ {process.samMenu}
-
- ) : (
-
추후 연동 예정
- )}
@@ -428,52 +873,41 @@ function DetailPanel({ process, onClose }) {
// --- 입찰 분기 표시 ---
function BranchInfo() {
return (
-
-
낙찰 → 계약 진행
-
유찰 → 재입찰/종료
+
+
+ 낙찰 → 계약 진행
+
+
+ 유찰 → 재입찰/종료
+
);
}
// --- 메인 앱 ---
function App() {
- const [selected, setSelected] = useState(null);
+ const [modalProcess, setModalProcess] = useState(null);
- const topRow = processes.slice(0, 6); // 영업~입고검수
- const bottomRow = processes.slice(6); // 시공~A/S
+ const topRow = processes.slice(0, 6);
+ const bottomRow = processes.slice(6);
return (
{/* 헤더 */}
-
+
-
업무 Workflow
+
+ 업무 Workflow
+
- 주일기업 업무처리과정 플로우차트 — 각 단계를 클릭하면 상세 정보를 확인할 수 있습니다
+ 주일기업 업무처리과정 플로우차트 — 각 단계를 클릭하면 상세 업무 흐름을 확인할 수 있습니다
-
+
{['영업', '견적', '시공', '정산'].map((label, i) => (
{label}
))}
@@ -481,73 +915,50 @@ function App() {
{/* 플로우차트 영역 */}
- {/* 상단 행: 영업 → 입고검수 */}
+ {/* 상단 행 */}
{topRow.map((p, i) => (
-
+
{i < topRow.length - 1 && }
))}
- {/* 입찰 분기 표시 (3번째 노드 아래) */}
- {/* 연결 화살표 (상단 → 하단) */}
-
-
+ {/* 연결 화살표 */}
+
- {/* 하단 행: 시공 → A/S */}
+ {/* 하단 행 */}
{bottomRow.map((p, i) => (
-
+
{i < bottomRow.length - 1 && }
))}
- {/* 상세 패널 */}
- {selected && (
-
setSelected(null)} />
- )}
-
{/* 범례 */}
범례:
- 클릭 → 상세 보기
+ 클릭 → 상세 업무 모달
⑂ 분기점 (입찰 결과)
↗ SAM 메뉴 바로가기
+ ESC 키로 모달 닫기
+
+ {/* 상세 모달 */}
+ {modalProcess && (
+ setModalProcess(null)} />
+ )}
);
}