diff --git a/src/main/resources/templates/views/apps/mypage/apiKeyList.html b/src/main/resources/templates/views/apps/mypage/apiKeyList.html index 64a9f23..4c35125 100644 --- a/src/main/resources/templates/views/apps/mypage/apiKeyList.html +++ b/src/main/resources/templates/views/apps/mypage/apiKeyList.html @@ -6,6 +6,7 @@
+

앱관리

diff --git a/src/main/resources/templates/views/apps/mypage/apiKeyRegisterStep1.html b/src/main/resources/templates/views/apps/mypage/apiKeyRegisterStep1.html index 5bbd5c6..3c84064 100644 --- a/src/main/resources/templates/views/apps/mypage/apiKeyRegisterStep1.html +++ b/src/main/resources/templates/views/apps/mypage/apiKeyRegisterStep1.html @@ -1,72 +1,102 @@ + xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_title_layout}"> +
+
+ +

앱관리

+
+
+ +
+

앱 생성

+ API를 이용하여 서비스할 앱 정보를 등록해주세요. +
+
-
-
1
-
기본 정보
+ +
+
+
+ 앱 정보입력 +
+
+
앱 정보입력
-
-
-
2
+ + +
+ +
+ + +
+
+
+ API 선택 +
+
API 선택
-
-
-
3
-
완료
+ + +
+ +
+ + +
+
+
+ 앱 생성 완료 +
+
+
앱 생성 완료
- -
-

API Key 생성

-

Step 1: 기본 정보 입력

-

- 앱의 기본 정보를 입력해주세요. 이 정보는 API 관리 및 모니터링에 사용됩니다. -

- - -
- - - - - - -
+ +
+ + + + + +
-
+
-
- - -
- -
-
-
- - - - + +
+
+ 앱 아이콘 + 필수 +
+
+
+
+
+ + + + + + + + - 이미지 선택
+
+

앱 아이콘 이미지 파일을 업로드하세요

+

권장사이즈는 128X128픽셀이며 JPG, PNG, GIF파일만 등록할 수 있습니다.

+
+ -
- PNG, JPG 형식 (최대 2MB, 권장 크기: 512x512px)
+
- -
- + +
+
+ 앱 이름 + 필수 +
+
- API Key를 식별할 수 있는 고유한 이름을 입력하세요.
+
- -
- + +
+
+ 앱 설명 + 필수 +
+
- + 0 / 500
+
- -
- + +
+
+ Call Back URL +
+
- OAuth 인증 후 리다이렉트될 URL을 입력하세요. (선택사항) + placeholder="URL을 입력해 주세요.">
+
- -
- -
+ +
+
+ 화이트리스트 +
+
+
+ class="form-input ip-input" + placeholder="서버 IP (111.111.111.111)">
- 허용할 IP 주소 또는 CIDR 대역을 입력하세요. (선택사항) - -
- - -
- - ← - 취소 - -
+ +
+ +
+
@@ -202,7 +233,7 @@ function removeAppIcon() { const appIconInput = document.getElementById('appIcon'); const iconPreviewImage = document.getElementById('iconPreviewImage'); - const iconPlaceholder = document.querySelector('.icon-placeholder'); + const iconPlaceholder = document.getElementById('iconPlaceholder'); const btnRemoveIcon = document.getElementById('btnRemoveIcon'); // Clear file input @@ -227,20 +258,20 @@ // Validate IP format if (!ipValue) { - alert('IP 주소를 입력해주세요.'); + customPopups.showAlert('IP 주소를 입력해주세요.'); return; } // Basic IP validation (supports IP and CIDR notation) const ipPattern = /^(\d{1,3}\.){3}\d{1,3}(\/\d{1,2})?$/; if (!ipPattern.test(ipValue)) { - alert('올바른 IP 주소 형식이 아닙니다.\n예: 192.168.1.1 또는 10.0.0.0/24'); + customPopups.showAlert('올바른 IP 주소 형식이 아닙니다.\n예: 192.168.1.1 또는 10.0.0.0/24'); return; } // Check for duplicates if (ipAddresses.includes(ipValue)) { - alert('이미 추가된 IP 주소입니다.'); + customPopups.showAlert('이미 추가된 IP 주소입니다.'); return; } @@ -268,12 +299,8 @@ function updateIpList() { const ipList = document.getElementById('ipList'); const ipItems = document.getElementById('ipItems'); - const ipCount = document.getElementById('ipCount'); const ipWhitelistHidden = document.getElementById('ipWhitelist'); - // Update count - ipCount.textContent = ipAddresses.length; - // Show/hide list container if (ipAddresses.length > 0) { ipList.style.display = 'block'; @@ -283,12 +310,9 @@ ipAddresses.forEach(function(ip) { itemsHTML += `
- ${ip} -
`; @@ -307,7 +331,6 @@ // Allow Enter key to add IP document.addEventListener('DOMContentLoaded', function() { // Only clear sessionStorage if starting a new registration (clear=true parameter) - // This preserves data during page refresh or back navigation from Step 2 const urlParams = new URLSearchParams(window.location.search); const shouldClear = urlParams.get('clear') === 'true'; @@ -327,7 +350,7 @@ const charCounter = document.querySelector('.char-counter'); const appIconInput = document.getElementById('appIcon'); const iconPreviewImage = document.getElementById('iconPreviewImage'); - const iconPlaceholder = document.querySelector('.icon-placeholder'); + const iconPlaceholder = document.getElementById('iconPlaceholder'); const ipWhitelistInput = document.getElementById('ipWhitelistInput'); // Restore IP whitelist from session (Thymeleaf provides this) @@ -395,15 +418,15 @@ if (file) { // Validate file size (max 2MB) if (file.size > 2 * 1024 * 1024) { - alert('파일 크기는 2MB를 초과할 수 없습니다.'); + customPopups.showAlert('파일 크기는 2MB를 초과할 수 없습니다.'); this.value = ''; return; } - // Validate file type - Only PNG and JPG allowed - const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg']; + // Validate file type - PNG, JPG, GIF allowed + const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif']; if (!allowedTypes.includes(file.type)) { - alert('PNG, JPG 형식만 업로드 가능합니다.'); + customPopups.showAlert('PNG, JPG, GIF 형식만 업로드 가능합니다.'); this.value = ''; return; } @@ -436,27 +459,6 @@ }); } - // Cancel button handler - clear sessionStorage and notify server - const btnCancel = document.getElementById('btnCancel'); - if (btnCancel) { - btnCancel.addEventListener('click', function(e) { - e.preventDefault(); - - // Clear all registration-related data from sessionStorage - const keysToRemove = []; - for (let i = 0; i < sessionStorage.length; i++) { - const key = sessionStorage.key(i); - if (key && key.startsWith('registration_')) { - keysToRemove.push(key); - } - } - keysToRemove.forEach(key => sessionStorage.removeItem(key)); - - // Navigate to cancel endpoint to clear server session - window.location.href = '/myapikey/register/cancel'; - }); - } - // Form validation form.addEventListener('submit', function(e) { const appIcon = document.getElementById('appIcon').files[0]; @@ -468,20 +470,20 @@ const hasSessionIcon = appIconFileName && appIconFileName.trim() !== ''; if (!appIcon && !hasSessionIcon) { e.preventDefault(); - alert('앱 아이콘을 선택해주세요.'); + customPopups.showAlert('앱 아이콘을 선택해주세요.'); return false; } if (!appName) { e.preventDefault(); - alert('앱 이름을 입력해주세요.'); + customPopups.showAlert('앱 이름을 입력해주세요.'); document.getElementById('appName').focus(); return false; } if (!appDescription) { e.preventDefault(); - alert('앱 설명을 입력해주세요.'); + customPopups.showAlert('앱 설명을 입력해주세요.'); document.getElementById('appDescription').focus(); return false; } @@ -492,7 +494,7 @@ new URL(callbackUrl); } catch (error) { e.preventDefault(); - alert('올바른 URL 형식이 아닙니다.\n예: https://example.com/api/callback'); + customPopups.showAlert('올바른 URL 형식이 아닙니다.\n예: https://example.com/api/callback'); document.getElementById('callbackUrl').focus(); return false; } diff --git a/src/main/resources/templates/views/apps/mypage/apiKeyRegisterStep2.html b/src/main/resources/templates/views/apps/mypage/apiKeyRegisterStep2.html index f411e6f..c6cba0d 100644 --- a/src/main/resources/templates/views/apps/mypage/apiKeyRegisterStep2.html +++ b/src/main/resources/templates/views/apps/mypage/apiKeyRegisterStep2.html @@ -1,148 +1,175 @@ + xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_title_layout}"> +
+
+ +

앱관리

+
+
+
- -
-
-
-
✓
-
기본 정보
-
-
-
-
2
-
API 선택
-
-
-
-
3
-
완료
+ +
+

앱 생성

+ API를 이용하여 서비스할 앱 정보를 등록해주세요. +
+ + +
+
+ +
+
+
+ 앱 정보입력 +
+
+
앱 정보입력
+
+ + +
+ +
+ + +
+
+
+ API 선택 +
+
+
API 선택
+
+ + +
+ +
+ + +
+
+
+ 앱 생성 완료 +
+
+
앱 생성 완료
+
-
- -
-

API Key 생성

-

Step 2: API 선택

-

- 사용할 API를 선택해주세요. 나중에 추가하거나 변경할 수 있습니다. -

-
+ +
- -
+ + + + + + + +
+ + +
+ + + +
+ +
+ + + + +
- + +
+ +
+ +

API 목록을 불러오는 중...

+
-
+ + - -
- - -
+ - -
+
+ + + + +
+ + +
+ + +
- - + -