From 53a851740a08fb6d9ac8eecde14829b2a57fa531 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?= Date: Thu, 5 Mar 2026 21:27:50 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20[juil]=20=EC=97=85=EB=AC=B4=20Workflow?= =?UTF-8?q?=20=EB=B6=84=EA=B8=B0=ED=98=95=20UI=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 입찰 참여 기업 / 수의계약 기업 두 경로로 분기 - A경로: 영업 → 견적서 작성 → 입찰 참여 → 수주/계약 - B경로: 영업 → 견적서 작성 → 수주/계약 (입찰 생략) - 분기/합류 시각적 연결선으로 표현 - 수주/계약 이후 공통 프로세스로 합류 --- resources/views/juil/workflow.blade.php | 288 ++++++++++++++---------- 1 file changed, 175 insertions(+), 113 deletions(-) diff --git a/resources/views/juil/workflow.blade.php b/resources/views/juil/workflow.blade.php index 72055f76..7d228bcf 100644 --- a/resources/views/juil/workflow.blade.php +++ b/resources/views/juil/workflow.blade.php @@ -61,15 +61,59 @@ ], }, { - id: 2, phase: 'bid', name: '입찰 참여', icon: '🏷️', dept: '영업팀', - color: '#EC4899', bgColor: '#FDF2F8', - description: '공공/대형 프로젝트의 경우 입찰에 참여한다. 소규모 업체나 수의계약의 경우 이 단계를 생략하고 바로 견적서 작성으로 진행한다.', - documents: ['입찰서', '기술제안서', '사업자등록증 사본'], + id: 2, phase: 'estimate', name: '견적서 작성', icon: '🧮', dept: '견적팀', + color: '#8B5CF6', bgColor: '#F5F3FF', + description: '자재/인건비/경비를 산출하여 견적서를 작성한다. 입찰 프로젝트는 입찰가 산정에, 수의계약은 고객 제출용으로 활용한다.', + documents: ['견적서', '단가산출서', '자재목록'], samLink: '/juil/estimate', samMenu: '견적/입찰/공사관리', - branch: true, optional: true, subSteps: [ { - id: 'S2-1', name: '입찰서류 준비', icon: '📂', + id: 'S2-1', name: '물량 산출', icon: '📏', + description: '도면과 실측 데이터를 기반으로 자재별 물량(수량)을 산출한다.', + input: ['도면', '실측 데이터', '현장조사서'], + output: ['물량산출서 (자재별 수량)'], + responsible: '견적 담당자', + tips: ['로스율(5~10%) 반드시 반영', '현장 여건에 따른 추가 물량 고려'], + duration: '2~3일', + }, + { + id: 'S2-2', name: '단가 산정', icon: '💵', + description: '자재 단가, 인건비, 장비비, 경비 등 각 항목의 단가를 산정한다.', + input: ['물량산출서', '최근 자재 시세', '노무단가표'], + output: ['단가산출서'], + responsible: '견적 담당자', + tips: ['자재 시세는 최근 3개월 평균 적용', '노무단가는 대한건설협회 기준 참조'], + duration: '1~2일', + }, + { + id: 'S2-3', name: '견적가 산출', icon: '🧮', + description: '물량 x 단가를 계산하고, 이윤율/관리비를 적용하여 최종 견적가를 산출한다.', + input: ['물량산출서', '단가산출서', '이윤율 기준'], + output: ['원가계산서', '내부 견적서'], + responsible: '견적팀장', + tips: ['이윤율은 프로젝트 규모별 차등 적용', '원가 대비 견적가 검증 필수'], + duration: '1일', + }, + { + id: 'S2-4', name: '견적서 작성/검토', icon: '📋', + description: '고객 제출용 견적서를 작성하고, 팀장 검토 후 최종 확정한다.', + input: ['원가계산서', '고객 요구 양식'], + output: ['공식 견적서 (PDF)'], + responsible: '견적팀장 → 대표이사 승인', + tips: ['고객사 양식이 별도로 있는지 확인', '견적 유효기간 명시 (보통 30일)'], + duration: '1일', + }, + ], + }, + { + id: 3, phase: 'bid', name: '입찰 참여', icon: '🏷️', dept: '영업팀', + color: '#EC4899', bgColor: '#FDF2F8', + description: '공공/대형 프로젝트의 경우 견적서를 기반으로 입찰에 참여한다. 소규모 업체나 수의계약은 이 단계를 생략한다.', + documents: ['입찰서', '기술제안서', '사업자등록증 사본'], + samLink: '/juil/estimate', samMenu: '견적/입찰/공사관리', + subSteps: [ + { + id: 'S3-1', name: '입찰서류 준비', icon: '📂', description: '입찰 참여에 필요한 서류(사업자등록증, 실적증명, 재무제표 등)를 준비한다.', input: ['입찰 공고문 (필요서류 목록)', '회사 기본서류'], output: ['입찰서류 패키지'], @@ -106,51 +150,6 @@ }, ], }, - { - id: 3, phase: 'estimate', name: '견적서 작성', icon: '🧮', dept: '견적팀', - color: '#8B5CF6', bgColor: '#F5F3FF', - description: '자재/인건비/경비를 산출하여 견적서를 작성한다. 입찰 프로젝트는 입찰가 산정에, 수의계약은 고객 제출용으로 활용한다.', - documents: ['견적서', '단가산출서', '자재목록'], - samLink: '/juil/estimate', samMenu: '견적/입찰/공사관리', - subSteps: [ - { - id: 'S3-1', name: '물량 산출', icon: '📏', - description: '도면과 실측 데이터를 기반으로 자재별 물량(수량)을 산출한다.', - input: ['도면', '실측 데이터', '현장조사서'], - output: ['물량산출서 (자재별 수량)'], - responsible: '견적 담당자', - tips: ['로스율(5~10%) 반드시 반영', '현장 여건에 따른 추가 물량 고려'], - duration: '2~3일', - }, - { - id: 'S3-2', name: '단가 산정', icon: '💵', - description: '자재 단가, 인건비, 장비비, 경비 등 각 항목의 단가를 산정한다.', - input: ['물량산출서', '최근 자재 시세', '노무단가표'], - output: ['단가산출서'], - responsible: '견적 담당자', - tips: ['자재 시세는 최근 3개월 평균 적용', '노무단가는 대한건설협회 기준 참조'], - duration: '1~2일', - }, - { - id: 'S3-3', name: '견적가 산출', icon: '🧮', - description: '물량 x 단가를 계산하고, 이윤율/관리비를 적용하여 최종 견적가를 산출한다.', - input: ['물량산출서', '단가산출서', '이윤율 기준'], - output: ['원가계산서', '내부 견적서'], - responsible: '견적팀장', - tips: ['이윤율은 프로젝트 규모별 차등 적용', '원가 대비 견적가 검증 필수'], - duration: '1일', - }, - { - id: 'S3-4', name: '견적서 작성/검토', icon: '📋', - description: '고객 제출용 견적서를 작성하고, 팀장 검토 후 최종 확정한다.', - input: ['원가계산서', '고객 요구 양식'], - output: ['공식 견적서 (PDF)'], - responsible: '견적팀장 → 대표이사 승인', - tips: ['고객사 양식이 별도로 있는지 확인', '견적 유효기간 명시 (보통 30일)'], - duration: '1일', - }, - ], - }, { id: 4, phase: 'contract', name: '수주/계약', icon: '📝', dept: '영업팀', color: '#10B981', bgColor: '#ECFDF5', @@ -583,18 +582,13 @@ function ProcessNode({ process, isActive, onClick }) { fontSize: '11px', color: '#FFF', backgroundColor: process.color, borderRadius: '10px', padding: '1px 8px', display: 'inline-block', }}>{process.dept} - {process.optional && ( + {process.phase === 'bid' && (
⑂
- )} - {process.optional && ( -
생략 가능
+ }}>A )} ); @@ -875,26 +869,16 @@ function DetailModal({ process, onClose }) { ); } -// --- 분기 표시 --- -function BranchInfo() { - return ( -
- - 대형/공공 → 입찰 참여 → 견적서 - - - 소규모/수의계약 → 입찰 생략 → 견적서 - -
- ); -} - // --- 메인 앱 --- function App() { const [modalProcess, setModalProcess] = useState(null); - const topRow = processes.slice(0, 6); - const bottomRow = processes.slice(6); + // 프로세스 참조 + const p = {}; + processes.forEach(proc => { p[proc.phase] = proc; }); + + // 공통 후반 프로세스 (수주/계약 이후) + const postContract = [p.order, p.receive, p.construct, p.inspect, p.billing, p.payment, p.as].filter(Boolean); return (
@@ -908,57 +892,128 @@ function App() { 주일기업 업무처리과정 플로우차트 — 각 단계를 클릭하면 상세 업무 흐름을 확인할 수 있습니다

-
- {['영업', '견적', '시공', '정산'].map((label, i) => ( - {label} - ))} -
{/* 플로우차트 영역 */}
- {/* 상단 행 */} -
- {topRow.map((p, i) => ( - - - {i < topRow.length - 1 && } - - ))} + {/* === 1단계: 영업 (공통 시작점) === */} +
+
- - - {/* 연결 화살표 */} -
-
-
-
+ {/* 분기 화살표 */} +
+ {/* 중앙 세로선 */} +
+ {/* 가로 분기선 */} +
+ {/* 왼쪽 세로선 + 화살표 */} +
+
+
+
+ {/* 오른쪽 세로선 + 화살표 */} +
+
+
- {/* 하단 행 */} + {/* === 2단계: 두 경로 분기 === */} +
+ {/* A 경로: 입찰 기업 */} +
+
+ 🏢 + A. 입찰 참여 기업 (대형/공공 프로젝트) +
+
+ + + +
+
+ 견적서 작성 → 입찰 참여 → 낙찰 시 수주 +
+
+ + {/* B 경로: 수의계약 */} +
+
+ 🏠 + B. 수의계약 (소규모/직접 의뢰) +
+
+ +
+
+ 견적서 작성 → 고객 승인 시 수주 +
+
+
+ + {/* 합류 화살표 */} +
+ {/* 왼쪽 세로선 */} +
+
+
+ {/* 오른쪽 세로선 */} +
+
+
+ {/* 가로 합류선 */} +
+ {/* 중앙 세로선 + 화살표 */} +
+
+
+
+
+ + {/* === 3단계: 수주/계약 (합류 지점) === */} +
+ +
+ + {/* 아래 화살표 */} +
+
+
+
+
+
+ + {/* === 4단계: 공통 후반 프로세스 === */}
- {bottomRow.map((p, i) => ( - - - {i < bottomRow.length - 1 && } + {postContract.map((proc, i) => ( + + + {i < postContract.length - 1 && } ))}
@@ -969,11 +1024,18 @@ function App() { display: 'flex', gap: '16px', flexWrap: 'wrap', padding: '12px 16px', backgroundColor: '#F9FAFB', borderRadius: '8px', border: '1px solid #E5E7EB', - fontSize: '12px', color: '#6B7280', + fontSize: '12px', color: '#6B7280', alignItems: 'center', }}> 범례: + + + 입찰 참여 경로 + + + + 수의계약 경로 + 클릭 → 상세 업무 모달 - ⑂ 생략 가능 단계 (입찰) ↗ SAM 메뉴 바로가기 ESC 키로 모달 닫기