hyungi/tk-factory-services
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(tkfb): 모바일 전체 최적화 — 네비 수정 + 공통 기반 + 페이지별 개선

Browse Source 
Phase 1: 기반 수정
- 햄버거 메뉴 .mobile-open 규칙 커밋 (네비 버그 수정)
- 36개 HTML 파일 tkfb.css 캐시 버스팅 ?v=2026031601
- tkfb.css 공통 모바일 기반: 터치 44px, iOS 줌 방지, 테이블 스크롤, 모달 최적화

Phase 2: 페이지별 최적화
- 그룹 A (심각): daily.html, work-status.html JS 카드 뷰 변환
- 그룹 A: monthly.html 모바일 컨트롤 스택 + No열 숨김 + 범례 그리드
- 공통 CSS: 페이지 헤더/컨트롤/필터 스택, 탭 가로 스크롤,
  폼 2열→1열, 요약 바 wrap, 저장 바 sticky, 작업자 칩 터치 최적화,
  2열 레이아웃→세로 스택, 테이블 래퍼 오버플로, 모달 풀스크린
- 개별 페이지: checkin, vacation-management, vacation-approval,
  projects, repair-management, annual-overview 인라인 모바일 스타일

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-03-16 14:39:19 +09:00
parent 65839e94a4
commit 573ef74246
37 changed files with 526 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
system1-factory/web/pages/attendance/annual-overview.html
View File

@@ -6,7 +6,7 @@
<title>연간 연차 현황 - TK 공장관리</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/static/css/tkfb.css">
<link rel="stylesheet" href="/static/css/tkfb.css?v=2026031601">
<style>
.page-wrapper {
padding: 1.5rem;
@@ -230,6 +230,16 @@
}
.loading { text-align: center; padding: 2rem; color: #6b7280; }
@media (max-width: 768px) {
.controls { flex-wrap: wrap; gap: 0.5rem; }
.controls select { flex: 1; }
.legend-box { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.data-table { font-size: 0.7rem; }
.data-table th, .data-table td { padding: 0.375rem 0.25rem; }
.num-input { width: 45px; font-size: 0.75rem; }
.save-bar { position: sticky; bottom: 0; z-index: 20; background: white; box-shadow: 0 -2px 8px rgba(0,0,0,0.08); }
}
</style>
</head>
<body class="bg-gray-50">

14
system1-factory/web/pages/attendance/checkin.html
View File

@@ -6,7 +6,7 @@
<title>출근 체크 - TK 공장관리</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/static/css/tkfb.css">
<link rel="stylesheet" href="/static/css/tkfb.css?v=2026031601">
<style>
.page-wrapper {
padding: 1.5rem;
@@ -156,6 +156,18 @@
background: #fef3c7;
color: #92400e;
}
/* 모바일 최적화 */
@media (max-width: 768px) {
.summary-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 0.75rem; }
.summary-item { flex-direction: column; text-align: center; }
.summary-count { font-size: 1.25rem; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.controls input[type="date"] { grid-column: 1 / -1; }
.worker-chip { padding: 0.625rem 1rem; font-size: 1rem; }
.btn-save { width: 100%; font-size: 1.1rem; padding: 1rem; }
.save-section { position: sticky; bottom: 0; background: white; padding: 1rem; margin: 0 -1rem; box-shadow: 0 -2px 8px rgba(0,0,0,0.08); z-index: 20; }
}
</style>
</head>
<body class="bg-gray-50">

182
system1-factory/web/pages/attendance/daily.html
View File

@@ -6,7 +6,7 @@
<title>일일 출퇴근 입력 - TK 공장관리</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/static/css/tkfb.css">
<link rel="stylesheet" href="/static/css/tkfb.css?v=2026031601">
</head>
<body class="bg-gray-50">
<header class="bg-orange-700 text-white sticky top-0 z-50">
@@ -250,76 +250,140 @@
return;
}
const tableHTML = `
<table class="data-table" style="font-size: 0.95rem;">
<thead style="background-color: #f8f9fa;">
<tr>
<th style="width: 120px;">작업자</th>
<th style="width: 180px;">근태 구분</th>
<th style="width: 100px;">근무시간</th>
<th style="width: 120px;">연장근로</th>
<th style="width: 100px;">특이사항</th>
</tr>
</thead>
<tbody>
const isMobile = window.innerWidth <= 768;
if (isMobile) {
// 모바일: 카드 뷰
const cardsHTML = `
<div class="mobile-attendance-cards">
${attendanceRecords.map((record, index) => {
const isCustom = record.is_custom || record.attendance_type === 'custom';
const isHoursReadonly = !isCustom; // 특이사항이 아니면 근무시간은 읽기 전용
const isHoursReadonly = !isCustom;
const isOnVacation = record.is_on_vacation || false;
const vacationLabel = record.vacation_type_name ? ` (${record.vacation_type_name})` : '';
return `
<tr style="border-bottom: 1px solid #e5e7eb; ${isOnVacation ? 'background-color: #f0f9ff;' : ''}">
<td style="padding: 0.75rem; font-weight: 600;">
<div class="mobile-attendance-card ${isOnVacation ? 'vacation' : ''}">
<div class="card-name">
${record.worker_name}
${isOnVacation ? `<span style="margin-left: 0.5rem; display: inline-block; padding: 0.125rem 0.5rem; background-color: #dbeafe; color: #1e40af; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500;">연차${vacationLabel}</span>` : ''}
</td>
<td style="padding: 0.75rem;">
<select class="form-control"
onchange="updateAttendanceType(${index}, this.value)"
style="width: 160px; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;">
${attendanceTypes.map(type => `
<option value="${type.value}" ${record.attendance_type === type.value ? 'selected' : ''}>
${type.label}
</option>
`).join('')}
</select>
</td>
<td style="padding: 0.75rem;">
<input type="number" class="form-control"
id="hours_${index}"
value="${record.total_hours || 0}"
min="0" max="24" step="0.5"
${isHoursReadonly ? 'readonly' : ''}
onchange="updateTotalHours(${index}, this.value)"
style="width: 90px; padding: 0.5rem; border: 1px solid ${isHoursReadonly ? '#e5e7eb' : '#d1d5db'};
border-radius: 0.375rem; background-color: ${isHoursReadonly ? '#f9fafb' : 'white'}; text-align: center;">
</td>
<td style="padding: 0.75rem;">
<input type="number" class="form-control"
id="overtime_${index}"
value="${record.overtime_hours || 0}"
min="0" max="12" step="0.5"
onchange="updateOvertimeHours(${index}, this.value)"
style="width: 90px; padding: 0.5rem; border: 1px solid #d1d5db;
border-radius: 0.375rem; background-color: white; text-align: center;">
</td>
<td style="padding: 0.75rem; text-align: center;">
${isCustom ?
'<span style="color: #dc2626; font-weight: 600;">✓</span>' :
'<span style="color: #9ca3af;">-</span>'}
</td>
</tr>
${isOnVacation ? `<span style="padding: 0.125rem 0.5rem; background: #dbeafe; color: #1e40af; border-radius: 0.25rem; font-size: 0.7rem; font-weight: 500;">연차${vacationLabel}</span>` : ''}
</div>
<div class="card-fields">
<div class="card-field">
<label>근태 구분</label>
<select onchange="updateAttendanceType(${index}, this.value)">
${attendanceTypes.map(type => `
<option value="${type.value}" ${record.attendance_type === type.value ? 'selected' : ''}>${type.label}</option>
`).join('')}
</select>
</div>
<div class="card-field">
<label>근무시간</label>
<input type="number" id="hours_${index}" value="${record.total_hours || 0}"
min="0" max="24" step="0.5" ${isHoursReadonly ? 'readonly' : ''}
onchange="updateTotalHours(${index}, this.value)"
style="background: ${isHoursReadonly ? '#f9fafb' : 'white'}; text-align: center;">
</div>
<div class="card-field">
<label>연장근로</label>
<input type="number" id="overtime_${index}" value="${record.overtime_hours || 0}"
min="0" max="12" step="0.5"
onchange="updateOvertimeHours(${index}, this.value)"
style="text-align: center;">
</div>
<div class="card-field">
<label>특이사항</label>
<div style="padding: 0.5rem; text-align: center;">
${isCustom ? '<span style="color: #dc2626; font-weight: 600;">✓</span>' : '<span style="color: #9ca3af;">-</span>'}
</div>
</div>
</div>
</div>
`;
}).join('')}
</tbody>
</table>
`;
</div>
`;
container.innerHTML = cardsHTML;
} else {
// 데스크탑: 테이블 뷰
const tableHTML = `
<table class="data-table" style="font-size: 0.95rem;">
<thead style="background-color: #f8f9fa;">
<tr>
<th style="width: 120px;">작업자</th>
<th style="width: 180px;">근태 구분</th>
<th style="width: 100px;">근무시간</th>
<th style="width: 120px;">연장근로</th>
<th style="width: 100px;">특이사항</th>
</tr>
</thead>
<tbody>
${attendanceRecords.map((record, index) => {
const isCustom = record.is_custom || record.attendance_type === 'custom';
const isHoursReadonly = !isCustom;
const isOnVacation = record.is_on_vacation || false;
const vacationLabel = record.vacation_type_name ? ` (${record.vacation_type_name})` : '';
container.innerHTML = tableHTML;
return `
<tr style="border-bottom: 1px solid #e5e7eb; ${isOnVacation ? 'background-color: #f0f9ff;' : ''}">
<td style="padding: 0.75rem; font-weight: 600;">
${record.worker_name}
${isOnVacation ? `<span style="margin-left: 0.5rem; display: inline-block; padding: 0.125rem 0.5rem; background-color: #dbeafe; color: #1e40af; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500;">연차${vacationLabel}</span>` : ''}
</td>
<td style="padding: 0.75rem;">
<select class="form-control"
onchange="updateAttendanceType(${index}, this.value)"
style="width: 160px; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;">
${attendanceTypes.map(type => `
<option value="${type.value}" ${record.attendance_type === type.value ? 'selected' : ''}>
${type.label}
</option>
`).join('')}
</select>
</td>
<td style="padding: 0.75rem;">
<input type="number" class="form-control"
id="hours_${index}"
value="${record.total_hours || 0}"
min="0" max="24" step="0.5"
${isHoursReadonly ? 'readonly' : ''}
onchange="updateTotalHours(${index}, this.value)"
style="width: 90px; padding: 0.5rem; border: 1px solid ${isHoursReadonly ? '#e5e7eb' : '#d1d5db'};
border-radius: 0.375rem; background-color: ${isHoursReadonly ? '#f9fafb' : 'white'}; text-align: center;">
</td>
<td style="padding: 0.75rem;">
<input type="number" class="form-control"
id="overtime_${index}"
value="${record.overtime_hours || 0}"
min="0" max="12" step="0.5"
onchange="updateOvertimeHours(${index}, this.value)"
style="width: 90px; padding: 0.5rem; border: 1px solid #d1d5db;
border-radius: 0.375rem; background-color: white; text-align: center;">
</td>
<td style="padding: 0.75rem; text-align: center;">
${isCustom ?
'<span style="color: #dc2626; font-weight: 600;">✓</span>' :
'<span style="color: #9ca3af;">-</span>'}
</td>
</tr>
`;
}).join('')}
</tbody>
</table>
`;
container.innerHTML = tableHTML;
}
}
// 화면 크기 변경 시 재렌더링
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
if (attendanceRecords.length > 0) renderAttendanceList();
}, 250);
});
function updateTotalHours(index, value) {
attendanceRecords[index].total_hours = parseFloat(value) || 0;
}

26
system1-factory/web/pages/attendance/monthly.html
View File

@@ -6,7 +6,7 @@
<title>월별 출근부 - TK 공장관리</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/static/css/tkfb.css">
<link rel="stylesheet" href="/static/css/tkfb.css?v=2026031601">
<style>
/* 테이블 컨테이너 */
.table-container {
@@ -349,6 +349,30 @@
border: 1px solid #d1d5db;
border-radius: 0.375rem;
}
/* 모바일 최적화 */
@media (max-width: 768px) {
.page-actions {
flex-direction: column !important;
width: 100%;
}
.page-actions input[type="month"],
.page-actions .btn { width: 100%; }
.page-actions .btn { justify-content: center; text-align: center; }
.summary-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.summary-card { min-width: 0; }
.legend-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.table-container { margin: 0 -0.5rem; }
.attendance-table th.fixed-no,
.attendance-table td.fixed-no { display: none; }
.attendance-table th.fixed-name,
.attendance-table td.fixed-name { left: 0; }
.attendance-table th.fixed-job,
.attendance-table td.fixed-job { left: 60px; }
.modal-content { width: 95% !important; }
.add-holiday-form { flex-direction: column; }
.add-holiday-form input, .add-holiday-form .btn { width: 100%; }
}
</style>
</head>
<body class="bg-gray-50">

2
system1-factory/web/pages/attendance/my-vacation-info.html
View File

@@ -6,7 +6,7 @@
<title>내 연차 정보 - TK 공장관리</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/static/css/tkfb.css">
<link rel="stylesheet" href="/static/css/tkfb.css?v=2026031601">
<style>
.page-wrapper {
padding: 1.5rem;

2
system1-factory/web/pages/attendance/vacation-allocation.html
View File

@@ -7,7 +7,7 @@
<title>휴가 발생 입력 - TK 공장관리</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/static/css/tkfb.css">
<link rel="stylesheet" href="/static/css/tkfb.css?v=2026031601">
<link rel="stylesheet" href="/css/vacation-allocation.css">
</head>

9
system1-factory/web/pages/attendance/vacation-approval.html
View File

@@ -6,7 +6,7 @@
<title>휴가 승인 관리 - TK 공장관리</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/static/css/tkfb.css">
<link rel="stylesheet" href="/static/css/tkfb.css?v=2026031601">
<style>
.tabs {
display: flex;
@@ -37,6 +37,13 @@
.tab-content.active {
display: block;
}
/* 모바일 최적화 */
@media (max-width: 768px) {
.tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex-shrink: 0; padding: 0.625rem 1rem; white-space: nowrap; font-size: 0.875rem; }
}
</style>
</head>
<body class="bg-gray-50">

2
system1-factory/web/pages/attendance/vacation-input.html
View File

@@ -6,7 +6,7 @@
<title>휴가 직접 입력 - TK 공장관리</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/static/css/tkfb.css">
<link rel="stylesheet" href="/static/css/tkfb.css?v=2026031601">
</head>
<body class="bg-gray-50">
<header class="bg-orange-700 text-white sticky top-0 z-50">

12
system1-factory/web/pages/attendance/vacation-management.html
View File

@@ -6,7 +6,7 @@
<title>휴가 관리 - TK 공장관리</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/static/css/tkfb.css">
<link rel="stylesheet" href="/static/css/tkfb.css?v=2026031601">
<style>
.tabs {
display: flex;
@@ -37,6 +37,16 @@
.tab-content.active {
display: block;
}
/* 모바일 최적화 */
@media (max-width: 768px) {
.tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex-shrink: 0; padding: 0.625rem 1rem; white-space: nowrap; font-size: 0.875rem; }
.page-actions { flex-direction: column; width: 100%; gap: 0.5rem; }
.page-actions input[type="date"] { width: 100%; }
.page-actions .btn { width: 100%; text-align: center; }
}
</style>
</head>
<body class="bg-gray-50">

2
system1-factory/web/pages/attendance/vacation-request.html
View File

@@ -6,7 +6,7 @@
<title>휴가 신청 - TK 공장관리</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/static/css/tkfb.css">
<link rel="stylesheet" href="/static/css/tkfb.css?v=2026031601">
</head>
<body class="bg-gray-50">
<header class="bg-orange-700 text-white sticky top-0 z-50">

154
system1-factory/web/pages/attendance/work-status.html
View File

@@ -6,7 +6,7 @@
<title>근무 현황 - TK 공장관리</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/static/css/tkfb.css">
<link rel="stylesheet" href="/static/css/tkfb.css?v=2026031601">
<style>
.page-wrapper {
padding: 1.5rem;
@@ -199,6 +199,16 @@
font-size: 0.8rem;
}
.warning-box a { color: #92400e; font-weight: 500; }
/* 모바일 최적화 */
@media (max-width: 768px) {
.summary-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.375rem; font-size: 0.7rem; }
.summary-row span { flex-direction: column; text-align: center; gap: 0.125rem; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.controls input[type="date"] { grid-column: 1 / -1; }
.save-bar { position: sticky; bottom: 0; z-index: 20; background: white; box-shadow: 0 -2px 8px rgba(0,0,0,0.08); margin: 0 -1rem; padding: 0.75rem 1rem; }
.btn-save { width: 100%; padding: 0.75rem; font-size: 1rem; }
}
</style>
</head>
<body class="bg-gray-50">
@@ -449,6 +459,16 @@
}
function render() {
const isMobile = window.innerWidth <= 768;
if (isMobile) {
renderMobile();
} else {
renderDesktop();
}
}
function renderMobile() {
const tbody = document.getElementById('workerTableBody');
if (workers.length === 0) {
@@ -456,10 +476,93 @@
return;
}
// 모바일에서는 테이블을 숨기고 카드 뷰 사용
const table = tbody.closest('table');
table.style.display = 'none';
// 기존 모바일 컨테이너 제거
let mobileContainer = document.getElementById('mobileWorkCards');
if (!mobileContainer) {
mobileContainer = document.createElement('div');
mobileContainer.id = 'mobileWorkCards';
table.parentNode.insertBefore(mobileContainer, table.nextSibling);
}
mobileContainer.className = 'mobile-work-cards';
mobileContainer.innerHTML = workers.map((w, idx) => {
const s = workStatus[w.user_id];
if (s.isNotHired) {
return `
<div class="mobile-work-card not-hired">
<div class="wc-left">
<span class="wc-name">${w.worker_name} <span class="not-hired-tag">미입사</span></span>
<span class="wc-status" style="color:#9ca3af;">입사일: ${formatDisplayDate(s.joinDate)}</span>
</div>
<div class="wc-right"><span class="wc-hours">-</span></div>
</div>
`;
}
const typeInfo = attendanceTypes.find(t => t.value === s.type);
const isLeaveType = typeInfo?.isLeave || false;
const showOvertimeInput = s.type === 'overtime';
const baseHours = s.hours;
const totalHours = s.type === 'overtime' ? baseHours + s.overtimeHours : baseHours;
let rowClass = '';
if (s.isSaved) rowClass = isLeaveType ? 'leave' : 'saved';
else if (!s.isPresent) rowClass = isLeaveType ? 'leave' : 'absent-no-leave';
let statusText = '', statusClass = '';
if (isLeaveType) { statusText = typeInfo.label; statusClass = 'color:#a16207;'; }
else if (s.isPresent) { statusText = '출근'; statusClass = 'color:#10b981;'; }
else { statusText = '⚠️ 결근'; statusClass = 'color:#dc2626;font-weight:600;'; }
let tag = '';
if (s.isSaved) tag = '<span class="saved-tag">저장됨</span>';
else if (isLeaveType) tag = '<span class="leave-tag">연차</span>';
return `
<div class="mobile-work-card ${rowClass}">
<div class="wc-left">
<span class="wc-name">${w.worker_name} ${tag}</span>
<span class="wc-status" style="${statusClass}">${statusText}</span>
</div>
<div class="wc-right">
<select onchange="updateType(${w.user_id}, this.value)">
${attendanceTypes.map(t => `
<option value="${t.value}" ${s.type === t.value ? 'selected' : ''}>${t.label}</option>
`).join('')}
</select>
${showOvertimeInput ? `
<input type="number" class="overtime-input" value="${s.overtimeHours}" min="0" max="8" step="0.5"
onchange="updateOvertime(${w.user_id}, this.value)" style="width:60px;text-align:center;font-size:14px;">
` : ''}
<span class="wc-hours">${totalHours}h</span>
</div>
</div>
`;
}).join('');
}
function renderDesktop() {
const tbody = document.getElementById('workerTableBody');
const table = tbody.closest('table');
table.style.display = '';
// 모바일 컨테이너 숨기기
const mobileContainer = document.getElementById('mobileWorkCards');
if (mobileContainer) mobileContainer.remove();
if (workers.length === 0) {
tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;color:#6b7280;padding:2rem;">작업자가 없습니다</td></tr>';
return;
}
tbody.innerHTML = workers.map((w, idx) => {
const s = workStatus[w.user_id];
// 미입사 상태 처리
if (s.isNotHired) {
return `
<tr class="not-hired">
@@ -483,36 +586,18 @@
const baseHours = s.hours;
const totalHours = s.type === 'overtime' ? baseHours + s.overtimeHours : baseHours;
// 행 클래스 결정
let rowClass = '';
if (s.isSaved) {
rowClass = isLeaveType ? 'leave' : 'saved';
} else if (!s.isPresent) {
// 출근 안 했는데 연차 정보도 없으면 경고
rowClass = isLeaveType ? 'leave' : 'absent-no-leave';
}
if (s.isSaved) rowClass = isLeaveType ? 'leave' : 'saved';
else if (!s.isPresent) rowClass = isLeaveType ? 'leave' : 'absent-no-leave';
// 출근 상태 텍스트 및 클래스 결정
let statusText = '';
let statusClass = '';
if (isLeaveType) {
statusText = typeInfo.label;
statusClass = 'status-leave';
} else if (s.isPresent) {
statusText = '출근';
statusClass = 'status-present';
} else {
statusText = '⚠️ 결근';
statusClass = 'status-absent-warning';
}
let statusText = '', statusClass = '';
if (isLeaveType) { statusText = typeInfo.label; statusClass = 'status-leave'; }
else if (s.isPresent) { statusText = '출근'; statusClass = 'status-present'; }
else { statusText = '⚠️ 결근'; statusClass = 'status-absent-warning'; }
// 태그 표시
let tag = '';
if (s.isSaved) {
tag = '<span class="saved-tag">저장됨</span>';
} else if (isLeaveType) {
tag = '<span class="leave-tag">연차</span>';
}
if (s.isSaved) tag = '<span class="saved-tag">저장됨</span>';
else if (isLeaveType) tag = '<span class="leave-tag">연차</span>';
return `
<tr class="${rowClass}">
@@ -521,9 +606,7 @@
<span class="worker-name">${w.worker_name}</span>
${tag}
</td>
<td class="${statusClass}">
${statusText}
</td>
<td class="${statusClass}">${statusText}</td>
<td>
<select class="type-select" onchange="updateType(${w.user_id}, this.value)">
${attendanceTypes.map(t => `
@@ -544,6 +627,15 @@
}).join('');
}
// 화면 크기 변경 시 재렌더링
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
if (workers.length > 0) render();
}, 250);
});
function updateType(workerId, value) {
const typeInfo = attendanceTypes.find(t => t.value === value);
workStatus[workerId].type = value;