hyungi/TK-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

워크플로우 시스템 개선 및 캘린더 기능 추가

Browse Source 
- presentation.html에 워크플로우 단계별 링크 추가
- 워크플로우 상세 페이지들의 뒤로가기 버튼을 presentation.html로 연결
- workflow-stage-1.html에 표준 스펙 관리 시스템 및 외주 vs 자체제작 결정 시스템 추가
- workflow-stage-4.html에 프로젝트 일정 캘린더 추가 (8월 자재 입고 일정 포함)
- 워크플로우 페이지 스크롤 문제 해결 (CSS 수정)
- 캘린더 테이블 기반으로 재구성하여 정확한 달력 형태 구현
This commit is contained in:
hyungi
2025-09-15 23:05:15 +09:00
parent bd23e00232
commit 8d9c2bd5c3
6 changed files with 710 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
demo/workflow-stage-4.html
View File

@@ -7,15 +7,227 @@
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/devonthink.css">
</head>
<body>
<body class="workflow-page">
<div class="workflow-detail-page">
<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>
<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">
@@ -68,5 +280,55 @@
</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>