SamProject/sam-manage
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: [payroll] 급여계산 도움말 모달 추가

Browse Source 
- 급여관리 제목 옆 i 아이콘 버튼 추가
- 모달 내용: 전체 흐름, 지급항목, 4대보험, 세금, 실수령액, 예시, 상태 흐름, 팁
- 현재 설정된 요율/상하한 값을 동적으로 반영
This commit is contained in:
김보곤
2026-02-28 18:30:39 +09:00
parent 3443fd7b05
commit 2aea6962ef
1 changed files with 269 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
resources/views/hr/payrolls/index.blade.php
View File

@@ -7,7 +7,14 @@
{{-- 페이지 헤더 --}}
<div class="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-4 mb-6">
<div>
<h1 class="text-2xl font-bold text-gray-800">급여관리</h1>
<h1 class="text-2xl font-bold text-gray-800">급여관리
<button type="button" onclick="openPayrollHelpModal()" title="급여계산 도움말"
class="inline-flex items-center justify-center w-6 h-6 ml-1 text-blue-500 hover:text-blue-700 hover:bg-blue-50 rounded-full transition-colors align-middle">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
</svg>
</button>
</h1>
<div class="flex items-center gap-2 mt-1">
<select id="payrollYear" class="px-2 py-1 border border-gray-300 rounded text-sm text-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@for($y = now()->year; $y >= now()->year - 2; $y--)
@@ -348,10 +355,271 @@ class="px-4 py-2 text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg
</div>
</div>
</div>
{{-- 급여계산 도움말 모달 --}}
<div id="payrollHelpModal" class="fixed inset-0 z-50 hidden">
<div class="fixed inset-0 bg-black/40" onclick="closePayrollHelpModal()"></div>
<div class="fixed inset-0 flex items-center justify-center p-4 overflow-y-auto">
<div class="bg-white rounded-xl shadow-xl w-full max-w-3xl relative my-8">
{{-- 헤더 --}}
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-blue-600 to-blue-700 rounded-t-xl">
<div class="flex items-center gap-3">
<div class="w-9 h-9 bg-white/20 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
</svg>
</div>
<h3 class="text-lg font-semibold text-white">급여계산 도움말</h3>
</div>
<button type="button" onclick="closePayrollHelpModal()" class="text-white/70 hover:text-white transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
{{-- 본문 --}}
<div class="px-6 py-5 max-h-[75vh] overflow-y-auto space-y-6 text-sm text-gray-700 leading-relaxed">
{{-- 1. 전체 흐름 --}}
<div>
<h4 class="text-base font-bold text-gray-900 mb-3 flex items-center gap-2">
<span class="w-6 h-6 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center text-xs font-bold shrink-0">1</span>
급여계산의 전체 흐름
</h4>
<div class="bg-gray-50 rounded-lg p-4 font-mono text-xs text-center text-gray-600 leading-loose">
<span class="text-blue-700 font-bold">기본급 + 수당</span>
<span class="mx-1">=</span>
<span class="text-emerald-700 font-bold">총 지급액</span>
<span class="mx-1">-</span>
<span class="text-red-600 font-bold">공제액(4대보험+세금)</span>
<span class="mx-1">=</span>
<span class="text-violet-700 font-bold">실수령액</span>
</div>
</div>
{{-- 2. 지급 항목 --}}
<div>
<h4 class="text-base font-bold text-gray-900 mb-3 flex items-center gap-2">
<span class="w-6 h-6 bg-emerald-100 text-emerald-700 rounded-full flex items-center justify-center text-xs font-bold shrink-0">2</span>
지급 항목 (회사가 주는 금액)
</h4>
<div class="overflow-x-auto">
<table class="w-full text-sm border border-gray-200 rounded-lg overflow-hidden">
<thead>
<tr class="bg-emerald-50">
<th class="px-3 py-2 text-left font-semibold text-emerald-800 border-b border-gray-200" style="width: 140px;">항목</th>
<th class="px-3 py-2 text-left font-semibold text-emerald-800 border-b border-gray-200">설명</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-100">
<td class="px-3 py-2 font-medium">기본급</td>
<td class="px-3 py-2">근로계약서에 정해진 월 기본 급여입니다.</td>
</tr>
<tr class="border-b border-gray-100 bg-gray-50/50">
<td class="px-3 py-2 font-medium">고정연장근로수당</td>
<td class="px-3 py-2">매월 고정으로 지급하는 연장근무 수당입니다. 실제 연장근무 여부와 관계없이 정해진 금액을 지급합니다.</td>
</tr>
<tr class="border-b border-gray-100">
<td class="px-3 py-2 font-medium">식대 (비과세)</td>
<td class="px-3 py-2">월 20만원까지 <span class="text-blue-600 font-semibold">세금이 부과되지 않는</span> 식비 지원금입니다. 총 지급액에는 포함되지만, 세금·보험료 계산에서는 제외됩니다.</td>
</tr>
<tr>
<td class="px-3 py-2 font-medium">추가 수당</td>
<td class="px-3 py-2">교통비, 직책수당 등 추가로 지급하는 수당입니다. 이 금액은 과세 대상에 포함됩니다.</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-3 p-3 bg-blue-50 rounded-lg border border-blue-100">
<p class="text-blue-800">
<span class="font-bold">총 지급액</span> = 기본급 + 고정연장근로수당 + 식대 + 추가 수당 합계
</p>
<p class="text-blue-700 mt-1">
<span class="font-bold">과세표준</span> = 총 지급액 - 식대(비과세) &nbsp;<span class="text-xs text-blue-500">← 세금·보험료 계산의 기준 금액</span>
</p>
</div>
</div>
{{-- 3. 공제 항목: 4대보험 --}}
<div>
<h4 class="text-base font-bold text-gray-900 mb-3 flex items-center gap-2">
<span class="w-6 h-6 bg-red-100 text-red-700 rounded-full flex items-center justify-center text-xs font-bold shrink-0">3</span>
공제 항목 ① — 4대보험
</h4>
<p class="mb-3 text-gray-600">4대보험은 <span class="font-semibold">과세표준</span>을 기준으로 요율을 적용하고, <span class="font-semibold">10원 단위로 절삭</span>합니다.</p>
<div class="overflow-x-auto">
<table class="w-full text-sm border border-gray-200 rounded-lg overflow-hidden">
<thead>
<tr class="bg-red-50">
<th class="px-3 py-2 text-left font-semibold text-red-800 border-b border-gray-200" style="width: 120px;">보험</th>
<th class="px-3 py-2 text-left font-semibold text-red-800 border-b border-gray-200">계산 방법</th>
<th class="px-3 py-2 text-left font-semibold text-red-800 border-b border-gray-200" style="width: 120px;">참고</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-100">
<td class="px-3 py-2 font-medium">국민연금</td>
<td class="px-3 py-2">과세표준 &times; 요율 (근로자 부담 {{ $settings->pension_rate ?? 4.5 }}%)</td>
<td class="px-3 py-2 text-xs text-gray-500">상한·하한 적용</td>
</tr>
<tr class="border-b border-gray-100 bg-gray-50/50">
<td class="px-3 py-2 font-medium">건강보험</td>
<td class="px-3 py-2">과세표준 &times; 요율 (근로자 부담 {{ $settings->health_insurance_rate ?? 3.545 }}%)</td>
<td class="px-3 py-2 text-xs text-gray-500"></td>
</tr>
<tr class="border-b border-gray-100">
<td class="px-3 py-2 font-medium">장기요양보험</td>
<td class="px-3 py-2"><span class="text-blue-600 font-semibold">건강보험료</span> &times; {{ $settings->long_term_care_rate ?? 12.95 }}%</td>
<td class="px-3 py-2 text-xs text-gray-500">건강보험료 기준!</td>
</tr>
<tr>
<td class="px-3 py-2 font-medium">고용보험</td>
<td class="px-3 py-2">과세표준 &times; 요율 (근로자 부담 {{ $settings->employment_insurance_rate ?? 0.9 }}%)</td>
<td class="px-3 py-2 text-xs text-gray-500"></td>
</tr>
</tbody>
</table>
</div>
<div class="mt-3 p-3 bg-amber-50 rounded-lg border border-amber-100">
<p class="text-amber-800 text-xs">
<span class="font-bold">국민연금 상·하한:</span>
과세표준이 상한액({{ number_format((int) ($settings->pension_max_salary ?? 6170000)) }}원)을 초과하면 상한액으로, 하한액({{ number_format((int) ($settings->pension_min_salary ?? 390000)) }}원) 미만이면 하한액으로 계산합니다.
</p>
<p class="text-amber-800 text-xs mt-1">
<span class="font-bold">장기요양보험 주의:</span>
다른 보험과 달리 <span class="underline">건강보험료 금액</span>에 요율을 적용합니다 (과세표준이 아님).
</p>
</div>
</div>
{{-- 4. 공제 항목: 세금 --}}
<div>
<h4 class="text-base font-bold text-gray-900 mb-3 flex items-center gap-2">
<span class="w-6 h-6 bg-orange-100 text-orange-700 rounded-full flex items-center justify-center text-xs font-bold shrink-0">4</span>
공제 항목 ② — 세금 (근로소득세 + 지방소득세)
</h4>
<div class="space-y-3">
<div class="p-3 bg-gray-50 rounded-lg border border-gray-200">
<p class="font-semibold text-gray-800 mb-1">근로소득세</p>
<ul class="list-disc list-inside text-gray-600 space-y-1">
<li>과세표준과 <span class="font-semibold text-blue-600">공제대상 가족수</span>에 따라 결정됩니다.</li>
<li>국세청이 고시하는 <span class="font-semibold">간이세액표</span>를 참조합니다.</li>
<li>가족 수가 많을수록 세금이 줄어듭니다 (기본 1명 = 본인).</li>
<li>월급 77만원 미만이면 근로소득세가 0원입니다.</li>
</ul>
</div>
<div class="p-3 bg-gray-50 rounded-lg border border-gray-200">
<p class="font-semibold text-gray-800 mb-1">지방소득세</p>
<p class="text-gray-600">근로소득세의 <span class="font-semibold text-blue-600">10%</span>를 추가로 납부합니다 (10원 단위 절삭).</p>
</div>
</div>
</div>
{{-- 5. 실수령액 --}}
<div>
<h4 class="text-base font-bold text-gray-900 mb-3 flex items-center gap-2">
<span class="w-6 h-6 bg-violet-100 text-violet-700 rounded-full flex items-center justify-center text-xs font-bold shrink-0">5</span>
최종 실수령액
</h4>
<div class="bg-gradient-to-r from-violet-50 to-blue-50 rounded-lg p-4 border border-violet-100">
<div class="text-center space-y-2">
<p class="text-gray-700">
<span class="font-bold text-emerald-700">총 지급액</span>
<span class="mx-2">-</span>
<span class="font-bold text-red-600">총 공제액</span>
<span class="mx-2">=</span>
<span class="font-bold text-violet-700">실수령액</span>
</p>
<p class="text-xs text-gray-500">총 공제액 = 4대보험 + 근로소득세 + 지방소득세 + 추가공제</p>
</div>
</div>
</div>
{{-- 6. 예시 --}}
<div>
<h4 class="text-base font-bold text-gray-900 mb-3 flex items-center gap-2">
<span class="w-6 h-6 bg-gray-200 text-gray-700 rounded-full flex items-center justify-center text-xs font-bold shrink-0">6</span>
계산 예시
</h4>
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200 space-y-2 text-xs">
<p class="font-semibold text-gray-800 text-sm mb-2">예) 기본급 250만원, 고정연장 30만원, 식대 20만원</p>
<div class="grid gap-x-6 gap-y-1" style="grid-template-columns: auto 1fr;">
<span class="text-gray-500 text-right">총 지급액</span>
<span>= 2,500,000 + 300,000 + 200,000 = <span class="font-bold text-emerald-700">3,000,000원</span></span>
<span class="text-gray-500 text-right">과세표준</span>
<span>= 3,000,000 - 200,000(비과세) = <span class="font-bold">2,800,000원</span></span>
<span class="text-gray-500 text-right">국민연금</span>
<span>= 2,800,000 &times; {{ $settings->pension_rate ?? 4.5 }}% = <span class="font-bold text-red-600">{{ number_format(floor(2800000 * ($settings->pension_rate ?? 4.5) / 100 / 10) * 10) }}원</span></span>
<span class="text-gray-500 text-right">건강보험</span>
<span>= 2,800,000 &times; {{ $settings->health_insurance_rate ?? 3.545 }}% = <span class="font-bold text-red-600">{{ number_format(floor(2800000 * ($settings->health_insurance_rate ?? 3.545) / 100 / 10) * 10) }}원</span></span>
<span class="text-gray-500 text-right">장기요양</span>
<span>= 건강보험료 &times; {{ $settings->long_term_care_rate ?? 12.95 }}%</span>
<span class="text-gray-500 text-right">고용보험</span>
<span>= 2,800,000 &times; {{ $settings->employment_insurance_rate ?? 0.9 }}% = <span class="font-bold text-red-600">{{ number_format(floor(2800000 * ($settings->employment_insurance_rate ?? 0.9) / 100 / 10) * 10) }}원</span></span>
<span class="text-gray-500 text-right">근로소득세</span>
<span>= 간이세액표 조회 (과세표준 280만원, 가족 1명 기준)</span>
<span class="text-gray-500 text-right">지방소득세</span>
<span>= 근로소득세 &times; 10%</span>
</div>
</div>
</div>
{{-- 7. 상태 흐름 --}}
<div>
<h4 class="text-base font-bold text-gray-900 mb-3 flex items-center gap-2">
<span class="w-6 h-6 bg-gray-200 text-gray-700 rounded-full flex items-center justify-center text-xs font-bold shrink-0">7</span>
급여 처리 흐름
</h4>
<div class="flex items-center justify-center gap-2 flex-wrap py-2">
<span class="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-lg text-xs font-semibold border border-gray-200">작성(draft)</span>
<svg class="w-4 h-4 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
<span class="px-3 py-1.5 bg-blue-100 text-blue-700 rounded-lg text-xs font-semibold border border-blue-200">확정(confirmed)</span>
<svg class="w-4 h-4 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
<span class="px-3 py-1.5 bg-emerald-100 text-emerald-700 rounded-lg text-xs font-semibold border border-emerald-200">지급완료(paid)</span>
</div>
<ul class="text-xs text-gray-500 space-y-1 mt-2">
<li><span class="font-medium text-gray-700">작성:</span> 수정, 삭제, 확정이 가능합니다.</li>
<li><span class="font-medium text-gray-700">확정:</span> 확정 취소 또는 지급 처리할 수 있습니다.</li>
<li><span class="font-medium text-gray-700">지급완료:</span> 상세 보기만 가능합니다 (수정 불가).</li>
</ul>
</div>
{{-- 8. 팁 --}}
<div class="p-4 bg-blue-50 rounded-lg border border-blue-100">
<p class="font-bold text-blue-800 mb-2 text-sm">알아두면 좋은 팁</p>
<ul class="text-blue-700 space-y-1.5 text-xs">
<li><span class="font-semibold">일괄 생성:</span> 재직 중인 전체 사원의 급여를 연봉 정보 기반으로 한 번에 생성합니다.</li>
<li><span class="font-semibold">전월 복사:</span> 지난달 급여를 복사해 이번 달로 가져옵니다. 동일 조건이 반복될 때 편리합니다.</li>
<li><span class="font-semibold">수동 수정:</span> 자동 계산된 공제 항목을 수동으로 덮어쓸 수 있습니다. 수정하면 해당 값이 우선 적용됩니다.</li>
<li><span class="font-semibold">급여 설정:</span> 4대보험 요율, 국민연금 상·하한액은 「급여 설정」 탭에서 변경할 수 있습니다.</li>
</ul>
</div>
</div>
{{-- 푸터 --}}
<div class="flex items-center justify-end px-6 py-4 border-t border-gray-200">
<button type="button" onclick="closePayrollHelpModal()"
class="px-5 py-2 text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors font-medium">
닫기
</button>
</div>
</div>
</div>
</div>
@endsection
@push('scripts')
<script>
// ===== 급여계산 도움말 모달 =====
function openPayrollHelpModal() {
document.getElementById('payrollHelpModal').classList.remove('hidden');
}
function closePayrollHelpModal() {
document.getElementById('payrollHelpModal').classList.add('hidden');
}
// ===== 현재 탭 상태 =====
let currentTab = 'list';
const tabLoaded = { list: true, settings: true };