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

fix: 인증키 관리 & webhook 수정및 반응형 퍼블리싱

Browse Source
This commit is contained in:
hong
2026-07-27 17:32:33 +09:00
parent 19c17f4e91
commit f9b53810d9
9 changed files with 1841 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/main.css
+677 -184
View File
File diff suppressed because it is too large Load Diff
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/css/main.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/css/main.min.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/sass/pages/_webhook.scss
+917 -151
View File
File diff suppressed because it is too large Load Diff
src/main/resources/templates/views/apps/webhook/webhookList.html
+58 -40
View File
@@ -13,8 +13,8 @@
</section> </section>
<th:block layout:fragment="contentFragment"> <th:block layout:fragment="contentFragment">
<div class="signup-guide-v2 figma-register-wrapper"> <div class="signup-guide-v2">
<div class="service-main app-management-layout"> <div class="service-main container" style="padding-top: 70px;">
<!-- Sidebar --> <!-- Sidebar -->
<th:block th:replace="~{fragment/djbank/service_sidebar :: sidebar('webhook')}"></th:block> <th:block th:replace="~{fragment/djbank/service_sidebar :: sidebar('webhook')}"></th:block>
@@ -22,62 +22,80 @@
<!-- Content Area --> <!-- Content Area -->
<div class="app-management-content"> <div class="app-management-content">
<div class="step1-wrap"> <div class="step1-wrap">
<!-- Header Row with Title and Dev Guide Link -->
<!-- Title --> <div class="webhook-header-row">
<h2 class="s1-title">Webhook 관리</h2> <h2 class="s1-title">Webhook 관리</h2>
<a class="webhook-guide-btn" th:href="@{/service/webhook-dev-guide}">
웹훅 개발가이드 - 수신.서명검증.응답 규칙 보러가기
</a>
</div>
<!-- Registered Webhook Card --> <!-- Registered Webhook Card -->
<div class="s1-form-card" th:object="${webhook}"> <div class="s1-form-card" th:object="${webhook}">
<div class="webhook-card-head"> <div class="webhook-card-head">
<h3>등록된 Webhook</h3> <div class="head-title-group">
<!-- List Icon SVG -->
<svg class="head-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="8" y1="6" x2="21" y2="6"></line>
<line x1="8" y1="12" x2="21" y2="12"></line>
<line x1="8" y1="18" x2="21" y2="18"></line>
<line x1="3" y1="6" x2="3.01" y2="6"></line>
<line x1="3" y1="12" x2="3.01" y2="12"></line>
<line x1="3" y1="18" x2="3.01" y2="18"></line>
</svg>
<h3>등록된 Webhook</h3>
</div>
<span class="webhook-created" th:if="*{createdDate != null and #strings.length(createdDate) >= 8}" <span class="webhook-created" th:if="*{createdDate != null and #strings.length(createdDate) >= 8}"
th:text="|등록일 ${#strings.substring(webhook.createdDate,0,4)}-${#strings.substring(webhook.createdDate,4,6)}-${#strings.substring(webhook.createdDate,6,8)}|">등록일</span> th:text="|등록일 : ${#strings.substring(webhook.createdDate,0,4)}-${#strings.substring(webhook.createdDate,4,6)}-${#strings.substring(webhook.createdDate,6,8)}|">등록일 : 2026-07-27</span>
</div> </div>
<div class="webhook-card-row"> <!-- Vertical Content Fields -->
<span class="row-label">수신 URL</span> <div class="webhook-card-content">
<span class="row-value" th:text="*{targetUrl}">https://...</span>
</div> <!-- 수신 URL -->
<div class="webhook-info-group">
<span class="group-label">수신 URL</span>
<div class="input-display-box" th:text="*{targetUrl}">https://naver.com/webhook</div>
</div>
<div class="webhook-card-row"> <!-- 알림 이벤트 -->
<span class="row-label">알림 이벤트</span> <div class="webhook-info-group">
<span class="row-value"> <span class="group-label">알림 이벤트</span>
<span class="eventtype-badge" th:each="et : *{eventTypes}" th:text="${et.name}">이벤트</span> <div class="badges-row">
</span> <span class="eventtype-badge" th:each="et : *{eventTypes}" th:text="${et.name}">이벤트</span>
</div> </div>
</div>
<div class="webhook-card-row"> <!-- 대상 API -->
<span class="row-label">대상 API</span> <div class="webhook-info-group">
<span class="row-value"> <span class="group-label">대상 API</span>
<span class="api-badge" th:each="apiId : *{apiIds}" th:text="${apiId}">API</span> <div class="badges-row">
</span> <span class="api-badge" th:each="apiId : *{apiIds}" th:text="${apiId}">API</span>
</div> </div>
</div>
<!-- Secret Key -->
<div class="webhook-info-group">
<span class="group-label">Secret Key</span>
<div class="secret-action-row">
<div class="secret-box" id="secretMasked" th:text="*{secretMasked}">************</div>
<th:block sec:authorize="hasRole('ROLE_API_KEY_REQUEST')">
<button type="button" class="btn-reveal-action" id="btnRevealSecret">조회</button>
<button type="button" class="btn-regen-action" id="btnRegenSecret">재발급</button>
</th:block>
</div>
</div>
<div class="webhook-card-row">
<span class="row-label">Secret Key</span>
<span class="row-value secret-row">
<code id="secretMasked" th:text="*{secretMasked}">••••••••</code>
<th:block sec:authorize="hasRole('ROLE_API_KEY_REQUEST')">
<button type="button" class="btn-mini" id="btnRevealSecret">조회</button>
<button type="button" class="btn-mini" id="btnRegenSecret">재발급</button>
</th:block>
</span>
</div> </div>
</div> </div>
<!-- 액션 --> <!-- 액션 -->
<div class="s1-actions" sec:authorize="hasRole('ROLE_API_KEY_REQUEST')"> <div class="s1-actions" sec:authorize="hasRole('ROLE_API_KEY_REQUEST')">
<button type="button" class="btn-webhook-danger" id="btnDeleteWebhook">삭제</button> <button type="button" class="btn-webhook-danger-figma" id="btnDeleteWebhook">삭제</button>
<a class="s1-btn-next" th:href="@{/webhook/modify/step1}">수정</a> <a class="s1-btn-next-figma" th:href="@{/webhook/modify/step1}">수정</a>
</div> </div>
<p class="webhook-guide-link">
<a th:href="@{/service/webhook-dev-guide}">
📘 웹훅 개발가이드 — 수신·서명검증·응답 규칙 보러가기
</a>
</p>
</div><!-- /step1-wrap --> </div><!-- /step1-wrap -->
</div> </div>
</div> </div>
src/main/resources/templates/views/apps/webhook/webhookModifyStep1.html
+43 -16
View File
@@ -1,7 +1,6 @@
<!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:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/djbank_title_layout}">
layout:decorate="~{layout/djbank_title_layout}">
<body> <body>
<section layout:fragment="title"> <section layout:fragment="title">
@@ -12,8 +11,8 @@
</section> </section>
<th:block layout:fragment="contentFragment"> <th:block layout:fragment="contentFragment">
<div class="signup-guide-v2 figma-register-wrapper"> <div class="signup-guide-v2">
<div class="service-main app-management-layout"> <div class="service-main container" style="padding-top: 70px;">
<!-- Sidebar --> <!-- Sidebar -->
<th:block th:replace="~{fragment/djbank/service_sidebar :: sidebar('webhook')}"></th:block> <th:block th:replace="~{fragment/djbank/service_sidebar :: sidebar('webhook')}"></th:block>
@@ -28,10 +27,19 @@
<!-- Progress Steps Card --> <!-- Progress Steps Card -->
<div class="s1-progress-card"> <div class="s1-progress-card">
<div class="s1-steps"> <div class="s1-steps">
<!-- Step 1 Active: 기본 정보 수정 --> <!-- Step 1 Active: 기본 정보 수정 (document icon) -->
<div class="s1-step s1-step--active"> <div class="s1-step s1-step--active">
<div class="s1-step-circle"> <div class="s1-step-circle">
<img th:src="@{/img/apikey_step1.png}" alt="기본 정보 수정" width="36" height="36"> <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> </div>
<span class="s1-step-num">1단계</span> <span class="s1-step-num">1단계</span>
<span class="s1-step-name">기본 정보 수정</span> <span class="s1-step-name">기본 정보 수정</span>
@@ -39,10 +47,16 @@
<div class="s1-step-line"></div> <div class="s1-step-line"></div>
<!-- Step 2: API 선택 --> <!-- Step 2: API 선택 (chain link icon) -->
<div class="s1-step"> <div class="s1-step">
<div class="s1-step-circle"> <div class="s1-step-circle">
<img th:src="@{/img/apikey_step2.png}" alt="API 선택" width="36" height="36"> <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> </div>
<span class="s1-step-num">2단계</span> <span class="s1-step-num">2단계</span>
<span class="s1-step-name">API 선택</span> <span class="s1-step-name">API 선택</span>
@@ -50,10 +64,22 @@
<div class="s1-step-line"></div> <div class="s1-step-line"></div>
<!-- Step 3: 수정 완료 --> <!-- Step 3: 수정 완료 (rocket icon) -->
<div class="s1-step"> <div class="s1-step">
<div class="s1-step-circle"> <div class="s1-step-circle">
<img th:src="@{/img/apikey_step3.png}" alt="수정 완료" width="36" height="36"> <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> </div>
<span class="s1-step-num">3단계</span> <span class="s1-step-num">3단계</span>
<span class="s1-step-name">수정 완료</span> <span class="s1-step-name">수정 완료</span>
@@ -77,7 +103,7 @@
<input type="text" id="targetUrl" th:field="*{targetUrl}" class="s1-input" <input type="text" id="targetUrl" th:field="*{targetUrl}" class="s1-input"
placeholder="https://example.com/webhook" autocomplete="off" maxlength="255"> placeholder="https://example.com/webhook" autocomplete="off" maxlength="255">
<p class="field-error" th:if="${#fields.hasErrors('targetUrl')}" th:errors="*{targetUrl}">URL 오류</p> <p class="field-error" th:if="${#fields.hasErrors('targetUrl')}" th:errors="*{targetUrl}">URL 오류</p>
<p class="field-help">이벤트 발생 시 이 URL로 서명된 POST 요청이 전송됩니다.</p> <p class="field-help-red">이벤트 발생 시 이 URL로 서명된 POST 요청이 전송됩니다.</p>
</div> </div>
<!-- 알림 이벤트 --> <!-- 알림 이벤트 -->
@@ -86,7 +112,7 @@
<div class="webhook-eventtype-list"> <div class="webhook-eventtype-list">
<label class="eventtype-item" th:each="et : ${eventTypes}"> <label class="eventtype-item" th:each="et : ${eventTypes}">
<input type="checkbox" name="eventTypes" th:value="${et.code}" <input type="checkbox" name="eventTypes" th:value="${et.code}"
th:checked="${#lists.contains(webhookModification.eventTypes, et.code)}"> th:checked="${#lists.contains(webhookModification.eventTypes, et.code)}">
<span class="eventtype-name" th:text="${et.name}">이벤트명</span> <span class="eventtype-name" th:text="${et.name}">이벤트명</span>
<span class="eventtype-code" th:text="${et.code}">CODE</span> <span class="eventtype-code" th:text="${et.code}">CODE</span>
</label> </label>
@@ -98,9 +124,9 @@
</div> </div>
<!-- 액션 --> <!-- 액션 -->
<div class="s1-actions"> <div class="s1-actions s1-actions--figma-step">
<a class="btn-webhook-cancel" th:href="@{/webhook/modify/cancel}">취소</a> <a class="btn-webhook-cancel-red" th:href="@{/webhook/modify/cancel}">취소</a>
<button type="submit" form="webhookStep1Form" class="s1-btn-next">다음</button> <button type="submit" form="webhookStep1Form" class="s1-btn-next-figma">다음</button>
</div> </div>
</div><!-- /step1-wrap --> </div><!-- /step1-wrap -->
@@ -109,4 +135,5 @@
</div> </div>
</th:block> </th:block>
</body> </body>
</html>
</html>
src/main/resources/templates/views/apps/webhook/webhookModifyStep2.html
+35 -8
View File
@@ -13,8 +13,8 @@
</section> </section>
<th:block layout:fragment="contentFragment"> <th:block layout:fragment="contentFragment">
<div class="signup-guide-v2 figma-register-wrapper"> <div class="signup-guide-v2">
<div class="service-main app-management-layout"> <div class="service-main container" style="padding-top: 70px;">
<!-- Sidebar --> <!-- Sidebar -->
<th:block th:replace="~{fragment/djbank/service_sidebar :: sidebar('webhook')}"></th:block> <th:block th:replace="~{fragment/djbank/service_sidebar :: sidebar('webhook')}"></th:block>
@@ -29,10 +29,19 @@
<!-- Progress Steps Card --> <!-- Progress Steps Card -->
<div class="s1-progress-card"> <div class="s1-progress-card">
<div class="s1-steps"> <div class="s1-steps">
<!-- Step 1: 기본 정보 수정 --> <!-- Step 1: 기본 정보 수정 (document icon) -->
<div class="s1-step"> <div class="s1-step">
<div class="s1-step-circle"> <div class="s1-step-circle">
<img th:src="@{/img/apikey_step1.png}" alt="기본 정보 수정" width="36" height="36"> <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> </div>
<span class="s1-step-num">1단계</span> <span class="s1-step-num">1단계</span>
<span class="s1-step-name">기본 정보 수정</span> <span class="s1-step-name">기본 정보 수정</span>
@@ -40,10 +49,16 @@
<div class="s1-step-line"></div> <div class="s1-step-line"></div>
<!-- Step 2 Active: API 선택 --> <!-- Step 2 Active: API 선택 (chain link icon) -->
<div class="s1-step s1-step--active"> <div class="s1-step s1-step--active">
<div class="s1-step-circle"> <div class="s1-step-circle">
<img th:src="@{/img/apikey_step2.png}" alt="API 선택" width="36" height="36"> <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> </div>
<span class="s1-step-num">2단계</span> <span class="s1-step-num">2단계</span>
<span class="s1-step-name">API 선택</span> <span class="s1-step-name">API 선택</span>
@@ -51,10 +66,22 @@
<div class="s1-step-line"></div> <div class="s1-step-line"></div>
<!-- Step 3: 수정 완료 --> <!-- Step 3: 수정 완료 (rocket icon) -->
<div class="s1-step"> <div class="s1-step">
<div class="s1-step-circle"> <div class="s1-step-circle">
<img th:src="@{/img/apikey_step3.png}" alt="수정 완료" width="36" height="36"> <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> </div>
<span class="s1-step-num">3단계</span> <span class="s1-step-num">3단계</span>
<span class="s1-step-name">수정 완료</span> <span class="s1-step-name">수정 완료</span>
src/main/resources/templates/views/apps/webhook/webhookModifyStep3.html
+108 -17
View File
@@ -1,7 +1,6 @@
<!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:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/djbank_title_layout}">
layout:decorate="~{layout/djbank_title_layout}">
<body> <body>
<section layout:fragment="title"> <section layout:fragment="title">
@@ -12,8 +11,8 @@
</section> </section>
<th:block layout:fragment="contentFragment"> <th:block layout:fragment="contentFragment">
<div class="signup-guide-v2 figma-register-wrapper"> <div class="signup-guide-v2">
<div class="service-main app-management-layout"> <div class="service-main container" style="padding-top: 70px;">
<!-- Sidebar --> <!-- Sidebar -->
<th:block th:replace="~{fragment/djbank/service_sidebar :: sidebar('webhook')}"></th:block> <th:block th:replace="~{fragment/djbank/service_sidebar :: sidebar('webhook')}"></th:block>
@@ -28,9 +27,19 @@
<!-- Progress Steps Card --> <!-- Progress Steps Card -->
<div class="s1-progress-card"> <div class="s1-progress-card">
<div class="s1-steps"> <div class="s1-steps">
<!-- Step 1: 기본 정보 수정 (document icon) -->
<div class="s1-step"> <div class="s1-step">
<div class="s1-step-circle"> <div class="s1-step-circle">
<img th:src="@{/img/apikey_step1.png}" alt="기본 정보 수정" width="36" height="36"> <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> </div>
<span class="s1-step-num">1단계</span> <span class="s1-step-num">1단계</span>
<span class="s1-step-name">기본 정보 수정</span> <span class="s1-step-name">기본 정보 수정</span>
@@ -38,9 +47,16 @@
<div class="s1-step-line"></div> <div class="s1-step-line"></div>
<!-- Step 2: API 선택 (chain link icon) -->
<div class="s1-step"> <div class="s1-step">
<div class="s1-step-circle"> <div class="s1-step-circle">
<img th:src="@{/img/apikey_step2.png}" alt="API 선택" width="36" height="36"> <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> </div>
<span class="s1-step-num">2단계</span> <span class="s1-step-num">2단계</span>
<span class="s1-step-name">API 선택</span> <span class="s1-step-name">API 선택</span>
@@ -48,10 +64,22 @@
<div class="s1-step-line"></div> <div class="s1-step-line"></div>
<!-- Step 3 Active: 수정 완료 --> <!-- Step 3 Active: 수정 완료 (rocket icon) -->
<div class="s1-step s1-step--active"> <div class="s1-step s1-step--active">
<div class="s1-step-circle"> <div class="s1-step-circle">
<img th:src="@{/img/apikey_step3.png}" alt="수정 완료" width="36" height="36"> <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> </div>
<span class="s1-step-num">3단계</span> <span class="s1-step-num">3단계</span>
<span class="s1-step-name">수정 완료</span> <span class="s1-step-name">수정 완료</span>
@@ -59,18 +87,80 @@
</div> </div>
</div> </div>
<!-- Complete Card --> <!-- Success Result Section -->
<div class="s1-form-card"> <div class="s3-result-container" th:if="${modifySuccess}">
<div class="webhook-complete"> <div class="s3-graphic-wrapper">
<div class="complete-icon">✅</div> <!-- Custom premium isometric server check success SVG design -->
<h3>Webhook 설정이 수정되었습니다</h3> <svg class="s3-illustration" viewBox="0 0 500 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<p class="field-help">Secret Key는 변경되지 않았습니다.</p> <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">Webhook 수정이 완료되었습니다.</h1>
<p class="s3-success-desc">
Secret Key는 변경되지 않았습니다.
</p>
</div> </div>
</div> </div>
<!-- 액션 --> <!-- 액션 -->
<div class="s1-actions"> <div class="s3-actions">
<a class="s1-btn-next" th:href="@{/webhook}">완료</a> <a class="s3-btn-complete" th:href="@{/webhook}">완료</a>
</div> </div>
</div><!-- /step3-wrap --> </div><!-- /step3-wrap -->
@@ -79,4 +169,5 @@
</div> </div>
</th:block> </th:block>
</body> </body>
</html>
</html>