- Webhook 신청 및 관리 UI 전면 개편 - 신규 가이드 반영
- Webhook 수정/삭제 기능 UX 개선 - 단계별 디자인 업데이트 - Webhook 등록/수정 CSS 및 JS 로직 최적화 및 재사용 코드 추가
This commit is contained in:
Rinjae
@@ -1,59 +1,112 @@
|
||||
<!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">
|
||||
<div class="page-title-banner">
|
||||
<img th:src="@{/img/img_title_bg.png}" class="title-image">
|
||||
<h1>Webhook 수정</h1>
|
||||
</div>
|
||||
</section>
|
||||
<section layout:fragment="title">
|
||||
<div class="page-title-banner">
|
||||
<img th:src="@{/img/img_title_bg.png}" class="title-image">
|
||||
<h1>Webhook 관리</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<th:block layout:fragment="contentFragment">
|
||||
<section class="webhook-container webhook-register">
|
||||
<th:block layout:fragment="contentFragment">
|
||||
<div class="signup-guide-v2 figma-register-wrapper">
|
||||
<div class="service-main app-management-layout">
|
||||
|
||||
<div class="webhook-steps" th:with="cur=${currentStep}">
|
||||
<div class="webhook-step" th:classappend="${cur >= 1} ? 'active'">
|
||||
<span class="step-no">1</span><span class="step-label">기본 정보</span>
|
||||
</div>
|
||||
<div class="webhook-step" th:classappend="${cur >= 2} ? 'active'">
|
||||
<span class="step-no">2</span><span class="step-label">API 선택</span>
|
||||
</div>
|
||||
<div class="webhook-step" th:classappend="${cur >= 3} ? 'active'">
|
||||
<span class="step-no">3</span><span class="step-label">완료</span>
|
||||
<!-- Sidebar -->
|
||||
<th:block th:replace="~{fragment/djbank/service_sidebar :: sidebar('webhook')}"></th:block>
|
||||
|
||||
<!-- Content Area -->
|
||||
<div class="app-management-content">
|
||||
<div class="step1-wrap">
|
||||
|
||||
<!-- Title -->
|
||||
<h2 class="s1-title">Webhook 수정</h2>
|
||||
|
||||
<!-- Progress Steps Card -->
|
||||
<div class="s1-progress-card">
|
||||
<div class="s1-steps">
|
||||
<!-- Step 1 Active: 기본 정보 수정 -->
|
||||
<div class="s1-step s1-step--active">
|
||||
<div class="s1-step-circle">
|
||||
<img th:src="@{/img/apikey_step1.png}" alt="기본 정보 수정" width="36" height="36">
|
||||
</div>
|
||||
<span class="s1-step-num">1단계</span>
|
||||
<span class="s1-step-name">기본 정보 수정</span>
|
||||
</div>
|
||||
|
||||
<div class="s1-step-line"></div>
|
||||
|
||||
<!-- Step 2: API 선택 -->
|
||||
<div class="s1-step">
|
||||
<div class="s1-step-circle">
|
||||
<img th:src="@{/img/apikey_step2.png}" alt="API 선택" width="36" height="36">
|
||||
</div>
|
||||
<span class="s1-step-num">2단계</span>
|
||||
<span class="s1-step-name">API 선택</span>
|
||||
</div>
|
||||
|
||||
<div class="s1-step-line"></div>
|
||||
|
||||
<!-- Step 3: 수정 완료 -->
|
||||
<div class="s1-step">
|
||||
<div class="s1-step-circle">
|
||||
<img th:src="@{/img/apikey_step3.png}" alt="수정 완료" width="36" height="36">
|
||||
</div>
|
||||
<span class="s1-step-num">3단계</span>
|
||||
<span class="s1-step-name">수정 완료</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error -->
|
||||
<div th:if="${error}" class="s1-alert">
|
||||
<span th:text="${error}"></span>
|
||||
</div>
|
||||
|
||||
<!-- Form Card -->
|
||||
<div class="s1-form-card">
|
||||
<form id="webhookStep1Form" method="post" th:action="@{/webhook/modify/step1}"
|
||||
th:object="${webhookModification}">
|
||||
|
||||
<!-- Webhook 수신 URL -->
|
||||
<div class="s1-field">
|
||||
<label class="s1-label">Webhook 수신 URL <span class="s1-required">*</span></label>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- 알림 이벤트 -->
|
||||
<div class="s1-field">
|
||||
<label class="s1-label">알림 받을 이벤트 <span class="s1-required">*</span></label>
|
||||
<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)}">
|
||||
<span class="eventtype-name" th:text="${et.name}">이벤트명</span>
|
||||
<span class="eventtype-code" th:text="${et.code}">CODE</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="field-error" th:if="${#fields.hasErrors('eventTypes')}" th:errors="*{eventTypes}">이벤트 오류</p>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</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>
|
||||
|
||||
</div><!-- /step1-wrap -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="modifyStep1Form" method="post" th:action="@{/webhook/modify/step1}" th:object="${webhookModification}">
|
||||
|
||||
<div class="webhook-field">
|
||||
<label for="targetUrl">Webhook 수신 URL <span class="req">*</span></label>
|
||||
<input type="text" id="targetUrl" th:field="*{targetUrl}"
|
||||
placeholder="https://example.com/webhook" autocomplete="off">
|
||||
<p class="field-error" th:if="${#fields.hasErrors('targetUrl')}" th:errors="*{targetUrl}">URL 오류</p>
|
||||
<p class="field-help">이벤트 발생 시 이 URL로 서명된 POST 요청이 전송됩니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="webhook-field">
|
||||
<label>알림 받을 이벤트 <span class="req">*</span></label>
|
||||
<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)}">
|
||||
<span class="eventtype-name" th:text="${et.name}">이벤트명</span>
|
||||
<span class="eventtype-code" th:text="${et.code}">CODE</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="field-error" th:if="${#fields.hasErrors('eventTypes')}" th:errors="*{eventTypes}">이벤트 오류</p>
|
||||
</div>
|
||||
|
||||
<div class="webhook-actions">
|
||||
<a class="btn-webhook-cancel" th:href="@{/webhook/modify/cancel}">취소</a>
|
||||
<button type="submit" class="btn-webhook-next">다음</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</th:block>
|
||||
</th:block>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user