From d1911265f4fb06fef6250e42e8717d8ccff83c03 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 15:08:42 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20[approvals]=20=EA=B2=B0=EC=9E=AC=20?=
 =?UTF-8?q?=EC=95=8C=EB=A6=BC=20=EB=B1=83=EC=A7=80=20=EC=8B=9C=EC=8A=A4?=
 =?UTF-8?q?=ED=85=9C=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 사이드바: 결재 대기/기안함/참조함 메뉴에 빨간 뱃지 표시
- 헤더: 알림 벨 클릭 시 결재 대기 목록 드롭다운 표시
- 드롭다운: 제목/기안자/양식/긴급 여부/일시 표시, 클릭 시 상세 이동
- 뱃지 건수 60초 자동 갱신 (API: /api/admin/approvals/badge-counts)
---
 app/Providers/AppServiceProvider.php      |  24 ++++
 resources/views/partials/header.blade.php | 152 ++++++++++++++++++++--
 2 files changed, 164 insertions(+), 12 deletions(-)

diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index b9d84580..5cc53b14 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -7,6 +7,7 @@
 use App\Models\Tenants\Department;
 use App\Models\User;
 use App\Observers\FileObserver;
+use App\Services\ApprovalService;
 use App\Services\SidebarMenuService;
 use Illuminate\Database\Eloquent\Relations\Relation;
 use Illuminate\Support\Facades\Cache;
@@ -56,10 +57,33 @@ public function boot(): void
             $menuService = app(SidebarMenuService::class);
             $menusBySection = $menuService->getMenusBySection();
 
+            // 결재 뱃지 건수
+            $menuBadges = ['byRoute' => [], 'byUrl' => []];
+            if (auth()->check()) {
+                try {
+                    $counts = app(ApprovalService::class)->getBadgeCounts(auth()->id());
+                    $menuBadges = [
+                        'byRoute' => [
+                            'approvals.pending' => $counts['pending'],
+                            'approvals.drafts' => $counts['draft'],
+                            'approvals.references' => $counts['reference_unread'],
+                        ],
+                        'byUrl' => [
+                            '/approval-mgmt/pending' => $counts['pending'],
+                            '/approval-mgmt/drafts' => $counts['draft'],
+                            '/approval-mgmt/references' => $counts['reference_unread'],
+                        ],
+                    ];
+                } catch (\Throwable $e) {
+                    // 테이블 미존재 등 예외 무시
+                }
+            }
+
             $view->with([
                 'mainMenus' => $menusBySection['main'],
                 'toolsMenus' => $menusBySection['tools'],
                 'labsMenus' => $menusBySection['labs'],
+                'menuBadges' => $menuBadges,
             ]);
         });
     }
diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index 76179166..e98af713 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -95,12 +95,31 @@ class="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-lg bo
             <span class="dev-tools-auth-dot w-2 h-2 rounded-full bg-gray-300"></span>
         </button>
 
-        <!-- Notifications (추후 추가) -->
-        <button class="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg">
-            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-            </svg>
-        </button>
+        <!-- 결재 알림 벨 -->
+        <div class="relative" id="noti-bell-wrap">
+            <button type="button" onclick="toggleNotifications()"
+                    class="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg relative">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+                </svg>
+                <span id="noti-badge"
+                      style="display:none; position:absolute; top:2px; right:2px; min-width:18px; height:18px; padding:0 4px; font-size:10px; line-height:18px;"
+                      class="flex items-center justify-center text-white bg-red-500 rounded-full font-bold"></span>
+            </button>
+
+            {{-- 드롭다운 --}}
+            <div id="noti-dropdown"
+                 style="display:none; width:380px;"
+                 class="absolute right-0 mt-2 bg-white rounded-xl shadow-2xl border border-gray-200 z-50">
+                <div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
+                    <span class="text-sm font-semibold text-gray-800">결재 대기</span>
+                    <a href="/approval-mgmt/pending" class="text-xs text-blue-600 hover:underline">전체 보기 &rarr;</a>
+                </div>
+                <div id="noti-list" class="overflow-y-auto" style="max-height:380px;">
+                    <div class="flex items-center justify-center py-10 text-gray-400 text-sm">로딩 중...</div>
+                </div>
+            </div>
+        </div>
 
         <!-- User Menu Dropdown -->
         <div class="relative">
@@ -149,15 +168,124 @@ class="flex items-center gap-1 lg:gap-2 p-1.5 lg:px-3 lg:py-2 text-sm font-mediu
 
 @push('scripts')
 <script>
-    // Close dropdown when clicking outside
+    // Close dropdowns when clicking outside
     document.addEventListener('click', function(event) {
+        // User menu
         const userMenu = document.getElementById('headerUserMenu');
-        if (!userMenu) return;
-
-        const button = event.target.closest('button[onclick*="headerUserMenu"]');
-        if (!button && !userMenu.contains(event.target)) {
-            userMenu.classList.add('hidden');
+        if (userMenu) {
+            const button = event.target.closest('button[onclick*="headerUserMenu"]');
+            if (!button && !userMenu.contains(event.target)) {
+                userMenu.classList.add('hidden');
+            }
         }
+        // Notification dropdown
+        var notiWrap = document.getElementById('noti-bell-wrap');
+        var notiDropdown = document.getElementById('noti-dropdown');
+        if (notiWrap && notiDropdown && !notiWrap.contains(event.target)) {
+            notiDropdown.style.display = 'none';
+        }
+    });
+
+    // ─── 결재 알림 벨 ───
+    var _notiLoaded = false;
+
+    function toggleNotifications() {
+        var dd = document.getElementById('noti-dropdown');
+        if (!dd) return;
+        var isOpen = dd.style.display !== 'none';
+        dd.style.display = isOpen ? 'none' : '';
+        if (!isOpen) loadNotifications();
+    }
+
+    function loadNotifications() {
+        _notiLoaded = false;
+        var list = document.getElementById('noti-list');
+        list.innerHTML = '<div class="flex items-center justify-center py-10 text-gray-400 text-sm">' +
+            '<svg class="animate-spin w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>' +
+            '<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>불러오는 중...</div>';
+
+        fetch('/api/admin/approvals/pending?per_page=10', {
+            headers: { 'Accept': 'application/json' }
+        })
+        .then(function(r) { return r.json(); })
+        .then(function(res) {
+            var items = (res.data && res.data.data) || res.data || [];
+            if (!Array.isArray(items)) items = [];
+            renderNotifications(items, (res.data && res.data.total) || items.length);
+        })
+        .catch(function() {
+            list.innerHTML = '<div class="flex items-center justify-center py-10 text-gray-400 text-sm">조회에 실패했습니다.</div>';
+        });
+    }
+
+    function renderNotifications(items, total) {
+        var list = document.getElementById('noti-list');
+        if (!items.length) {
+            list.innerHTML =
+                '<div class="flex flex-col items-center justify-center py-10 text-gray-400">' +
+                '<svg class="w-10 h-10 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">' +
+                '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>' +
+                '</svg>' +
+                '<span class="text-sm">처리할 결재가 없습니다</span></div>';
+            return;
+        }
+
+        var html = '';
+        items.forEach(function(item) {
+            var urgentBadge = item.is_urgent
+                ? '<span style="font-size:10px; padding:1px 6px;" class="bg-red-100 text-red-600 rounded-full font-medium">긴급</span>'
+                : '';
+            var formName = (item.form && item.form.name) || '';
+            var drafterName = item.drafter_name || (item.drafter && item.drafter.name) || '';
+            var dateStr = '';
+            if (item.drafted_at) {
+                var d = new Date(item.drafted_at);
+                dateStr = (d.getMonth()+1) + '/' + d.getDate() + ' ' + String(d.getHours()).padStart(2,'0') + ':' + String(d.getMinutes()).padStart(2,'0');
+            }
+
+            html += '<a href="/approval-mgmt/' + item.id + '" class="block px-4 py-3 hover:bg-blue-50 transition border-b border-gray-100">' +
+                '<div class="flex items-center justify-between gap-2 mb-1">' +
+                '<span class="text-sm font-medium text-gray-800 truncate flex-1">' + (item.title || '(제목 없음)') + '</span>' +
+                urgentBadge +
+                '</div>' +
+                '<div class="flex items-center justify-between text-xs text-gray-500">' +
+                '<span>' + drafterName + (formName ? ' · ' + formName : '') + '</span>' +
+                '<span>' + dateStr + '</span>' +
+                '</div></a>';
+        });
+
+        if (total > items.length) {
+            html += '<div class="px-4 py-2 text-center">' +
+                '<a href="/approval-mgmt/pending" class="text-xs text-blue-600 hover:underline">외 ' + (total - items.length) + '건 더보기</a></div>';
+        }
+
+        list.innerHTML = html;
+    }
+
+    // 뱃지 건수 조회 (페이지 로드 + 60초마다 갱신)
+    function refreshBadgeCount() {
+        fetch('/api/admin/approvals/badge-counts', {
+            headers: { 'Accept': 'application/json' }
+        })
+        .then(function(r) { return r.json(); })
+        .then(function(res) {
+            if (!res.success || !res.data) return;
+            var count = res.data.pending || 0;
+            var badge = document.getElementById('noti-badge');
+            if (!badge) return;
+            if (count > 0) {
+                badge.textContent = count > 99 ? '99+' : count;
+                badge.style.display = 'flex';
+            } else {
+                badge.style.display = 'none';
+            }
+        })
+        .catch(function() {});
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+        refreshBadgeCount();
+        setInterval(refreshBadgeCount, 60000);
     });
 
     /**