앱 관리

2025-11-01 11:49:11 +09:00
parent 6841c9236d
commit 563a3f054c
46 changed files with 9740 additions and 2062 deletions
@@ -0,0 +1,152 @@
+<!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/kjbank_base_layout}">
+
+<body>
+<th:block layout:fragment="contentFragment">
+  <section class="apikey-register-container">
+
+    <!-- Progress Indicator -->
+    <div class="register-progress">
+      <div class="progress-steps">
+        <div class="progress-step completed">
+          <div class="step-number">✓</div>
+          <div class="step-label">기본 정보</div>
+        </div>
+        <div class="progress-line filled"></div>
+        <div class="progress-step completed">
+          <div class="step-number">✓</div>
+          <div class="step-label">API 선택</div>
+        </div>
+        <div class="progress-line filled"></div>
+        <div class="progress-step active completed">
+          <div class="step-number">✓</div>
+          <div class="step-label">완료</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Success Result -->
+    <div class="register-result success" th:if="${modificationComplete}">
+
+      <!-- Success Icon Animation -->
+      <div class="result-icon-wrapper">
+        <div class="result-icon success-icon">
+          <svg class="checkmark" viewBox="0 0 52 52">
+            <circle class="checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
+            <path class="checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
+          </svg>
+        </div>
+      </div>
+
+      <!-- Success Message -->
+      <div class="result-header">
+        <h1>API Key 수정 요청 완료!</h1>
+        <p class="result-description">
+          API Key 수정 요청이 성공적으로 접수되었습니다. 관리자 승인 후 변경 사항이 적용됩니다.
+        </p>
+      </div>
+
+      <!-- Result Content -->
+      <div class="result-content">
+
+        <!-- Action Buttons -->
+        <div class="result-actions">
+          <a th:href="@{/myapikey}" class="btn-secondary">
+            <span class="icon">📋</span>
+            API Key 목록으로
+          </a>
+          <a th:href="@{/myapikey/api_key_request/history}" class="btn-primary">
+            <span class="icon">📄</span>
+            요청 내역 확인
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Error Result (if needed) -->
+    <div class="register-result error" th:unless="${modificationComplete}">
+      <div class="result-icon-wrapper">
+        <div class="result-icon error-icon">
+          <span>❌</span>
+        </div>
+      </div>
+      <div class="result-header">
+        <h1>잘못된 접근입니다</h1>
+        <p class="result-description">
+          수정 프로세스를 완료하지 않았거나 잘못된 경로로 접근하셨습니다.
+        </p>
+      </div>
+      <div class="result-actions">
+        <a th:href="@{/myapikey}" class="btn-primary">
+          목록으로 돌아가기
+        </a>
+      </div>
+    </div>
+
+  </section>
+</th:block>
+
+<th:block layout:fragment="contentScript">
+  <script th:inline="javascript">
+    document.addEventListener('DOMContentLoaded', function() {
+
+      // Success animation
+      setTimeout(function() {
+        const successIcon = document.querySelector('.success-icon');
+        if (successIcon) {
+          successIcon.classList.add('animate');
+        }
+      }, 100);
+    });
+  </script>
+
+  <style>
+    /* Success checkmark animation */
+    .checkmark {
+      width: 52px;
+      height: 52px;
+      border-radius: 50%;
+      display: block;
+      stroke-width: 2;
+      stroke: #6BCF7F;
+      stroke-miterlimit: 10;
+      animation: rotate 1s ease-in-out;
+    }
+
+    .checkmark-circle {
+      stroke-dasharray: 166;
+      stroke-dashoffset: 166;
+      stroke-width: 2;
+      stroke-miterlimit: 10;
+      stroke: #6BCF7F;
+      animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+    }
+
+    .checkmark-check {
+      transform-origin: 50% 50%;
+      stroke-dasharray: 48;
+      stroke-dashoffset: 48;
+      animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
+    }
+
+    @keyframes stroke {
+      100% {
+        stroke-dashoffset: 0;
+      }
+    }
+
+    @keyframes rotate {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  </style>
+</th:block>
+
+</body>
+</html>