kent
5b8ecf02ab
- api-logs: let→var 변경으로 스크립트 재실행 오류 해결
- api-explorer: @push('styles')→content 내 style로 hx-boost 호환
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
639 lines
32 KiB
PHP
639 lines
32 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'API 로그')
|
|
|
|
@section('content')
|
|
<!-- 페이지 헤더 -->
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-800">API 요청 로그</h1>
|
|
<div class="flex gap-2">
|
|
<!-- 인증 상태 버튼 -->
|
|
<button onclick="DevToolsAuth.openModal()" class="flex items-center gap-2 bg-white border border-gray-300 hover:bg-gray-50 px-4 py-2 rounded-lg transition">
|
|
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
|
|
</svg>
|
|
<span class="dev-tools-auth-status text-gray-500">인증 필요</span>
|
|
</button>
|
|
<form id="pruneForm" action="{{ route('dev-tools.api-logs.prune') }}" method="POST" class="inline">
|
|
@csrf
|
|
<button type="button" onclick="showConfirmModal('prune', '오래된 로그 삭제', '하루 지난 로그를 삭제하시겠습니까?', 'yellow')" class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-lg transition">
|
|
오래된 로그 삭제
|
|
</button>
|
|
</form>
|
|
<form id="truncateForm" action="{{ route('dev-tools.api-logs.truncate') }}" method="POST" class="inline">
|
|
@csrf
|
|
<button type="button" onclick="showConfirmModal('truncate', '모든 로그 삭제', '모든 로그를 삭제하시겠습니까?\n이 작업은 되돌릴 수 없습니다.', 'red')" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg transition">
|
|
모든 로그 삭제
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 확인 모달 (z-60으로 재전송 모달보다 위) -->
|
|
<div id="confirmModal" class="fixed inset-0 z-[60] hidden">
|
|
<div class="fixed inset-0 bg-black/50" onclick="hideConfirmModal()"></div>
|
|
<div class="fixed inset-0 flex items-center justify-center p-4">
|
|
<div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6 relative">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div id="modalIcon" class="w-10 h-10 rounded-full flex items-center justify-center">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 id="modalTitle" class="text-lg font-semibold text-gray-900"></h3>
|
|
</div>
|
|
<p id="modalMessage" class="text-gray-600 mb-6 whitespace-pre-line"></p>
|
|
<div class="flex justify-end gap-3">
|
|
<button type="button" onclick="hideConfirmModal()" class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
|
|
취소
|
|
</button>
|
|
<button type="button" id="modalConfirmBtn" onclick="confirmAction()" class="px-4 py-2 text-white rounded-lg transition">
|
|
확인
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 알림 메시지 -->
|
|
@if(session('success'))
|
|
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
<!-- 통계 카드 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6">
|
|
<div class="bg-white rounded-lg shadow-sm p-4">
|
|
<div class="text-sm text-gray-500">전체 요청</div>
|
|
<div class="text-2xl font-bold text-gray-800">{{ number_format($stats['total']) }}</div>
|
|
</div>
|
|
<div class="bg-white rounded-lg shadow-sm p-4">
|
|
<div class="text-sm text-gray-500">성공 (2xx)</div>
|
|
<div class="text-2xl font-bold text-green-600">{{ number_format($stats['success']) }}</div>
|
|
</div>
|
|
<div class="bg-white rounded-lg shadow-sm p-4">
|
|
<div class="text-sm text-gray-500">클라이언트 에러 (4xx)</div>
|
|
<div class="text-2xl font-bold text-yellow-600">{{ number_format($stats['client_error']) }}</div>
|
|
</div>
|
|
<div class="bg-white rounded-lg shadow-sm p-4">
|
|
<div class="text-sm text-gray-500">서버 에러 (5xx)</div>
|
|
<div class="text-2xl font-bold text-red-600">{{ number_format($stats['server_error']) }}</div>
|
|
</div>
|
|
<div class="bg-white rounded-lg shadow-sm p-4">
|
|
<div class="text-sm text-gray-500">평균 응답시간</div>
|
|
<div class="text-2xl font-bold text-blue-600">{{ number_format($stats['avg_duration']) }}ms</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 필터 -->
|
|
@php
|
|
$selectedMethods = request('method', []);
|
|
if (!is_array($selectedMethods)) {
|
|
$selectedMethods = $selectedMethods ? [$selectedMethods] : [];
|
|
}
|
|
@endphp
|
|
<div class="bg-white rounded-lg shadow-sm p-4 mb-6">
|
|
<form id="filterForm" method="GET" class="flex flex-wrap gap-4 items-end">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">메서드</label>
|
|
<div class="grid grid-cols-3 gap-x-3 gap-y-1">
|
|
@foreach(['GET', 'POST', 'PUT', 'PATCH', 'DELETE'] as $method)
|
|
<label class="inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" name="method[]" value="{{ $method }}"
|
|
{{ in_array($method, $selectedMethods) ? 'checked' : '' }}
|
|
onchange="document.getElementById('filterForm').submit()"
|
|
class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
|
|
<span class="ml-1 text-sm {{ $method === 'GET' ? 'text-green-700' : ($method === 'POST' ? 'text-blue-700' : ($method === 'DELETE' ? 'text-red-700' : 'text-yellow-700')) }}">{{ $method }}</span>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">상태</label>
|
|
<select name="status" onchange="document.getElementById('filterForm').submit()" class="border rounded-lg px-3 py-2 text-sm">
|
|
<option value="">전체</option>
|
|
<option value="2xx" {{ request('status') === '2xx' ? 'selected' : '' }}>성공 (2xx)</option>
|
|
<option value="error" {{ request('status') === 'error' ? 'selected' : '' }}>에러만 (4xx+5xx)</option>
|
|
<option value="4xx" {{ request('status') === '4xx' ? 'selected' : '' }}>클라이언트 에러 (4xx)</option>
|
|
<option value="5xx" {{ request('status') === '5xx' ? 'selected' : '' }}>서버 에러 (5xx)</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex-1">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">URL 검색</label>
|
|
<input type="text" name="search" value="{{ request('search') }}"
|
|
placeholder="URL 검색..."
|
|
class="w-full border rounded-lg px-3 py-2 text-sm">
|
|
</div>
|
|
<div>
|
|
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm">
|
|
검색
|
|
</button>
|
|
<a href="{{ route('dev-tools.api-logs.index') }}" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg text-sm ml-1">
|
|
초기화
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 그룹 필터 안내 -->
|
|
@if(request('group_id'))
|
|
<div class="bg-blue-50 border border-blue-200 text-blue-700 px-4 py-3 rounded mb-4 flex justify-between items-center">
|
|
<span>그룹 ID: <code class="bg-blue-100 px-2 py-1 rounded">{{ request('group_id') }}</code> 필터 적용 중</span>
|
|
<a href="{{ route('dev-tools.api-logs.index') }}" class="text-blue-600 hover:text-blue-800 underline">필터 해제</a>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- 로그 목록 -->
|
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
|
|
<table class="min-w-full divide-y divide-gray-200 table-fixed">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase w-20">시간</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase w-20">메서드</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">URL</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase w-16">상태</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase w-20">응답</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase w-24">테넌트</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase w-24">사용자</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase w-16">그룹</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase w-12"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
@forelse($logs as $log)
|
|
<tr class="hover:bg-gray-50 cursor-pointer h-14 {{ $log->response_status >= 400 ? 'bg-red-50' : '' }}"
|
|
onclick="toggleAccordion({{ $log->id }})">
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500 align-middle">
|
|
{{ $log->created_at->format('H:i:s') }}
|
|
</td>
|
|
<td class="px-4 py-2 whitespace-nowrap align-middle">
|
|
<span class="px-2 py-1 text-xs font-medium rounded {{ $log->method_color }}">
|
|
{{ $log->method }}
|
|
</span>
|
|
</td>
|
|
<td class="px-4 py-2 text-sm text-gray-900 max-w-md align-middle" title="{{ $log->url }}">
|
|
<div class="truncate">{{ $log->path }}</div>
|
|
@php
|
|
$params = $log->request_body ?: $log->request_query ?: [];
|
|
if (is_array($params) && !empty($params)) {
|
|
$paramPairs = [];
|
|
foreach ($params as $key => $value) {
|
|
if (is_array($value)) {
|
|
$value = json_encode($value, JSON_UNESCAPED_UNICODE);
|
|
}
|
|
$paramPairs[] = $key . '=' . Str::limit((string)$value, 20);
|
|
}
|
|
$paramSummary = implode(', ', $paramPairs);
|
|
} else {
|
|
$paramSummary = '';
|
|
}
|
|
@endphp
|
|
@if(!empty($paramSummary))
|
|
<div class="text-xs text-gray-500 font-mono mt-0.5" title="{{ json_encode($params, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT) }}">
|
|
{{ $paramSummary }}
|
|
</div>
|
|
@endif
|
|
</td>
|
|
<td class="px-4 py-2 whitespace-nowrap align-middle">
|
|
<span class="px-2 py-1 text-xs font-medium rounded {{ $log->status_color }}">
|
|
{{ $log->response_status }}
|
|
</span>
|
|
</td>
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500 align-middle">
|
|
{{ number_format($log->duration_ms) }}ms
|
|
</td>
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500 align-middle">
|
|
@if($log->tenant)
|
|
<span title="{{ $log->tenant->company_name }}">{{ Str::limit($log->tenant->company_name, 10) }}</span>
|
|
@else
|
|
<span class="text-gray-400">-</span>
|
|
@endif
|
|
</td>
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500 align-middle">
|
|
@if($log->user)
|
|
<span title="{{ $log->user->email }}">{{ $log->user->name ?? $log->user->email }}</span>
|
|
@else
|
|
<span class="text-gray-400">guest</span>
|
|
@endif
|
|
</td>
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm align-middle" onclick="event.stopPropagation()">
|
|
@if($log->group_id && ($groupCounts[$log->group_id] ?? 0) >= 2)
|
|
<a href="{{ route('dev-tools.api-logs.index', ['group_id' => $log->group_id]) }}"
|
|
class="text-purple-600 hover:text-purple-800" title="{{ $log->group_id }} ({{ $groupCounts[$log->group_id] }}개)">
|
|
<svg class="w-4 h-4 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
|
|
</svg>
|
|
<span class="text-xs ml-1">{{ $groupCounts[$log->group_id] }}</span>
|
|
</a>
|
|
@else
|
|
<span class="text-gray-400">-</span>
|
|
@endif
|
|
</td>
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm align-middle" onclick="event.stopPropagation()">
|
|
<div class="flex items-center gap-1">
|
|
<button onclick="openResendModal({{ $log->id }}, '{{ $log->method }}', '{{ addslashes($log->url) }}', {{ $log->tenant_id ?? 1 }})" class="p-1 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded" title="재전송">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
|
|
</svg>
|
|
</button>
|
|
@if($log->response_status >= 400)
|
|
<button onclick="copyAiAnalysis({{ $log->id }})" class="p-1 text-purple-600 hover:text-purple-800 hover:bg-purple-50 rounded" title="AI 분석용 복사">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
|
</svg>
|
|
</button>
|
|
@endif
|
|
<a href="{{ route('dev-tools.api-logs.show', $log->id) }}" class="p-1 text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded" title="상세 보기">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- 아코디언 컨텐츠 -->
|
|
<tr id="accordion-{{ $log->id }}" class="hidden">
|
|
<td colspan="9" class="px-4 py-4 bg-slate-50 border-t border-b border-slate-200">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<!-- 요청 헤더 -->
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-2">요청 헤더</h4>
|
|
<div class="bg-gray-900 rounded-lg p-3 overflow-x-auto max-h-64">
|
|
<div class="text-xs font-mono space-y-0.5">
|
|
@foreach($log->request_headers ?? [] as $key => $values)
|
|
<div>
|
|
<span class="text-blue-400">{{ $key }}:</span>
|
|
<span class="text-green-400">{{ is_array($values) ? implode(', ', $values) : $values }}</span>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 응답 바디 -->
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-2">응답 바디</h4>
|
|
<div class="bg-gray-900 rounded-lg p-3 overflow-x-auto max-h-64">
|
|
@php
|
|
$responseData = json_decode($log->response_body, true);
|
|
if ($responseData !== null) {
|
|
$displayResponse = stripslashes(json_encode($responseData, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES));
|
|
} else {
|
|
$displayResponse = preg_replace_callback('/\\\\u([0-9a-fA-F]{4})/', function($m) {
|
|
return mb_convert_encoding(pack('H*', $m[1]), 'UTF-8', 'UTF-16BE');
|
|
}, $log->response_body ?? '');
|
|
$displayResponse = str_replace('\\/', '/', $displayResponse);
|
|
}
|
|
@endphp
|
|
<pre class="text-green-400 text-xs font-mono whitespace-pre-wrap">{!! Str::limit($displayResponse, 2000) !!}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="9" class="px-4 py-8 text-center text-gray-500">
|
|
로그가 없습니다.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- 페이지네이션 -->
|
|
@if($logs->hasPages())
|
|
<div class="px-4 py-3 border-t">
|
|
{{ $logs->links() }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<script>
|
|
function toggleAccordion(id) {
|
|
const accordion = document.getElementById('accordion-' + id);
|
|
if (accordion) {
|
|
accordion.classList.toggle('hidden');
|
|
}
|
|
}
|
|
|
|
function copyAiAnalysis(id) {
|
|
const textarea = document.getElementById('ai-analysis-' + id);
|
|
if (textarea) {
|
|
navigator.clipboard.writeText(textarea.value).then(() => {
|
|
showAlertModal('복사 완료', 'AI 분석용 내용이 클립보드에 복사되었습니다.\nClaude나 ChatGPT에 붙여넣기 하세요.', 'green');
|
|
}).catch(err => {
|
|
console.error('복사 실패:', err);
|
|
showAlertModal('복사 실패', '복사에 실패했습니다.', 'red');
|
|
});
|
|
}
|
|
}
|
|
|
|
// 커스텀 확인 모달
|
|
var currentFormId = currentFormId ?? null;
|
|
|
|
function showConfirmModal(formId, title, message, color) {
|
|
currentFormId = formId;
|
|
|
|
const modal = document.getElementById('confirmModal');
|
|
const modalIcon = document.getElementById('modalIcon');
|
|
const modalTitle = document.getElementById('modalTitle');
|
|
const modalMessage = document.getElementById('modalMessage');
|
|
const modalConfirmBtn = document.getElementById('modalConfirmBtn');
|
|
|
|
modalTitle.textContent = title;
|
|
modalMessage.textContent = message;
|
|
|
|
// 색상 설정
|
|
const colors = {
|
|
yellow: { icon: 'bg-yellow-500', btn: 'bg-yellow-600 hover:bg-yellow-700' },
|
|
red: { icon: 'bg-red-500', btn: 'bg-red-600 hover:bg-red-700' },
|
|
green: { icon: 'bg-green-500', btn: 'bg-green-600 hover:bg-green-700' },
|
|
blue: { icon: 'bg-blue-500', btn: 'bg-blue-600 hover:bg-blue-700' }
|
|
};
|
|
const colorSet = colors[color] || colors.blue;
|
|
|
|
modalIcon.className = `w-10 h-10 rounded-full flex items-center justify-center ${colorSet.icon}`;
|
|
modalConfirmBtn.className = `px-4 py-2 text-white rounded-lg transition ${colorSet.btn}`;
|
|
|
|
modal.classList.remove('hidden');
|
|
}
|
|
|
|
function hideConfirmModal() {
|
|
const modal = document.getElementById('confirmModal');
|
|
modal.classList.add('hidden');
|
|
currentFormId = null;
|
|
}
|
|
|
|
function confirmAction() {
|
|
if (currentFormId) {
|
|
const form = document.getElementById(currentFormId + 'Form');
|
|
if (form) {
|
|
form.submit();
|
|
}
|
|
}
|
|
hideConfirmModal();
|
|
}
|
|
|
|
// 커스텀 알림 모달 (alert 대체)
|
|
function showAlertModal(title, message, color = 'blue') {
|
|
const modal = document.getElementById('confirmModal');
|
|
const modalIcon = document.getElementById('modalIcon');
|
|
const modalTitle = document.getElementById('modalTitle');
|
|
const modalMessage = document.getElementById('modalMessage');
|
|
const modalConfirmBtn = document.getElementById('modalConfirmBtn');
|
|
|
|
modalTitle.textContent = title;
|
|
modalMessage.textContent = message;
|
|
|
|
const colors = {
|
|
yellow: { icon: 'bg-yellow-500', btn: 'bg-yellow-600 hover:bg-yellow-700' },
|
|
red: { icon: 'bg-red-500', btn: 'bg-red-600 hover:bg-red-700' },
|
|
green: { icon: 'bg-green-500', btn: 'bg-green-600 hover:bg-green-700' },
|
|
blue: { icon: 'bg-blue-500', btn: 'bg-blue-600 hover:bg-blue-700' }
|
|
};
|
|
const colorSet = colors[color] || colors.blue;
|
|
|
|
modalIcon.className = `w-10 h-10 rounded-full flex items-center justify-center ${colorSet.icon}`;
|
|
modalConfirmBtn.className = `px-4 py-2 text-white rounded-lg transition ${colorSet.btn}`;
|
|
modalConfirmBtn.textContent = '확인';
|
|
|
|
// 알림 모드: 확인 버튼만 닫기 기능으로 변경
|
|
currentFormId = null;
|
|
|
|
modal.classList.remove('hidden');
|
|
}
|
|
</script>
|
|
|
|
<!-- AI 분석용 데이터 -->
|
|
@foreach($logs as $log)
|
|
@if($log->response_status >= 400)
|
|
<textarea id="ai-analysis-{{ $log->id }}" class="hidden">{!! $log->ai_analysis_summary !!}</textarea>
|
|
@endif
|
|
@endforeach
|
|
|
|
<!-- 재전송 모달 -->
|
|
<div id="resendModal" class="fixed inset-0 z-50 hidden">
|
|
<div class="fixed inset-0 bg-black/50" onclick="closeResendModal()"></div>
|
|
<div class="fixed inset-0 flex items-center justify-center p-4">
|
|
<div class="bg-white rounded-lg shadow-xl max-w-2xl w-full p-6 relative max-h-[90vh] overflow-y-auto">
|
|
<!-- 헤더 -->
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">API 재전송</h3>
|
|
<button onclick="closeResendModal()" class="text-gray-400 hover:text-gray-600">
|
|
<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="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 요청 정보 미리보기 -->
|
|
<div class="bg-gray-50 rounded-lg p-4 mb-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span id="resendMethod" class="px-2 py-1 text-xs font-medium rounded"></span>
|
|
<span id="resendUrl" class="text-sm text-gray-600 truncate"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 인증 상태 표시 -->
|
|
<div class="mb-4 p-3 bg-gray-50 rounded-lg flex items-center justify-between">
|
|
<div class="text-sm text-gray-600">
|
|
<span class="font-medium">인증 상태:</span>
|
|
<span id="resendAuthStatus" class="ml-1 text-gray-500">인증 필요</span>
|
|
</div>
|
|
<button type="button" onclick="DevToolsAuth.openModal()" class="text-blue-600 hover:text-blue-700 text-sm">
|
|
인증 설정
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 결과 표시 영역 -->
|
|
<div id="resendResult" class="mb-4 hidden">
|
|
<!-- 상태 배너 -->
|
|
<div id="resendStatusBanner" class="mb-3 p-3 rounded-lg flex items-center gap-2">
|
|
<svg id="resendStatusIcon" class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"></svg>
|
|
<span id="resendStatusText" class="font-medium"></span>
|
|
</div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">응답 결과</label>
|
|
<div id="resendResultContent" class="bg-gray-900 rounded-lg p-4 overflow-x-auto max-h-64">
|
|
<pre class="text-green-400 text-sm font-mono"></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 버튼 -->
|
|
<div class="flex justify-end gap-3">
|
|
<button type="button" onclick="closeResendModal()" class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
|
|
닫기
|
|
</button>
|
|
<button type="button" id="resendBtn" onclick="executeResend()" class="px-4 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
|
|
</svg>
|
|
<span>재전송 실행</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 재전송 모달 관련 변수
|
|
var currentLogId = currentLogId ?? null;
|
|
|
|
// 메서드별 색상
|
|
var methodColors = methodColors ?? {
|
|
'GET': 'bg-green-100 text-green-800',
|
|
'POST': 'bg-blue-100 text-blue-800',
|
|
'PUT': 'bg-yellow-100 text-yellow-800',
|
|
'PATCH': 'bg-yellow-100 text-yellow-800',
|
|
'DELETE': 'bg-red-100 text-red-800'
|
|
};
|
|
|
|
// 재전송 모달 인증 상태 업데이트
|
|
function updateResendAuthStatus() {
|
|
const statusEl = document.getElementById('resendAuthStatus');
|
|
if (statusEl && typeof DevToolsAuth !== 'undefined') {
|
|
const isAuth = DevToolsAuth.isAuthenticated();
|
|
statusEl.textContent = isAuth ? '인증됨' : '인증 필요';
|
|
statusEl.classList.toggle('text-green-600', isAuth);
|
|
statusEl.classList.toggle('text-gray-500', !isAuth);
|
|
}
|
|
}
|
|
|
|
function openResendModal(logId, method, url, tenantId) {
|
|
currentLogId = logId;
|
|
|
|
// 요청 정보 표시
|
|
const methodSpan = document.getElementById('resendMethod');
|
|
methodSpan.textContent = method;
|
|
methodSpan.className = `px-2 py-1 text-xs font-medium rounded ${methodColors[method] || 'bg-gray-100 text-gray-800'}`;
|
|
document.getElementById('resendUrl').textContent = url;
|
|
|
|
// 초기화
|
|
document.getElementById('resendResult').classList.add('hidden');
|
|
|
|
// 인증 상태 업데이트
|
|
updateResendAuthStatus();
|
|
|
|
document.getElementById('resendModal').classList.remove('hidden');
|
|
}
|
|
|
|
function closeResendModal() {
|
|
document.getElementById('resendModal').classList.add('hidden');
|
|
currentLogId = null;
|
|
}
|
|
|
|
function executeResend() {
|
|
if (!currentLogId) return;
|
|
|
|
// 인증 체크
|
|
if (!DevToolsAuth.isAuthenticated()) {
|
|
showAlertModal('인증 필요', '먼저 인증 설정을 해주세요.', 'yellow');
|
|
return;
|
|
}
|
|
|
|
const btn = document.getElementById('resendBtn');
|
|
const resultDiv = document.getElementById('resendResult');
|
|
const resultContent = document.getElementById('resendResultContent').querySelector('pre');
|
|
|
|
// 공유 인증 페이로드 사용
|
|
let payload = { log_id: currentLogId, ...DevToolsAuth.getAuthPayload() };
|
|
|
|
// 버튼 로딩 상태
|
|
btn.disabled = true;
|
|
btn.innerHTML = `
|
|
<svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
|
|
</svg>
|
|
<span>전송 중...</span>
|
|
`;
|
|
|
|
fetch(`/dev-tools/api-logs/${currentLogId}/resend`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
|
|
},
|
|
body: JSON.stringify(payload)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
resultDiv.classList.remove('hidden');
|
|
|
|
const banner = document.getElementById('resendStatusBanner');
|
|
const statusIcon = document.getElementById('resendStatusIcon');
|
|
const statusText = document.getElementById('resendStatusText');
|
|
|
|
const isSuccess = data.status >= 200 && data.status < 400;
|
|
|
|
if (isSuccess) {
|
|
banner.className = 'mb-3 p-3 rounded-lg flex items-center gap-2 bg-green-100 border border-green-300';
|
|
statusIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>';
|
|
statusIcon.className = 'w-5 h-5 flex-shrink-0 text-green-600';
|
|
statusText.className = 'font-medium text-green-800';
|
|
statusText.textContent = `✅ 성공! (${data.status}) - ${data.duration_ms}ms`;
|
|
resultContent.className = 'text-green-400 text-sm font-mono whitespace-pre-wrap';
|
|
// 1초 후 페이지 새로고침 (새 로그 표시)
|
|
setTimeout(() => location.reload(), 1000);
|
|
} else {
|
|
banner.className = 'mb-3 p-3 rounded-lg flex items-center gap-2 bg-red-100 border border-red-300';
|
|
statusIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>';
|
|
statusIcon.className = 'w-5 h-5 flex-shrink-0 text-red-600';
|
|
statusText.className = 'font-medium text-red-800';
|
|
statusText.textContent = `❌ 실패 (${data.status}) - ${data.duration_ms}ms`;
|
|
resultContent.className = 'text-red-400 text-sm font-mono whitespace-pre-wrap';
|
|
}
|
|
|
|
let resultText = '';
|
|
if (typeof data.response === 'object') {
|
|
resultText = JSON.stringify(data.response, null, 2);
|
|
} else {
|
|
resultText = data.response;
|
|
}
|
|
resultContent.textContent = resultText;
|
|
})
|
|
.catch(err => {
|
|
resultDiv.classList.remove('hidden');
|
|
|
|
const banner = document.getElementById('resendStatusBanner');
|
|
const statusIcon = document.getElementById('resendStatusIcon');
|
|
const statusText = document.getElementById('resendStatusText');
|
|
|
|
banner.className = 'mb-3 p-3 rounded-lg flex items-center gap-2 bg-red-100 border border-red-300';
|
|
statusIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>';
|
|
statusIcon.className = 'w-5 h-5 flex-shrink-0 text-red-600';
|
|
statusText.className = 'font-medium text-red-800';
|
|
statusText.textContent = '❌ 요청 실패: 네트워크 오류';
|
|
|
|
resultContent.className = 'text-red-400 text-sm font-mono';
|
|
resultContent.textContent = err.message;
|
|
})
|
|
.finally(() => {
|
|
btn.disabled = false;
|
|
btn.innerHTML = `
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
|
|
</svg>
|
|
<span>재전송 실행</span>
|
|
`;
|
|
});
|
|
}
|
|
|
|
// 인증 상태 변경 시 재전송 모달 상태도 업데이트
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (typeof DevToolsAuth !== 'undefined') {
|
|
DevToolsAuth.onAuthChange(function() {
|
|
updateResendAuthStatus();
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<!-- 공유 인증 모달 -->
|
|
@include('dev-tools.partials.auth-modal')
|
|
|
|
<!-- 공유 인증 스크립트 -->
|
|
@include('dev-tools.partials.auth-scripts')
|
|
@endsection |