Rinjae
41391c8df0
- Webhook 수정/삭제 기능 UX 개선 - 단계별 디자인 업데이트 - Webhook 등록/수정 CSS 및 JS 로직 최적화 및 재사용 코드 추가
95 lines
3.4 KiB
HTML
95 lines
3.4 KiB
HTML
<!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>Webhook 관리</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('webhook')}"></th:block>
|
|
|
|
<!-- Content Area -->
|
|
<div class="app-management-content">
|
|
<div class="step2-wrap">
|
|
|
|
<!-- Title -->
|
|
<h2 class="s1-title">Webhook 수정</h2>
|
|
|
|
<!-- Progress Steps Card -->
|
|
<div class="s1-progress-card">
|
|
<div class="s1-steps">
|
|
<!-- Step 1: 기본 정보 수정 -->
|
|
<div class="s1-step">
|
|
<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 Active: API 선택 -->
|
|
<div class="s1-step s1-step--active">
|
|
<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>
|
|
|
|
<!-- API 선택 공용 모듈 -->
|
|
<th:block th:replace="~{fragment/api_selector :: apiSelector(${apiServices}, ${webhookModification.selectedApis}, '/webhook/modify/step2', '/webhook/modify/step2/save')}"/>
|
|
|
|
<!-- Bottom Navigation Actions -->
|
|
<div class="s2-actions">
|
|
<button type="button" id="btnPrevStep" class="s2-btn-prev">
|
|
이전
|
|
</button>
|
|
<button type="submit" form="apiSelectorForm" class="s2-btn-save">
|
|
수정 완료
|
|
</button>
|
|
</div>
|
|
|
|
</div><!-- /step2-wrap -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</th:block>
|
|
|
|
<!-- 플로팅 카트/모달: body 직속 렌더 (wrapper transform 영향 회피) -->
|
|
<section layout:fragment="pagePopups">
|
|
<th:block th:replace="~{fragment/api_selector :: apiSelectorPopups}"/>
|
|
</section>
|
|
</body>
|
|
</html>
|