diff --git a/src/main/resources/static/sass/pages/_apikey-register.scss b/src/main/resources/static/sass/pages/_apikey-register.scss index c8a0f07..8c62fee 100644 --- a/src/main/resources/static/sass/pages/_apikey-register.scss +++ b/src/main/resources/static/sass/pages/_apikey-register.scss @@ -370,6 +370,7 @@ // IP Input Row - Step 1 Style .ip-input-row { display: flex; + align-items: center; gap: 21px; .ip-input { @@ -398,7 +399,7 @@ } .btn-add-ip { - width: auto; + width: 100px; height: 40px; padding: 0 16px; background-color: #3ba4ed; @@ -410,20 +411,23 @@ cursor: pointer; transition: background-color 0.2s ease; flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; &:hover { background-color: #2b94dd; } @include respond-to('md') { - width: auto; + width: 100%; font-size: 14px; height: 38px; } // Figma 모바일 (1290-3137): 89px × 40px, border-radius 8px, 12px bold @include respond-to('sm') { - width: auto; + width: 89px; height: 36px; font-size: 13px; border-radius: 8px; @@ -446,6 +450,7 @@ .ip-item { display: flex; + align-items: center; gap: 21px; padding: 0; border-bottom: none; @@ -488,25 +493,26 @@ } .btn-remove-ip { - width: 158px !important; - height: 60px !important; + width: 100px !important; + height: 40px !important; background-color: #e5e7eb !important; color: #5f666c !important; border: none !important; - border-radius: $border-radius-lg !important; - font-size: 20px !important; - font-weight: $font-weight-bold; + border-radius: $border-radius-md !important; + font-size: 14px !important; + font-weight: $font-weight-semibold; cursor: pointer; transition: background-color 0.2s ease; flex-shrink: 0; display: flex !important; align-items: center; justify-content: center; + align-self: center; @include respond-to('md') { width: 100% !important; - font-size: 16px !important; - height: 50px !important; + font-size: 14px !important; + height: 38px !important; } // Figma 모바일 (1290-3137): 89px × 40px, border-radius 8px, 12px bold diff --git a/src/main/resources/templates/views/apps/mypage/apiKeyRegisterStep1.html b/src/main/resources/templates/views/apps/mypage/apiKeyRegisterStep1.html index 849669c..725aa13 100644 --- a/src/main/resources/templates/views/apps/mypage/apiKeyRegisterStep1.html +++ b/src/main/resources/templates/views/apps/mypage/apiKeyRegisterStep1.html @@ -166,7 +166,7 @@ - +
화이트리스트 + 필수
@@ -458,7 +460,8 @@ form.addEventListener('submit', function(e) { const appName = document.getElementById('appName').value.trim(); const appDescription = document.getElementById('appDescription').value.trim(); - const callbackUrl = document.getElementById('callbackUrl').value.trim(); + // callbackUrl: OAuth2 3-legged 전용. 현재 미사용으로 주석 처리. + // const callbackUrl = document.getElementById('callbackUrl').value.trim(); if (!appName) { e.preventDefault(); @@ -474,22 +477,30 @@ return false; } - // Validate URL format only if callbackUrl is provided (optional field) - if (callbackUrl && callbackUrl.trim() !== '') { - try { - new URL(callbackUrl); - } catch (error) { - e.preventDefault(); - customPopups.showAlert('올바른 URL 형식이 아닙니다.\n예: https://example.com/api/callback'); - document.getElementById('callbackUrl').focus(); - return false; - } + // 화이트리스트 필수 + if (ipAddresses.length === 0) { + e.preventDefault(); + customPopups.showAlert('화이트리스트 IP를 1개 이상 등록해주세요.'); + document.getElementById('ipWhitelistInput').focus(); + return false; } + // Validate URL format only if callbackUrl is provided (optional field) + // if (callbackUrl && callbackUrl.trim() !== '') { + // try { + // new URL(callbackUrl); + // } catch (error) { + // e.preventDefault(); + // customPopups.showAlert('올바른 URL 형식이 아닙니다.\n예: https://example.com/api/callback'); + // document.getElementById('callbackUrl').focus(); + // return false; + // } + // } + // Store data in sessionStorage for later steps sessionStorage.setItem('registration_appName', appName); sessionStorage.setItem('registration_appDescription', appDescription); - sessionStorage.setItem('registration_callbackUrl', callbackUrl); + // sessionStorage.setItem('registration_callbackUrl', callbackUrl); sessionStorage.setItem('registration_ipWhitelist', ipAddresses.join(',')); }); });