594ae575a5
- 7탭 구성: 전체 흐름도, 연차 발생/계산, 휴가 신청/결재, 근태 기록, 연차촉진제도, 급여 연동, 메뉴 맵 - AttendanceGuideController + HX-Redirect 패턴 적용 - 근로기준법 기반 연차 발생 기준, 촉진 타임라인, 급여 연동 로직 포함
1246 lines
80 KiB
PHP
1246 lines
80 KiB
PHP
@extends('layouts.app')
|
||
|
||
@section('title', '연차휴가/근태관리')
|
||
|
||
@push('styles')
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||
<style>
|
||
.att-body { font-family: 'Noto Sans KR', sans-serif; color: #1e293b; }
|
||
|
||
/* 히어로 */
|
||
.att-hero { background: linear-gradient(135deg, #1a3c34 0%, #065f46 40%, #047857 70%, #10b981 100%); }
|
||
.att-hero-glow { position: absolute; width: 250px; height: 250px; border-radius: 50%; filter: blur(80px); opacity: 0.12; }
|
||
|
||
/* 탭 */
|
||
.att-tab { padding: 0.5rem 1.25rem; border-radius: 2rem; font-weight: 600; font-size: 0.8rem; transition: all 0.2s; border: 2px solid transparent; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.6); cursor: pointer; }
|
||
.att-tab:hover { color: white; background: rgba(255,255,255,0.1); }
|
||
.att-tab.active { background: rgba(255,255,255,0.15); color: white; border-color: rgba(255,255,255,0.3); }
|
||
.att-section { display: none; }
|
||
.att-section.active { display: block; }
|
||
|
||
/* 플로우 카드 */
|
||
.flow-card { background: white; border-radius: 1rem; border: 1px solid #e2e8f0; overflow: hidden; transition: all 0.3s; }
|
||
.flow-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
|
||
.flow-head { padding: 1rem 1.25rem; color: white; font-weight: 700; font-size: 0.85rem; }
|
||
.flow-body { padding: 1.25rem; }
|
||
|
||
/* 스텝 */
|
||
.step-row { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; position: relative; }
|
||
.step-row:last-child { margin-bottom: 0; }
|
||
.step-num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.75rem; color: white; flex-shrink: 0; }
|
||
.step-content { flex: 1; }
|
||
.step-title { font-weight: 700; font-size: 0.85rem; margin-bottom: 2px; }
|
||
.step-desc { font-size: 0.75rem; color: #64748b; line-height: 1.6; }
|
||
.step-menu { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 4px; font-size: 0.65rem; font-weight: 600; background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; margin-top: 4px; }
|
||
|
||
/* 연결 화살표 */
|
||
.flow-arrow { display: flex; justify-content: center; align-items: center; padding: 0.5rem 0; color: #94a3b8; font-size: 1.5rem; }
|
||
|
||
/* 주의사항 박스 */
|
||
.notice-box { border-radius: 0.75rem; padding: 1rem 1.25rem; font-size: 0.8rem; line-height: 1.7; }
|
||
.notice-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
|
||
.notice-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
|
||
.notice-tip { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
|
||
.notice-danger { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
|
||
|
||
/* 메뉴 맵 */
|
||
.menu-map { background: #f8fafc; border-radius: 1rem; border: 1px solid #e2e8f0; padding: 1.5rem; }
|
||
.menu-group { margin-bottom: 1.25rem; }
|
||
.menu-group:last-child { margin-bottom: 0; }
|
||
.menu-group-title { font-weight: 800; font-size: 0.85rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
|
||
.menu-item { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 6px; font-size: 0.7rem; font-weight: 500; background: white; border: 1px solid #e2e8f0; margin: 2px; transition: all 0.2s; }
|
||
.menu-item:hover { border-color: #10b981; background: #f0fdf4; }
|
||
.menu-item-num { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.55rem; font-weight: 800; color: white; }
|
||
|
||
/* 타임라인 */
|
||
.timeline { position: relative; padding-left: 2rem; }
|
||
.timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: #d1d5db; }
|
||
.timeline-item { position: relative; margin-bottom: 1.5rem; }
|
||
.timeline-item:last-child { margin-bottom: 0; }
|
||
.timeline-dot { position: absolute; left: -2rem; top: 4px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #d1d5db; }
|
||
|
||
/* 비교 테이블 */
|
||
.cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.75rem; }
|
||
.cmp-table th { background: #f1f5f9; padding: 0.6rem 0.75rem; font-weight: 700; text-align: left; border-bottom: 2px solid #e2e8f0; }
|
||
.cmp-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid #f1f5f9; }
|
||
.cmp-table tr:hover td { background: #f8fafc; }
|
||
|
||
/* 프로세스 흐름 */
|
||
.process-flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; justify-content: center; }
|
||
.process-step { flex: 1; min-width: 100px; max-width: 160px; text-align: center; padding: 1rem 0.5rem; position: relative; }
|
||
.process-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem; font-size: 1.25rem; }
|
||
.process-name { font-weight: 700; font-size: 0.8rem; }
|
||
.process-sub { font-size: 0.65rem; color: #64748b; margin-top: 2px; }
|
||
.process-arrow { display: flex; align-items: center; color: #cbd5e1; font-size: 1.2rem; padding: 0 2px; }
|
||
|
||
/* 배지 */
|
||
.badge-green { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.6rem; font-weight: 700; background: #dcfce7; color: #166534; }
|
||
.badge-blue { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.6rem; font-weight: 700; background: #dbeafe; color: #1e40af; }
|
||
.badge-amber { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.6rem; font-weight: 700; background: #fef3c7; color: #92400e; }
|
||
.badge-red { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.6rem; font-weight: 700; background: #fee2e2; color: #991b1b; }
|
||
.badge-purple { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.6rem; font-weight: 700; background: #f3e8ff; color: #6b21a8; }
|
||
|
||
/* 카운트 카드 */
|
||
.count-card { background: white; border-radius: 0.75rem; border: 1px solid #e2e8f0; padding: 1.25rem; text-align: center; transition: all 0.3s; }
|
||
.count-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.06); }
|
||
.count-num { font-size: 2rem; font-weight: 900; line-height: 1; }
|
||
.count-label { font-size: 0.7rem; font-weight: 600; margin-top: 0.25rem; }
|
||
.count-desc { font-size: 0.65rem; color: #64748b; margin-top: 0.5rem; }
|
||
|
||
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
|
||
.anim-in { animation: fadeIn 0.5s ease-out forwards; }
|
||
</style>
|
||
@endpush
|
||
|
||
@section('content')
|
||
<div class="att-body">
|
||
|
||
{{-- ===== 히어로 ===== --}}
|
||
<div class="att-hero text-white px-6 py-10 rounded-b-3xl mb-8 relative overflow-hidden">
|
||
<div class="att-hero-glow" style="top: -40px; right: -40px; background: #34d399;"></div>
|
||
<div class="att-hero-glow" style="bottom: -60px; left: 15%; background: #60a5fa;"></div>
|
||
|
||
<div style="max-width: 1400px; margin: 0 auto; position: relative; z-index: 1;">
|
||
<div class="flex items-center gap-3 mb-3">
|
||
<div style="width: 48px; height: 48px; background: linear-gradient(135deg, #059669, #10b981); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
|
||
<span style="font-size: 1.5rem;">📅</span>
|
||
</div>
|
||
<div>
|
||
<p class="text-emerald-300 text-xs font-bold tracking-wider uppercase">SAM 도움말</p>
|
||
<h1 class="text-3xl font-black">연차휴가/근태관리</h1>
|
||
</div>
|
||
</div>
|
||
<p class="text-emerald-100 text-sm mb-6" style="max-width: 700px;">
|
||
연차 발생부터 사용, 촉진제도, 결재 처리, 급여 연동까지.
|
||
SAM 시스템의 근태관리 전체 프로세스를 한 눈에 이해할 수 있는 가이드입니다.
|
||
</p>
|
||
|
||
<div class="flex flex-wrap gap-2">
|
||
<button class="att-tab active" onclick="switchAttTab(0)">전체 흐름도</button>
|
||
<button class="att-tab" onclick="switchAttTab(1)">연차 발생/계산</button>
|
||
<button class="att-tab" onclick="switchAttTab(2)">휴가 신청/결재</button>
|
||
<button class="att-tab" onclick="switchAttTab(3)">근태 기록</button>
|
||
<button class="att-tab" onclick="switchAttTab(4)">연차촉진제도</button>
|
||
<button class="att-tab" onclick="switchAttTab(5)">급여 연동</button>
|
||
<button class="att-tab" onclick="switchAttTab(6)">메뉴 맵</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="max-width: 1400px; margin: 0 auto;" class="px-4">
|
||
|
||
{{-- ===== 탭 0: 전체 흐름도 ===== --}}
|
||
<div class="att-section active" id="attTab0">
|
||
<h2 class="text-xl font-bold mb-2 text-gray-800">SAM 근태관리 전체 흐름</h2>
|
||
<p class="text-sm text-gray-500 mb-6">입사부터 급여 정산까지, SAM에서 처리하는 근태/연차의 전체 라이프사이클을 보여줍니다.</p>
|
||
|
||
{{-- 큰 흐름도 --}}
|
||
<div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
|
||
<h3 class="font-bold text-sm text-gray-700 mb-4">근태관리 순환 과정</h3>
|
||
|
||
<div class="process-flow mb-6">
|
||
<div class="process-step">
|
||
<div class="process-icon" style="background: #dcfce7; color: #16a34a;">👤</div>
|
||
<div class="process-name">입사 등록</div>
|
||
<div class="process-sub">직원정보/입사일</div>
|
||
</div>
|
||
<div class="process-arrow">→</div>
|
||
<div class="process-step">
|
||
<div class="process-icon" style="background: #dbeafe; color: #2563eb;">📊</div>
|
||
<div class="process-name">연차 발생</div>
|
||
<div class="process-sub">근속연수 기준</div>
|
||
</div>
|
||
<div class="process-arrow">→</div>
|
||
<div class="process-step">
|
||
<div class="process-icon" style="background: #fef3c7; color: #d97706;">📝</div>
|
||
<div class="process-name">휴가 신청</div>
|
||
<div class="process-sub">연차/반차/특별휴가</div>
|
||
</div>
|
||
<div class="process-arrow">→</div>
|
||
<div class="process-step">
|
||
<div class="process-icon" style="background: #f3e8ff; color: #7c3aed;">✅</div>
|
||
<div class="process-name">결재 승인</div>
|
||
<div class="process-sub">상위 결재권자</div>
|
||
</div>
|
||
<div class="process-arrow">→</div>
|
||
<div class="process-step">
|
||
<div class="process-icon" style="background: #fce7f3; color: #db2777;">📅</div>
|
||
<div class="process-name">근태 기록</div>
|
||
<div class="process-sub">출퇴근/지각/조퇴</div>
|
||
</div>
|
||
<div class="process-arrow">→</div>
|
||
<div class="process-step">
|
||
<div class="process-icon" style="background: #ecfdf5; color: #059669;">💰</div>
|
||
<div class="process-name">급여 연동</div>
|
||
<div class="process-sub">연차수당/차감</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="notice-info notice-box">
|
||
<strong>핵심 원리:</strong> SAM에서는 모든 근태 기록이 <strong>결재 승인</strong>을 기반으로 처리됩니다. 휴가는 반드시 신청 → 결재 → 승인의 과정을 거치며, 승인된 기록만 <strong>잔여 연차에 반영</strong>되고 <strong>급여 정산 시 자동 연동</strong>됩니다.
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 5대 영역 --}}
|
||
<h3 class="font-bold text-sm text-gray-700 mb-3">SAM 근태관리 5대 영역</h3>
|
||
<div class="grid gap-4 mb-6" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));">
|
||
<div class="flow-card">
|
||
<div class="flow-head" style="background: linear-gradient(135deg, #059669, #34d399);">
|
||
<span style="margin-right: 4px;">📅</span> 연차/휴가관리
|
||
</div>
|
||
<div class="flow-body">
|
||
<p class="text-xs text-gray-600 mb-3"><strong>연차 발생과 사용</strong>을 관리합니다. "올해 연차 몇 개?", "남은 연차는?"</p>
|
||
<div class="space-y-1">
|
||
<div class="step-menu">휴가관리 — 휴가 신청/승인/이력</div>
|
||
<div class="step-menu">연차잔여현황 — 개인별 연차 현황</div>
|
||
<div class="step-menu">연차촉진관리 — 미사용 연차 촉진</div>
|
||
<div class="step-menu">연차발생기준 — 근속연수별 자동계산</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-card">
|
||
<div class="flow-head" style="background: linear-gradient(135deg, #2563eb, #60a5fa);">
|
||
<span style="margin-right: 4px;">⏰</span> 출퇴근/근태기록
|
||
</div>
|
||
<div class="flow-body">
|
||
<p class="text-xs text-gray-600 mb-3">일일 <strong>출퇴근 시간과 근태 상태</strong>를 기록합니다. 지각, 조퇴, 결근 자동 판별.</p>
|
||
<div class="space-y-1">
|
||
<div class="step-menu">근태현황 — 월별 출퇴근 기록 조회</div>
|
||
<div class="step-menu">근태관리 통합 — 전 직원 근태 대시보드</div>
|
||
<div class="step-menu">출퇴근 기록 — 일일 근무시간 체크</div>
|
||
<div class="step-menu">근무유형 — 정상/지각/조퇴/결근/외근</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-card">
|
||
<div class="flow-head" style="background: linear-gradient(135deg, #7c3aed, #a78bfa);">
|
||
<span style="margin-right: 4px;">📋</span> 결재 처리
|
||
</div>
|
||
<div class="flow-body">
|
||
<p class="text-xs text-gray-600 mb-3">휴가 신청, 근태 변경에 대한 <strong>결재 승인 프로세스</strong>를 관리합니다.</p>
|
||
<div class="space-y-1">
|
||
<div class="step-menu">결재관리 — 휴가/근태 결재 목록</div>
|
||
<div class="step-menu">결재선 설정 — 부서별 결재 경로</div>
|
||
<div class="step-menu">대결 설정 — 부재 시 대리 결재</div>
|
||
<div class="step-menu">결재 이력 — 승인/반려 히스토리</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-card">
|
||
<div class="flow-head" style="background: linear-gradient(135deg, #d97706, #fbbf24);">
|
||
<span style="margin-right: 4px;">👥</span> 인사 기초정보
|
||
</div>
|
||
<div class="flow-body">
|
||
<p class="text-xs text-gray-600 mb-3">근태관리의 기반이 되는 <strong>직원/부서/입퇴사 정보</strong>를 관리합니다.</p>
|
||
<div class="space-y-1">
|
||
<div class="step-menu">입퇴사자현황 — 입사일/퇴사일 관리</div>
|
||
<div class="step-menu">직원관리 — 인적사항/소속 부서</div>
|
||
<div class="step-menu">부서관리 — 조직 구조 설정</div>
|
||
<div class="step-menu">직위/직급 — 결재 권한 기준</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-card">
|
||
<div class="flow-head" style="background: linear-gradient(135deg, #db2777, #f472b6);">
|
||
<span style="margin-right: 4px;">💰</span> 급여/정산 연동
|
||
</div>
|
||
<div class="flow-body">
|
||
<p class="text-xs text-gray-600 mb-3">근태 결과가 <strong>급여에 자동 반영</strong>됩니다. 연차수당, 결근 차감, 초과근무 수당.</p>
|
||
<div class="space-y-1">
|
||
<div class="step-menu">급여관리 — 월별 급여 산정</div>
|
||
<div class="step-menu">연차수당 — 미사용 연차 보상</div>
|
||
<div class="step-menu">사업소득자관리 — 프리랜서/계약직</div>
|
||
<div class="step-menu">임금대장 — 사업소득자 급여 관리</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 연차 요약 카드 --}}
|
||
<h3 class="font-bold text-sm text-gray-700 mb-3">연차 핵심 정보 한눈에</h3>
|
||
<div class="grid gap-4 mb-6" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));">
|
||
<div class="count-card">
|
||
<div class="count-num" style="color: #059669;">15</div>
|
||
<div class="count-label" style="color: #059669;">기본 연차</div>
|
||
<div class="count-desc">1년 이상 근무자<br>기본 부여일수</div>
|
||
</div>
|
||
<div class="count-card">
|
||
<div class="count-num" style="color: #2563eb;">25</div>
|
||
<div class="count-label" style="color: #2563eb;">최대 연차</div>
|
||
<div class="count-desc">근속 21년 이상<br>법정 최대 한도</div>
|
||
</div>
|
||
<div class="count-card">
|
||
<div class="count-num" style="color: #d97706;">11</div>
|
||
<div class="count-label" style="color: #d97706;">신입 연차</div>
|
||
<div class="count-desc">1년 미만 근무자<br>월 1개씩 발생</div>
|
||
</div>
|
||
<div class="count-card">
|
||
<div class="count-num" style="color: #7c3aed;">2회</div>
|
||
<div class="count-label" style="color: #7c3aed;">촉진 통보</div>
|
||
<div class="count-desc">연차촉진제도<br>의무 통보 횟수</div>
|
||
</div>
|
||
<div class="count-card">
|
||
<div class="count-num" style="color: #db2777;">0.5</div>
|
||
<div class="count-label" style="color: #db2777;">반차 단위</div>
|
||
<div class="count-desc">오전/오후 반차<br>0.5일 차감</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ===== 탭 1: 연차 발생/계산 ===== --}}
|
||
<div class="att-section" id="attTab1">
|
||
<h2 class="text-xl font-bold mb-2 text-gray-800">연차 발생 기준 및 계산</h2>
|
||
<p class="text-sm text-gray-500 mb-6">근로기준법에 따른 연차유급휴가 발생 기준과 SAM에서의 자동 계산 방식을 설명합니다.</p>
|
||
|
||
{{-- 1년 미만 --}}
|
||
<div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
|
||
<h3 class="font-bold text-sm text-gray-700 mb-4">
|
||
<span class="badge-amber">신입사원</span> 1년 미만 근무자의 연차
|
||
</h3>
|
||
<div class="grid gap-4 mb-4" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));">
|
||
<div>
|
||
<p class="text-xs text-gray-600 mb-3 leading-relaxed">
|
||
입사 후 1년이 되지 않은 직원은 <strong>1개월 개근 시 1일의 유급휴가</strong>가 발생합니다.
|
||
최대 <strong>11일</strong>까지 발생하며, 12개월째는 이미 1년 근속으로 전환되므로 별도 발생하지 않습니다.
|
||
</p>
|
||
<div class="notice-tip notice-box">
|
||
<strong>SAM 자동 계산:</strong> 입사일 기준으로 매월 개근 여부를 체크하여 자동으로 연차가 발생합니다. 결근이 있는 달은 연차가 발생하지 않습니다.
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<table class="cmp-table">
|
||
<thead>
|
||
<tr>
|
||
<th>근무 개월</th>
|
||
<th>발생 연차</th>
|
||
<th>누적 합계</th>
|
||
<th>조건</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>1개월</td><td>1일</td><td>1일</td><td>개근</td></tr>
|
||
<tr><td>2개월</td><td>1일</td><td>2일</td><td>개근</td></tr>
|
||
<tr><td>3개월</td><td>1일</td><td>3일</td><td>개근</td></tr>
|
||
<tr><td>...</td><td>...</td><td>...</td><td>...</td></tr>
|
||
<tr style="font-weight: 700;"><td>11개월</td><td>1일</td><td style="color: #059669;">최대 11일</td><td>개근</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 1년 이상 --}}
|
||
<div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
|
||
<h3 class="font-bold text-sm text-gray-700 mb-4">
|
||
<span class="badge-green">정규 연차</span> 1년 이상 근무자의 연차
|
||
</h3>
|
||
<div class="grid gap-4 mb-4" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));">
|
||
<div>
|
||
<p class="text-xs text-gray-600 mb-3 leading-relaxed">
|
||
1년간 80% 이상 출근한 직원에게는 <strong>15일의 유급휴가</strong>가 부여됩니다.
|
||
이후 <strong>2년마다 1일씩 가산</strong>되어 최대 <strong>25일</strong>까지 늘어납니다.
|
||
</p>
|
||
<div class="notice-info notice-box mb-3">
|
||
<strong>계산 공식:</strong> 연차일수 = 15일 + (근속연수 - 1년) ÷ 2 (소수점 버림, 최대 25일)
|
||
</div>
|
||
<div class="notice-warn notice-box">
|
||
<strong>80% 미만 출근 시:</strong> 해당 연도의 연차가 발생하지 않습니다. 출근율 = (출근일수 ÷ 소정근로일수) × 100
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<table class="cmp-table">
|
||
<thead>
|
||
<tr>
|
||
<th>근속연수</th>
|
||
<th>연차 일수</th>
|
||
<th>가산일</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>1년</td><td style="font-weight: 700;">15일</td><td>기본</td></tr>
|
||
<tr><td>2년</td><td>15일</td><td>-</td></tr>
|
||
<tr><td>3년</td><td style="font-weight: 700;">16일</td><td>+1</td></tr>
|
||
<tr><td>4~5년</td><td>16~17일</td><td>+1~2</td></tr>
|
||
<tr><td>6~7년</td><td>17~18일</td><td>+2~3</td></tr>
|
||
<tr><td>8~9년</td><td>18~19일</td><td>+3~4</td></tr>
|
||
<tr><td>10~11년</td><td>19~20일</td><td>+4~5</td></tr>
|
||
<tr><td>...</td><td>...</td><td>...</td></tr>
|
||
<tr style="font-weight: 700; background: #f0fdf4;"><td>21년 이상</td><td style="color: #059669;">25일 (최대)</td><td>+10</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 휴가 종류 --}}
|
||
<div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
|
||
<h3 class="font-bold text-sm text-gray-700 mb-4">SAM에서 관리하는 휴가 종류</h3>
|
||
<div class="grid gap-3" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));">
|
||
<div style="background: #f0fdf4; border-radius: 0.75rem; padding: 1rem; border: 1px solid #bbf7d0;">
|
||
<div class="font-bold text-sm text-emerald-700 mb-2">연차유급휴가</div>
|
||
<div class="text-xs text-gray-600 leading-relaxed">
|
||
근로기준법에 따른 유급 연차.<br>
|
||
<strong>차감:</strong> 연차 잔여일수에서 차감<br>
|
||
<strong>단위:</strong> 1일 / 0.5일(반차)
|
||
</div>
|
||
</div>
|
||
<div style="background: #eff6ff; border-radius: 0.75rem; padding: 1rem; border: 1px solid #bfdbfe;">
|
||
<div class="font-bold text-sm text-blue-700 mb-2">반차 (오전/오후)</div>
|
||
<div class="text-xs text-gray-600 leading-relaxed">
|
||
연차를 0.5일 단위로 사용.<br>
|
||
<strong>오전반차:</strong> 오후 출근 (13:00~)<br>
|
||
<strong>오후반차:</strong> 오전 근무 (~12:00)
|
||
</div>
|
||
</div>
|
||
<div style="background: #fef3c7; border-radius: 0.75rem; padding: 1rem; border: 1px solid #fde68a;">
|
||
<div class="font-bold text-sm text-amber-700 mb-2">경조휴가</div>
|
||
<div class="text-xs text-gray-600 leading-relaxed">
|
||
결혼, 출산, 사망 등 경조사 시.<br>
|
||
<strong>차감:</strong> 연차에서 차감 안 됨<br>
|
||
<strong>기간:</strong> 사유별 1~7일
|
||
</div>
|
||
</div>
|
||
<div style="background: #f3e8ff; border-radius: 0.75rem; padding: 1rem; border: 1px solid #e9d5ff;">
|
||
<div class="font-bold text-sm text-purple-700 mb-2">병가</div>
|
||
<div class="text-xs text-gray-600 leading-relaxed">
|
||
질병/부상으로 인한 휴무.<br>
|
||
<strong>유/무급:</strong> 회사 규정에 따름<br>
|
||
<strong>증빙:</strong> 진단서 필요 (3일 이상)
|
||
</div>
|
||
</div>
|
||
<div style="background: #fce7f3; border-radius: 0.75rem; padding: 1rem; border: 1px solid #fbcfe8;">
|
||
<div class="font-bold text-sm text-pink-700 mb-2">출산/육아휴직</div>
|
||
<div class="text-xs text-gray-600 leading-relaxed">
|
||
출산 전후 휴가 및 육아휴직.<br>
|
||
<strong>출산휴가:</strong> 90일 (유급 60일)<br>
|
||
<strong>육아휴직:</strong> 최대 1년
|
||
</div>
|
||
</div>
|
||
<div style="background: #f8fafc; border-radius: 0.75rem; padding: 1rem; border: 1px solid #e2e8f0;">
|
||
<div class="font-bold text-sm text-gray-700 mb-2">공가/교육</div>
|
||
<div class="text-xs text-gray-600 leading-relaxed">
|
||
법정 의무 교육, 예비군 등.<br>
|
||
<strong>차감:</strong> 연차에서 차감 안 됨<br>
|
||
<strong>증빙:</strong> 소집통지서/수료증
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ===== 탭 2: 휴가 신청/결재 ===== --}}
|
||
<div class="att-section" id="attTab2">
|
||
<h2 class="text-xl font-bold mb-2 text-gray-800">휴가 신청 및 결재 프로세스</h2>
|
||
<p class="text-sm text-gray-500 mb-6">SAM에서 휴가를 신청하고 결재받는 전체 과정을 단계별로 설명합니다.</p>
|
||
|
||
{{-- 결재 흐름 --}}
|
||
<div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
|
||
<h3 class="font-bold text-sm text-gray-700 mb-4">휴가 신청 → 승인 전체 프로세스</h3>
|
||
|
||
<div class="process-flow mb-6">
|
||
<div class="process-step">
|
||
<div class="process-icon" style="background: #dbeafe; color: #2563eb;">📝</div>
|
||
<div class="process-name">휴가 신청</div>
|
||
<div class="process-sub">직원이 직접 작성</div>
|
||
</div>
|
||
<div class="process-arrow">→</div>
|
||
<div class="process-step">
|
||
<div class="process-icon" style="background: #fef3c7; color: #d97706;">👁</div>
|
||
<div class="process-name">팀장 검토</div>
|
||
<div class="process-sub">1차 결재</div>
|
||
</div>
|
||
<div class="process-arrow">→</div>
|
||
<div class="process-step">
|
||
<div class="process-icon" style="background: #f3e8ff; color: #7c3aed;">✍</div>
|
||
<div class="process-name">부서장 승인</div>
|
||
<div class="process-sub">최종 결재</div>
|
||
</div>
|
||
<div class="process-arrow">→</div>
|
||
<div class="process-step">
|
||
<div class="process-icon" style="background: #dcfce7; color: #16a34a;">✅</div>
|
||
<div class="process-name">연차 차감</div>
|
||
<div class="process-sub">잔여일수 반영</div>
|
||
</div>
|
||
<div class="process-arrow">→</div>
|
||
<div class="process-step">
|
||
<div class="process-icon" style="background: #fce7f3; color: #db2777;">📊</div>
|
||
<div class="process-name">근태 반영</div>
|
||
<div class="process-sub">월간 근태표 기록</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 상세 단계 --}}
|
||
<div class="grid gap-4 mb-6" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
|
||
<div class="flow-card">
|
||
<div class="flow-head" style="background: linear-gradient(135deg, #2563eb, #60a5fa);">
|
||
STEP 1. 휴가 신청서 작성
|
||
</div>
|
||
<div class="flow-body">
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #2563eb;">1</div>
|
||
<div class="step-content">
|
||
<div class="step-title">SAM 메뉴 접근</div>
|
||
<div class="step-desc">인사관리 > 휴가관리에서 '신규 신청' 버튼 클릭</div>
|
||
<div class="step-menu">SAM > 인사관리 > 휴가관리</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #2563eb;">2</div>
|
||
<div class="step-content">
|
||
<div class="step-title">휴가 유형 선택</div>
|
||
<div class="step-desc">연차/반차(오전·오후)/경조/병가/공가 중 선택</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #2563eb;">3</div>
|
||
<div class="step-content">
|
||
<div class="step-title">기간 및 사유 입력</div>
|
||
<div class="step-desc">시작일~종료일 선택, 사유 작성. 반차는 오전/오후 구분.</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #2563eb;">4</div>
|
||
<div class="step-content">
|
||
<div class="step-title">잔여 연차 확인</div>
|
||
<div class="step-desc">신청 시 현재 잔여 연차가 표시됩니다. 잔여일수 부족 시 신청 불가.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-card">
|
||
<div class="flow-head" style="background: linear-gradient(135deg, #7c3aed, #a78bfa);">
|
||
STEP 2. 결재 처리
|
||
</div>
|
||
<div class="flow-body">
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #7c3aed;">1</div>
|
||
<div class="step-content">
|
||
<div class="step-title">결재선 자동 설정</div>
|
||
<div class="step-desc">소속 부서의 결재선에 따라 자동으로 결재권자가 지정됩니다.</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #7c3aed;">2</div>
|
||
<div class="step-content">
|
||
<div class="step-title">알림 발송</div>
|
||
<div class="step-desc">결재권자에게 알림톡/푸시 알림이 전송됩니다.</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #7c3aed;">3</div>
|
||
<div class="step-content">
|
||
<div class="step-title">승인 또는 반려</div>
|
||
<div class="step-desc">결재권자가 승인하면 연차 차감, 반려 시 사유와 함께 반려됩니다.</div>
|
||
<div class="step-menu">SAM > 결재관리 > 결재 대기함</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #7c3aed;">4</div>
|
||
<div class="step-content">
|
||
<div class="step-title">결재 완료 통보</div>
|
||
<div class="step-desc">승인/반려 결과가 신청자에게 알림으로 전달됩니다.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 결재 상태 --}}
|
||
<div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
|
||
<h3 class="font-bold text-sm text-gray-700 mb-4">결재 상태별 의미</h3>
|
||
<table class="cmp-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 120px;">상태</th>
|
||
<th>의미</th>
|
||
<th>연차 차감</th>
|
||
<th>근태 반영</th>
|
||
<th>수정 가능</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><span class="badge-blue">대기</span></td>
|
||
<td>결재권자의 승인을 기다리는 상태</td>
|
||
<td style="color: #64748b;">미차감</td>
|
||
<td style="color: #64748b;">미반영</td>
|
||
<td style="color: #059669; font-weight: 700;">수정/취소 가능</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="badge-amber">진행중</span></td>
|
||
<td>다단계 결재 시 일부 승인 완료</td>
|
||
<td style="color: #64748b;">미차감</td>
|
||
<td style="color: #64748b;">미반영</td>
|
||
<td style="color: #d97706; font-weight: 700;">취소만 가능</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="badge-green">승인</span></td>
|
||
<td>최종 결재 완료, 휴가 확정</td>
|
||
<td style="color: #059669; font-weight: 700;">차감 완료</td>
|
||
<td style="color: #059669; font-weight: 700;">반영 완료</td>
|
||
<td style="color: #991b1b;">수정 불가</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="badge-red">반려</span></td>
|
||
<td>결재권자가 거부, 사유 첨부</td>
|
||
<td style="color: #64748b;">미차감</td>
|
||
<td style="color: #64748b;">미반영</td>
|
||
<td style="color: #059669; font-weight: 700;">재신청 가능</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="badge-purple">취소</span></td>
|
||
<td>신청자가 직접 취소</td>
|
||
<td style="color: #059669; font-weight: 700;">복원</td>
|
||
<td style="color: #64748b;">미반영</td>
|
||
<td>-</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{{-- 주의사항 --}}
|
||
<div class="notice-warn notice-box mb-6">
|
||
<strong>결재 관련 주의사항:</strong>
|
||
<ul style="margin-top: 0.5rem; padding-left: 1.25rem; list-style: disc;">
|
||
<li>승인 완료된 휴가를 취소하려면 <strong>관리자(인사팀)</strong>에게 요청해야 합니다.</li>
|
||
<li>결재선이 설정되지 않은 부서는 휴가 신청이 불가하므로, 먼저 <strong>결재선 설정</strong>이 필요합니다.</li>
|
||
<li>대결 설정이 되어 있으면 부재 중인 결재권자 대신 대리 결재가 가능합니다.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ===== 탭 3: 근태 기록 ===== --}}
|
||
<div class="att-section" id="attTab3">
|
||
<h2 class="text-xl font-bold mb-2 text-gray-800">근태 기록 및 관리</h2>
|
||
<p class="text-sm text-gray-500 mb-6">출퇴근 기록, 근태 유형, 근무시간 계산 방식을 설명합니다.</p>
|
||
|
||
{{-- 근태 유형 --}}
|
||
<div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
|
||
<h3 class="font-bold text-sm text-gray-700 mb-4">근태 유형 분류</h3>
|
||
<table class="cmp-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 100px;">유형</th>
|
||
<th>기준</th>
|
||
<th>표시</th>
|
||
<th>급여 영향</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><span class="badge-green">정상 출근</span></td>
|
||
<td>정시 이전 출근 + 정시 이후 퇴근</td>
|
||
<td style="color: #059669; font-weight: 700;">O</td>
|
||
<td>정상 지급</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="badge-amber">지각</span></td>
|
||
<td>출근 시간이 정시를 초과</td>
|
||
<td style="color: #d97706; font-weight: 700;">△</td>
|
||
<td>회사 규정에 따름</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="badge-amber">조퇴</span></td>
|
||
<td>퇴근 시간이 정시 이전</td>
|
||
<td style="color: #d97706; font-weight: 700;">▽</td>
|
||
<td>회사 규정에 따름</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="badge-red">결근</span></td>
|
||
<td>무단으로 출근하지 않음</td>
|
||
<td style="color: #991b1b; font-weight: 700;">X</td>
|
||
<td>일급 차감</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="badge-blue">연차</span></td>
|
||
<td>승인된 연차유급휴가</td>
|
||
<td style="color: #2563eb; font-weight: 700;">연</td>
|
||
<td>유급 (정상 지급)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="badge-blue">반차</span></td>
|
||
<td>오전 또는 오후 반일 휴가</td>
|
||
<td style="color: #2563eb; font-weight: 700;">반</td>
|
||
<td>유급 (정상 지급)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="badge-purple">외근</span></td>
|
||
<td>외부 업무 수행</td>
|
||
<td style="color: #7c3aed; font-weight: 700;">외</td>
|
||
<td>정상 지급</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="badge-purple">출장</span></td>
|
||
<td>출장 명령에 의한 근무</td>
|
||
<td style="color: #7c3aed; font-weight: 700;">출</td>
|
||
<td>정상 지급 + 출장비</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span style="display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.6rem; font-weight: 700; background: #f8fafc; color: #475569; border: 1px solid #e2e8f0;">휴일</span></td>
|
||
<td>주말/공휴일</td>
|
||
<td style="color: #94a3b8;">-</td>
|
||
<td>해당 없음</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{{-- 근태 관리 업무 --}}
|
||
<div class="grid gap-4 mb-6" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
|
||
<div class="flow-card">
|
||
<div class="flow-head" style="background: linear-gradient(135deg, #059669, #34d399);">
|
||
일일 근태 관리
|
||
</div>
|
||
<div class="flow-body">
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #059669;">1</div>
|
||
<div class="step-content">
|
||
<div class="step-title">출근 기록 확인</div>
|
||
<div class="step-desc">근태현황에서 당일 출근자/미출근자 목록을 확인합니다.</div>
|
||
<div class="step-menu">SAM > 인사관리 > 근태현황</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #059669;">2</div>
|
||
<div class="step-content">
|
||
<div class="step-title">지각/조퇴 체크</div>
|
||
<div class="step-desc">출퇴근 시간을 기준으로 지각/조퇴가 자동 판별됩니다.</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #059669;">3</div>
|
||
<div class="step-content">
|
||
<div class="step-title">결근자 파악</div>
|
||
<div class="step-desc">휴가 미신청 + 미출근인 직원은 결근으로 처리됩니다.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-card">
|
||
<div class="flow-head" style="background: linear-gradient(135deg, #2563eb, #60a5fa);">
|
||
월간 근태 정리
|
||
</div>
|
||
<div class="flow-body">
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #2563eb;">1</div>
|
||
<div class="step-content">
|
||
<div class="step-title">월간 근태표 확인</div>
|
||
<div class="step-desc">근태관리 통합에서 전 직원의 월간 근태를 한눈에 조회합니다.</div>
|
||
<div class="step-menu">SAM > 인사관리 > 근태관리</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #2563eb;">2</div>
|
||
<div class="step-content">
|
||
<div class="step-title">이상 근태 처리</div>
|
||
<div class="step-desc">지각/조퇴/결근 사유를 확인하고, 필요 시 사유서를 접수합니다.</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #2563eb;">3</div>
|
||
<div class="step-content">
|
||
<div class="step-title">근태 마감 → 급여 연동</div>
|
||
<div class="step-desc">월말 근태를 마감하면 급여 산정 시 자동으로 반영됩니다.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 근무시간 계산 --}}
|
||
<div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
|
||
<h3 class="font-bold text-sm text-gray-700 mb-4">근무시간 계산 기준</h3>
|
||
<div class="grid gap-4" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
|
||
<div>
|
||
<table class="cmp-table">
|
||
<thead>
|
||
<tr>
|
||
<th>항목</th>
|
||
<th>기준</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>정규 근무시간</td><td><strong>09:00 ~ 18:00</strong> (8시간)</td></tr>
|
||
<tr><td>점심시간</td><td>12:00 ~ 13:00 (1시간, 근무 제외)</td></tr>
|
||
<tr><td>주간 법정 근무</td><td>40시간 (주 5일 × 8시간)</td></tr>
|
||
<tr><td>연장근무</td><td>18:00 이후 근무 (주 12시간 한도)</td></tr>
|
||
<tr><td>야간근무</td><td>22:00 ~ 06:00 (50% 가산)</td></tr>
|
||
<tr><td>휴일근무</td><td>주말/공휴일 근무 (50% 가산)</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div>
|
||
<div class="notice-tip notice-box mb-3">
|
||
<strong>SAM 자동 계산:</strong> 출퇴근 기록을 기반으로 일일 근무시간, 연장근무시간, 야간근무시간을 자동 산출합니다. 점심시간(1시간)은 자동 제외됩니다.
|
||
</div>
|
||
<div class="notice-info notice-box">
|
||
<strong>소정근로일수:</strong> 월의 총 일수에서 주말/공휴일을 제외한 일수. 출근율 계산과 일급 환산의 기준이 됩니다.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ===== 탭 4: 연차촉진제도 ===== --}}
|
||
<div class="att-section" id="attTab4">
|
||
<h2 class="text-xl font-bold mb-2 text-gray-800">연차촉진제도</h2>
|
||
<p class="text-sm text-gray-500 mb-6">근로기준법 제61조에 따른 연차 사용 촉진 제도와 SAM에서의 관리 방법을 설명합니다.</p>
|
||
|
||
{{-- 촉진제도 개요 --}}
|
||
<div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
|
||
<h3 class="font-bold text-sm text-gray-700 mb-4">연차촉진제도란?</h3>
|
||
<div class="grid gap-4" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
|
||
<div>
|
||
<p class="text-xs text-gray-600 mb-3 leading-relaxed">
|
||
사용자가 법에서 정한 절차에 따라 <strong>연차 사용을 촉진</strong>했음에도 근로자가 사용하지 않은 경우,
|
||
<strong>미사용 연차에 대한 보상 의무가 면제</strong>되는 제도입니다.
|
||
</p>
|
||
<p class="text-xs text-gray-600 mb-3 leading-relaxed">
|
||
즉, 회사가 정해진 시기에 연차 사용을 촉진(통보)했는데도 직원이 쓰지 않으면,
|
||
<strong>연차수당을 지급하지 않아도 됩니다.</strong> 반대로, 촉진 절차를 밟지 않으면
|
||
미사용 연차에 대해 반드시 수당을 지급해야 합니다.
|
||
</p>
|
||
<div class="notice-danger notice-box">
|
||
<strong>핵심 포인트:</strong> 촉진 절차를 1회라도 누락하면, 해당 직원의 미사용 연차 전체에 대해 연차수당 지급 의무가 발생합니다. SAM의 연차촉진관리 기능으로 빠짐없이 관리하세요.
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="background: #f0fdf4; border: 2px solid #86efac; border-radius: 1rem; padding: 1.5rem;">
|
||
<div class="font-bold text-sm text-emerald-800 mb-3 text-center">촉진 절차를 밟으면</div>
|
||
<div style="text-align: center; margin-bottom: 0.75rem;">
|
||
<span style="font-size: 2rem;">✅</span>
|
||
</div>
|
||
<div class="text-xs text-emerald-700 text-center leading-relaxed">
|
||
미사용 연차 → <strong>수당 지급 면제</strong><br>
|
||
연차 소멸 (이월 없음)
|
||
</div>
|
||
</div>
|
||
<div style="height: 0.75rem;"></div>
|
||
<div style="background: #fef2f2; border: 2px solid #fca5a5; border-radius: 1rem; padding: 1.5rem;">
|
||
<div class="font-bold text-sm text-red-800 mb-3 text-center">촉진 절차를 안 밟으면</div>
|
||
<div style="text-align: center; margin-bottom: 0.75rem;">
|
||
<span style="font-size: 2rem;">💸</span>
|
||
</div>
|
||
<div class="text-xs text-red-700 text-center leading-relaxed">
|
||
미사용 연차 × 일급 = <strong>연차수당 지급 의무</strong><br>
|
||
(통상임금 기준)
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 촉진 타임라인 --}}
|
||
<div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
|
||
<h3 class="font-bold text-sm text-gray-700 mb-4">연차촉진 필수 타임라인</h3>
|
||
<p class="text-xs text-gray-500 mb-4">연차 사용 기간 만료 전, 아래 시점에 맞춰 반드시 통보해야 합니다.</p>
|
||
|
||
<div class="grid gap-4" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
|
||
<div class="flow-card">
|
||
<div class="flow-head" style="background: linear-gradient(135deg, #d97706, #fbbf24);">
|
||
1차 통보 (6개월 전)
|
||
</div>
|
||
<div class="flow-body">
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #d97706;">1</div>
|
||
<div class="step-content">
|
||
<div class="step-title">시기: 만료 6개월 전 ~ 만료 5개월 전</div>
|
||
<div class="step-desc">예) 연차 기간이 1/1~12/31인 경우, <strong>7월 1일 ~ 7월 31일</strong> 사이에 통보</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #d97706;">2</div>
|
||
<div class="step-content">
|
||
<div class="step-title">통보 내용</div>
|
||
<div class="step-desc">미사용 연차 일수를 알리고, <strong>사용 시기를 지정하여 서면 제출</strong>할 것을 촉구합니다.</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #d97706;">3</div>
|
||
<div class="step-content">
|
||
<div class="step-title">SAM 처리</div>
|
||
<div class="step-desc">연차촉진관리 메뉴에서 대상자 선택 → 1차 촉진 발송</div>
|
||
<div class="step-menu">SAM > 인사관리 > 연차촉진관리</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-card">
|
||
<div class="flow-head" style="background: linear-gradient(135deg, #dc2626, #f87171);">
|
||
2차 통보 (2개월 전)
|
||
</div>
|
||
<div class="flow-body">
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #dc2626;">1</div>
|
||
<div class="step-content">
|
||
<div class="step-title">시기: 만료 2개월 전 ~ 만료 1개월 전</div>
|
||
<div class="step-desc">예) 연차 기간이 1/1~12/31인 경우, <strong>11월 1일 ~ 11월 30일</strong> 사이에 통보</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #dc2626;">2</div>
|
||
<div class="step-content">
|
||
<div class="step-title">통보 내용</div>
|
||
<div class="step-desc">1차 통보 후에도 사용 시기를 정하지 않은 경우, 회사가 <strong>사용 시기를 지정</strong>하여 서면 통보합니다.</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #dc2626;">3</div>
|
||
<div class="step-content">
|
||
<div class="step-title">SAM 처리</div>
|
||
<div class="step-desc">연차촉진관리에서 미응답자 확인 → 2차 촉진 발송</div>
|
||
<div class="step-menu">SAM > 인사관리 > 연차촉진관리</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 연차촉진 연간 캘린더 --}}
|
||
<div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
|
||
<h3 class="font-bold text-sm text-gray-700 mb-4">연차촉진 연간 캘린더 (1월~12월 기준)</h3>
|
||
<div class="grid gap-3" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));">
|
||
<div class="count-card"><div class="count-num" style="color: #94a3b8; font-size: 1.5rem;">1~6월</div><div class="count-label" style="color: #94a3b8;">연차 사용 기간</div><div class="count-desc">정상 연차 사용</div></div>
|
||
<div class="count-card" style="border-color: #fbbf24; background: #fffbeb;"><div class="count-num" style="color: #d97706; font-size: 1.5rem;">7월</div><div class="count-label" style="color: #d97706;">1차 촉진 통보</div><div class="count-desc">미사용 연차 알림<br>사용 시기 요청</div></div>
|
||
<div class="count-card"><div class="count-num" style="color: #94a3b8; font-size: 1.5rem;">8~10월</div><div class="count-label" style="color: #94a3b8;">사용 독려 기간</div><div class="count-desc">연차 사용 유도</div></div>
|
||
<div class="count-card" style="border-color: #f87171; background: #fef2f2;"><div class="count-num" style="color: #dc2626; font-size: 1.5rem;">11월</div><div class="count-label" style="color: #dc2626;">2차 촉진 통보</div><div class="count-desc">회사가 시기 지정<br>서면 통보</div></div>
|
||
<div class="count-card" style="border-color: #a78bfa; background: #f5f3ff;"><div class="count-num" style="color: #7c3aed; font-size: 1.5rem;">12월</div><div class="count-label" style="color: #7c3aed;">마감 및 정산</div><div class="count-desc">미사용 연차 소멸<br>(촉진 완료 시)</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 1년 미만 근로자 촉진 --}}
|
||
<div class="notice-info notice-box mb-6">
|
||
<strong>1년 미만 근로자 촉진 (월차):</strong>
|
||
월차 발생 후 만료 1개월 전까지 촉진 통보가 필요합니다.
|
||
예) 3월 발생 월차 → <strong>3월 말까지</strong> 사용 촉구 → 4월 말까지 미사용 시 시기 지정 통보.
|
||
SAM에서는 1년 미만자의 촉진도 별도로 관리할 수 있습니다.
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ===== 탭 5: 급여 연동 ===== --}}
|
||
<div class="att-section" id="attTab5">
|
||
<h2 class="text-xl font-bold mb-2 text-gray-800">근태 ↔ 급여 연동</h2>
|
||
<p class="text-sm text-gray-500 mb-6">근태 기록이 급여에 어떻게 반영되는지, 연차수당 계산 방식을 설명합니다.</p>
|
||
|
||
{{-- 연동 흐름도 --}}
|
||
<div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
|
||
<h3 class="font-bold text-sm text-gray-700 mb-4">근태 → 급여 반영 흐름</h3>
|
||
<div class="process-flow mb-4">
|
||
<div class="process-step">
|
||
<div class="process-icon" style="background: #dcfce7; color: #16a34a;">📅</div>
|
||
<div class="process-name">근태 마감</div>
|
||
<div class="process-sub">월말 근태 확정</div>
|
||
</div>
|
||
<div class="process-arrow">→</div>
|
||
<div class="process-step">
|
||
<div class="process-icon" style="background: #dbeafe; color: #2563eb;">📊</div>
|
||
<div class="process-name">근태 집계</div>
|
||
<div class="process-sub">출근/결근/연차 합산</div>
|
||
</div>
|
||
<div class="process-arrow">→</div>
|
||
<div class="process-step">
|
||
<div class="process-icon" style="background: #fef3c7; color: #d97706;">🧮</div>
|
||
<div class="process-name">급여 산정</div>
|
||
<div class="process-sub">기본급±가감</div>
|
||
</div>
|
||
<div class="process-arrow">→</div>
|
||
<div class="process-step">
|
||
<div class="process-icon" style="background: #f3e8ff; color: #7c3aed;">📋</div>
|
||
<div class="process-name">명세서 생성</div>
|
||
<div class="process-sub">급여명세서 발급</div>
|
||
</div>
|
||
<div class="process-arrow">→</div>
|
||
<div class="process-step">
|
||
<div class="process-icon" style="background: #ecfdf5; color: #059669;">💰</div>
|
||
<div class="process-name">급여 지급</div>
|
||
<div class="process-sub">계좌 이체</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 급여 반영 항목 --}}
|
||
<div class="grid gap-4 mb-6" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
|
||
<div class="flow-card">
|
||
<div class="flow-head" style="background: linear-gradient(135deg, #059669, #34d399);">
|
||
가산 항목 (급여 +)
|
||
</div>
|
||
<div class="flow-body">
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #059669;">+</div>
|
||
<div class="step-content">
|
||
<div class="step-title">연차수당</div>
|
||
<div class="step-desc">미사용 연차 × 1일 통상임금. 연차촉진 미실시 시 지급 의무 발생.</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #059669;">+</div>
|
||
<div class="step-content">
|
||
<div class="step-title">연장근무수당</div>
|
||
<div class="step-desc">법정 근로시간(주 40시간) 초과 시 통상임금의 <strong>50% 가산</strong>.</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #059669;">+</div>
|
||
<div class="step-content">
|
||
<div class="step-title">야간/휴일근무수당</div>
|
||
<div class="step-desc">22:00~06:00 야간 또는 휴일 근무 시 통상임금의 50% 가산.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-card">
|
||
<div class="flow-head" style="background: linear-gradient(135deg, #dc2626, #f87171);">
|
||
차감 항목 (급여 -)
|
||
</div>
|
||
<div class="flow-body">
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #dc2626;">-</div>
|
||
<div class="step-content">
|
||
<div class="step-title">결근 차감</div>
|
||
<div class="step-desc">무단결근 일수 × 1일 통상임금 차감. (유급휴가 사용 시 차감 없음)</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #dc2626;">-</div>
|
||
<div class="step-content">
|
||
<div class="step-title">지각/조퇴 차감</div>
|
||
<div class="step-desc">회사 내규에 따라 차감 여부와 금액이 결정됩니다.</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num" style="background: #dc2626;">-</div>
|
||
<div class="step-content">
|
||
<div class="step-title">무급휴가 차감</div>
|
||
<div class="step-desc">연차 소진 후 추가 휴가 사용 시 무급 처리.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 연차수당 계산 --}}
|
||
<div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
|
||
<h3 class="font-bold text-sm text-gray-700 mb-4">연차수당 계산 방법</h3>
|
||
<div class="grid gap-4" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
|
||
<div>
|
||
<div style="background: linear-gradient(135deg, #f0fdf4, #dcfce7); border-radius: 1rem; padding: 1.5rem; border: 1px solid #bbf7d0;">
|
||
<div class="font-bold text-emerald-800 mb-2">연차수당 공식</div>
|
||
<div style="background: white; border-radius: 0.5rem; padding: 1rem; text-align: center; font-size: 0.9rem; font-weight: 700; color: #1e293b;">
|
||
미사용 연차일수 × 1일 통상임금
|
||
</div>
|
||
<div style="height: 0.75rem;"></div>
|
||
<div class="text-xs text-emerald-700">
|
||
<strong>1일 통상임금</strong> = 월 통상임금 ÷ 월 소정근로시간 × 8시간
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="notice-warn notice-box mb-3">
|
||
<strong>계산 예시:</strong><br>
|
||
월급 300만원, 미사용 연차 5일인 경우<br>
|
||
• 1일 통상임금 = 3,000,000 ÷ 209시간 × 8 = <strong>약 114,832원</strong><br>
|
||
• 연차수당 = 114,832 × 5일 = <strong>약 574,160원</strong>
|
||
</div>
|
||
<div class="notice-tip notice-box">
|
||
<strong>SAM 자동 계산:</strong> 급여관리 메뉴에서 미사용 연차를 기반으로 연차수당이 자동 산출됩니다.
|
||
<div class="step-menu" style="margin-top: 4px;">SAM > 인사관리 > 급여관리</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 4대보험 --}}
|
||
<div class="notice-info notice-box mb-6">
|
||
<strong>4대보험 관련:</strong> 연차수당은 통상임금에 포함되며, 4대보험(국민연금, 건강보험, 고용보험, 산재보험)과 소득세 계산의 기초가 됩니다. SAM의 급여관리에서 4대보험료를 자동 계산하여 급여명세서에 반영합니다.
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ===== 탭 6: 메뉴 맵 ===== --}}
|
||
<div class="att-section" id="attTab6">
|
||
<h2 class="text-xl font-bold mb-2 text-gray-800">SAM 근태/인사 메뉴 맵</h2>
|
||
<p class="text-sm text-gray-500 mb-6">SAM에서 근태/인사 관련 기능이 위치한 메뉴 구조를 보여줍니다.</p>
|
||
|
||
<div class="menu-map mb-6">
|
||
{{-- 인사관리 --}}
|
||
<div class="menu-group">
|
||
<div class="menu-group-title">
|
||
<span style="width: 8px; height: 8px; border-radius: 50%; background: #059669;"></span>
|
||
인사관리
|
||
</div>
|
||
<div class="flex flex-wrap gap-1">
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #059669;">1</span> 입퇴사자현황</div>
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #059669;">2</span> 직원관리</div>
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #059669;">3</span> 근태현황</div>
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #059669;">4</span> 근태관리 통합</div>
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #059669;">5</span> 휴가관리</div>
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #059669;">6</span> 연차촉진관리</div>
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #059669;">7</span> 급여관리</div>
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #059669;">8</span> 사업소득자관리</div>
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #059669;">9</span> 사업소득자 임금대장</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 결재관리 --}}
|
||
<div class="menu-group">
|
||
<div class="menu-group-title">
|
||
<span style="width: 8px; height: 8px; border-radius: 50%; background: #7c3aed;"></span>
|
||
결재관리
|
||
</div>
|
||
<div class="flex flex-wrap gap-1">
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">1</span> 결재 대기함</div>
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">2</span> 결재 진행함</div>
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">3</span> 결재 완료함</div>
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">4</span> 내 신청함</div>
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">5</span> 결재선 설정</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 기준정보 --}}
|
||
<div class="menu-group">
|
||
<div class="menu-group-title">
|
||
<span style="width: 8px; height: 8px; border-radius: 50%; background: #d97706;"></span>
|
||
기준정보 관리
|
||
</div>
|
||
<div class="flex flex-wrap gap-1">
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #d97706;">1</span> 부서관리</div>
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #d97706;">2</span> 직위/직급</div>
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #d97706;">3</span> 근무형태 설정</div>
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #d97706;">4</span> 휴일/공휴일 관리</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 관련 연동 메뉴 --}}
|
||
<div class="menu-group">
|
||
<div class="menu-group-title">
|
||
<span style="width: 8px; height: 8px; border-radius: 50%; background: #2563eb;"></span>
|
||
관련 연동 메뉴
|
||
</div>
|
||
<div class="flex flex-wrap gap-1">
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #2563eb;">1</span> 재무 대시보드 (급여 통계)</div>
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #2563eb;">2</span> 일반전표 (급여 분개)</div>
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #2563eb;">3</span> 경조사비관리</div>
|
||
<div class="menu-item"><span class="menu-item-num" style="background: #2563eb;">4</span> 리포트 > 인사 보고서</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 메뉴별 주요 기능 --}}
|
||
<div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
|
||
<h3 class="font-bold text-sm text-gray-700 mb-4">주요 메뉴별 기능 요약</h3>
|
||
<table class="cmp-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 150px;">메뉴</th>
|
||
<th>주요 기능</th>
|
||
<th style="width: 100px;">사용자</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="font-bold">입퇴사자현황</td>
|
||
<td>입사일/퇴사일 관리, 재직/퇴직 상태, 연차 기산일 기준</td>
|
||
<td><span class="badge-amber">인사팀</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-bold">근태현황</td>
|
||
<td>월별 출퇴근 기록 조회, 지각/조퇴/결근 현황, 개인별 근태 이력</td>
|
||
<td><span class="badge-blue">전 직원</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-bold">근태관리 통합</td>
|
||
<td>전 직원 근태 대시보드, 부서별 근태 통계, 이상 근태 알림</td>
|
||
<td><span class="badge-amber">관리자</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-bold">휴가관리</td>
|
||
<td>휴가 신청/승인/반려, 잔여 연차 조회, 휴가 이력</td>
|
||
<td><span class="badge-blue">전 직원</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-bold">연차촉진관리</td>
|
||
<td>촉진 대상자 선별, 1차/2차 통보 발송, 촉진 이력 관리</td>
|
||
<td><span class="badge-amber">인사팀</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-bold">급여관리</td>
|
||
<td>월별 급여 산정, 연차수당 계산, 4대보험, 급여명세서</td>
|
||
<td><span class="badge-amber">인사/경리</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-bold">결재 대기함</td>
|
||
<td>휴가/근태 변경 결재 처리, 승인/반려</td>
|
||
<td><span class="badge-purple">결재권자</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{{-- 사용 시나리오 --}}
|
||
<div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
|
||
<h3 class="font-bold text-sm text-gray-700 mb-4">자주 사용하는 시나리오</h3>
|
||
<div class="grid gap-3" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));">
|
||
<div style="background: #f0fdf4; border-radius: 0.75rem; padding: 1rem; border: 1px solid #bbf7d0;">
|
||
<div class="font-bold text-sm text-emerald-700 mb-2">"내일 연차 쓰고 싶어요"</div>
|
||
<div class="text-xs text-gray-600 leading-relaxed">
|
||
1. 인사관리 > <strong>휴가관리</strong> > 신규 신청<br>
|
||
2. 연차 선택 > 내일 날짜 > 사유 입력<br>
|
||
3. 결재 상신 > 상사 승인 대기<br>
|
||
4. 승인 완료 시 잔여 연차 -1
|
||
</div>
|
||
</div>
|
||
<div style="background: #eff6ff; border-radius: 0.75rem; padding: 1rem; border: 1px solid #bfdbfe;">
|
||
<div class="font-bold text-sm text-blue-700 mb-2">"이번 달 우리 팀 근태 확인"</div>
|
||
<div class="text-xs text-gray-600 leading-relaxed">
|
||
1. 인사관리 > <strong>근태관리 통합</strong> 접속<br>
|
||
2. 부서 필터 > 해당 월 선택<br>
|
||
3. 지각/조퇴/결근 현황 확인<br>
|
||
4. 이상 근태 사유 확인
|
||
</div>
|
||
</div>
|
||
<div style="background: #fef3c7; border-radius: 0.75rem; padding: 1rem; border: 1px solid #fde68a;">
|
||
<div class="font-bold text-sm text-amber-700 mb-2">"연차촉진 대상자 통보"</div>
|
||
<div class="text-xs text-gray-600 leading-relaxed">
|
||
1. 인사관리 > <strong>연차촉진관리</strong> 접속<br>
|
||
2. 미사용 연차 보유자 목록 확인<br>
|
||
3. 대상자 선택 > 촉진 발송<br>
|
||
4. 발송 이력 기록 확인
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>{{-- max-width wrapper --}}
|
||
</div>{{-- att-body --}}
|
||
@endsection
|
||
|
||
@push('scripts')
|
||
<script>
|
||
function switchAttTab(idx) {
|
||
document.querySelectorAll('.att-tab').forEach(function(t, i) {
|
||
t.classList.toggle('active', i === idx);
|
||
});
|
||
document.querySelectorAll('.att-section').forEach(function(s, i) {
|
||
s.classList.toggle('active', i === idx);
|
||
if (i === idx) {
|
||
s.querySelectorAll('.flow-card, .count-card, .notice-box').forEach(function(el, j) {
|
||
el.style.opacity = '0';
|
||
el.classList.remove('anim-in');
|
||
setTimeout(function() { el.classList.add('anim-in'); }, j * 60);
|
||
});
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
@endpush
|