API 신청 완료페이지 스타일 적용
This commit is contained in:
현성필
@@ -6,6 +6,7 @@
|
|||||||
<body>
|
<body>
|
||||||
<section layout:fragment="title">
|
<section layout:fragment="title">
|
||||||
<div class="page-title-banner">
|
<div class="page-title-banner">
|
||||||
|
<img th:src="@{/img/img_title_bg.png}" class="title-image">
|
||||||
<h1>앱관리</h1>
|
<h1>앱관리</h1>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -1,148 +1,175 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
|
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
|
||||||
xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
|
xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
|
||||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_base_layout}">
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_title_layout}">
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<section layout:fragment="title">
|
||||||
|
<div class="page-title-banner">
|
||||||
|
<img th:src="@{/img/img_title_bg.png}" class="title-image">
|
||||||
|
<h1>앱관리</h1>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
<th:block layout:fragment="contentFragment">
|
<th:block layout:fragment="contentFragment">
|
||||||
|
<section class="apikey-register-container">
|
||||||
|
|
||||||
<!-- Progress Indicator -->
|
<!-- Title Bar -->
|
||||||
<div class="register-progress">
|
<div class="register-title-bar">
|
||||||
<div class="progress-steps">
|
<h2 class="register-title">앱 생성</h2>
|
||||||
<div class="progress-step completed">
|
<span class="register-subtitle">API를 이용하여 서비스할 앱 정보를 등록해주세요.</span>
|
||||||
<div class="step-number">✓</div>
|
</div>
|
||||||
<div class="step-label">기본 정보</div>
|
|
||||||
</div>
|
<!-- Progress Indicator -->
|
||||||
<div class="progress-line filled"></div>
|
<div class="register-progress">
|
||||||
<div class="progress-step active">
|
<div class="progress-steps">
|
||||||
<div class="step-number">2</div>
|
<!-- Step 1: 앱 정보입력 (Active) -->
|
||||||
<div class="step-label">API 선택</div>
|
<div class="progress-step-item">
|
||||||
</div>
|
<div class="step-icon-wrapper">
|
||||||
<div class="progress-line"></div>
|
<div class="step-icon">
|
||||||
<div class="progress-step">
|
<img th:src="@{/img/apikey_step1.png}" alt="앱 정보입력" width="36" height="36">
|
||||||
<div class="step-number">3</div>
|
</div>
|
||||||
<div class="step-label">완료</div>
|
</div>
|
||||||
|
<div class="step-label">앱 정보입력</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Dots between Step 1 and 2 -->
|
||||||
|
<div class="step-dots">
|
||||||
|
<span></span><span></span><span></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 2: API 선택 -->
|
||||||
|
<div class="progress-step-item active">
|
||||||
|
<div class="step-icon-wrapper">
|
||||||
|
<div class="step-icon">
|
||||||
|
<img th:src="@{/img/apikey_step2.png}" alt="API 선택" width="36" height="36">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="step-label">API 선택</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Dots between Step 2 and 3 -->
|
||||||
|
<div class="step-dots">
|
||||||
|
<span></span><span></span><span></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 3: 앱 생성 완료 -->
|
||||||
|
<div class="progress-step-item">
|
||||||
|
<div class="step-icon-wrapper">
|
||||||
|
<div class="step-icon">
|
||||||
|
<img th:src="@{/img/apikey_step3.png}" alt="앱 생성 완료" width="36" height="36">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="step-label">앱 생성 완료</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Header -->
|
<!-- Form Content with Sidebar Layout -->
|
||||||
<div class="register-header">
|
<div class="register-form-container with-sidebar">
|
||||||
<h1>API Key 생성</h1>
|
|
||||||
<h2>Step 2: API 선택</h2>
|
|
||||||
<p class="header-description">
|
|
||||||
사용할 API를 선택해주세요. 나중에 추가하거나 변경할 수 있습니다.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Main Container with Sidebar Layout -->
|
<!-- Sidebar Navigation -->
|
||||||
<section class="apikey-register-container with-sidebar">
|
<aside class="apikey-register-sidebar" id="apiSidebar">
|
||||||
|
<nav class="apikey-sidebar-nav">
|
||||||
|
<!-- Sidebar Title -->
|
||||||
|
<div class="sidebar-title">API 서비스 목록</div>
|
||||||
|
|
||||||
<!-- Sidebar Navigation -->
|
<!-- All APIs -->
|
||||||
<aside class="apikey-register-sidebar" id="apiSidebar">
|
<div class="menu-section">
|
||||||
<nav class="apikey-sidebar-nav">
|
<div class="menu-title active" data-group="">
|
||||||
<!-- All APIs -->
|
<span class="menu-text">전체</span>
|
||||||
<div class="menu-section">
|
<span class="api-count"></span>
|
||||||
<div class="menu-title active" data-group="">
|
</div>
|
||||||
전체
|
|
||||||
<span class="api-count" th:text="${totalApiCount ?: 0}">0</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Service Categories -->
|
|
||||||
<div class="menu-section" th:each="service : ${apiServices}">
|
|
||||||
<div class="menu-title"
|
|
||||||
th:data-group="${service.id}">
|
|
||||||
[[${service.groupName}]]
|
|
||||||
<span class="api-count" th:text="${service.apiGroupApiList.size()}">0</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<!-- Mobile Menu Toggle -->
|
|
||||||
<button class="apikey-mobile-toggle" id="mobileToggle" aria-label="메뉴 열기">
|
|
||||||
☰
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Mobile Overlay -->
|
|
||||||
<div class="apikey-mobile-overlay" id="mobileOverlay"></div>
|
|
||||||
|
|
||||||
<!-- Main Content -->
|
|
||||||
<main class="apikey-register-content">
|
|
||||||
<form id="registerStep2Form" method="post" th:action="@{/myapikey/register/step2}" class="register-form">
|
|
||||||
|
|
||||||
<!-- Search Box with Select All -->
|
|
||||||
<div class="api-filter-header">
|
|
||||||
<div class="select-all-wrapper" id="selectAllWrapper" style="display: none;">
|
|
||||||
<label class="select-all-label">
|
|
||||||
<input type="checkbox" id="selectAllCheckbox" class="select-all-checkbox">
|
|
||||||
<span id="selectAllText">전체 선택</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="api-search-box">
|
|
||||||
<input type="text"
|
|
||||||
id="apiSearch"
|
|
||||||
class="search-input"
|
|
||||||
placeholder="API 검색...">
|
|
||||||
<span class="search-icon">🔍</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Result Count -->
|
|
||||||
<div class="api-result-count">
|
|
||||||
총 <strong id="visibleCount">0</strong>건
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- API Cards Grid -->
|
|
||||||
<div class="api-selection-card-grid" id="apiCardGrid">
|
|
||||||
<!-- Loading state -->
|
|
||||||
<div class="loading-state" id="loadingState" style="grid-column: 1 / -1;">
|
|
||||||
<div class="loading-spinner"></div>
|
|
||||||
<p>API 목록을 불러오는 중...</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Empty state (initially hidden) -->
|
<!-- Service Categories -->
|
||||||
<div class="empty-api-state" id="emptyState" style="display: none; grid-column: 1 / -1;">
|
<div class="menu-section" th:each="service : ${apiServices}">
|
||||||
<div class="empty-icon">📦</div>
|
<div class="menu-title"
|
||||||
<h3>API를 선택해주세요</h3>
|
th:data-group="${service.id}">
|
||||||
<p>왼쪽 메뉴에서 서비스를 선택하면 해당 API 목록이 표시됩니다.</p>
|
<span class="menu-text" th:text="${service.groupName}">서비스명</span>
|
||||||
|
<span class="api-count"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Mobile Menu Toggle -->
|
||||||
|
<button class="apikey-mobile-toggle" id="mobileToggle" aria-label="메뉴 열기">
|
||||||
|
☰
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Mobile Overlay -->
|
||||||
|
<div class="apikey-mobile-overlay" id="mobileOverlay"></div>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="apikey-register-content">
|
||||||
|
<form id="registerStep2Form" method="post" th:action="@{/myapikey/register/step2}" class="register-form">
|
||||||
|
|
||||||
|
<!-- Search Box with Select All -->
|
||||||
|
<div class="api-filter-header">
|
||||||
|
<div class="select-all-wrapper" id="selectAllWrapper" style="display: none;">
|
||||||
|
<label class="select-all-label">
|
||||||
|
<input type="checkbox" id="selectAllCheckbox" class="select-all-checkbox visually-hidden">
|
||||||
|
<span class="custom-checkbox"></span>
|
||||||
|
<span id="selectAllText">전체 선택</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="api-search-box">
|
||||||
|
<input type="text"
|
||||||
|
id="apiSearch"
|
||||||
|
class="search-input"
|
||||||
|
placeholder="API 검색...">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M9.23047 0C14.3285 0 18.4618 4.0539 18.4619 9.05469C18.4619 11.1083 17.7634 13.0014 16.5889 14.5205C16.5913 14.5229 16.5942 14.5249 16.5967 14.5273L19.5498 17.4238C20.1502 18.0131 20.1501 18.9683 19.5498 19.5576C18.949 20.147 17.9748 20.147 17.374 19.5576L14.4209 16.6621C14.3966 16.6383 14.3749 16.6119 14.3525 16.5869C12.8868 17.5478 11.1257 18.1094 9.23047 18.1094C4.13258 18.1092 0 14.0554 0 9.05469C0.000110268 4.05404 4.13265 0.000222701 9.23047 0ZM9.23047 3.01855C5.83201 3.01878 3.07726 5.721 3.07715 9.05469C3.07715 12.3885 5.83194 15.0916 9.23047 15.0918C12.6292 15.0918 15.3848 12.3886 15.3848 9.05469C15.3847 5.72086 12.6291 3.01855 9.23047 3.01855Z" fill="#515961"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- API cards will be dynamically loaded here -->
|
<!-- API Cards Grid -->
|
||||||
|
<div class="api-selection-card-grid" id="apiCardGrid">
|
||||||
|
<!-- Loading state -->
|
||||||
|
<div class="loading-state" id="loadingState" style="grid-column: 1 / -1;">
|
||||||
|
<div class="loading-spinner"></div>
|
||||||
|
<p>API 목록을 불러오는 중...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
<!-- Empty state (initially hidden) -->
|
||||||
|
<div class="empty-api-state" id="emptyState" style="display: none; grid-column: 1 / -1;">
|
||||||
|
<div class="empty-icon">📦</div>
|
||||||
|
<h3>API를 선택해주세요</h3>
|
||||||
|
<p>왼쪽 메뉴에서 서비스를 선택하면 해당 API 목록이 표시됩니다.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Form Actions -->
|
<!-- API cards will be dynamically loaded here -->
|
||||||
<div class="form-actions">
|
|
||||||
<button type="button" id="btnPrevStep" class="btn btn-secondary">
|
|
||||||
<span class="icon">←</span>
|
|
||||||
이전 단계
|
|
||||||
</button>
|
|
||||||
<button type="submit" class="btn btn-primary">
|
|
||||||
저장
|
|
||||||
<span class="icon">→</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</form>
|
</div>
|
||||||
</main>
|
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Form Actions -->
|
||||||
|
<div class="form-actions">
|
||||||
|
<button type="button" id="btnPrevStep" class="btn-submit btn-secondary">
|
||||||
|
이전
|
||||||
|
</button>
|
||||||
|
<button type="submit" form="registerStep2Form" class="btn-submit btn-primary">
|
||||||
|
저장
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
<!-- Floating Cart Button (Figma Design) -->
|
||||||
<!-- Floating Cart Button -->
|
|
||||||
<button type="button" class="floating-cart-btn" id="floatingCartBtn" style="display: none;">
|
<button type="button" class="floating-cart-btn" id="floatingCartBtn" style="display: none;">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
<span class="cart-label">선택된 API</span>
|
||||||
<circle cx="9" cy="21" r="1"></circle>
|
<span class="cart-badge" id="cartBadge">
|
||||||
<circle cx="20" cy="21" r="1"></circle>
|
<span class="cart-count">0</span>
|
||||||
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
<span class="cart-unit">개</span>
|
||||||
</svg>
|
</span>
|
||||||
<span class="cart-text">선택된 API:</span>
|
|
||||||
<span class="cart-badge" id="cartBadge">0</span>
|
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Selected APIs Modal - Uses base modal component -->
|
<!-- Selected APIs Modal - Uses base modal component -->
|
||||||
<div class="selected-apis-modal" id="selectedApisModal" style="display: none;">
|
<div class="modal" id="selectedApisModal" style="display: none;">
|
||||||
<div class="modal-backdrop" id="modalOverlay"></div>
|
<div class="modal-backdrop" id="modalOverlay"></div>
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
@@ -176,7 +203,6 @@
|
|||||||
const mobileToggle = document.getElementById('mobileToggle');
|
const mobileToggle = document.getElementById('mobileToggle');
|
||||||
const mobileOverlay = document.getElementById('mobileOverlay');
|
const mobileOverlay = document.getElementById('mobileOverlay');
|
||||||
const menuTitles = document.querySelectorAll('.menu-title');
|
const menuTitles = document.querySelectorAll('.menu-title');
|
||||||
const visibleCount = document.getElementById('visibleCount');
|
|
||||||
const apiCardGrid = document.getElementById('apiCardGrid');
|
const apiCardGrid = document.getElementById('apiCardGrid');
|
||||||
const loadingState = document.getElementById('loadingState');
|
const loadingState = document.getElementById('loadingState');
|
||||||
const emptyState = document.getElementById('emptyState');
|
const emptyState = document.getElementById('emptyState');
|
||||||
@@ -209,29 +235,24 @@
|
|||||||
url += '?groupIds=' + encodeURIComponent(groupId);
|
url += '?groupIds=' + encodeURIComponent(groupId);
|
||||||
}
|
}
|
||||||
|
|
||||||
fetch(url)
|
fetch(url).then(response => response.json()).then(apis => {
|
||||||
.then(response => response.json())
|
allApis = apis;
|
||||||
.then(apis => {
|
loadingState.style.display = 'none';
|
||||||
allApis = apis;
|
|
||||||
loadingState.style.display = 'none';
|
|
||||||
|
|
||||||
if (apis.length === 0) {
|
if (apis.length === 0) {
|
||||||
emptyState.style.display = 'block';
|
|
||||||
visibleCount.textContent = '0';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
renderApiCards(apis);
|
|
||||||
visibleCount.textContent = apis.length;
|
|
||||||
updateSelectAllUI();
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.error('Failed to load APIs:', error);
|
|
||||||
loadingState.style.display = 'none';
|
|
||||||
emptyState.querySelector('h3').textContent = 'API 로드 실패';
|
|
||||||
emptyState.querySelector('p').textContent = '다시 시도해주세요.';
|
|
||||||
emptyState.style.display = 'block';
|
emptyState.style.display = 'block';
|
||||||
});
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderApiCards(apis);
|
||||||
|
updateSelectAllUI();
|
||||||
|
}).catch(error => {
|
||||||
|
console.error('Failed to load APIs:', error);
|
||||||
|
loadingState.style.display = 'none';
|
||||||
|
emptyState.querySelector('h3').textContent = 'API 로드 실패';
|
||||||
|
emptyState.querySelector('p').textContent = '다시 시도해주세요.';
|
||||||
|
emptyState.style.display = 'block';
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Render API cards
|
// Render API cards
|
||||||
@@ -263,29 +284,32 @@
|
|||||||
card.classList.add('selected');
|
card.classList.add('selected');
|
||||||
}
|
}
|
||||||
|
|
||||||
card.innerHTML = `
|
const mainIconHtml = api.mainIcon
|
||||||
<div class="checkbox-wrapper">
|
? `<img src="${api.mainIcon}" alt="${api.apiName}" onerror="this.style.display='none'; this.nextElementSibling.style.display='block'"><i class="fas fa-cube" style="display:none"></i>`
|
||||||
<input type="checkbox"
|
: `<i class="fas fa-cube"></i>`;
|
||||||
name="selectedApis"
|
|
||||||
value="${api.apiId}"
|
|
||||||
id="api-${api.apiId}"
|
|
||||||
class="api-checkbox"
|
|
||||||
${isSelected ? 'checked' : ''}>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label class="api-card-content" for="api-${api.apiId}">
|
card.innerHTML = `
|
||||||
|
<div class="api-card-content">
|
||||||
<div class="api-card-header">
|
<div class="api-card-header">
|
||||||
<span class="api-card-badge">${api.service || '카테고리'}</span>
|
<span class="api-card-category">${api.service || '카테고리'}</span>
|
||||||
<span class="api-method">${api.apiMethod || 'GET'}</span>
|
<div class="checkbox-wrapper">
|
||||||
|
<input type="checkbox"
|
||||||
|
name="selectedApis"
|
||||||
|
value="${api.apiId}"
|
||||||
|
id="api-${api.apiId}"
|
||||||
|
class="api-checkbox visually-hidden"
|
||||||
|
${isSelected ? 'checked' : ''}>
|
||||||
|
<span class="custom-checkbox"></span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3 class="api-name">${api.apiName || 'API 이름'}</h3>
|
<h3 class="api-name">${api.apiName || 'API 이름'}</h3>
|
||||||
<p class="api-description">${api.apiSimpleDescription || 'API 설명이 없습니다.'}</p>
|
<p class="api-description">${api.apiSimpleDescription || 'API 설명이 없습니다.'}</p>
|
||||||
|
|
||||||
<div class="api-endpoint">
|
<div class="api-card-icon">
|
||||||
<code>${api.apiUrl || '/api/v1/example'}</code>
|
${mainIconHtml}
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
return card;
|
return card;
|
||||||
@@ -305,7 +329,8 @@
|
|||||||
|
|
||||||
apiCards.forEach(card => {
|
apiCards.forEach(card => {
|
||||||
card.addEventListener('click', function(e) {
|
card.addEventListener('click', function(e) {
|
||||||
if (e.target.classList.contains('api-checkbox') || e.target.tagName === 'LABEL') {
|
// Prevent double toggle if clicking directly on checkbox
|
||||||
|
if (e.target.classList.contains('api-checkbox')) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const checkbox = card.querySelector('.api-checkbox');
|
const checkbox = card.querySelector('.api-checkbox');
|
||||||
@@ -334,11 +359,11 @@
|
|||||||
function updateSelectedCount() {
|
function updateSelectedCount() {
|
||||||
// Update floating cart button
|
// Update floating cart button
|
||||||
const floatingCartBtn = document.getElementById('floatingCartBtn');
|
const floatingCartBtn = document.getElementById('floatingCartBtn');
|
||||||
const cartBadge = document.getElementById('cartBadge');
|
const cartCount = document.querySelector('.cart-count');
|
||||||
|
|
||||||
if (selectedApis.size > 0) {
|
if (selectedApis.size > 0) {
|
||||||
floatingCartBtn.style.display = 'flex';
|
floatingCartBtn.style.display = 'flex';
|
||||||
cartBadge.textContent = selectedApis.size;
|
cartCount.textContent = selectedApis.size;
|
||||||
} else {
|
} else {
|
||||||
floatingCartBtn.style.display = 'none';
|
floatingCartBtn.style.display = 'none';
|
||||||
}
|
}
|
||||||
@@ -441,7 +466,6 @@
|
|||||||
if (searchInput) {
|
if (searchInput) {
|
||||||
searchInput.addEventListener('input', function() {
|
searchInput.addEventListener('input', function() {
|
||||||
const searchTerm = this.value.toLowerCase();
|
const searchTerm = this.value.toLowerCase();
|
||||||
let visibleCountNum = 0;
|
|
||||||
|
|
||||||
const apiCards = document.querySelectorAll('.api-selection-card');
|
const apiCards = document.querySelectorAll('.api-selection-card');
|
||||||
apiCards.forEach(function(card) {
|
apiCards.forEach(function(card) {
|
||||||
@@ -453,14 +477,11 @@
|
|||||||
|
|
||||||
if (matchesSearch) {
|
if (matchesSearch) {
|
||||||
card.style.display = '';
|
card.style.display = '';
|
||||||
visibleCountNum++;
|
|
||||||
} else {
|
} else {
|
||||||
card.style.display = 'none';
|
card.style.display = 'none';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
visibleCount.textContent = visibleCountNum;
|
|
||||||
|
|
||||||
// Update select all checkbox state after search
|
// Update select all checkbox state after search
|
||||||
updateSelectAllCheckboxState();
|
updateSelectAllCheckboxState();
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,50 +1,82 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
|
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
|
||||||
xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
|
xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
|
||||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_base_layout}">
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_title_layout}">
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<section layout:fragment="title">
|
||||||
|
<div class="page-title-banner">
|
||||||
|
<img th:src="@{/img/img_title_bg.png}" class="title-image">
|
||||||
|
<h1>앱관리</h1>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
<th:block layout:fragment="contentFragment">
|
<th:block layout:fragment="contentFragment">
|
||||||
<section class="apikey-register-container">
|
<section class="apikey-register-container">
|
||||||
|
|
||||||
<!-- Progress Indicator -->
|
<!-- Title Bar -->
|
||||||
|
<div class="register-title-bar">
|
||||||
|
<h2 class="register-title">앱 생성</h2>
|
||||||
|
<span class="register-subtitle">API를 이용하여 서비스할 앱 정보를 등록해주세요.</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="register-progress">
|
<div class="register-progress">
|
||||||
<div class="progress-steps">
|
<div class="progress-steps">
|
||||||
<div class="progress-step completed">
|
<!-- Step 1: 앱 정보입력 (Active) -->
|
||||||
<div class="step-number">✓</div>
|
<div class="progress-step-item">
|
||||||
<div class="step-label">기본 정보</div>
|
<div class="step-icon-wrapper">
|
||||||
|
<div class="step-icon">
|
||||||
|
<img th:src="@{/img/apikey_step1.png}" alt="앱 정보입력" width="36" height="36">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="step-label">앱 정보입력</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-line filled"></div>
|
|
||||||
<div class="progress-step completed">
|
<!-- Dots between Step 1 and 2 -->
|
||||||
<div class="step-number">✓</div>
|
<div class="step-dots">
|
||||||
|
<span></span><span></span><span></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 2: API 선택 -->
|
||||||
|
<div class="progress-step-item">
|
||||||
|
<div class="step-icon-wrapper">
|
||||||
|
<div class="step-icon">
|
||||||
|
<img th:src="@{/img/apikey_step2.png}" alt="API 선택" width="36" height="36">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="step-label">API 선택</div>
|
<div class="step-label">API 선택</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-line filled"></div>
|
|
||||||
<div class="progress-step active completed">
|
<!-- Dots between Step 2 and 3 -->
|
||||||
<div class="step-number">✓</div>
|
<div class="step-dots">
|
||||||
<div class="step-label">완료</div>
|
<span></span><span></span><span></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 3: 앱 생성 완료 -->
|
||||||
|
<div class="progress-step-item active">
|
||||||
|
<div class="step-icon-wrapper">
|
||||||
|
<div class="step-icon">
|
||||||
|
<img th:src="@{/img/apikey_step3.png}" alt="앱 생성 완료" width="36" height="36">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="step-label">앱 생성 완료</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Success Result -->
|
<!-- Success Result -->
|
||||||
<div class="register-result success" th:if="${registrationComplete}">
|
<div class="register-result success" th:if="${registrationComplete}">
|
||||||
|
|
||||||
<!-- Success Icon Animation -->
|
<!-- Success Icon Animation -->
|
||||||
<div class="result-icon-wrapper">
|
<div class="result-icon-wrapper">
|
||||||
<div class="result-icon success-icon">
|
<div class="result-icon success-icon">
|
||||||
<svg class="checkmark" viewBox="0 0 52 52">
|
<img th:src="@{/img/img_app_complete.png}">
|
||||||
<circle class="checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
|
|
||||||
<path class="checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Success Message -->
|
<!-- Success Message -->
|
||||||
<div class="result-header">
|
<div class="result-header">
|
||||||
<h1>API Key 생성 완료!</h1>
|
<h1>앱 생성 요청이 완료되었습니다.</h1>
|
||||||
<p class="result-description">
|
<p class="result-description">
|
||||||
API Key가 성공적으로 생성되었습니다. 아래 정보를 안전한 곳에 보관해주세요.
|
담당자 앱 승인 후 [앱 정보]화면에서 Client ID와 Client Secret을 확인 할 수 있습니다.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -53,9 +85,8 @@
|
|||||||
|
|
||||||
<!-- Action Buttons -->
|
<!-- Action Buttons -->
|
||||||
<div class="result-actions">
|
<div class="result-actions">
|
||||||
<a href="/myapikey" class="btn btn-secondary">
|
<a href="/myapikey" class="btn btn-primary">
|
||||||
<span class="icon">📋</span>
|
인증키 관리
|
||||||
API Key 목록으로
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user