feat: 3-System 분리 프로젝트 초기 코드 작성

TK-FB(공장관리+신고)와 M-Project(부적합관리)를 3개 독립 시스템으로 분리하기 위한 전체 코드 구조 작성. - SSO 인증 서비스 (bcrypt + pbkdf2 이중 해시 지원) - System 1: 공장관리 (TK-FB 기반, 신고 코드 제거) - System 2: 신고 (TK-FB에서 workIssue 코드 추출) - System 3: 부적합관리 (M-Project 기반) - Gateway 포털 (path-based 라우팅) - 통합 docker-compose.yml 및 배포 스크립트 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-09 14:40:11 +09:00
commit 550633b89d
824 changed files with 1071683 additions and 0 deletions
--- a/system1-factory/web/pages/attendance/vacation-request.html
+++ b/system1-factory/web/pages/attendance/vacation-request.html
@@ -0,0 +1,269 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>휴가 신청 | (주)테크니컬코리아</title>
+    <link rel="stylesheet" href="/css/design-system.css">
+    <link rel="stylesheet" href="/css/admin-pages.css?v=7">
+    <link rel="icon" type="image/png" href="/img/favicon.png">
+    <script src="/js/api-base.js"></script>
+    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="https://instant.page/5.2.0" type="module"></script>
+</head>
+<body>
+  <!-- 네비게이션 바 -->
+  <div id="navbar-container"></div>
+
+  <!-- 메인 콘텐츠 -->
+  <main class="main-content">
+    <div class="dashboard-main">
+      <div class="page-header">
+        <div class="page-title-section">
+          <h1 class="page-title">휴가 신청</h1>
+          <p class="page-description">휴가를 신청하고 신청 내역을 확인합니다</p>
+        </div>
+      </div>
+
+      <!-- 휴가 잔여 현황 -->
+      <div class="content-section">
+        <div class="card">
+          <div class="card-header">
+            <h2 class="card-title">휴가 잔여 현황</h2>
+          </div>
+          <div class="card-body">
+            <div id="vacationBalance" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
+              <!-- 휴가 잔여 정보가 여기에 표시됩니다 -->
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 휴가 신청 -->
+      <div class="content-section">
+        <div class="card">
+          <div class="card-header">
+            <h2 class="card-title">휴가 신청</h2>
+          </div>
+          <div class="card-body">
+            <form id="vacationRequestForm" onsubmit="submitVacationRequest(event)">
+              <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
+                <div class="form-group">
+                  <label for="vacationType">휴가 유형 *</label>
+                  <select id="vacationType" class="form-control" required>
+                    <option value="">선택하세요</option>
+                  </select>
+                </div>
+
+                <div class="form-group">
+                  <label for="daysUsed">사용 일수 *</label>
+                  <input type="number" id="daysUsed" class="form-control" min="0.5" step="0.5" value="1.0" required>
+                </div>
+
+                <div class="form-group">
+                  <label for="startDate">시작일 *</label>
+                  <input type="date" id="startDate" class="form-control" required>
+                </div>
+
+                <div class="form-group">
+                  <label for="endDate">종료일 *</label>
+                  <input type="date" id="endDate" class="form-control" required>
+                </div>
+
+                <div class="form-group" style="grid-column: 1 / -1;">
+                  <label for="reason">사유</label>
+                  <textarea id="reason" class="form-control" rows="3" placeholder="휴가 사유를 입력하세요 (선택)"></textarea>
+                </div>
+              </div>
+
+              <div style="text-align: center; margin-top: 2rem;">
+                <button type="submit" class="btn btn-primary" style="padding: 1rem 3rem;">
+                  신청하기
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+
+      <!-- 내 신청 내역 -->
+      <div class="content-section">
+        <div class="card">
+          <div class="card-header">
+            <h2 class="card-title">내 신청 내역</h2>
+          </div>
+          <div class="card-body">
+            <div id="myRequestsList" class="data-table-container">
+              <!-- 내 신청 내역이 여기에 동적으로 렌더링됩니다 -->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+  <script src="/js/vacation-common.js"></script>
+  <script type="module">
+    import '/js/api-config.js?v=3';
+  </script>
+  <script>
+    // axios 기본 설정
+    (function() {
+      const checkApiConfig = setInterval(() => {
+        if (window.API_BASE_URL) {
+          clearInterval(checkApiConfig);
+          axios.defaults.baseURL = window.API_BASE_URL;
+          const token = localStorage.getItem('token');
+          if (token) {
+            axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+          }
+
+          axios.interceptors.request.use(
+            config => {
+              const token = localStorage.getItem('token');
+              if (token) {
+                config.headers.Authorization = `Bearer ${token}`;
+              }
+              return config;
+            },
+            error => Promise.reject(error)
+          );
+
+          axios.interceptors.response.use(
+            response => response,
+            error => {
+              if (error.response?.status === 401) {
+                alert('세션이 만료되었습니다. 다시 로그인해주세요.');
+                window.location.href = '/pages/login.html';
+              }
+              return Promise.reject(error);
+            }
+          );
+        }
+      }, 50);
+    })();
+  </script>
+  <script>
+    // 페이지 로드 시 초기화
+    document.addEventListener('DOMContentLoaded', async () => {
+      await waitForAxiosConfig();
+      initializePage();
+    });
+
+    async function initializePage() {
+      try {
+        const currentUser = getCurrentUser();
+
+        if (!currentUser || !currentUser.worker_id) {
+          alert('작업자 정보가 없습니다. 관리자에게 문의하세요.');
+          return;
+        }
+
+        await loadVacationTypes();
+        await loadVacationBalance();
+        await loadMyRequests();
+
+        // 휴가 업데이트 이벤트 리스너
+        window.addEventListener('vacation-updated', () => {
+          loadVacationBalance();
+          loadMyRequests();
+        });
+      } catch (error) {
+        console.error('초기화 오류:', error);
+        alert('페이지 초기화 중 오류가 발생했습니다.');
+      }
+    }
+
+    async function loadVacationBalance() {
+      const currentUser = getCurrentUser();
+
+      try {
+        const response = await axios.get(`/attendance/vacation-balance/${currentUser.worker_id}`);
+        if (response.data.success) {
+          renderVacationBalance(response.data.data);
+        }
+      } catch (error) {
+        console.error('휴가 잔여 조회 오류:', error);
+        document.getElementById('vacationBalance').innerHTML = `
+          <p class="text-muted">휴가 잔여 정보를 불러올 수 없습니다.</p>
+        `;
+      }
+    }
+
+    function renderVacationBalance(balance) {
+      const container = document.getElementById('vacationBalance');
+
+      if (!balance || Object.keys(balance).length === 0) {
+        container.innerHTML = '<p class="text-muted">휴가 잔여 정보가 없습니다.</p>';
+        return;
+      }
+
+      const balanceHTML = Object.keys(balance).map(key => {
+        const info = balance[key];
+        return `
+          <div style="padding: 1.5rem; background-color: #f9fafb; border-radius: 0.5rem; border: 1px solid #e5e7eb;">
+            <div style="font-size: 0.875rem; color: #6b7280; margin-bottom: 0.5rem;">${key}</div>
+            <div style="font-size: 1.5rem; font-weight: 700; color: #111827;">
+              ${info.remaining || 0}일
+            </div>
+            <div style="font-size: 0.75rem; color: #9ca3af; margin-top: 0.25rem;">
+              사용: ${info.used || 0}일 / 전체: ${info.total || 0}일
+            </div>
+          </div>
+        `;
+      }).join('');
+
+      container.innerHTML = balanceHTML;
+    }
+
+    async function submitVacationRequest(event) {
+      event.preventDefault();
+
+      const currentUser = getCurrentUser();
+      const data = {
+        worker_id: currentUser.worker_id,
+        vacation_type_id: parseInt(document.getElementById('vacationType').value),
+        start_date: document.getElementById('startDate').value,
+        end_date: document.getElementById('endDate').value,
+        days_used: parseFloat(document.getElementById('daysUsed').value),
+        reason: document.getElementById('reason').value || null
+      };
+
+      try {
+        const response = await axios.post('/vacation-requests', data);
+        if (response.data.success) {
+          alert('휴가 신청이 완료되었습니다.');
+          document.getElementById('vacationRequestForm').reset();
+          window.dispatchEvent(new Event('vacation-updated'));
+        }
+      } catch (error) {
+        console.error('휴가 신청 오류:', error);
+        alert(error.response?.data?.message || '휴가 신청 중 오류가 발생했습니다.');
+      }
+    }
+
+    async function loadMyRequests() {
+      const currentUser = getCurrentUser();
+
+      try {
+        const response = await axios.get('/vacation-requests');
+        if (response.data.success) {
+          // 내 신청만 필터링
+          const myRequests = response.data.data.filter(req =>
+            req.requested_by === currentUser.user_id || req.worker_id === currentUser.worker_id
+          );
+          renderVacationRequests(myRequests, 'myRequestsList', true, 'delete');
+        }
+      } catch (error) {
+        console.error('내 신청 내역 로드 오류:', error);
+        document.getElementById('myRequestsList').innerHTML = `
+          <div class="empty-state">
+            <p>신청 내역이 없습니다.</p>
+          </div>
+        `;
+      }
+    }
+  </script>
+</body>
+</html>