feat: 설정 자격증명 탭에 키 발급 사이트 카드 추가

Vault에 저장된 키는 이름만 opaque 문자열로 남아 있고 어디서 발급받았는지가 UI
어디에도 없어, 갱신·재발급 때마다 해당 콘솔을 찾아 헤매야 했다. data.go.kr은
특히 하나의 키라도 서비스별로 활용신청이 따로 필요한데(에어코리아 측정소정보가
같은 키로 403 난 이유), 그 사실이 기록된 곳이 없었다.

- 서비스 19곳의 발급 페이지 링크. /api/credentials/status로 실제 저장 여부를 읽어
  ✓(저장됨)/·(미저장)로 표시하므로 하드코딩된 목록이 아니다.
- 공공데이터포털 항목에 "서비스별로 활용신청 필요"를 명시했다.
- 전 링크 https + target=_blank + rel=noopener noreferrer, 값은 escHtml 처리.
- Vault 조회에 실패해도 링크는 그대로 보이고 경고만 덧붙인다. 저장 여부를 잘못
  표시하는 것보다 모른다고 하는 편이 낫다.

브라우저에서 렌더 확인: 19개 중 17개 ✓, 미저장으로 표시된 Brave·OpenAI는
실제 Vault 내용과 일치. 콘솔 에러 없음.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
kim
2026-08-09 10:40:22 +09:00
co-authored by Claude Opus 5
parent c830c9fbf6
commit ce684a6cf3
2 changed files with 63 additions and 1 deletions
+10
View File
@@ -958,6 +958,16 @@
</div>
</div>
<!-- Where each key comes from -->
<div style="border:1px solid var(--line);border-radius:12px;padding:14px">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
<div class="right-section-title">키 발급 사이트</div>
<button onclick="loadCredIssuers()" style="font-size:10px;padding:3px 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);cursor:pointer;color:var(--muted)">새로고침</button>
</div>
<div style="font-size:11px;color:var(--muted);margin-bottom:10px">✓ 표시는 현재 Vault에 저장돼 있다는 뜻입니다. 갱신·재발급이 필요할 때 여기서 바로 이동하세요.</div>
<div id="cred-issuers" style="font-size:12px;color:var(--muted);max-height:320px;overflow-y:auto">Loading…</div>
</div>
<!-- Audit log preview -->
<div style="border:1px solid var(--line);border-radius:12px;padding:14px">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">