feat: Add Tool List view tab to Developer Portal

This commit is contained in:
jade
2026-07-09 23:19:20 +09:00
parent 46c40f6aee
commit ef9194d55c

View File

@@ -225,6 +225,9 @@
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link" id="tool-tab" data-bs-toggle="tab" data-bs-target="#tool" type="button" role="tab">⚙️ Tool (기능) 생성</button> <button class="nav-link" id="tool-tab" data-bs-toggle="tab" data-bs-target="#tool" type="button" role="tab">⚙️ Tool (기능) 생성</button>
</li> </li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="list-tab" data-bs-toggle="tab" data-bs-target="#list" type="button" role="tab" onclick="loadToolList()">📋 등록된 Tool 목록</button>
</li>
</ul> </ul>
<div class="card-body p-0"> <div class="card-body p-0">
@@ -320,6 +323,32 @@
</form> </form>
</div> </div>
<!-- Tool List Form -->
<div class="tab-pane fade" id="list" role="tabpanel">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="mb-0 text-secondary">현재 시스템에 등록되어 라우팅 가능한 Tool 목록입니다.</h5>
<button class="btn btn-sm btn-outline-primary" onclick="loadToolList()">🔄 새로고침</button>
</div>
<div class="table-responsive">
<table class="table table-hover align-middle">
<thead class="table-light">
<tr>
<th>그룹</th>
<th>Tool 이름</th>
<th>설명</th>
<th>Pod 모듈</th>
<th>인터페이스 (ID)</th>
</tr>
</thead>
<tbody id="toolListBody">
<tr>
<td colspan="5" class="text-center py-4 text-muted">데이터를 불러오는 중입니다...</td>
</tr>
</tbody>
</table>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -374,6 +403,39 @@
handleFormSubmit('podForm', '/api/v1/scaffold/pod'); handleFormSubmit('podForm', '/api/v1/scaffold/pod');
handleFormSubmit('toolForm', '/api/v1/scaffold/tool'); handleFormSubmit('toolForm', '/api/v1/scaffold/tool');
function loadToolList() {
const tbody = document.getElementById('toolListBody');
tbody.innerHTML = '<tr><td colspan="5" class="text-center py-4 text-muted"><span class="spinner-border spinner-border-sm"></span> 데이터를 불러오는 중입니다...</td></tr>';
fetch('/mcp/api/v1/tools/list', {
method: 'GET',
headers: {
'X-API-KEY': 'SHINHAN_MCP_SECRET_KEY_2026'
}
})
.then(res => res.json())
.then(data => {
const tools = data.result.tools || [];
if (tools.length === 0) {
tbody.innerHTML = '<tr><td colspan="5" class="text-center py-4 text-muted">등록된 Tool이 없습니다.</td></tr>';
return;
}
tbody.innerHTML = tools.map(t => `
<tr>
<td><span class="badge bg-secondary">${t.domainGroup || 'UNKNOWN'}</span></td>
<td class="fw-bold text-primary">${t.toolName}</td>
<td>${t.description}</td>
<td><span class="badge bg-light text-dark border">${t.podUrl}</span></td>
<td><span class="badge bg-info text-dark">${t.integrationType}</span> <small class="text-muted">${t.mciServiceId || '-'}</small></td>
</tr>
`).join('');
})
.catch(err => {
tbody.innerHTML = `<tr><td colspan="5" class="text-center py-4 text-danger">목록을 불러오는 중 오류가 발생했습니다: ${err.message}</td></tr>`;
});
}
</script> </script>
</body> </body>