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

인증키 수정 화면 스타일 적용

Browse Source
This commit is contained in:
현성필
2025-12-01 14:20:26 +09:00
parent 45c8c8961f
commit 00c014c73d
4 changed files with 587 additions and 637 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/templates/views/apps/mypage/apiKeyModifyStep3.html
+62 -90
View File
@@ -1,86 +1,116 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
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>
<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">
<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="progress-steps">
<div class="progress-step completed">
<div class="step-number">✓</div>
<div class="step-label">기본 정보</div>
<!-- Step 1: 앱 정보입력 -->
<div class="progress-step-item">
<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 class="progress-line filled"></div>
<div class="progress-step completed">
<div class="step-number">✓</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">
<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>
<div class="progress-line filled"></div>
<div class="progress-step active completed">
<div class="step-number">✓</div>
<div class="step-label">완료</div>
<!-- Dots between Step 2 and 3 -->
<div class="step-dots">
<span></span><span></span><span></span>
</div>
<!-- Step 3: 앱 수정 완료 (Active) -->
<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>
<!-- Success Result -->
<div class="register-result success" th:if="${modificationComplete}">
<!-- Success Icon Animation -->
<div class="result-icon-wrapper">
<div class="result-icon success-icon">
<svg class="checkmark" viewBox="0 0 52 52">
<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>
<img th:src="@{/img/img_app_complete.png}">
</div>
</div>
<!-- Success Message -->
<div class="result-header">
<h1>API Key 수정 요청 완료!</h1>
<h1>앱 수정 요청이 완료되었습니다.</h1>
<p class="result-description">
API Key 수정 요청이 성공적으로 접수되었습니다. 관리자 승인 후 변경 사항이 적용됩니다.
담당자 승인 후 변경 사항이 적용됩니다. [앱 정보]화면에서 수정 내역을 확인할 수 있습니다.
</p>
</div>
<!-- Result Content -->
<!-- API Key Display -->
<div class="result-content">
<!-- Action Buttons -->
<div class="result-actions">
<a th:href="@{/myapikey}" class="btn btn-secondary">
<span class="icon">📋</span>
API Key 목록으로
</a>
<a th:href="@{/myapikey/api_key_request/history}" class="btn btn-primary">
<span class="icon">📄</span>
요청 내역 확인
<a href="/myapikey" class="btn btn-primary">
인증키 관리
</a>
</div>
</div>
</div>
<!-- Error Result (if needed) -->
<div class="register-result error" th:unless="${modificationComplete}">
<div class="register-result error" th:unless="${modificationComplete}" style="display: none;">
<div class="result-icon-wrapper">
<div class="result-icon error-icon">
<span>❌</span>
</div>
</div>
<div class="result-header">
<h1>잘못된 접근입니다</h1>
<h1>앱 수정 실패</h1>
<p class="result-description">
수정 프로세스를 완료하지 않았거나 잘못된 경로로 접근하셨습니다.
앱 수정 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.
</p>
</div>
<div class="result-actions">
<a th:href="@{/myapikey}" class="btn btn-primary">
목록으로 돌아가기
<a href="/myapikey" class="btn btn-secondary">
다시 시도
</a>
<a href="/myapikey" class="btn btn-primary">
목록으로
</a>
</div>
</div>
@@ -89,64 +119,6 @@
</th:block>
<th:block layout:fragment="contentScript">
<script th:inline="javascript">
document.addEventListener('DOMContentLoaded', function() {
// Success animation
setTimeout(function() {
const successIcon = document.querySelector('.success-icon');
if (successIcon) {
successIcon.classList.add('animate');
}
}, 100);
});
</script>
<style>
/* Success checkmark animation */
.checkmark {
width: 52px;
height: 52px;
border-radius: 50%;
display: block;
stroke-width: 2;
stroke: #6BCF7F;
stroke-miterlimit: 10;
animation: rotate 1s ease-in-out;
}
.checkmark-circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: #6BCF7F;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark-check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</th:block>
</body>
</html>