djb-eapim/eapim-portal
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

API Status 페이지 포탈 미게시 API 안내 추가:

Browse Source 
- 포탈 미게시 API 필터 안내 배너 HTML 및 JS 추가
- 조회 시 API 명 표시 및 API 옵션 외 필터 유지 로직 변경
This commit is contained in:
Rinjae
2026-07-31 14:10:39 +09:00
parent e7945233fe
commit 5e8d08f1af
6 changed files with 117 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/main.css
+65 -45
View File
@@ -1160,7 +1160,7 @@ hr {
transition: all 0.3s ease;
}
.mobile-drawer .drawer-welcome .btn-drawer-login:hover {
background: rgb(0, 65.7, 162);
background: rgb(0%, 25.7647058824%, 63.5294117647%);
}
.mobile-drawer .drawer-welcome.authenticated {
flex-direction: row;
@@ -2470,7 +2470,7 @@ hr {
color: #FFFFFF;
}
.btn-success:hover {
background: rgb(83.2897959184, 199.3102040816, 106.493877551);
background: rgb(32.662665066%, 78.1608643457%, 41.762304922%);
transform: translateY(-3px);
}
.btn-danger {
@@ -2478,7 +2478,7 @@ hr {
color: #FFFFFF;
}
.btn-danger:hover {
background: rgb(255, 70.8, 70.8);
background: rgb(100%, 27.7647058824%, 27.7647058824%);
transform: translateY(-3px);
}
.btn-ghost {
@@ -2744,7 +2744,7 @@ hr {
.action-btn-delete:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
background: rgb(255, 88.9, 88.9);
background: rgb(100%, 34.862745098%, 34.862745098%);
}
.action-btn-delete:active {
transform: translateY(0);
@@ -2862,7 +2862,7 @@ hr {
background: #a4d6ea;
}
.btn-input-action.btn-change:hover {
background: rgb(131.6625, 199.4303571429, 226.5375);
background: rgb(51.6323529412%, 78.2079831933%, 88.8382352941%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
}
@@ -2937,7 +2937,7 @@ hr {
border: none;
}
.btn-action-primary:hover {
background: rgb(31.8731707317, 92.7219512195, 205.7268292683);
background: rgb(12.4992826399%, 36.3615494978%, 80.6771879484%);
transform: translateY(-2px);
color: #fff;
}
@@ -2987,7 +2987,7 @@ hr {
}
.status-badge.status-processing {
background: rgba(255, 217, 61, 0.1);
color: rgb(221.2, 177.8721649485, 0);
color: rgb(86.7450980392%, 69.7537901759%, 0%);
}
.status-badge.status-failed {
background: rgba(255, 107, 107, 0.1);
@@ -3027,7 +3027,7 @@ hr {
}
.status-badge-header.status-processing {
background: rgba(255, 217, 61, 0.1);
color: rgb(221.2, 177.8721649485, 0);
color: rgb(86.7450980392%, 69.7537901759%, 0%);
}
.badge-sm {
@@ -4215,7 +4215,7 @@ select.form-control {
.file-upload-wrapper .file-remove-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
background: rgb(255, 88.9, 88.9);
background: rgb(100%, 34.862745098%, 34.862745098%);
}
.file-upload-wrapper .file-remove-btn:active {
transform: translateY(0);
@@ -4536,7 +4536,7 @@ select.form-control {
transition: all 0.3s ease;
}
.form-actions--with-withdrawal .withdrawal-link:hover {
background: rgb(210.2090909091, 232.6045454545, 242.9409090909);
background: rgb(82.4349376114%, 91.2174688057%, 95.2709447415%);
}
.form-actions--with-withdrawal .withdrawal-link img {
width: 22px;
@@ -4691,7 +4691,7 @@ select.form-control {
text-decoration: underline;
}
.notice-content-box a:hover {
color: rgb(0, 65.7, 162);
color: rgb(0%, 25.7647058824%, 63.5294117647%);
}
.form-row--content .form-label-wrapper {
@@ -5625,7 +5625,7 @@ select.form-control {
font-size: 16px;
}
.drawer-logout-btn:hover {
background: rgb(255, 70.8, 70.8);
background: rgb(100%, 27.7647058824%, 27.7647058824%);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
}
@@ -6338,7 +6338,7 @@ select.form-control {
color: #64748b;
}
.list-table-btn--default:hover {
background-color: rgb(233.3571428571, 233.3571428571, 231.1928571429);
background-color: rgb(91.512605042%, 91.512605042%, 90.6638655462%);
}
.list-table-btn--primary {
background-color: #ecf0fa;
@@ -6346,7 +6346,7 @@ select.form-control {
color: #2a69de;
}
.list-table-btn--primary:hover {
background-color: rgb(216.7625, 224.8125, 244.9375);
background-color: rgb(85.0049019608%, 88.1617647059%, 96.0539215686%);
}
.list-table-btn--secondary {
background-color: #f5f5f4;
@@ -6354,7 +6354,7 @@ select.form-control {
color: #64748b;
}
.list-table-btn--secondary:hover {
background-color: rgb(233.3571428571, 233.3571428571, 231.1928571429);
background-color: rgb(91.512605042%, 91.512605042%, 90.6638655462%);
}
.list-table-btn--danger {
background-color: #fbe7e9;
@@ -6362,7 +6362,7 @@ select.form-control {
color: #bb1026;
}
.list-table-btn--danger:hover {
background-color: rgb(247.5571428571, 210.3428571429, 214.0642857143);
background-color: rgb(97.081232493%, 82.487394958%, 83.9467787115%);
}
.table-pagination {
@@ -7012,7 +7012,7 @@ select.form-control {
.alert.alert-error {
background: rgba(255, 107, 107, 0.1);
border: 1px solid rgba(255, 107, 107, 0.3);
color: rgb(255, 70.8, 70.8);
color: rgb(100%, 27.7647058824%, 27.7647058824%);
align-items: center;
}
.alert.alert-error svg {
@@ -7026,7 +7026,7 @@ select.form-control {
.alert.alert-success {
background: rgba(107, 207, 127, 0.1);
border: 1px solid rgba(107, 207, 127, 0.3);
color: rgb(61.5183673469, 189.6816326531, 87.1510204082);
color: rgb(24.12484994%, 74.3849539816%, 34.1768707483%);
}
.alert.alert-info {
background: rgba(0, 73, 180, 0.1);
@@ -12035,10 +12035,10 @@ body.index-page-body {
line-height: 20px;
}
.login-button:hover {
background: rgb(25.65, 70.3, 173.85);
background: rgb(10.0588235294%, 27.568627451%, 68.1764705882%);
}
.login-button:active {
background: rgb(24.3, 66.6, 164.7);
background: rgb(9.5294117647%, 26.1176470588%, 64.5882352941%);
}
.login-button:disabled {
opacity: 0.6;
@@ -12081,10 +12081,10 @@ body.index-page-body {
border-bottom-right-radius: 8px;
}
.login-links-container .link-btn:hover {
background: rgb(220.61, 227.85, 245.95);
background: rgb(86.5137254902%, 89.3529411765%, 96.4509803922%);
}
.login-links-container .link-btn:active {
background: rgb(205.22, 215.7, 241.9);
background: rgb(80.4784313725%, 84.5882352941%, 94.862745098%);
}
.login-alert {
@@ -12593,12 +12593,12 @@ body.index-page-body {
}
.auth-request-button:hover,
.auth-verify-button:hover {
background: rgb(37.3117757009, 153.9304672897, 235.0082242991);
background: rgb(14.6320689023%, 60.3648891332%, 92.1600879604%);
transform: none !important;
}
.auth-request-button:active,
.auth-verify-button:active {
background: rgb(21.411588785, 146.3125233645, 233.148411215);
background: rgb(8.3967014843%, 57.3774601429%, 91.4307494961%);
}
.auth-request-button:disabled,
.auth-verify-button:disabled {
@@ -12647,10 +12647,10 @@ body.index-page-body {
background: #f0f2f5;
}
.account-recovery-card .form-actions .cancel-button:hover {
background: rgb(225.45, 229.39, 235.3);
background: rgb(88.4117647059%, 89.9568627451%, 92.2745098039%);
}
.account-recovery-card .form-actions .cancel-button:active {
background: rgb(210.9, 216.78, 225.6);
background: rgb(82.7058823529%, 85.0117647059%, 88.4705882353%);
}
.account-recovery-card .form-actions .submit-button {
color: #FFFFFF;
@@ -12660,7 +12660,7 @@ body.index-page-body {
background: rgb(6, 54, 125);
}
.account-recovery-card .form-actions .submit-button:active {
background: rgb(0, 65.7, 162);
background: rgb(0%, 25.7647058824%, 63.5294117647%);
}
.account-recovery-card .form-actions .submit-button:disabled {
opacity: 0.6;
@@ -12865,7 +12865,7 @@ body.index-page-body {
transition: color 0.3s ease;
}
.result-info-box .info-text .info-link:hover {
color: rgb(0, 65.7, 162);
color: rgb(0%, 25.7647058824%, 63.5294117647%);
}
@media (max-width: 576px) {
.result-info-box .info-text {
@@ -18048,7 +18048,7 @@ input[type=checkbox]:checked + .custom-checkbox {
transition: background 0.2s ease;
}
.btn-copy-action:hover {
background: rgb(131.6625, 199.4303571429, 226.5375);
background: rgb(51.6323529412%, 78.2079831933%, 88.8382352941%);
}
@media (max-width: 768px) {
.btn-copy-action {
@@ -18075,7 +18075,7 @@ input[type=checkbox]:checked + .custom-checkbox {
transition: background 0.2s ease;
}
.btn-view-secret:hover {
background: rgb(31.8897196262, 151.4130841121, 234.5102803738);
background: rgb(12.5057724024%, 59.377680044%, 91.9648158329%);
}
.btn-view-secret svg {
width: 20px;
@@ -18260,7 +18260,7 @@ input[type=checkbox]:checked + .custom-checkbox {
border-radius: 8px;
}
.btn-copy-action:hover {
background: rgb(131.6625, 199.4303571429, 226.5375);
background: rgb(51.6323529412%, 78.2079831933%, 88.8382352941%);
}
.btn-view-secret {
width: 100% !important;
@@ -18276,7 +18276,7 @@ input[type=checkbox]:checked + .custom-checkbox {
height: 16px;
}
.btn-view-secret:hover {
background: rgb(31.8897196262, 151.4130841121, 234.5102803738);
background: rgb(12.5057724024%, 59.377680044%, 91.9648158329%);
}
#revealedSecretBox {
width: 100%;
@@ -18549,7 +18549,7 @@ input[type=checkbox]:checked + .custom-checkbox {
flex-shrink: 0;
}
.detail-wrap .dt-btn-copy:hover {
background: rgb(189.6, 230.0857142857, 255);
background: rgb(74.3529411765%, 90.2296918768%, 100%);
}
.detail-wrap .dt-btn-copy svg {
color: #2a69de;
@@ -18726,7 +18726,7 @@ input[type=checkbox]:checked + .custom-checkbox {
transition: background 0.2s ease;
}
.detail-wrap .dt-btn-gray:hover {
background: rgb(170.6589473684, 183.4378947368, 193.6610526316);
background: rgb(66.9250773994%, 71.9364293086%, 75.9455108359%);
}
.detail-wrap .dt-btn-red {
width: 156px;
@@ -18744,7 +18744,7 @@ input[type=checkbox]:checked + .custom-checkbox {
transition: background 0.2s ease;
}
.detail-wrap .dt-btn-red:hover {
background: rgb(255, 70.0915337423, 64.24);
background: rgb(100%, 27.4868759774%, 25.1921568627%);
}
.detail-wrap .dt-btn-blue {
width: 156px;
@@ -20219,7 +20219,7 @@ input[type=checkbox]:checked + .custom-checkbox {
}
}
.btn-inquiry-list:hover {
background: rgb(215.8869565217, 218.8956521739, 224.9130434783);
background: rgb(84.6615515772%, 85.8414322251%, 88.2011935209%);
}
.btn-inquiry-list:active {
transform: scale(0.98);
@@ -20252,7 +20252,7 @@ input[type=checkbox]:checked + .custom-checkbox {
}
}
.btn-inquiry-edit:hover {
background: rgb(0, 69.35, 171);
background: rgb(0%, 27.1960784314%, 67.0588235294%);
}
.btn-inquiry-edit:active {
transform: scale(0.98);
@@ -20285,7 +20285,7 @@ input[type=checkbox]:checked + .custom-checkbox {
}
}
.btn-inquiry-delete:hover {
background: rgb(217.9841772152, 41.3658227848, 58.2873417722);
background: rgb(85.4839910648%, 16.2218912882%, 22.8577810871%);
}
.btn-inquiry-delete:active {
transform: scale(0.98);
@@ -20357,7 +20357,7 @@ input[type=checkbox]:checked + .custom-checkbox {
margin-left: 8px;
}
.file-upload-inline .btn-remove-file-inline:hover {
background: rgb(209.4151898734, 36.2848101266, 52.8721518987);
background: rgb(82.1236038719%, 14.2293373045%, 20.7341772152%);
}
.file-upload-inline .btn-remove-file-inline svg {
width: 12px;
@@ -20389,7 +20389,7 @@ input[type=checkbox]:checked + .custom-checkbox {
}
}
.file-upload-inline .btn-file-attach:hover {
background: rgb(37.3117757009, 153.9304672897, 235.0082242991);
background: rgb(14.6320689023%, 60.3648891332%, 92.1600879604%);
}
.file-upload-inline .btn-file-attach svg {
width: 22px;
@@ -20449,7 +20449,7 @@ input[type=checkbox]:checked + .custom-checkbox {
border: none;
}
.inquiry-form-container .form-actions .btn-secondary:hover {
background: rgb(215.8869565217, 218.8956521739, 224.9130434783);
background: rgb(84.6615515772%, 85.8414322251%, 88.2011935209%);
}
.inquiry-form-container .form-actions .btn-primary {
background: #0049b4;
@@ -20457,7 +20457,7 @@ input[type=checkbox]:checked + .custom-checkbox {
border: none;
}
.inquiry-form-container .form-actions .btn-primary:hover {
background: rgb(0, 69.35, 171);
background: rgb(0%, 27.1960784314%, 67.0588235294%);
}
.inquiry-form-container .file-upload-inline .file-input-display {
min-height: 50px;
@@ -21246,7 +21246,7 @@ input[type=checkbox]:checked + .custom-checkbox {
cursor: pointer;
}
.djb-board-write-container .form-actions .btn-submit:hover {
background-color: rgb(33.643902439, 97.8731707317, 217.156097561);
background-color: rgb(13.193687231%, 38.3816355811%, 85.1592539455%);
}
@media (max-width: 768px) {
.djb-board-write-container .form-actions .btn-submit {
@@ -21732,7 +21732,7 @@ input[type=checkbox]:checked + .custom-checkbox {
transition: all 0.3s ease;
}
.org-file-remove:hover {
background: rgb(255, 70.8, 70.8);
background: rgb(100%, 27.7647058824%, 27.7647058824%);
}
.org-file-notice {
@@ -22744,7 +22744,7 @@ input[type=checkbox]:checked + .custom-checkbox {
}
.status-indicator.status-active {
background-color: rgba(107, 207, 127, 0.1);
color: rgb(83.2897959184, 199.3102040816, 106.493877551);
color: rgb(32.662665066%, 78.1608643457%, 41.762304922%);
}
.status-indicator.status-active .status-dot {
background-color: #6BCF7F;
@@ -27382,6 +27382,26 @@ input[type=checkbox]:checked + .custom-checkbox {
font-size: 12px;
text-align: center;
}
.api-status .as-unlisted-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
border: 1px solid var(--as-border);
border-left: 4px solid var(--as-muted);
border-radius: var(--as-radius);
background: #f6f8fa;
font-size: 13px;
color: var(--as-text-3);
}
.api-status .as-unlisted-banner b {
color: var(--as-text);
}
.api-status .as-unlisted-banner .as-unlisted-icon {
flex: 0 0 auto;
color: var(--as-muted);
font-size: 15px;
}
.api-status .as-pager {
display: flex;
justify-content: center;
src/main/resources/static/css/main.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/js/djb/api-status-issues.js
+16 -9
View File
@@ -16,6 +16,8 @@
const API_LIST_LIMIT = 50; // 라이브서치 결과 표시 상한
const today = page.getAttribute('data-today') || '';
// My APIs 등에서 넘어올 때 표시용 API 명 (필터 자체는 apiId 로 동작)
const urlApiName = new URLSearchParams(window.location.search).get('apiName') || '';
const minDate = page.getAttribute('data-min-date') || '';
// 진입 시 날짜 미지정 = 조회 기간 전체
@@ -39,6 +41,8 @@
const apiInput = document.getElementById('filterApiInput');
const apiClearBtn = document.getElementById('filterApiClear');
const apiListEl = document.getElementById('filterApiList');
const unlistedBanner = document.getElementById('unlistedApiBanner');
const unlistedName = document.getElementById('unlistedApiName');
let apiOptions = [];
@@ -271,13 +275,8 @@
.then(function (apis) {
apiOptions = (apis || []).filter(function (api) { return api.apiId; });
apiOptions.forEach(function (api) { linkableApiIds.add(api.apiId); });
const selected = findApiOption(state.apiId);
if (state.apiId && !selected) {
// 조회 가능 목록에 없는 API 가 URL 로 들어온 경우 필터 해제
state.apiId = '';
syncBrowserUrl();
}
// URL 로 들어온 apiId 는 옵션(오픈 API 목록)에 없어도 필터를 유지한다.
// My APIs(기관 계약 API)처럼 오픈 API 목록 밖의 API 로도 진입하기 때문.
renderApiInput();
})
.catch(function () { /* 옵션 조회 실패 시 전체 API 기준으로 동작 */ });
@@ -299,8 +298,16 @@
function renderApiInput() {
const selected = findApiOption(state.apiId);
apiInput.value = optionLabel(selected);
apiCombo.classList.toggle('has-value', !!selected);
// 옵션에 없는 API(오픈 API 목록 밖)는 전달받은 API 명 또는 ID 로 표시해 필터 상태를 보이게 한다
apiInput.value = selected ? optionLabel(selected) : (state.apiId ? (urlApiName || state.apiId) : '');
apiCombo.classList.toggle('has-value', !!state.apiId);
// 포탈 미게시 API 필터 안내 배너 (옵션 목록을 받은 뒤에만 판단)
const unlisted = !!state.apiId && apiOptions.length > 0 && !selected;
if (unlisted) {
unlistedName.textContent = urlApiName || state.apiId;
}
unlistedBanner.style.display = unlisted ? '' : 'none';
}
function closeApiList() {
src/main/resources/static/js/djb/api-status.js
+6 -2
View File
@@ -81,6 +81,7 @@
const query = [];
if (params.date) query.push('date=' + encodeURIComponent(params.date));
if (params.apiId) query.push('apiId=' + encodeURIComponent(params.apiId));
if (params.apiName) query.push('apiName=' + encodeURIComponent(params.apiName));
return base + '/issues' + (query.length ? '?' + query.join('&') : '');
}
@@ -206,7 +207,7 @@
document.getElementById('myApisCount').textContent = apis.length + '건';
document.getElementById('myApisBody').innerHTML = apis.map(function (api) {
const cls = badgeClass[api.currentStatus] || 'is-muted';
return '<tr data-api-id="' + escapeHtml(api.apiId) + '">'
return '<tr data-api-id="' + escapeHtml(api.apiId) + '" data-api-name="' + escapeHtml(api.apiName) + '">'
+ '<td><span class="as-api-name">' + escapeHtml(api.apiName) + '</span></td>'
+ '<td><span class="as-badge ' + cls + '">' + escapeHtml(api.currentStatusLabel) + '</span></td>'
+ '<td class="as-num">' + formatPercent(api.uptime90d) + '%</td>'
@@ -216,7 +217,10 @@
card.style.display = '';
card.querySelectorAll('tbody tr').forEach(function (row) {
row.addEventListener('click', function () {
window.location.href = issuesHref({ apiId: row.getAttribute('data-api-id') });
window.location.href = issuesHref({
apiId: row.getAttribute('data-api-id'),
apiName: row.getAttribute('data-api-name')
});
});
});
}
src/main/resources/static/sass/pages/_api-status.scss
+22
View File
@@ -732,6 +732,28 @@
}
}
// 포탈에 게시되지 않은 API 필터 안내
.as-unlisted-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
border: 1px solid var(--as-border);
border-left: 4px solid var(--as-muted);
border-radius: var(--as-radius);
background: #f6f8fa;
font-size: 13px;
color: var(--as-text-3);
b { color: var(--as-text); }
.as-unlisted-icon {
flex: 0 0 auto;
color: var(--as-muted);
font-size: 15px;
}
}
.as-pager {
display: flex;
justify-content: center;
src/main/resources/templates/views/djb/apistatus/issues.html
+7
View File
@@ -95,6 +95,13 @@
</div>
</div>
<!-- 필터 중인 API 가 포탈에 게시되지 않은 경우 안내 -->
<div class="as-unlisted-banner" id="unlistedApiBanner" style="display:none">
<span class="as-unlisted-icon" aria-hidden="true">ⓘ</span>
<span><b id="unlistedApiName"></b> 은(는) 포탈에 게시되지 않은 API 입니다.
이슈 이력은 조회되지만 API 상세 정보는 제공되지 않습니다.</span>
</div>
<!-- 이슈 목록 -->
<div class="as-issue-list" id="issueList"></div>
<div class="as-pager" id="issuePager"></div>