8d9c2bd5c3
- presentation.html에 워크플로우 단계별 링크 추가 - 워크플로우 상세 페이지들의 뒤로가기 버튼을 presentation.html로 연결 - workflow-stage-1.html에 표준 스펙 관리 시스템 및 외주 vs 자체제작 결정 시스템 추가 - workflow-stage-4.html에 프로젝트 일정 캘린더 추가 (8월 자재 입고 일정 포함) - 워크플로우 페이지 스크롤 문제 해결 (CSS 수정) - 캘린더 테이블 기반으로 재구성하여 정확한 달력 형태 구현
335 lines
14 KiB
HTML
335 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>4단계: 생산회의 - TK Project</title>
|
|
<link rel="stylesheet" href="styles/main.css">
|
|
<link rel="stylesheet" href="styles/devonthink.css">
|
|
</head>
|
|
<body class="workflow-page">
|
|
<div class="workflow-detail-page">
|
|
<div class="page-header">
|
|
<a href="../presentation.html" class="btn-back">← 프레젠테이션으로 돌아가기</a>
|
|
<h1>🏢 4단계: 생산회의</h1>
|
|
<p class="page-description">프로젝트 진행 현황 통합 관리</p>
|
|
</div>
|
|
|
|
<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">
|
|
<h3>📊 생산회의 주요 기능</h3>
|
|
<div class="meeting-features">
|
|
<div class="feature-card">
|
|
<h4>공정표 표시 개선</h4>
|
|
<p>제작전, 제작중 모든 공정에 대한 현황을 한눈에 확인</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h4>프로젝트 발주현황 확인</h4>
|
|
<p>관련 프로젝트의 발주 상태를 실시간으로 파악</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h4>데일리체크 통합</h4>
|
|
<p>일일 작업 현황 및 이슈사항 종합 관리</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-section">
|
|
<h3>🎯 회의 목적</h3>
|
|
<ul class="purpose-list">
|
|
<li>전체 프로젝트 진행 상황 점검</li>
|
|
<li>부서간 협업 이슈 해결</li>
|
|
<li>일정 지연 요소 사전 파악</li>
|
|
<li>자재 수급 현황 확인</li>
|
|
<li>품질 이슈 공유 및 대응</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="detail-section">
|
|
<h3>📋 회의 구성 요소</h3>
|
|
<div class="meeting-components">
|
|
<div class="component-item">
|
|
<h4>📈 공정 진행률</h4>
|
|
<p>각 프로젝트별 공정 완료 현황</p>
|
|
</div>
|
|
<div class="component-item">
|
|
<h4>📦 자재 현황</h4>
|
|
<p>입고 예정, 검수 완료, 불출 대기 자재 현황</p>
|
|
</div>
|
|
<div class="component-item">
|
|
<h4>⚠️ 이슈 사항</h4>
|
|
<p>데일리체크에서 올라온 문제점 및 해결 방안</p>
|
|
</div>
|
|
<div class="component-item">
|
|
<h4>📅 일정 조정</h4>
|
|
<p>지연 요소에 따른 일정 재조정</p>
|
|
</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>
|
|
</html>
|