74d3a78aa3
- 페이지 폴더 재구성: 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>
152 lines
5.3 KiB
HTML
152 lines
5.3 KiB
HTML
<!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/main-layout.css">
|
||
<link rel="stylesheet" href="/css/attendance.css">
|
||
<link rel="stylesheet" href="/css/my-attendance.css">
|
||
<link rel="icon" type="image/png" href="/img/favicon.png">
|
||
<script src="/js/auth-check.js" defer></script>
|
||
</head>
|
||
<body>
|
||
<div class="main-layout">
|
||
<div id="navbar-container"></div>
|
||
|
||
<div class="content-wrapper">
|
||
<div id="sidebar-container"></div>
|
||
|
||
<div id="content-container">
|
||
<!-- 페이지 헤더 -->
|
||
<header class="page-header">
|
||
<div class="page-title-section">
|
||
<h1 class="page-title">
|
||
<span class="title-icon">📊</span>
|
||
나의 출근 현황
|
||
</h1>
|
||
<p class="page-description">나의 출근 기록과 근태 현황을 확인할 수 있습니다</p>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 필터 섹션 -->
|
||
<div class="controls">
|
||
<label for="yearSelect">연도:</label>
|
||
<select id="yearSelect"></select>
|
||
|
||
<label for="monthSelect">월:</label>
|
||
<select id="monthSelect"></select>
|
||
|
||
<button id="loadAttendance" class="btn-primary">조회</button>
|
||
</div>
|
||
|
||
<!-- 통계 카드 섹션 -->
|
||
<section class="stats-section">
|
||
<div class="stat-card">
|
||
<div class="stat-icon">⏱️</div>
|
||
<div class="stat-info">
|
||
<div class="stat-value" id="totalHours">-</div>
|
||
<div class="stat-label">총 근무시간</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-card">
|
||
<div class="stat-icon">📅</div>
|
||
<div class="stat-info">
|
||
<div class="stat-value" id="totalDays">-</div>
|
||
<div class="stat-label">근무일수</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-card">
|
||
<div class="stat-icon">🌴</div>
|
||
<div class="stat-info">
|
||
<div class="stat-value" id="remainingLeave">-</div>
|
||
<div class="stat-label">잔여 연차</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 탭 섹션 -->
|
||
<div class="tab-container">
|
||
<button class="tab-btn active" data-tab="list">
|
||
<span class="tab-icon">📋</span> 리스트 보기
|
||
</button>
|
||
<button class="tab-btn" data-tab="calendar">
|
||
<span class="tab-icon">📅</span> 달력 보기
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 리스트 뷰 -->
|
||
<div id="listView" class="tab-content active">
|
||
<div id="attendanceTableContainer">
|
||
<table id="attendanceTable">
|
||
<thead>
|
||
<tr>
|
||
<th>날짜</th>
|
||
<th>요일</th>
|
||
<th>출근시간</th>
|
||
<th>퇴근시간</th>
|
||
<th>근무시간</th>
|
||
<th>상태</th>
|
||
<th>비고</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="attendanceTableBody">
|
||
<tr>
|
||
<td colspan="7" class="loading-cell">데이터를 불러오는 중...</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 달력 뷰 -->
|
||
<div id="calendarView" class="tab-content">
|
||
<div id="calendarContainer">
|
||
<div class="calendar-header">
|
||
<button id="prevMonth" class="calendar-nav-btn">◀</button>
|
||
<h3 id="calendarTitle">2026년 1월</h3>
|
||
<button id="nextMonth" class="calendar-nav-btn">▶</button>
|
||
</div>
|
||
<div id="calendarGrid" class="calendar-grid">
|
||
<!-- 달력이 여기에 동적으로 생성됩니다 -->
|
||
</div>
|
||
<div class="calendar-legend">
|
||
<span class="legend-item"><span class="legend-dot normal"></span> 정상</span>
|
||
<span class="legend-item"><span class="legend-dot late"></span> 지각</span>
|
||
<span class="legend-item"><span class="legend-dot early"></span> 조퇴</span>
|
||
<span class="legend-item"><span class="legend-dot absent"></span> 결근</span>
|
||
<span class="legend-item"><span class="legend-dot vacation"></span> 휴가</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 일별 상세 모달 -->
|
||
<div id="detailModal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="modalTitle">출근 상세 정보</h2>
|
||
<button class="modal-close-btn" onclick="closeDetailModal()">×</button>
|
||
</div>
|
||
<div class="modal-body" id="modalBody">
|
||
<!-- 상세 정보가 여기에 동적으로 생성됩니다 -->
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn-secondary" onclick="closeDetailModal()">닫기</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 스크립트 로딩 -->
|
||
<script type="module" src="/js/api-config.js"></script>
|
||
<script type="module" src="/js/load-navbar.js"></script>
|
||
<script type="module" src="/js/load-sidebar.js"></script>
|
||
<script src="/js/my-attendance.js"></script>
|
||
</body>
|
||
</html>
|