Compare commits
2 Commits
bd23e00232
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
65103af5c0 | ||
|
|
8d9c2bd5c3 |
File diff suppressed because it is too large
Load Diff
@@ -5,30 +5,384 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>1단계: 준비 단계 - TK Project</title>
|
<title>1단계: 준비 단계 - TK Project</title>
|
||||||
<link rel="stylesheet" href="styles/main.css">
|
<link rel="stylesheet" href="styles/main.css">
|
||||||
<link rel="stylesheet" href="styles/devonthink.css">
|
<link rel="stylesheet" href="styles/devonthink.css?v=2">
|
||||||
|
<style>
|
||||||
|
/* 인라인 CSS로 강제 적용 */
|
||||||
|
.simple-note {
|
||||||
|
background: linear-gradient(135deg, #e8f5e8 0%, #f0f9ff 100%) !important;
|
||||||
|
border-left: 4px solid #34A853 !important;
|
||||||
|
padding: 20px !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
margin: 20px 0 !important;
|
||||||
|
box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.15) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.concept-step {
|
||||||
|
background: white !important;
|
||||||
|
border-radius: 16px !important;
|
||||||
|
padding: 30px !important;
|
||||||
|
box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.15) !important;
|
||||||
|
border: 1px solid #E8EAED !important;
|
||||||
|
transition: all 0.3s ease !important;
|
||||||
|
position: relative !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
margin: 25px 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.concept-step::before {
|
||||||
|
content: '' !important;
|
||||||
|
position: absolute !important;
|
||||||
|
top: 0 !important;
|
||||||
|
left: 0 !important;
|
||||||
|
right: 0 !important;
|
||||||
|
height: 4px !important;
|
||||||
|
background: linear-gradient(90deg, #4A90E2, #7BB3F0) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.concept-step:hover {
|
||||||
|
transform: translateY(-4px) !important;
|
||||||
|
box-shadow: 0 4px 6px -1px rgba(60, 64, 67, 0.15) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.concept-step h4 {
|
||||||
|
color: #4A90E2 !important;
|
||||||
|
font-size: 1.3em !important;
|
||||||
|
margin-bottom: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.concept-list {
|
||||||
|
list-style: none !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 20px 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.concept-list li {
|
||||||
|
background: #F8F9FA !important;
|
||||||
|
padding: 12px 20px !important;
|
||||||
|
margin: 8px 0 !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
border-left: 3px solid #7BB3F0 !important;
|
||||||
|
transition: all 0.2s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.concept-list li:hover {
|
||||||
|
background: #F1F3F4 !important;
|
||||||
|
transform: translateX(5px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-box {
|
||||||
|
background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%) !important;
|
||||||
|
border: 2px solid #FBBC04 !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
padding: 20px !important;
|
||||||
|
margin: 20px 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefit-note {
|
||||||
|
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
|
||||||
|
border: 2px solid #7BB3F0 !important;
|
||||||
|
border-radius: 10px !important;
|
||||||
|
padding: 15px 20px !important;
|
||||||
|
margin-top: 20px !important;
|
||||||
|
color: #357ABD !important;
|
||||||
|
font-weight: 500 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.key-benefits {
|
||||||
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
|
||||||
|
border-radius: 16px !important;
|
||||||
|
padding: 30px !important;
|
||||||
|
margin: 40px 0 !important;
|
||||||
|
border: 1px solid #E8EAED !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefits-grid {
|
||||||
|
display: grid !important;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
|
||||||
|
gap: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefit-item {
|
||||||
|
background: white !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
padding: 25px !important;
|
||||||
|
text-align: center !important;
|
||||||
|
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.1) !important;
|
||||||
|
border: 1px solid #E8EAED !important;
|
||||||
|
transition: all 0.3s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefit-item:hover {
|
||||||
|
transform: translateY(-4px) !important;
|
||||||
|
box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.15) !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="workflow-page">
|
||||||
<div class="workflow-detail-page">
|
<div class="workflow-detail-page">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<a href="index.html#workflow-overview" class="btn-back">← 워크플로우로 돌아가기</a>
|
<a href="../presentation.html" class="btn-back">← 프레젠테이션으로 돌아가기</a>
|
||||||
<h1>🚀 1단계: 준비 단계</h1>
|
<h1>🚀 1단계: 준비 단계</h1>
|
||||||
<p class="page-description">프로젝트 등록 및 각 부서별 업무 분기 단계</p>
|
<p class="page-description">프로젝트 등록 및 각 부서별 업무 분기 단계</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="workflow-detail-container">
|
<div class="workflow-detail-container">
|
||||||
<div class="detail-section">
|
<div class="detail-section">
|
||||||
<h3>📋 프로젝트 등록</h3>
|
<h3>📋 프로젝트 등록 (간소화)</h3>
|
||||||
<div class="process-flow">
|
<div class="simple-note">
|
||||||
<div class="process-step">
|
<p>✅ <strong>Job No. 부여 및 기본 정보 등록</strong> - 별도 시스템에서 처리</p>
|
||||||
<h4>수주에 따른 Job No. 부여</h4>
|
|
||||||
<p><strong>담당자:</strong> 영업 또는 PM</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="process-step">
|
</div>
|
||||||
<h4>업무 내용</h4>
|
|
||||||
<ul>
|
<div class="detail-section">
|
||||||
<li>관련 정보 업로드 (관련 자료 + 담당자 정리본)</li>
|
<h3>📐 표준 스펙 관리 시스템</h3>
|
||||||
<li>일정을 고려한 외주 & 자체제작 여부 확정</li>
|
<p class="section-description"><strong>핵심 개념:</strong> 회사 표준 스펙을 기반으로 프로젝트별 맞춤 스펙을 효율적으로 관리</p>
|
||||||
|
|
||||||
|
<div class="concept-explanation">
|
||||||
|
<div class="concept-step">
|
||||||
|
<h4>🏢 1단계: 회사 표준 스펙 활용</h4>
|
||||||
|
<div class="concept-content">
|
||||||
|
<p><strong>목적:</strong> 매번 새로 작성하지 않고 검증된 표준 스펙을 재사용</p>
|
||||||
|
<ul class="concept-list">
|
||||||
|
<li><strong>배관 표준 스펙:</strong> 파이프, 밸브, 피팅 표준 사양</li>
|
||||||
|
<li><strong>용접 표준 스펙:</strong> 용접 절차, 검사 기준</li>
|
||||||
|
<li><strong>도장 표준 스펙:</strong> 표면처리, 도장 사양</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<div class="benefit-note">
|
||||||
|
💡 <strong>효과:</strong> 스펙 작성 시간 80% 단축, 품질 일관성 확보
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="concept-step">
|
||||||
|
<h4>🎯 2단계: 고객 요구사항 반영</h4>
|
||||||
|
<div class="concept-content">
|
||||||
|
<p><strong>목적:</strong> 표준 스펙에서 고객사별 특수 요구사항만 추가/변경</p>
|
||||||
|
<div class="example-box">
|
||||||
|
<h5>📋 변경 예시 (ABC 공장 프로젝트)</h5>
|
||||||
|
<ul class="example-list">
|
||||||
|
<li><strong>파이프 재질:</strong> STS304 → STS316L (고온 환경 대응)</li>
|
||||||
|
<li><strong>밸브 압력 등급:</strong> 150LB → 300LB (운전 압력 상승)</li>
|
||||||
|
<li><strong>도장 색상:</strong> 표준 회색 → 고객사 지정 파란색</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="benefit-note">
|
||||||
|
💡 <strong>효과:</strong> 변경사항만 관리하여 실수 방지, 이력 추적 가능
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="concept-step">
|
||||||
|
<h4>📁 3단계: 문서 통합 관리</h4>
|
||||||
|
<div class="concept-content">
|
||||||
|
<p><strong>목적:</strong> 고객사 원본 문서와 우리 스펙을 통합하여 최종 스펙서 생성</p>
|
||||||
|
<div class="process-flow">
|
||||||
|
<div class="flow-item">📤 고객사 PDF 업로드</div>
|
||||||
|
<div class="flow-arrow">→</div>
|
||||||
|
<div class="flow-item">📋 표준 스펙 적용</div>
|
||||||
|
<div class="flow-arrow">→</div>
|
||||||
|
<div class="flow-item">✏️ 변경사항 추가</div>
|
||||||
|
<div class="flow-arrow">→</div>
|
||||||
|
<div class="flow-item">📄 최종 스펙서 생성</div>
|
||||||
|
</div>
|
||||||
|
<div class="benefit-note">
|
||||||
|
💡 <strong>효과:</strong> 모든 관련 문서가 하나로 통합, 다운로드/공유 간편
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="key-benefits">
|
||||||
|
<h4>🎯 핵심 가치</h4>
|
||||||
|
<div class="benefits-grid">
|
||||||
|
<div class="benefit-item">
|
||||||
|
<div class="benefit-icon">⚡</div>
|
||||||
|
<div class="benefit-content">
|
||||||
|
<h5>효율성 극대화</h5>
|
||||||
|
<p>표준 스펙 재사용으로 작성 시간 대폭 단축</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="benefit-item">
|
||||||
|
<div class="benefit-icon">🎯</div>
|
||||||
|
<div class="benefit-content">
|
||||||
|
<h5>품질 일관성</h5>
|
||||||
|
<p>검증된 표준을 기반으로 한 안정적 품질</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="benefit-item">
|
||||||
|
<div class="benefit-icon">📋</div>
|
||||||
|
<div class="benefit-content">
|
||||||
|
<h5>변경 이력 관리</h5>
|
||||||
|
<p>모든 변경사항과 사유를 체계적으로 기록</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="benefit-item">
|
||||||
|
<div class="benefit-icon">🔗</div>
|
||||||
|
<div class="benefit-content">
|
||||||
|
<h5>문서 통합</h5>
|
||||||
|
<p>분산된 문서들을 하나의 최종 스펙서로 통합</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="detail-section">
|
||||||
|
<h3>🏭 외주 vs 자체제작 결정 시스템</h3>
|
||||||
|
<p class="section-description"><strong>핵심 개념:</strong> 프로젝트 특성과 회사 역량을 분석하여 최적의 제작 방식 결정</p>
|
||||||
|
|
||||||
|
<div class="decision-process">
|
||||||
|
<div class="decision-step">
|
||||||
|
<h4>📊 1단계: 프로젝트 분석</h4>
|
||||||
|
<div class="analysis-content">
|
||||||
|
<div class="analysis-factors">
|
||||||
|
<div class="factor-group">
|
||||||
|
<h5>🎯 기술적 요소</h5>
|
||||||
|
<ul class="factor-list">
|
||||||
|
<li><strong>기술 난이도:</strong> 고난이도 → 외주, 표준 사양 → 자체제작</li>
|
||||||
|
<li><strong>특수 공법:</strong> 특수 용접, 도금 등 → 외주 전문업체</li>
|
||||||
|
<li><strong>품질 요구사항:</strong> 초고압, 특수재질 → 외주</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="factor-group">
|
||||||
|
<h5>⏰ 일정적 요소</h5>
|
||||||
|
<ul class="factor-list">
|
||||||
|
<li><strong>납기 여유:</strong> 촉박한 납기 → 외주 (병렬 진행)</li>
|
||||||
|
<li><strong>생산팀 일정:</strong> 포화 상태 → 외주</li>
|
||||||
|
<li><strong>긴급도:</strong> 긴급 프로젝트 → 외주</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="factor-group">
|
||||||
|
<h5>💰 경제적 요소</h5>
|
||||||
|
<ul class="factor-list">
|
||||||
|
<li><strong>물량 규모:</strong> 대량 → 자체제작, 소량 → 외주</li>
|
||||||
|
<li><strong>수익성:</strong> 고수익 → 자체제작</li>
|
||||||
|
<li><strong>자재비 비중:</strong> 높은 자재비 → 자체제작</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="decision-step">
|
||||||
|
<h4>⚖️ 2단계: 의사결정 매트릭스</h4>
|
||||||
|
<div class="decision-matrix">
|
||||||
|
<div class="matrix-example">
|
||||||
|
<h5>📋 ABC 공장 배관공사 예시</h5>
|
||||||
|
<div class="matrix-table">
|
||||||
|
<div class="matrix-row header">
|
||||||
|
<div class="matrix-cell">평가 항목</div>
|
||||||
|
<div class="matrix-cell">가중치</div>
|
||||||
|
<div class="matrix-cell">외주</div>
|
||||||
|
<div class="matrix-cell">자체제작</div>
|
||||||
|
<div class="matrix-cell">결과</div>
|
||||||
|
</div>
|
||||||
|
<div class="matrix-row">
|
||||||
|
<div class="matrix-cell">기술 난이도</div>
|
||||||
|
<div class="matrix-cell">30%</div>
|
||||||
|
<div class="matrix-cell score-high">8점</div>
|
||||||
|
<div class="matrix-cell score-medium">6점</div>
|
||||||
|
<div class="matrix-cell">외주 우세</div>
|
||||||
|
</div>
|
||||||
|
<div class="matrix-row">
|
||||||
|
<div class="matrix-cell">납기 여유</div>
|
||||||
|
<div class="matrix-cell">25%</div>
|
||||||
|
<div class="matrix-cell score-medium">6점</div>
|
||||||
|
<div class="matrix-cell score-high">8점</div>
|
||||||
|
<div class="matrix-cell">자체 우세</div>
|
||||||
|
</div>
|
||||||
|
<div class="matrix-row">
|
||||||
|
<div class="matrix-cell">비용 효율성</div>
|
||||||
|
<div class="matrix-cell">25%</div>
|
||||||
|
<div class="matrix-cell score-medium">5점</div>
|
||||||
|
<div class="matrix-cell score-high">9점</div>
|
||||||
|
<div class="matrix-cell">자체 우세</div>
|
||||||
|
</div>
|
||||||
|
<div class="matrix-row">
|
||||||
|
<div class="matrix-cell">품질 관리</div>
|
||||||
|
<div class="matrix-cell">20%</div>
|
||||||
|
<div class="matrix-cell score-high">7점</div>
|
||||||
|
<div class="matrix-cell score-high">8점</div>
|
||||||
|
<div class="matrix-cell">자체 우세</div>
|
||||||
|
</div>
|
||||||
|
<div class="matrix-row total">
|
||||||
|
<div class="matrix-cell"><strong>총점</strong></div>
|
||||||
|
<div class="matrix-cell">100%</div>
|
||||||
|
<div class="matrix-cell"><strong>6.5점</strong></div>
|
||||||
|
<div class="matrix-cell"><strong>7.8점</strong></div>
|
||||||
|
<div class="matrix-cell result-selected"><strong>자체제작 선택</strong></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="decision-step">
|
||||||
|
<h4>📝 3단계: 결정 사항 문서화</h4>
|
||||||
|
<div class="decision-documentation">
|
||||||
|
<div class="decision-result">
|
||||||
|
<div class="result-box selected">
|
||||||
|
<div class="result-header">
|
||||||
|
<span class="result-icon">🏭</span>
|
||||||
|
<h5>최종 결정: 자체제작</h5>
|
||||||
|
</div>
|
||||||
|
<div class="result-details">
|
||||||
|
<p><strong>결정 근거:</strong></p>
|
||||||
|
<ul>
|
||||||
|
<li>표준 배관 사양으로 기술적 난이도 적정</li>
|
||||||
|
<li>충분한 납기 여유 (8주)</li>
|
||||||
|
<li>대량 물량으로 자체제작 시 원가 절감 효과 큼</li>
|
||||||
|
<li>생산팀 일정 여유 있음</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alternative-option">
|
||||||
|
<h5>🏢 외주 시 고려사항</h5>
|
||||||
|
<ul class="alternative-list">
|
||||||
|
<li><strong>추천 업체:</strong> 대한배관, 코리아파이프 (기존 협력업체)</li>
|
||||||
|
<li><strong>예상 비용:</strong> 자체제작 대비 15% 증가</li>
|
||||||
|
<li><strong>납기:</strong> 6주 (2주 단축 가능)</li>
|
||||||
|
<li><strong>품질 리스크:</strong> 중간 (업체 품질 관리 필요)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="decision-impact">
|
||||||
|
<h4>🎯 결정에 따른 후속 조치</h4>
|
||||||
|
<div class="impact-comparison">
|
||||||
|
<div class="impact-item">
|
||||||
|
<div class="impact-header">
|
||||||
|
<span class="impact-icon">🏭</span>
|
||||||
|
<h5>자체제작 선택 시</h5>
|
||||||
|
</div>
|
||||||
|
<div class="impact-actions">
|
||||||
|
<ul class="action-list">
|
||||||
|
<li><strong>설계팀:</strong> 상세 도면 작성 및 BOM 생성</li>
|
||||||
|
<li><strong>구매팀:</strong> 자재 구매 신청 및 발주</li>
|
||||||
|
<li><strong>생산팀:</strong> 제작 일정 수립 및 인력 배치</li>
|
||||||
|
<li><strong>품질팀:</strong> 공정별 검사 계획 수립</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="impact-item">
|
||||||
|
<div class="impact-header">
|
||||||
|
<span class="impact-icon">🏢</span>
|
||||||
|
<h5>외주 선택 시</h5>
|
||||||
|
</div>
|
||||||
|
<div class="impact-actions">
|
||||||
|
<ul class="action-list">
|
||||||
|
<li><strong>설계팀:</strong> 외주용 도면 패키지 준비</li>
|
||||||
|
<li><strong>구매팀:</strong> 외주업체 견적 및 발주</li>
|
||||||
|
<li><strong>생산팀:</strong> 일정 여유 확보, 다른 프로젝트 집중</li>
|
||||||
|
<li><strong>품질팀:</strong> 외주업체 품질 관리 계획</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -4,67 +4,471 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>2단계: 프로젝트 진행 단계 - TK Project</title>
|
<title>2단계: 프로젝트 진행 단계 - TK Project</title>
|
||||||
<link rel="stylesheet" href="styles/main.css">
|
<style>
|
||||||
<link rel="stylesheet" href="styles/devonthink.css">
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
background: linear-gradient(135deg, #87CEEB 0%, #B0E0E6 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
color: #333;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.presentation-container {
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 40px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-title {
|
||||||
|
font-size: 5em;
|
||||||
|
font-weight: 800;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-subtitle {
|
||||||
|
font-size: 2.2em;
|
||||||
|
font-weight: 300;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-btn {
|
||||||
|
position: fixed;
|
||||||
|
top: 30px;
|
||||||
|
left: 30px;
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
color: white;
|
||||||
|
padding: 15px 25px;
|
||||||
|
border-radius: 50px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-btn:hover {
|
||||||
|
background: rgba(255,255,255,0.3);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 프로세스 슬라이드 스타일 */
|
||||||
|
.process-slides {
|
||||||
|
margin-bottom: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 60px;
|
||||||
|
max-width: 1600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-slide {
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 30px;
|
||||||
|
padding: 60px 50px;
|
||||||
|
box-shadow: 0 20px 60px rgba(128,128,128,0.3);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
min-height: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-slide:hover {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
box-shadow: 0 30px 80px rgba(128,128,128,0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-icon {
|
||||||
|
font-size: 5em;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-slide h2 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-flow {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-step {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 25px;
|
||||||
|
padding: 25px;
|
||||||
|
background: #f7fafc;
|
||||||
|
border-radius: 20px;
|
||||||
|
border-left: 6px solid #e2e8f0;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-step:hover {
|
||||||
|
background: #edf2f7;
|
||||||
|
border-left-color: #87CEEB;
|
||||||
|
transform: translateX(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-step.highlight {
|
||||||
|
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
|
||||||
|
border-left-color: #FF8C00;
|
||||||
|
box-shadow: 0 10px 30px rgba(255, 140, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-number {
|
||||||
|
background: linear-gradient(135deg, #87CEEB 0%, #B0E0E6 100%);
|
||||||
|
color: white;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: bold;
|
||||||
|
flex-shrink: 0;
|
||||||
|
box-shadow: 0 8px 20px rgba(135, 206, 235, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-step.highlight .step-number {
|
||||||
|
background: linear-gradient(135deg, #FF8C00 0%, #FFA500 100%);
|
||||||
|
box-shadow: 0 8px 20px rgba(255, 140, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-content h3 {
|
||||||
|
font-size: 1.8em;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-content p {
|
||||||
|
font-size: 1.3em;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-arrow {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2.5em;
|
||||||
|
color: #87CEEB;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-arrow::before {
|
||||||
|
content: '↓';
|
||||||
|
text-shadow: 2px 2px 4px rgba(135, 206, 235, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 검수 시스템 하이라이트 섹션 */
|
||||||
|
.inspection-highlight {
|
||||||
|
background: rgba(255,255,255,0.95);
|
||||||
|
border-radius: 30px;
|
||||||
|
padding: 60px 50px;
|
||||||
|
margin: 80px 0;
|
||||||
|
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inspection-title {
|
||||||
|
font-size: 3.5em;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #2d3748;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
background: linear-gradient(135deg, #4299e1 0%, #667eea 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inspection-subtitle {
|
||||||
|
font-size: 1.6em;
|
||||||
|
color: #4a5568;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.key-features {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 40px;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card {
|
||||||
|
background: #f7fafc;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 40px 30px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card:hover {
|
||||||
|
background: #edf2f7;
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon {
|
||||||
|
font-size: 3.5em;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-title {
|
||||||
|
font-size: 1.4em;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #2d3748;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-desc {
|
||||||
|
font-size: 1.1em;
|
||||||
|
color: #4a5568;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 프레젠테이션용 - 모바일 반응형 제거 */
|
||||||
|
.step-details {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-details li {
|
||||||
|
font-size: 0.95em;
|
||||||
|
color: #666666;
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 5px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="workflow-detail-page">
|
<a href="../presentation.html" class="back-btn">← 돌아가기</a>
|
||||||
<div class="page-header">
|
|
||||||
<a href="index.html#workflow-overview" class="btn-back">← 워크플로우로 돌아가기</a>
|
<div class="presentation-container">
|
||||||
<h1>🔄 2단계: 프로젝트 진행 단계 (발주)</h1>
|
<div class="slide-header">
|
||||||
<p class="page-description">외주 및 자체제작 프로세스 관리</p>
|
<h1 class="slide-title">2단계: 프로젝트 진행</h1>
|
||||||
|
<p class="slide-subtitle">외주 vs 자체제작 프로세스</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="workflow-detail-container">
|
<!-- 프로세스 비교 슬라이드 -->
|
||||||
<div class="detail-section">
|
<div class="process-slides">
|
||||||
<h3>🏢 외주의 경우</h3>
|
<div class="slide-row">
|
||||||
|
<div class="process-slide outsourcing-slide">
|
||||||
|
<h2>외주 프로세스</h2>
|
||||||
<div class="process-flow">
|
<div class="process-flow">
|
||||||
<div class="process-step">도면 업로드</div>
|
<div class="flow-step">
|
||||||
<div class="arrow">→</div>
|
<div class="step-number">1</div>
|
||||||
<div class="process-step">견적진행</div>
|
<div class="step-content">
|
||||||
<div class="arrow">→</div>
|
<h3>도면 업로드</h3>
|
||||||
<div class="process-step">발주</div>
|
<p><strong>설계 도면 및 사양서 올리기</strong></p>
|
||||||
<div class="arrow">→</div>
|
<ul class="step-details">
|
||||||
<div class="process-step">관리페이지 (납기, 검사포인트 등)</div>
|
<li>• 설계 도면 파일 (2D/3D)</li>
|
||||||
|
<li>• 재료 종류와 크기 정보</li>
|
||||||
|
<li>• 품질 기준과 검사 방법</li>
|
||||||
|
<li>• 언제까지 몇 개 필요한지</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flow-arrow"></div>
|
||||||
|
<div class="flow-step">
|
||||||
|
<div class="step-number">2</div>
|
||||||
|
<div class="step-content">
|
||||||
|
<h3>견적 진행</h3>
|
||||||
|
<p><strong>여러 외주업체 견적 받고 비교하기</strong></p>
|
||||||
|
<ul class="step-details">
|
||||||
|
<li>• 가격, 품질, 납기일 종합 평가</li>
|
||||||
|
<li>• 업체 기술력과 믿을 수 있는지 확인</li>
|
||||||
|
<li>• 과거 거래 기록과 평가 반영</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flow-arrow"></div>
|
||||||
|
<div class="flow-step">
|
||||||
|
<div class="step-number">3</div>
|
||||||
|
<div class="step-content">
|
||||||
|
<h3>발주</h3>
|
||||||
|
<p><strong>가장 좋은 업체 골라 계약하기</strong></p>
|
||||||
|
<ul class="step-details">
|
||||||
|
<li>• 평가 점수 높은 업체 선정</li>
|
||||||
|
<li>• 계약서 쓰고 법적으로 문제 없는지 확인</li>
|
||||||
|
<li>• 품질 보증서와 보험 확인</li>
|
||||||
|
<li>• 발주서 보내고 계약금 주기</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flow-arrow"></div>
|
||||||
|
<div class="flow-step highlight">
|
||||||
|
<div class="step-number">4</div>
|
||||||
|
<div class="step-content">
|
||||||
|
<h3>관리페이지</h3>
|
||||||
|
<p><strong>실시간으로 진행 상황과 품질 확인하기</strong></p>
|
||||||
|
<ul class="step-details">
|
||||||
|
<li>• 제작 진행률 실시간으로 보기</li>
|
||||||
|
<li>• 중간중간 검사할 부분 관리</li>
|
||||||
|
<li>• 납기일 늦어지면 자동으로 알려주기</li>
|
||||||
|
<li>• 마지막 검사와 물건 받기</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="detail-section">
|
<div class="process-slide manufacturing-slide">
|
||||||
<h3>🏭 자체제작의 경우</h3>
|
<h2>자체제작 프로세스</h2>
|
||||||
<div class="process-flow-vertical">
|
<div class="process-flow">
|
||||||
<div class="process-step">도면(BOM) 업로드</div>
|
<div class="flow-step">
|
||||||
<div class="arrow-down">↓</div>
|
<div class="step-number">1</div>
|
||||||
<div class="process-step">분류</div>
|
<div class="step-content">
|
||||||
<div class="arrow-down">↓</div>
|
<h3>자재 명세서 업로드</h3>
|
||||||
<div class="process-step">구매신청</div>
|
<p><strong>필요한 모든 자재 목록 정리</strong></p>
|
||||||
<div class="arrow-down">↓</div>
|
<ul class="step-details">
|
||||||
<div class="process-step">견적/발주</div>
|
<li>• 파이프, 밸브, 피팅 등 자재 목록</li>
|
||||||
<div class="arrow-down">↓</div>
|
<li>• 각 자재별 규격과 수량</li>
|
||||||
<div class="process-step">입고</div>
|
<li>• 재질 정보와 품질 기준</li>
|
||||||
<div class="arrow-down">↓</div>
|
<li>• 프로젝트별 필요 시기</li>
|
||||||
<div class="process-step">검수 및 보관</div>
|
</ul>
|
||||||
<div class="arrow-down">↓</div>
|
</div>
|
||||||
<div class="process-step">검사</div>
|
</div>
|
||||||
<div class="arrow-down">↓</div>
|
<div class="flow-arrow"></div>
|
||||||
<div class="process-step">불출</div>
|
<div class="flow-step">
|
||||||
|
<div class="step-number">2</div>
|
||||||
|
<div class="step-content">
|
||||||
|
<h3>자재 분류</h3>
|
||||||
|
<p><strong>자재 종류별로 체계적 분류</strong></p>
|
||||||
|
<ul class="step-details">
|
||||||
|
<li>• 파이프류 (탄소강, 스테인리스)</li>
|
||||||
|
<li>• 밸브류 (볼밸브, 체크밸브)</li>
|
||||||
|
<li>• 피팅류 (엘보, 티, 플랜지)</li>
|
||||||
|
<li>• 특수자재 (가스켓, 볼트)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flow-arrow"></div>
|
||||||
|
<div class="flow-step">
|
||||||
|
<div class="step-number">3</div>
|
||||||
|
<div class="step-content">
|
||||||
|
<h3>구매 신청</h3>
|
||||||
|
<p><strong>분류된 자재별 구매 요청서 작성</strong></p>
|
||||||
|
<ul class="step-details">
|
||||||
|
<li>• 자재별 상세 사양서 작성</li>
|
||||||
|
<li>• 필요 수량과 납기일 명시</li>
|
||||||
|
<li>• 예산 범위 및 품질 요구사항</li>
|
||||||
|
<li>• 부서장 승인 및 구매팀 전달</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flow-arrow"></div>
|
||||||
|
<div class="flow-step">
|
||||||
|
<div class="step-number">4</div>
|
||||||
|
<div class="step-content">
|
||||||
|
<h3>견적 및 발주</h3>
|
||||||
|
<p><strong>공급업체 선정 및 주문 처리</strong></p>
|
||||||
|
<ul class="step-details">
|
||||||
|
<li>• 여러 업체 견적 비교 검토</li>
|
||||||
|
<li>• 가격, 품질, 납기 종합 평가</li>
|
||||||
|
<li>• 최적 업체 선정 및 계약</li>
|
||||||
|
<li>• 발주서 발행 및 일정 확정</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flow-arrow"></div>
|
||||||
|
<div class="flow-step">
|
||||||
|
<div class="step-number">5</div>
|
||||||
|
<div class="step-content">
|
||||||
|
<h3>자재 입고</h3>
|
||||||
|
<p><strong>주문한 자재 입고 및 기본 확인</strong></p>
|
||||||
|
<ul class="step-details">
|
||||||
|
<li>• 납품서와 주문서 대조 확인</li>
|
||||||
|
<li>• 수량 및 외관 상태 점검</li>
|
||||||
|
<li>• 포장 상태 및 손상 여부</li>
|
||||||
|
<li>• 입고 일시 및 담당자 기록</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flow-arrow"></div>
|
||||||
|
<div class="flow-step highlight">
|
||||||
|
<div class="step-number">6</div>
|
||||||
|
<div class="step-content">
|
||||||
|
<h3>검수 및 보관</h3>
|
||||||
|
<p><strong>철저한 품질 검사 후 체계적 보관</strong></p>
|
||||||
|
<ul class="step-details">
|
||||||
|
<li>• 규격 및 재질 정밀 검사</li>
|
||||||
|
<li>• 품질 기준 적합성 확인</li>
|
||||||
|
<li>• 생산 일정에 맞춰 재검사</li>
|
||||||
|
<li>• 보관 중 손상 여부 확인</li>
|
||||||
|
<li>• 필요시 추가 성능 테스트</li>
|
||||||
|
<li>• 최종 합격 판정 및 승인</li>
|
||||||
|
<li>• 구역별 체계적 보관 배치</li>
|
||||||
|
<li>• 위치 정보 시스템 등록</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flow-arrow"></div>
|
||||||
|
<div class="flow-step">
|
||||||
|
<div class="step-number">7</div>
|
||||||
|
<div class="step-content">
|
||||||
|
<h3>생산 불출</h3>
|
||||||
|
<p><strong>생산라인으로 자재 공급</strong></p>
|
||||||
|
<ul class="step-details">
|
||||||
|
<li>• 생산 계획에 따른 불출 일정</li>
|
||||||
|
<li>• 필요 수량만큼 정확히 불출</li>
|
||||||
|
<li>• 불출 기록 및 재고 업데이트</li>
|
||||||
|
<li>• 생산팀 인수 확인 완료</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="detail-section">
|
<!-- 검수 및 보관 시스템 하이라이트 -->
|
||||||
<h3>📝 중요 사항</h3>
|
<div class="inspection-highlight">
|
||||||
<div class="important-notes">
|
<h2 class="inspection-title">🔍 검수 및 보관 관리 시스템</h2>
|
||||||
<div class="note-item">
|
<p class="inspection-subtitle">Zero Defect를 위한 완벽한 품질 관리</p>
|
||||||
<h4>보관 단계</h4>
|
|
||||||
<p>입고 위치 정보 입력 필수</p>
|
<div class="key-features">
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">✓</div>
|
||||||
|
<h3 class="feature-title">3단계 검수</h3>
|
||||||
|
<p class="feature-desc">입고확인 → 품질검수 → 최종판정<br>체계적인 검수 프로세스</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="note-item">
|
|
||||||
<h4>추가분 발생시</h4>
|
<div class="feature-card">
|
||||||
<p>리비전 로직으로 진행</p>
|
<div class="feature-icon">✓</div>
|
||||||
</div>
|
<h3 class="feature-title">QR 추적 시스템</h3>
|
||||||
<div class="note-item">
|
<p class="feature-desc">실시간 위치 추적<br>3초 내 즉시 확인</p>
|
||||||
<h4>긴급/가공건</h4>
|
|
||||||
<p>구두로 신청(근거는 남겨야됨) → 긴급 진행 → 사후 처리(발주 담당자)</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">✓</div>
|
||||||
|
<h3 class="feature-title">실시간 모니터링</h3>
|
||||||
|
<p class="feature-desc">24/7 자동 알림<br>95% 재고 정확도</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -7,10 +7,10 @@
|
|||||||
<link rel="stylesheet" href="styles/main.css">
|
<link rel="stylesheet" href="styles/main.css">
|
||||||
<link rel="stylesheet" href="styles/devonthink.css">
|
<link rel="stylesheet" href="styles/devonthink.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="workflow-page">
|
||||||
<div class="workflow-detail-page">
|
<div class="workflow-detail-page">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<a href="index.html#workflow-overview" class="btn-back">← 워크플로우로 돌아가기</a>
|
<a href="../presentation.html" class="btn-back">← 프레젠테이션으로 돌아가기</a>
|
||||||
<h1>🛠️ 3단계: 제작 단계</h1>
|
<h1>🛠️ 3단계: 제작 단계</h1>
|
||||||
<p class="page-description">외주 및 자체제작 생산 관리</p>
|
<p class="page-description">외주 및 자체제작 생산 관리</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -7,15 +7,227 @@
|
|||||||
<link rel="stylesheet" href="styles/main.css">
|
<link rel="stylesheet" href="styles/main.css">
|
||||||
<link rel="stylesheet" href="styles/devonthink.css">
|
<link rel="stylesheet" href="styles/devonthink.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="workflow-page">
|
||||||
<div class="workflow-detail-page">
|
<div class="workflow-detail-page">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<a href="index.html#workflow-overview" class="btn-back">← 워크플로우로 돌아가기</a>
|
<a href="../presentation.html" class="btn-back">← 프레젠테이션으로 돌아가기</a>
|
||||||
<h1>🏢 4단계: 생산회의</h1>
|
<h1>🏢 4단계: 생산회의</h1>
|
||||||
<p class="page-description">프로젝트 진행 현황 통합 관리</p>
|
<p class="page-description">프로젝트 진행 현황 통합 관리</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="workflow-detail-container">
|
<div class="workflow-detail-container">
|
||||||
|
<div class="detail-section">
|
||||||
|
<h3>📅 프로젝트 일정 캘린더</h3>
|
||||||
|
<p class="section-description">자재 입고 및 제작 일정을 한눈에 확인</p>
|
||||||
|
|
||||||
|
<div class="calendar-container">
|
||||||
|
<div class="calendar-header">
|
||||||
|
<button class="calendar-nav-btn" id="prevMonth">◀</button>
|
||||||
|
<h4 class="calendar-title" id="calendarTitle">2024년 8월</h4>
|
||||||
|
<button class="calendar-nav-btn" id="nextMonth">▶</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 8월 캘린더 -->
|
||||||
|
<div class="calendar-month" id="month-2024-08">
|
||||||
|
<table class="calendar-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>일</th>
|
||||||
|
<th>월</th>
|
||||||
|
<th>화</th>
|
||||||
|
<th>수</th>
|
||||||
|
<th>목</th>
|
||||||
|
<th>금</th>
|
||||||
|
<th>토</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="other-month">28</td>
|
||||||
|
<td class="other-month">29</td>
|
||||||
|
<td class="other-month">30</td>
|
||||||
|
<td class="other-month">31</td>
|
||||||
|
<td>1</td>
|
||||||
|
<td>2</td>
|
||||||
|
<td>3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>4</td>
|
||||||
|
<td>5</td>
|
||||||
|
<td>6</td>
|
||||||
|
<td>7</td>
|
||||||
|
<td>8</td>
|
||||||
|
<td>9</td>
|
||||||
|
<td>10</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>11</td>
|
||||||
|
<td class="has-event" data-event="파이프 4인치 입고">12</td>
|
||||||
|
<td>13</td>
|
||||||
|
<td>14</td>
|
||||||
|
<td class="has-event" data-event="밸브 2인치 입고">15</td>
|
||||||
|
<td>16</td>
|
||||||
|
<td>17</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>18</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td class="has-event" data-event="엘보 4인치 입고">20</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>24</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="has-event" data-event="플랜지 입고">25</td>
|
||||||
|
<td>26</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>31</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 9월 캘린더 -->
|
||||||
|
<div class="calendar-month" id="month-2024-09" style="display: none;">
|
||||||
|
<table class="calendar-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>일</th>
|
||||||
|
<th>월</th>
|
||||||
|
<th>화</th>
|
||||||
|
<th>수</th>
|
||||||
|
<th>목</th>
|
||||||
|
<th>금</th>
|
||||||
|
<th>토</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>1</td>
|
||||||
|
<td>2</td>
|
||||||
|
<td>3</td>
|
||||||
|
<td>4</td>
|
||||||
|
<td>5</td>
|
||||||
|
<td>6</td>
|
||||||
|
<td>7</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>8</td>
|
||||||
|
<td>9</td>
|
||||||
|
<td>10</td>
|
||||||
|
<td>11</td>
|
||||||
|
<td>12</td>
|
||||||
|
<td>13</td>
|
||||||
|
<td>14</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>15</td>
|
||||||
|
<td>16</td>
|
||||||
|
<td>17</td>
|
||||||
|
<td>18</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>21</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>22</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>24</td>
|
||||||
|
<td>25</td>
|
||||||
|
<td>26</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>28</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>29</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td class="other-month">1</td>
|
||||||
|
<td class="other-month">2</td>
|
||||||
|
<td class="other-month">3</td>
|
||||||
|
<td class="other-month">4</td>
|
||||||
|
<td class="other-month">5</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 10월 캘린더 -->
|
||||||
|
<div class="calendar-month" id="month-2024-10" style="display: none;">
|
||||||
|
<table class="calendar-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>일</th>
|
||||||
|
<th>월</th>
|
||||||
|
<th>화</th>
|
||||||
|
<th>수</th>
|
||||||
|
<th>목</th>
|
||||||
|
<th>금</th>
|
||||||
|
<th>토</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="other-month">29</td>
|
||||||
|
<td class="other-month">30</td>
|
||||||
|
<td>1</td>
|
||||||
|
<td>2</td>
|
||||||
|
<td>3</td>
|
||||||
|
<td>4</td>
|
||||||
|
<td>5</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>6</td>
|
||||||
|
<td>7</td>
|
||||||
|
<td>8</td>
|
||||||
|
<td>9</td>
|
||||||
|
<td>10</td>
|
||||||
|
<td>11</td>
|
||||||
|
<td>12</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>13</td>
|
||||||
|
<td>14</td>
|
||||||
|
<td>15</td>
|
||||||
|
<td>16</td>
|
||||||
|
<td>17</td>
|
||||||
|
<td>18</td>
|
||||||
|
<td>19</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>20</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>24</td>
|
||||||
|
<td>25</td>
|
||||||
|
<td>26</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>27</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>31</td>
|
||||||
|
<td class="other-month">1</td>
|
||||||
|
<td class="other-month">2</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="calendar-legend">
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-color has-event"></div>
|
||||||
|
<span>자재 입고 예정</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="detail-section">
|
<div class="detail-section">
|
||||||
<h3>📊 생산회의 주요 기능</h3>
|
<h3>📊 생산회의 주요 기능</h3>
|
||||||
<div class="meeting-features">
|
<div class="meeting-features">
|
||||||
@@ -68,5 +280,55 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 캘린더 기능
|
||||||
|
let currentMonth = 8; // 8월부터 시작
|
||||||
|
const months = [
|
||||||
|
{ num: 8, name: '8월', year: 2024 },
|
||||||
|
{ num: 9, name: '9월', year: 2024 },
|
||||||
|
{ num: 10, name: '10월', year: 2024 }
|
||||||
|
];
|
||||||
|
let currentIndex = 0;
|
||||||
|
|
||||||
|
function updateCalendar() {
|
||||||
|
// 모든 월 숨기기
|
||||||
|
document.querySelectorAll('.calendar-month').forEach(month => {
|
||||||
|
month.style.display = 'none';
|
||||||
|
});
|
||||||
|
|
||||||
|
// 현재 월 보이기
|
||||||
|
const currentMonthData = months[currentIndex];
|
||||||
|
const monthId = `month-${currentMonthData.year}-${String(currentMonthData.num).padStart(2, '0')}`;
|
||||||
|
const monthElement = document.getElementById(monthId);
|
||||||
|
|
||||||
|
if (monthElement) {
|
||||||
|
monthElement.style.display = 'block';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 타이틀 업데이트
|
||||||
|
document.getElementById('calendarTitle').textContent =
|
||||||
|
`${currentMonthData.year}년 ${currentMonthData.name}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 이전 월 버튼
|
||||||
|
document.getElementById('prevMonth').addEventListener('click', function() {
|
||||||
|
if (currentIndex > 0) {
|
||||||
|
currentIndex--;
|
||||||
|
updateCalendar();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 다음 월 버튼
|
||||||
|
document.getElementById('nextMonth').addEventListener('click', function() {
|
||||||
|
if (currentIndex < months.length - 1) {
|
||||||
|
currentIndex++;
|
||||||
|
updateCalendar();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 초기 캘린더 설정
|
||||||
|
updateCalendar();
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -95,11 +95,17 @@
|
|||||||
border-left: 5px solid #4299e1;
|
border-left: 5px solid #4299e1;
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.workflow-step:hover {
|
.workflow-step:hover {
|
||||||
transform: translateY(-5px);
|
transform: translateY(-5px);
|
||||||
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
|
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-number {
|
.step-number {
|
||||||
@@ -383,26 +389,26 @@
|
|||||||
<div class="slide">
|
<div class="slide">
|
||||||
<h2>🔄 전체 워크플로우</h2>
|
<h2>🔄 전체 워크플로우</h2>
|
||||||
<div class="workflow-grid">
|
<div class="workflow-grid">
|
||||||
<div class="workflow-step">
|
<a href="demo/workflow-stage-1.html" class="workflow-step">
|
||||||
<div class="step-number">1</div>
|
<div class="step-number">1</div>
|
||||||
<div class="step-title">📋 준비 단계</div>
|
<div class="step-title">📋 준비 단계</div>
|
||||||
<div class="step-description">수주 → Job No. 부여 → 담당자 배정<br>외주/자체제작 결정 → 각 부서 일정 수립</div>
|
<div class="step-description">수주 → Job No. 부여 → 담당자 배정<br>외주/자체제작 결정 → 각 부서 일정 수립</div>
|
||||||
</div>
|
</a>
|
||||||
<div class="workflow-step">
|
<a href="demo/workflow-stage-2.html" class="workflow-step">
|
||||||
<div class="step-number">2</div>
|
<div class="step-number">2</div>
|
||||||
<div class="step-title">🚀 프로젝트 진행 (발주)</div>
|
<div class="step-title">🚀 프로젝트 진행 (발주)</div>
|
||||||
<div class="step-description">외주: 도면 → 견적 → 발주 → 관리<br>자체: BOM → 구매신청 → 발주 → 입고</div>
|
<div class="step-description">외주: 도면 → 견적 → 발주 → 관리<br>자체: BOM → 구매신청 → 발주 → 입고</div>
|
||||||
</div>
|
</a>
|
||||||
<div class="workflow-step">
|
<a href="demo/workflow-stage-3.html" class="workflow-step">
|
||||||
<div class="step-number">3</div>
|
<div class="step-number">3</div>
|
||||||
<div class="step-title">🛠️ 제작 단계</div>
|
<div class="step-title">🛠️ 제작 단계</div>
|
||||||
<div class="step-description">외주: 업체 공정표 관리 + NCR 처리<br>자체: 생산팀 공정관리 + 자재 인수인계</div>
|
<div class="step-description">외주: 업체 공정표 관리 + NCR 처리<br>자체: 생산팀 공정관리 + 자재 인수인계</div>
|
||||||
</div>
|
</a>
|
||||||
<div class="workflow-step">
|
<a href="demo/workflow-stage-4.html" class="workflow-step">
|
||||||
<div class="step-number">4</div>
|
<div class="step-number">4</div>
|
||||||
<div class="step-title">🏢 생산회의</div>
|
<div class="step-title">🏢 생산회의</div>
|
||||||
<div class="step-description">제작 전/중 현황 관리<br>공정표 표시 개선 + 실시간 모니터링</div>
|
<div class="step-description">제작 전/중 현황 관리<br>공정표 표시 개선 + 실시간 모니터링</div>
|
||||||
</div>
|
</a>
|
||||||
<div class="workflow-step">
|
<div class="workflow-step">
|
||||||
<div class="step-number">5</div>
|
<div class="step-number">5</div>
|
||||||
<div class="step-title">📦 납품 (출하전 보고서)</div>
|
<div class="step-title">📦 납품 (출하전 보고서)</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user