diff --git a/system1-factory/web/css/my-monthly-confirm.css b/system1-factory/web/css/my-monthly-confirm.css index 355f281..8f788ad 100644 --- a/system1-factory/web/css/my-monthly-confirm.css +++ b/system1-factory/web/css/my-monthly-confirm.css @@ -1,4 +1,4 @@ -/* my-monthly-confirm.css — 작업자 월간 확인 (모바일 전용) */ +/* my-monthly-confirm.css — 작업자 월간 확인 (모바일 캘린더) */ body { max-width: 480px; margin: 0 auto; } /* 월 네비게이션 */ @@ -12,7 +12,7 @@ body { max-width: 480px; margin: 0 auto; } color: #6b7280; background: #f3f4f6; border: none; cursor: pointer; } .mmc-month-nav button:hover { background: #e5e7eb; } -.mmc-month-nav span { font-size: 1rem; font-weight: 700; color: #1f2937; } +.mmc-month-nav > span { font-size: 1rem; font-weight: 700; color: #1f2937; } .mmc-status-badge { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 0.7rem; font-weight: 600; padding: 3px 8px; border-radius: 12px; @@ -28,32 +28,72 @@ body { max-width: 480px; margin: 0 auto; } } .mmc-user-dept { font-size: 0.8rem; font-weight: 400; color: #6b7280; } -/* 출근부 테이블 */ -.mmc-table-wrap { margin-bottom: 12px; } -.mmc-table { - width: 100%; border-collapse: collapse; background: white; - border-radius: 10px; overflow: hidden; +/* ===== 캘린더 그리드 ===== */ +.cal-grid { + background: white; border-radius: 12px; overflow: hidden; + box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 10px; +} +.cal-header { + display: grid; grid-template-columns: repeat(7, 1fr); + background: #f9fafb; border-bottom: 1px solid #e5e7eb; +} +.cal-dow { + text-align: center; padding: 8px 0; font-size: 0.7rem; font-weight: 600; color: #6b7280; +} +.cal-dow.sun { color: #ef4444; } +.cal-dow.sat { color: #3b82f6; } + +.cal-body { display: grid; grid-template-columns: repeat(7, 1fr); } +.cal-cell { + display: flex; flex-direction: column; align-items: center; justify-content: center; + padding: 6px 2px; min-height: 54px; border-bottom: 1px solid #f3f4f6; + border-right: 1px solid #f3f4f6; cursor: pointer; + transition: background 0.15s; +} +.cal-cell:nth-child(7n) { border-right: none; } +.cal-cell:active { background: #eff6ff; } +.cal-cell.selected { background: #dbeafe; } +.cal-cell.empty { background: #fafafa; cursor: default; } + +.cal-day { font-size: 0.7rem; font-weight: 600; color: #374151; margin-bottom: 2px; } +.cal-cell.sun .cal-day { color: #ef4444; } +.cal-cell.sat .cal-day { color: #3b82f6; } + +.cal-val { font-size: 0.65rem; font-weight: 700; line-height: 1.2; text-align: center; } + +/* 셀 상태별 색상 */ +.cal-cell.normal .cal-val { color: #1f2937; } +.cal-cell.vac .cal-val { color: #059669; } +.cal-cell.off { background: #f9fafb; } +.cal-cell.off .cal-val { color: #9ca3af; font-weight: 500; } +.cal-cell.overtime .cal-val { color: #f59e0b; } +.cal-cell.special { background: #fefce8; } +.cal-cell.special .cal-val { color: #b45309; } +.cal-cell.partial .cal-val { color: #6b7280; } +.cal-cell.none .cal-val { color: #d1d5db; } + +/* 상세 표시 */ +.cal-detail { display: none; margin-bottom: 10px; } +.cal-detail-inner { + background: white; border-radius: 10px; padding: 10px 14px; + font-size: 0.8rem; color: #374151; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } -.mmc-table td { padding: 10px 8px; border-bottom: 1px solid #f3f4f6; } -.col-day { width: 36px; text-align: center; font-weight: 600; font-size: 0.85rem; color: #374151; } -.col-dow { width: 28px; text-align: center; font-size: 0.8rem; color: #6b7280; } -.col-val { text-align: right; font-size: 0.85rem; color: #1f2937; padding-right: 12px; } -.dow-sun { color: #ef4444; font-weight: 600; } -.dow-sat { color: #3b82f6; font-weight: 600; } -/* 행 스타일 */ -.row-holiday td { background: #f9fafb; } -.row-holiday-work td { background: #fefce8; } -.row-total td { background: #f0fdf4; font-weight: 700; font-size: 0.9rem; border-top: 2px solid #e5e7eb; } - -/* 값 스타일 */ -.val-vacation { color: #059669; font-weight: 600; } -.val-holiday { color: #9ca3af; } +/* ===== 요약 카드 ===== */ +.mmc-sum-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; } +.mmc-sum-card { + background: white; border-radius: 10px; padding: 10px 6px; + text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.06); +} +.mmc-sum-num { font-size: 1.1rem; font-weight: 800; color: #1f2937; } +.mmc-sum-num.ot { color: #f59e0b; } +.mmc-sum-num.vac { color: #059669; } +.mmc-sum-label { font-size: 0.65rem; color: #6b7280; margin-top: 2px; } /* 연차 현황 */ .mmc-vac-title { font-size: 0.8rem; font-weight: 600; color: #6b7280; margin-bottom: 6px; padding: 0 4px; } -.mmc-vac-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; } +.mmc-vac-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 80px; } .mmc-vac-card { background: white; border-radius: 10px; padding: 12px 8px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.06); @@ -73,22 +113,20 @@ body { max-width: 480px; margin: 0 auto; } /* 하단 버튼 */ .mmc-bottom-actions { - position: fixed; bottom: 0; left: 0; right: 0; + position: fixed; bottom: 68px; left: 0; right: 0; display: flex; gap: 8px; - padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); + padding: 10px 16px; background: white; border-top: 1px solid #e5e7eb; z-index: 30; max-width: 480px; margin: 0 auto; } .mmc-confirm-btn { - flex: 1; padding: 14px; - background: #10b981; color: white; + flex: 1; padding: 14px; background: #10b981; color: white; font-size: 0.9rem; font-weight: 700; border: none; border-radius: 12px; cursor: pointer; } .mmc-confirm-btn:hover { background: #059669; } .mmc-reject-btn { - flex: 1; padding: 14px; - background: white; color: #ef4444; + flex: 1; padding: 14px; background: white; color: #ef4444; font-size: 0.9rem; font-weight: 700; border: 2px solid #fecaca; border-radius: 12px; cursor: pointer; } @@ -100,10 +138,7 @@ body { max-width: 480px; margin: 0 auto; } background: rgba(0,0,0,0.4); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; } -.mmc-modal { - background: white; border-radius: 12px; - width: 100%; max-width: 400px; overflow: hidden; -} +.mmc-modal { background: white; border-radius: 12px; width: 100%; max-width: 400px; overflow: hidden; } .mmc-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #f3f4f6; @@ -112,39 +147,13 @@ body { max-width: 480px; margin: 0 auto; } .mmc-modal-header button { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 1.1rem; } .mmc-modal-body { padding: 16px; } .mmc-modal-desc { font-size: 0.85rem; color: #374151; margin-bottom: 8px; } -.mmc-textarea { - width: 100%; border: 1px solid #e5e7eb; border-radius: 8px; - padding: 10px; font-size: 0.85rem; resize: none; -} +.mmc-textarea { width: 100%; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px; font-size: 0.85rem; resize: none; } .mmc-modal-note { font-size: 0.75rem; color: #6b7280; margin-top: 8px; } -.mmc-modal-footer { - display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #f3f4f6; -} -.mmc-modal-cancel { - flex: 1; padding: 10px; border: 1px solid #e5e7eb; - border-radius: 8px; background: white; cursor: pointer; font-size: 0.8rem; -} -.mmc-modal-submit { - flex: 1; padding: 10px; background: #ef4444; color: white; - border: none; border-radius: 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer; -} +.mmc-modal-footer { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #f3f4f6; } +.mmc-modal-cancel { flex: 1; padding: 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: white; cursor: pointer; font-size: 0.8rem; } +.mmc-modal-submit { flex: 1; padding: 10px; background: #ef4444; color: white; border: none; border-radius: 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer; } -/* 빈 상태 */ -.mmc-empty { - display: flex; flex-direction: column; align-items: center; - gap: 8px; padding: 48px 16px; color: #9ca3af; font-size: 0.875rem; -} - -/* 스켈레톤 */ -.mmc-skeleton { - height: 40px; - background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%); - background-size: 200% 100%; - animation: mmc-shimmer 1.5s infinite; - border-radius: 8px; margin-bottom: 4px; -} +/* 빈 상태 / 스켈레톤 */ +.mmc-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 16px; color: #9ca3af; font-size: 0.875rem; } +.mmc-skeleton { height: 40px; background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%); background-size: 200% 100%; animation: mmc-shimmer 1.5s infinite; border-radius: 8px; margin-bottom: 4px; } @keyframes mmc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } - -/* 목록 아래 여백 (하단 고정 버튼 겹침 방지) */ -.mmc-table-wrap { padding-bottom: 8px; } -.mmc-vac-grid { margin-bottom: 80px; } diff --git a/system1-factory/web/js/my-monthly-confirm.js b/system1-factory/web/js/my-monthly-confirm.js index b1d683b..a2297d9 100644 --- a/system1-factory/web/js/my-monthly-confirm.js +++ b/system1-factory/web/js/my-monthly-confirm.js @@ -1,24 +1,17 @@ /** - * my-monthly-confirm.js — 작업자 월간 근무 확인 (모바일 전용) - * Sprint 004 Section B + * my-monthly-confirm.js — 작업자 월간 근무 확인 (모바일 캘린더) */ -const DAYS_KR = ['일', '월', '화', '수', '목', '금', '토']; -const VAC_TEXT = { - 'ANNUAL_FULL': '연차', 'ANNUAL_HALF': '반차', 'ANNUAL_QUARTER': '반반차', - 'EARLY_LEAVE': '조퇴', 'SICK': '병가', 'SICK_FULL': '병가', 'SICK_HALF': '병가(반)', - 'SPECIAL': '경조사', 'SPOUSE_BIRTH': '출산휴가' -}; - -let currentYear, currentMonth; -let isProcessing = false; +var DAYS_KR = ['일', '월', '화', '수', '목', '금', '토']; +var currentYear, currentMonth; +var isProcessing = false; +var selectedCell = null; // ===== Init ===== document.addEventListener('DOMContentLoaded', function() { var now = new Date(); currentYear = now.getFullYear(); currentMonth = now.getMonth() + 1; - var params = new URLSearchParams(location.search); if (params.get('year')) currentYear = parseInt(params.get('year')); if (params.get('month')) currentMonth = parseInt(params.get('month')); @@ -32,7 +25,6 @@ document.addEventListener('DOMContentLoaded', function() { }, 500); }); -// ===== Month Nav ===== function updateMonthLabel() { document.getElementById('monthLabel').textContent = currentYear + '년 ' + currentMonth + '월'; } @@ -41,36 +33,38 @@ function changeMonth(delta) { currentMonth += delta; if (currentMonth > 12) { currentMonth = 1; currentYear++; } if (currentMonth < 1) { currentMonth = 12; currentYear--; } + selectedCell = null; updateMonthLabel(); loadData(); } // ===== Data Load ===== async function loadData() { - var tableWrap = document.getElementById('tableWrap'); - tableWrap.innerHTML = '
'; + var calWrap = document.getElementById('tableWrap'); + calWrap.innerHTML = ''; try { var user = window._mmcUser || (typeof getCurrentUser === 'function' ? getCurrentUser() : null) || {}; var userId = user.user_id || user.id; var [recordsRes, balanceRes] = await Promise.all([ window.apiCall('/monthly-comparison/my-records?year=' + currentYear + '&month=' + currentMonth), - window.apiCall('/attendance/vacation-balance/' + userId).catch(function() { return { success: true, data: [] }; }) + window.apiCall('/vacation-balances/worker/' + userId + '/year/' + currentYear).catch(function() { return { success: true, data: [] }; }) ]); if (!recordsRes || !recordsRes.success) { - tableWrap.innerHTML = '데이터가 없습니다
데이터가 없습니다
네트워크 오류
네트워크 오류
해당 월 데이터가 없습니다
| ' + day + ' | '; - html += '' + dow + ' | '; - html += '' + escHtml(val) + ' | '; - html += '
| 총 근무시간 | '; - html += '' + totalHours.toFixed(2) + 'h | '; - html += '|