feat: [approval] 기안함 페이지 사이즈 선택, 체크박스 선택삭제 기능 추가

- 페이지당 표시 건수 선택 (15/50/100/200/500, 기본 15)
- 첫 번째 열 체크박스 추가 (전체선택/개별선택)
- 선택삭제 버튼 및 bulk-delete API 엔드포인트 추가

app/Http/Controllers/Api/Admin/ApprovalApiController.php

@@ -210,6 +210,50 @@ public function forceDestroy(int $id): JsonResponse
         }
     }
 
+    /**
+     * 선택삭제 (기안자 본인 문서만)
+     */
+    public function bulkDestroy(Request $request): JsonResponse
+    {
+        $ids = $request->input('ids', []);
+        if (empty($ids) || ! is_array($ids)) {
+            return response()->json([
+                'success' => false,
+                'message' => '삭제할 문서를 선택하세요.',
+            ], 400);
+        }
+
+        $user = auth()->user();
+        $deleted = 0;
+        $failed = 0;
+
+        foreach ($ids as $id) {
+            try {
+                $approval = $this->service->getApproval($id);
+                if ($approval->isDeletableBy($user)) {
+                    $this->service->deleteApproval($id, $user);
+                    $deleted++;
+                } else {
+                    $failed++;
+                }
+            } catch (\Throwable) {
+                $failed++;
+            }
+        }
+
+        $message = "{$deleted}건 삭제 완료";
+        if ($failed > 0) {
+            $message .= " ({$failed}건 삭제 불가)";
+        }
+
+        return response()->json([
+            'success' => true,
+            'message' => $message,
+            'deleted' => $deleted,
+            'failed' => $failed,
+        ]);
+    }
+
     // =========================================================================
     // 워크플로우
     // =========================================================================

resources/views/approvals/drafts.blade.php

@@ -41,6 +41,26 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foc
         </form>
     </x-filter-collapsible>
 
+    <!-- 테이블 상단 (선택삭제 + 페이지 사이즈) -->
+    <div class="flex items-center justify-between mb-2">
+        <div>
+            <button id="bulkDeleteBtn" onclick="bulkDelete()" class="hidden bg-red-500 hover:bg-red-600 text-white px-4 py-1.5 rounded-lg text-sm font-medium transition">
+                선택삭제 (<span id="selectedCount">0</span>건)
+            </button>
+        </div>
+        <div class="flex items-center gap-2 text-sm text-gray-600">
+            <span>페이지당</span>
+            <select id="perPageSelect" onchange="loadDrafts(1)" class="px-2 py-1 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
+                <option value="15" selected>15</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+                <option value="200">200</option>
+                <option value="500">500</option>
+            </select>
+            <span>건</span>
+        </div>
+    </div>
+
     <!-- 테이블 영역 -->
     <div id="approval-table" class="bg-white rounded-lg shadow-sm overflow-hidden">
         <div class="flex justify-center items-center p-12">
@@ -393,6 +413,7 @@ class="toss-input-sm" style="padding-left: 32px;">
 @push('scripts')
 <script>
 const isSuperAdmin = @json(auth()->user()->isSuperAdmin());
+let selectedIds = new Set();
 
 document.addEventListener('DOMContentLoaded', function() {
     loadDrafts();
@@ -404,10 +425,13 @@ class="toss-input-sm" style="padding-left: 32px;">
 });
 
 function loadDrafts(page = 1) {
+    selectedIds.clear();
+    updateBulkDeleteBtn();
+
     const form = document.getElementById('filterForm');
     const params = new URLSearchParams(new FormData(form));
     params.set('page', page);
-    params.set('per_page', 15);
+    params.set('per_page', document.getElementById('perPageSelect').value);
 
     fetch(`/api/admin/approvals/drafts?${params}`, {
         headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
@@ -421,6 +445,74 @@ function loadDrafts(page = 1) {
     });
 }
 
+function toggleSelectAll(checkbox) {
+    const checkboxes = document.querySelectorAll('.row-checkbox');
+    checkboxes.forEach(cb => {
+        cb.checked = checkbox.checked;
+        const id = parseInt(cb.value);
+        if (checkbox.checked) {
+            selectedIds.add(id);
+        } else {
+            selectedIds.delete(id);
+        }
+    });
+    updateBulkDeleteBtn();
+}
+
+function toggleRowCheckbox(checkbox) {
+    const id = parseInt(checkbox.value);
+    if (checkbox.checked) {
+        selectedIds.add(id);
+    } else {
+        selectedIds.delete(id);
+    }
+    // 전체선택 체크박스 동기화
+    const allCb = document.getElementById('selectAllCheckbox');
+    const rowCbs = document.querySelectorAll('.row-checkbox');
+    if (allCb) {
+        allCb.checked = rowCbs.length > 0 && [...rowCbs].every(cb => cb.checked);
+    }
+    updateBulkDeleteBtn();
+}
+
+function updateBulkDeleteBtn() {
+    const btn = document.getElementById('bulkDeleteBtn');
+    const count = document.getElementById('selectedCount');
+    if (selectedIds.size > 0) {
+        btn.classList.remove('hidden');
+        count.textContent = selectedIds.size;
+    } else {
+        btn.classList.add('hidden');
+    }
+}
+
+function bulkDelete() {
+    if (selectedIds.size === 0) return;
+    if (!confirm(`선택한 ${selectedIds.size}건의 문서를 삭제하시겠습니까?`)) return;
+
+    fetch('/api/admin/approvals/bulk-delete', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json',
+            'X-CSRF-TOKEN': '{{ csrf_token() }}',
+        },
+        body: JSON.stringify({ ids: [...selectedIds] }),
+    })
+    .then(r => r.json())
+    .then(data => {
+        if (data.success) {
+            if (typeof showToast === 'function') showToast(data.message, 'success');
+            loadDrafts();
+        } else {
+            if (typeof showToast === 'function') showToast(data.message || '삭제 실패', 'error');
+        }
+    })
+    .catch(() => {
+        if (typeof showToast === 'function') showToast('삭제 중 오류가 발생했습니다.', 'error');
+    });
+}
+
 function renderTable(items, pagination) {
     const container = document.getElementById('approval-table');
 
@@ -452,6 +544,9 @@ function renderTable(items, pagination) {
         <table class="min-w-full divide-y divide-gray-200">
             <thead class="bg-gray-50">
                 <tr>
+                    <th class="px-2 py-3 text-center" style="width: 40px;">
+                        <input type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll(this)" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
+                    </th>
                     <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">문서번호</th>
                     <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">제목</th>
                     <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">작성자</th>
@@ -460,9 +555,7 @@ function renderTable(items, pagination) {
                     <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">구분</th>
                     <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">긴급</th>
                     <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">작성일</th>
-                    @if(auth()->user()->isSuperAdmin())
-                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">관리</th>
-                    @endif
+                    ${isSuperAdmin ? '<th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">관리</th>' : ''}
                 </tr>
             </thead>
             <tbody class="bg-white divide-y divide-gray-200">`;
@@ -475,6 +568,9 @@ function renderTable(items, pagination) {
             : `/approval-mgmt/${item.id}`;
 
         html += `<tr class="hover:bg-gray-50 cursor-pointer" onclick="location.href='${url}'">
+            <td class="px-2 py-3 text-center" onclick="event.stopPropagation();">
+                <input type="checkbox" class="row-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" value="${item.id}" onchange="toggleRowCheckbox(this)">
+            </td>
             <td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">${item.document_number || '-'}</td>
             <td class="px-4 py-3 text-sm text-gray-800 font-medium">${item.title || '-'}</td>
             <td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">${item.drafter?.name || '-'}</td>

routes/api.php

@@ -966,6 +966,9 @@
     Route::delete('/files/{fileId}', [\App\Http\Controllers\Api\Admin\ApprovalApiController::class, 'deleteFile'])->name('delete-file');
     Route::get('/files/{fileId}/download', [\App\Http\Controllers\Api\Admin\ApprovalApiController::class, 'downloadFile'])->name('download-file');
 
+    // 선택삭제
+    Route::post('/bulk-delete', [\App\Http\Controllers\Api\Admin\ApprovalApiController::class, 'bulkDestroy'])->name('bulk-destroy');
+
     // CRUD
     Route::post('/', [\App\Http\Controllers\Api\Admin\ApprovalApiController::class, 'store'])->name('store');
     Route::get('/{id}', [\App\Http\Controllers\Api\Admin\ApprovalApiController::class, 'show'])->name('show');