Rinjae
41391c8df0
- Webhook 수정/삭제 기능 UX 개선 - 단계별 디자인 업데이트 - Webhook 등록/수정 CSS 및 JS 로직 최적화 및 재사용 코드 추가
122 lines
5.7 KiB
HTML
122 lines
5.7 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>앱관리</h1>
|
|
</div>
|
|
</section>
|
|
<th:block layout:fragment="contentFragment">
|
|
<div class="signup-guide-v2 figma-register-wrapper">
|
|
<div class="service-main app-management-layout">
|
|
|
|
<!-- Left Sidebar (Service Sidebar) -->
|
|
<th:block th:replace="~{fragment/djbank/service_sidebar :: sidebar('apiKey')}"></th:block>
|
|
|
|
<!-- Content Area -->
|
|
<div class="app-management-content">
|
|
<!-- 모든 스타일은 step2-wrap 안에서만 적용 -->
|
|
<div class="step2-wrap">
|
|
|
|
<!-- Title -->
|
|
<h2 class="s2-title">앱 수정</h2>
|
|
|
|
<!-- Progress Steps Card -->
|
|
<div class="s1-progress-card">
|
|
<div class="s1-steps">
|
|
<!-- Step 1: 앱 정보수정 (completed) -->
|
|
<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 Active: API 선택 (chain link icon) -->
|
|
<div class="s1-step s1-step--active">
|
|
<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: 앱 수정 완료 (rocket 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">
|
|
<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>
|
|
|
|
<!-- API 선택 공용 모듈 -->
|
|
<th:block th:replace="~{fragment/api_selector :: apiSelector(${apiServices}, ${apiKeyModification.selectedApis}, '/myapikey/modify/step2', '/myapikey/modify/step2/save')}"/>
|
|
|
|
<!-- clientId 는 모듈 폼에 form 속성으로 주입 -->
|
|
<input type="hidden" name="clientId" th:value="${apiKeyModification.clientId}" form="apiSelectorForm"/>
|
|
|
|
<!-- 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 직속(pagePopups)으로 렌더 → wrapper transform·overflow 영향 없이 뷰포트 기준 중앙 정렬 -->
|
|
<section layout:fragment="pagePopups">
|
|
<th:block th:replace="~{fragment/api_selector :: apiSelectorPopups}"/>
|
|
</section>
|
|
</body>
|
|
</html>
|