워크플로우 시스템 개선 및 캘린더 기능 추가
- presentation.html에 워크플로우 단계별 링크 추가 - 워크플로우 상세 페이지들의 뒤로가기 버튼을 presentation.html로 연결 - workflow-stage-1.html에 표준 스펙 관리 시스템 및 외주 vs 자체제작 결정 시스템 추가 - workflow-stage-4.html에 프로젝트 일정 캘린더 추가 (8월 자재 입고 일정 포함) - 워크플로우 페이지 스크롤 문제 해결 (CSS 수정) - 캘린더 테이블 기반으로 재구성하여 정확한 달력 형태 구현
This commit is contained in:
hyungi
@@ -46,6 +46,178 @@ body {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 워크플로우 상세 페이지용 스타일 */
|
||||||
|
.workflow-detail-page {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 20px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 워크플로우 페이지일 때 body 스타일 재정의 */
|
||||||
|
body.workflow-page {
|
||||||
|
height: auto !important;
|
||||||
|
overflow: visible !important;
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 캘린더 스타일 */
|
||||||
|
.calendar-container {
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 30px;
|
||||||
|
box-shadow: var(--dt-shadow);
|
||||||
|
margin: 20px 0;
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-nav-btn {
|
||||||
|
background: var(--dt-gray-200);
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--dt-gray-700);
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-nav-btn:hover {
|
||||||
|
background: var(--dt-gray-300);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-title {
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--dt-gray-800);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-month {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-table {
|
||||||
|
width: 100% !important;
|
||||||
|
border-collapse: collapse !important;
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: var(--dt-shadow-sm);
|
||||||
|
display: table !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-table th {
|
||||||
|
background: var(--dt-gray-100);
|
||||||
|
color: var(--dt-gray-700);
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 12px 8px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
border-bottom: 2px solid var(--dt-gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-table td {
|
||||||
|
width: 14.28%;
|
||||||
|
height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
border: 1px solid var(--dt-gray-200);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
position: relative;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--dt-gray-800);
|
||||||
|
background: var(--dt-gray-50);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-table td:hover {
|
||||||
|
background: var(--dt-gray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-table td.other-month {
|
||||||
|
color: var(--dt-gray-400);
|
||||||
|
background: var(--dt-gray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-table td.has-event {
|
||||||
|
background: var(--dt-gray-500) !important;
|
||||||
|
color: white;
|
||||||
|
font-weight: 600;
|
||||||
|
border: 2px solid var(--dt-gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-table td.has-event:hover {
|
||||||
|
background: var(--dt-gray-600) !important;
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-table td.has-event::before {
|
||||||
|
content: "●";
|
||||||
|
position: absolute;
|
||||||
|
top: 3px;
|
||||||
|
right: 5px;
|
||||||
|
color: var(--dt-warning);
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-table td.has-event::after {
|
||||||
|
content: attr(data-event);
|
||||||
|
position: absolute;
|
||||||
|
bottom: -35px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
background: var(--dt-gray-800);
|
||||||
|
color: white;
|
||||||
|
padding: 6px 10px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 11px;
|
||||||
|
white-space: nowrap;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
z-index: 100;
|
||||||
|
box-shadow: var(--dt-shadow-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-table td.has-event:hover::after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-legend {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--dt-gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-color {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-color.has-event {
|
||||||
|
background: var(--dt-gray-500);
|
||||||
|
border: 2px solid var(--dt-gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
/* 사이드바 */
|
/* 사이드바 */
|
||||||
.sidebar {
|
.sidebar {
|
||||||
width: 280px;
|
width: 280px;
|
||||||
|
|||||||
@@ -7,28 +7,271 @@
|
|||||||
<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>🚀 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>
|
</div>
|
||||||
<p><strong>담당자:</strong> 영업 또는 PM</p>
|
</div>
|
||||||
|
|
||||||
|
<div class="detail-section">
|
||||||
|
<h3>📐 표준 스펙 관리 시스템</h3>
|
||||||
|
<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>
|
||||||
|
<div class="benefit-note">
|
||||||
|
💡 <strong>효과:</strong> 스펙 작성 시간 80% 단축, 품질 일관성 확보
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="process-step">
|
|
||||||
<h4>업무 내용</h4>
|
<div class="concept-step">
|
||||||
<ul>
|
<h4>🎯 2단계: 고객 요구사항 반영</h4>
|
||||||
<li>관련 정보 업로드 (관련 자료 + 담당자 정리본)</li>
|
<div class="concept-content">
|
||||||
<li>일정을 고려한 외주 & 자체제작 여부 확정</li>
|
<p><strong>목적:</strong> 표준 스펙에서 고객사별 특수 요구사항만 추가/변경</p>
|
||||||
</ul>
|
<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>
|
||||||
|
|||||||
@@ -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>🔄 2단계: 프로젝트 진행 단계 (발주)</h1>
|
<h1>🔄 2단계: 프로젝트 진행 단계 (발주)</h1>
|
||||||
<p class="page-description">외주 및 자체제작 프로세스 관리</p>
|
<p class="page-description">외주 및 자체제작 프로세스 관리</p>
|
||||||
</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