djb-eapim/eapim-portal
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity
Files
456b635a325c8f9fbaa02d8438790bba3fe38575
eapim-portal/src/main/resources/templates/views/apps/mypage/apiKeyModifyStep3.html
T
Rinjae 02eb81af67
eapim-portal CI / build (push) Has been cancelled
Details
eapim-portal Test / test (push) Has been cancelled
Details
클라이언트 생성/수정 흐름 및 관련 UI 개선: 
- 클라이언트 등록/수정 URL 구조 리팩토링 (myapikey → clients)
- 로그인 직후 클라이언트 미보유 사용자 대상 추가 안내 팝업
- 클라이언트 Secret 조회 및 관련 2FA 단계 로직 개선
2026-07-29 19:25:10 +09:00

201 lines
10 KiB
HTML
Raw Blame History

<!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/djbank_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">
<div class="signup-guide-v2 figma-register-wrapper">
<div class="service-main app-management-layout">
<!-- Sidebar -->
<th:block th:replace="~{fragment/djbank/service_sidebar :: sidebar('apiKey')}"></th:block>
<!-- Content Area -->
<div class="app-management-content">
<div class="step3-wrap">
<!-- Title -->
<h2 class="s3-title">클라이언트 정보 - 변경</h2>
<!-- Progress Steps Card -->
<div class="s1-progress-card">
<div class="s1-steps">
<!-- Step 1: 클라이언트 정보수정 (form/input icon) -->
<div class="s1-step">
<div class="s1-step-circle">
<!-- 입력폼 아이콘 -->
<svg class="s1-step-svg" width="26" height="26" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" stroke-width="1.8" />
<line x1="7" y1="9" x2="17" y2="9" stroke="currentColor" stroke-width="1.8"
stroke-linecap="round" />
<line x1="7" y1="12" x2="14" y2="12" stroke="currentColor" stroke-width="1.8"
stroke-linecap="round" />
<line x1="7" y1="15" x2="11" y2="15" stroke="currentColor" stroke-width="1.8"
stroke-linecap="round" />
</svg>
</div>
<span class="s1-step-num">1단계</span>
<span class="s1-step-name">클라이언트 정보수정</span>
</div>
<div class="s1-step-line"></div>
<!-- Step 2: API 선택 (chain link icon) -->
<div class="s1-step">
<div class="s1-step-circle">
<!-- 체인링크/API 아이콘 -->
<svg class="s1-step-svg" width="26" height="26" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" stroke="currentColor"
stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke="currentColor"
stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<span class="s1-step-num">2단계</span>
<span class="s1-step-name">API 선택</span>
</div>
<div class="s1-step-line"></div>
<!-- Step 3 Active: 앱 수정 완료 (rocket icon) -->
<div class="s1-step s1-step--active">
<div class="s1-step-circle">
<!-- 로켓 아이콘 -->
<svg class="s1-step-svg" width="26" height="26" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"
stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"
stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
<path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" stroke="currentColor" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" />
<path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" stroke="currentColor" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<span class="s1-step-num">3단계</span>
<span class="s1-step-name">변경 신청 완료</span>
</div>
</div>
</div>
<!-- Success Result Section -->
<div class="s3-result-container" th:if="${modificationComplete}">
<div class="s3-graphic-wrapper">
<!-- Custom premium isometric server check success SVG design -->
<svg class="s3-illustration" viewBox="0 0 500 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="glow-grad" x1="250" y1="40" x2="250" y2="360" gradientUnits="userSpaceOnUse">
<stop stop-color="#3ba4ed" stop-opacity="0.3"/>
<stop offset="1" stop-color="#2a69de" stop-opacity="0"/>
</linearGradient>
<linearGradient id="cube-grad-1" x1="180" y1="120" x2="250" y2="280" gradientUnits="userSpaceOnUse">
<stop stop-color="#50caff" />
<stop offset="1" stop-color="#2a69de" />
</linearGradient>
<linearGradient id="cube-grad-2" x1="250" y1="120" x2="320" y2="280" gradientUnits="userSpaceOnUse">
<stop stop-color="#2a69de" />
<stop offset="1" stop-color="#1b4ab7" />
</linearGradient>
<filter id="drop-shadow" x="100" y="80" width="300" height="260" filterUnits="userSpaceOnUse">
<feDropShadow dx="0" dy="12" stdDeviation="16" flood-color="#2a69de" flood-opacity="0.25"/>
</filter>
</defs>
<!-- Outer Glow -->
<circle cx="250" cy="200" r="150" fill="url(#glow-grad)" />
<!-- Main Isometric Success Concept Group -->
<g filter="url(#drop-shadow)" class="floating-slow">
<!-- Server/App isometric block -->
<!-- Top Face -->
<path d="M250 110L340 155L250 200L160 155Z" fill="#E9F5FF" stroke="#3ba4ed" stroke-width="3" stroke-linejoin="round"/>
<!-- Left Face -->
<path d="M160 155V245L250 290V200Z" fill="url(#cube-grad-1)" stroke="#2a69de" stroke-width="3" stroke-linejoin="round"/>
<!-- Right Face -->
<path d="M250 200V290L340 245V155Z" fill="url(#cube-grad-2)" stroke="#1b4ab7" stroke-width="3" stroke-linejoin="round"/>
<!-- Isometric Grid lines / connection details on Top Face -->
<path d="M205 132.5L250 155L295 132.5" stroke="#3ba4ed" stroke-width="2" stroke-linecap="round"/>
<path d="M250 155V200" stroke="#3ba4ed" stroke-width="2" stroke-linecap="round"/>
<!-- Glowing Code/Key lines on Isometric block -->
<path d="M190 190L220 205" stroke="#ffffff" stroke-width="4" stroke-linecap="round" opacity="0.8"/>
<path d="M190 215L220 230" stroke="#ffffff" stroke-width="4" stroke-linecap="round" opacity="0.8"/>
<path d="M280 205L310 190" stroke="#ffffff" stroke-width="4" stroke-linecap="round" opacity="0.6"/>
<path d="M280 230L310 215" stroke="#ffffff" stroke-width="4" stroke-linecap="round" opacity="0.6"/>
</g>
<!-- Success Badge orbiting the isometric app block -->
<g class="floating-fast">
<!-- Circle badge outer border -->
<circle cx="250" cy="180" r="42" fill="#ffffff" stroke="#10b981" stroke-width="5" filter="drop-shadow(0px 8px 16px rgba(16, 185, 129, 0.2))" />
<circle cx="250" cy="180" r="32" fill="#10b981" />
<!-- Checkmark path -->
<path d="M238 180L246 188L262 172" stroke="#ffffff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
</g>
</svg>
</div>
<div class="s3-message-wrapper">
<h1 class="s3-success-title">클라이언트 변경 신청이 완료되었습니다.</h1>
<p class="s3-success-desc">
<span class="s3-highlight">담당자 승인 후 변경 사항이 적용됩니다.</span>
<br>
<span class="s3-highlight">[앱 정보]</span> 화면에서 수정 내역을 확인할 수 있습니다.
</p>
</div>
<!-- Bottom Actions -->
<div class="s3-actions">
<a href="/clients" class="s3-btn-complete">
완료
</a>
</div>
</div>
<!-- Error Result Section (Fallback) -->
<div class="s3-result-container s3-result-container--error" th:unless="${modificationComplete}">
<div class="s3-graphic-wrapper">
<div class="s3-error-icon">❌</div>
</div>
<div class="s3-message-wrapper">
<h1 class="s3-error-title">앱 수정 실패</h1>
<p class="s3-error-desc">
앱 수정 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.
</p>
</div>
<div class="s3-actions">
<a href="/clients" class="s3-btn-retry">
다시 시도
</a>
<a href="/clients" class="s3-btn-list">
목록으로
</a>
</div>
</div>
</div><!-- /step3-wrap -->
</div>
</div>
</div>
</th:block>
<th:block layout:fragment="contentScript">
</th:block>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink