From 2aea6962ef9ed9efdeee107652b4c5fdb611da82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 28 Feb 2026 18:30:39 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20[payroll]=20=EA=B8=89=EC=97=AC=EA=B3=84?=
 =?UTF-8?q?=EC=82=B0=20=EB=8F=84=EC=9B=80=EB=A7=90=20=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 급여관리 제목 옆 i 아이콘 버튼 추가
- 모달 내용: 전체 흐름, 지급항목, 4대보험, 세금, 실수령액, 예시, 상태 흐름, 팁
- 현재 설정된 요율/상하한 값을 동적으로 반영
---
 resources/views/hr/payrolls/index.blade.php | 270 +++++++++++++++++++-
 1 file changed, 269 insertions(+), 1 deletion(-)

diff --git a/resources/views/hr/payrolls/index.blade.php b/resources/views/hr/payrolls/index.blade.php
index 2c5b44b9..77b6add6 100644
--- a/resources/views/hr/payrolls/index.blade.php
+++ b/resources/views/hr/payrolls/index.blade.php
@@ -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 };