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

feat: 페이지 구조 재구성 및 사이드바 네비게이션 구현

Browse Source 
- 페이지 폴더 재구성: safety/, attendance/ 폴더 신규 생성
  - work/ → safety/: 이슈 신고, 출입 신청 관련 페이지 이동
  - common/ → attendance/: 근태/휴가 관련 페이지 이동
  - admin/ 정리: safety-* 파일들을 safety/로 이동

- 사이드바 네비게이션 메뉴 구현
  - 카테고리별 메뉴: 작업관리, 안전관리, 근태관리, 시스템관리
  - 접기/펼치기 기능 및 상태 저장
  - 관리자 전용 메뉴 자동 표시/숨김

- 날씨 API 연동 (기상청 단기예보)
  - TBM 및 navbar에 현재 날씨 표시
  - weatherService.js 추가

- 안전 체크리스트 확장
  - 기본/날씨별/작업별 체크 유형 추가
  - checklist-manage.html 페이지 추가

- 이슈 신고 시스템 구현
  - workIssueController, workIssueModel, workIssueRoutes 추가

- DB 마이그레이션 파일 추가 (실행 대기)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-02-02 14:27:22 +09:00
parent b6485e3140
commit 74d3a78aa3
116 changed files with 23117 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

354
web-ui/pages.backup.20260202/common/vacation-allocation.html Normal file
View File

@@ -0,0 +1,354 @@
<!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/vacation-allocation.css">
<link rel="icon" type="image/png" href="/img/favicon.png">
<!-- 스크립트 -->
<script type="module" src="/js/api-config.js"></script>
<script type="module" src="/js/auth-check.js" defer></script>
<script type="module" src="/js/load-navbar.js"></script>
<script type="module" src="/js/vacation-allocation.js" defer></script>
</head>
<body>
<!-- 메인 컨테이너 -->
<div class="page-container">
<!-- 네비게이션 헤더 -->
<div id="navbar-container"></div>
<!-- 메인 콘텐츠 -->
<main class="main-content">
<div class="content-wrapper">
<!-- 페이지 헤더 -->
<div class="page-header">
<h1 class="page-title">➕ 휴가 발생 입력</h1>
<p class="page-description">작업자별 휴가를 입력하고 특별 휴가를 관리합니다</p>
</div>
<!-- 탭 네비게이션 -->
<div class="tab-navigation">
<button class="tab-button active" data-tab="individual">개별 입력</button>
<button class="tab-button" data-tab="bulk">일괄 입력</button>
<button class="tab-button" data-tab="special">특별 휴가 관리</button>
</div>
<!-- 탭 1: 개별 입력 -->
<section id="tab-individual" class="tab-content active">
<div class="card">
<div class="card-header">
<h2 class="card-title">개별 작업자 휴가 입력</h2>
</div>
<div class="card-body">
<!-- 입력 폼 -->
<div class="form-section">
<div class="form-row">
<div class="form-group">
<label for="individualWorker">작업자 선택 <span class="required">*</span></label>
<select id="individualWorker" class="form-select" required>
<option value="">선택하세요</option>
<!-- JavaScript로 동적 생성 -->
</select>
</div>
<div class="form-group">
<label for="individualYear">연도 <span class="required">*</span></label>
<select id="individualYear" class="form-select" required>
<!-- JavaScript로 동적 생성 -->
</select>
</div>
<div class="form-group">
<label for="individualVacationType">휴가 유형 <span class="required">*</span></label>
<select id="individualVacationType" class="form-select" required>
<option value="">선택하세요</option>
<!-- JavaScript로 동적 생성 -->
</select>
</div>
</div>
<!-- 자동 계산 섹션 -->
<div class="auto-calculate-section">
<div class="section-header">
<h3>자동 계산 (연차만 해당)</h3>
<button id="autoCalculateBtn" class="btn btn-secondary btn-sm">
🔄 입사일 기준 자동 계산
</button>
</div>
<div id="autoCalculateResult" class="alert alert-info" style="display: none;">
<!-- 계산 결과 표시 -->
</div>
</div>
<!-- 수동 입력 -->
<div class="form-row">
<div class="form-group">
<label for="individualTotalDays">총 부여 일수 <span class="required">*</span></label>
<input type="number" id="individualTotalDays" class="form-input" min="0" step="0.5" required>
</div>
<div class="form-group">
<label for="individualUsedDays">사용 일수</label>
<input type="number" id="individualUsedDays" class="form-input" min="0" step="0.5" value="0">
</div>
<div class="form-group full-width">
<label for="individualNotes">비고</label>
<input type="text" id="individualNotes" class="form-input" placeholder="예: 2026년 연차">
</div>
</div>
<div class="form-actions">
<button id="individualSubmitBtn" class="btn btn-primary">
저장
</button>
<button id="individualResetBtn" class="btn btn-secondary">
초기화
</button>
</div>
</div>
<!-- 기존 데이터 테이블 -->
<div class="existing-data-section">
<h3>기존 입력 내역</h3>
<div class="table-responsive">
<table class="data-table">
<thead>
<tr>
<th>작업자</th>
<th>연도</th>
<th>휴가 유형</th>
<th>총 일수</th>
<th>사용 일수</th>
<th>잔여 일수</th>
<th>비고</th>
<th>작업</th>
</tr>
</thead>
<tbody id="individualTableBody">
<tr>
<td colspan="8" class="loading-state">
<p>작업자를 선택하세요</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- 탭 2: 일괄 입력 -->
<section id="tab-bulk" class="tab-content">
<div class="card">
<div class="card-header">
<h2 class="card-title">근속년수별 연차 일괄 생성</h2>
</div>
<div class="card-body">
<div class="alert alert-warning">
<strong>주의:</strong> 이 기능은 연차(ANNUAL) 휴가 유형만 생성합니다. 각 작업자의 입사일을 기준으로 근속년수를 계산하여 자동으로 연차를 부여합니다.
</div>
<div class="form-section">
<div class="form-row">
<div class="form-group">
<label for="bulkYear">대상 연도 <span class="required">*</span></label>
<select id="bulkYear" class="form-select" required>
<!-- JavaScript로 동적 생성 -->
</select>
</div>
<div class="form-group">
<label for="bulkEmploymentStatus">재직 상태</label>
<select id="bulkEmploymentStatus" class="form-select">
<option value="employed">재직 중만</option>
<option value="all">전체</option>
</select>
</div>
</div>
<div class="form-actions">
<button id="bulkPreviewBtn" class="btn btn-secondary">
미리보기
</button>
<button id="bulkSubmitBtn" class="btn btn-primary" disabled>
일괄 생성
</button>
</div>
</div>
<!-- 미리보기 테이블 -->
<div id="bulkPreviewSection" class="preview-section" style="display: none;">
<h3>생성 예정 내역</h3>
<div class="table-responsive">
<table class="data-table">
<thead>
<tr>
<th>작업자</th>
<th>입사일</th>
<th>근속년수</th>
<th>부여 연차</th>
<th>계산 근거</th>
<th>상태</th>
</tr>
</thead>
<tbody id="bulkPreviewTableBody">
<!-- JavaScript로 동적 생성 -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- 탭 3: 특별 휴가 관리 -->
<section id="tab-special" class="tab-content">
<div class="card">
<div class="card-header">
<h2 class="card-title">특별 휴가 유형 관리</h2>
<button id="addSpecialTypeBtn" class="btn btn-primary btn-sm">
+ 새 휴가 유형 추가
</button>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="data-table">
<thead>
<tr>
<th>유형명</th>
<th>코드</th>
<th>우선순위</th>
<th>특별 휴가</th>
<th>시스템 유형</th>
<th>설명</th>
<th>작업</th>
</tr>
</thead>
<tbody id="specialTypesTableBody">
<tr>
<td colspan="7" class="loading-state">
<div class="spinner"></div>
<p>데이터를 불러오는 중...</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
</div>
</main>
</div>
<!-- 알림 토스트 -->
<div class="toast-container" id="toastContainer"></div>
<!-- 모달: 휴가 유형 추가/수정 -->
<div id="vacationTypeModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3 id="modalTitle">휴가 유형 추가</h3>
<button class="modal-close">&times;</button>
</div>
<div class="modal-body">
<form id="vacationTypeForm">
<input type="hidden" id="modalTypeId">
<div class="form-group">
<label for="modalTypeName">유형명 <span class="required">*</span></label>
<input type="text" id="modalTypeName" class="form-input" required>
</div>
<div class="form-group">
<label for="modalTypeCode">코드 <span class="required">*</span></label>
<input type="text" id="modalTypeCode" class="form-input" required>
<small>예: ANNUAL, SICK, MATERNITY (영문 대문자)</small>
</div>
<div class="form-row">
<div class="form-group">
<label for="modalPriority">우선순위 <span class="required">*</span></label>
<input type="number" id="modalPriority" class="form-input" min="1" required>
<small>낮을수록 먼저 차감</small>
</div>
<div class="form-group">
<label>
<input type="checkbox" id="modalIsSpecial">
특별 휴가
</label>
</div>
</div>
<div class="form-group">
<label for="modalDescription">설명</label>
<textarea id="modalDescription" class="form-input" rows="3"></textarea>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">저장</button>
<button type="button" class="btn btn-secondary modal-close">취소</button>
</div>
</form>
</div>
</div>
</div>
<!-- 모달: 휴가 수정 -->
<div id="editBalanceModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>휴가 수정</h3>
<button class="modal-close">&times;</button>
</div>
<div class="modal-body">
<form id="editBalanceForm">
<input type="hidden" id="editBalanceId">
<div class="form-group">
<label for="editTotalDays">총 일수 <span class="required">*</span></label>
<input type="number" id="editTotalDays" class="form-input" min="0" step="0.5" required>
</div>
<div class="form-group">
<label for="editUsedDays">사용 일수 <span class="required">*</span></label>
<input type="number" id="editUsedDays" class="form-input" min="0" step="0.5" required>
</div>
<div class="form-group">
<label for="editNotes">비고</label>
<input type="text" id="editNotes" class="form-input">
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">저장</button>
<button type="button" class="btn btn-secondary modal-close">취소</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>