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

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
@@ -1,7 +1,6 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/djbank_title_layout}">
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/djbank_title_layout}">
<body>
<section layout:fragment="title">
@@ -12,8 +11,8 @@
</section>
<th:block layout:fragment="contentFragment">
<div class="signup-guide-v2 figma-register-wrapper">
<div class="service-main app-management-layout">
<div class="signup-guide-v2">
<div class="service-main container" style="padding-top: 70px;">
<!-- Sidebar -->
<th:block th:replace="~{fragment/djbank/service_sidebar :: sidebar('webhook')}"></th:block>
@@ -28,10 +27,19 @@
<!-- Progress Steps Card -->
<div class="s1-progress-card">
<div class="s1-steps">
<!-- Step 1 Active: 기본 정보 수정 -->
<!-- Step 1 Active: 기본 정보 수정 (document icon) -->
<div class="s1-step s1-step--active">
<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>
<span class="s1-step-num">1단계</span>
<span class="s1-step-name">기본 정보 수정</span>
@@ -39,10 +47,16 @@
<div class="s1-step-line"></div>
<!-- Step 2: API 선택 -->
<!-- Step 2: API 선택 (chain link icon) -->
<div class="s1-step">
<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>
<span class="s1-step-num">2단계</span>
<span class="s1-step-name">API 선택</span>
@@ -50,10 +64,22 @@
<div class="s1-step-line"></div>
<!-- Step 3: 수정 완료 -->
<!-- Step 3: 수정 완료 (rocket icon) -->
<div class="s1-step">
<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>
<span class="s1-step-num">3단계</span>
<span class="s1-step-name">수정 완료</span>
@@ -77,7 +103,7 @@
<input type="text" id="targetUrl" th:field="*{targetUrl}" class="s1-input"
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-help">이벤트 발생 시 이 URL로 서명된 POST 요청이 전송됩니다.</p>
<p class="field-help-red">이벤트 발생 시 이 URL로 서명된 POST 요청이 전송됩니다.</p>
</div>
<!-- 알림 이벤트 -->
@@ -86,7 +112,7 @@
<div class="webhook-eventtype-list">
<label class="eventtype-item" th:each="et : ${eventTypes}">
<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-code" th:text="${et.code}">CODE</span>
</label>
@@ -98,9 +124,9 @@
</div>
<!-- 액션 -->
<div class="s1-actions">
<a class="btn-webhook-cancel" th:href="@{/webhook/modify/cancel}">취소</a>
<button type="submit" form="webhookStep1Form" class="s1-btn-next">다음</button>
<div class="s1-actions s1-actions--figma-step">
<a class="btn-webhook-cancel-red" th:href="@{/webhook/modify/cancel}">취소</a>
<button type="submit" form="webhookStep1Form" class="s1-btn-next-figma">다음</button>
</div>
</div><!-- /step1-wrap -->
@@ -109,4 +135,5 @@
</div>
</th:block>
</body>
</html>
</html>